Stickers

Co-authored-by: scott@signal.org Co-authored-by: ken@signal.org
2019-05-16 15:32:11 -07:00 · 2019-05-16 15:32:11 -07:00 · 29de50c12a
commit 29de50c12a
parent 8c8856785b
100 changed files with 7572 additions and 693 deletions
--- a/ts/components/stickers/StickerManager.tsx
+++ b/ts/components/stickers/StickerManager.tsx
@ -0,0 +1,107 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { StickerManagerPackRow } from './StickerManagerPackRow';
+import { StickerPreviewModal } from './StickerPreviewModal';
+import { LocalizerType } from '../../types/Util';
+import { StickerPackType } from '../../state/ducks/stickers';
+
+export type OwnProps = {
+  readonly installedPacks: ReadonlyArray<StickerPackType>;
+  readonly receivedPacks: ReadonlyArray<StickerPackType>;
+  readonly blessedPacks: ReadonlyArray<StickerPackType>;
+  readonly installStickerPack: (packId: string, packKey: string) => unknown;
+  readonly uninstallStickerPack: (packId: string, packKey: string) => unknown;
+  readonly i18n: LocalizerType;
+};
+
+export type Props = OwnProps;
+
+export const StickerManager = React.memo(
+  ({
+    installedPacks,
+    receivedPacks,
+    blessedPacks,
+    installStickerPack,
+    uninstallStickerPack,
+    i18n,
+  }: Props) => {
+    const [
+      packToPreview,
+      setPackToPreview,
+    ] = React.useState<StickerPackType | null>(null);
+
+    const clearPackToPreview = React.useCallback(
+      () => {
+        setPackToPreview(null);
+      },
+      [setPackToPreview]
+    );
+
+    const previewPack = React.useCallback(
+      (pack: StickerPackType) => {
+        setPackToPreview(pack);
+      },
+      [clearPackToPreview]
+    );
+
+    return (
+      <>
+        {packToPreview ? (
+          <StickerPreviewModal
+            i18n={i18n}
+            pack={packToPreview}
+            onClose={clearPackToPreview}
+            installStickerPack={installStickerPack}
+            uninstallStickerPack={uninstallStickerPack}
+          />
+        ) : null}
+        <div className="module-sticker-manager">
+          {[
+            {
+              i18nKey: 'stickers--StickerManager--InstalledPacks',
+              i18nEmptyKey: 'stickers--StickerManager--InstalledPacks--Empty',
+              packs: installedPacks,
+            },
+            {
+              i18nKey: 'stickers--StickerManager--BlessedPacks',
+              i18nEmptyKey: 'stickers--StickerManager--BlessedPacks--Empty',
+              packs: blessedPacks,
+            },
+            {
+              i18nKey: 'stickers--StickerManager--ReceivedPacks',
+              i18nEmptyKey: 'stickers--StickerManager--ReceivedPacks--Empty',
+              packs: receivedPacks,
+            },
+          ].map(section => (
+            <React.Fragment key={section.i18nKey}>
+              <h2
+                className={classNames(
+                  'module-sticker-manager__text',
+                  'module-sticker-manager__text--heading'
+                )}
+              >
+                {i18n(section.i18nKey)}
+              </h2>
+              {section.packs.length > 0 ? (
+                section.packs.map(pack => (
+                  <StickerManagerPackRow
+                    key={pack.id}
+                    pack={pack}
+                    i18n={i18n}
+                    onClickPreview={previewPack}
+                    installStickerPack={installStickerPack}
+                    uninstallStickerPack={uninstallStickerPack}
+                  />
+                ))
+              ) : (
+                <div className="module-sticker-manager__empty">
+                  {i18n(section.i18nEmptyKey)}
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      </>
+    );
+  }
+);