Migrate remaining emoji/sticker pickers to fun picker

ts/components/TextStoryCreator.tsx

@@ -1,18 +1,15 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
-
-import FocusTrap from 'focus-trap-react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { noop } from 'lodash';
 import { usePopper } from 'react-popper';
-
+import { FocusScope } from 'react-aria';
 import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import type { LinkPreviewForUIType } from '../types/message/LinkPreviews';
-import type { LocalizerType } from '../types/Util';
+import { ThemeType, type LocalizerType } from '../types/Util';
 import type { Props as EmojiButtonPropsType } from './emoji/EmojiButton';
 import type { TextAttachmentType } from '../types/Attachment';
-
 import { Button, ButtonVariant } from './Button';
 import { ContextMenu } from './ContextMenu';
 import { EmojiButton } from './emoji/EmojiButton';
@@ -34,6 +31,11 @@ import { objectMap } from '../util/objectMap';
 import { handleOutsideClick } from '../util/handleOutsideClick';
 import { ConfirmDiscardDialog } from './ConfirmDiscardDialog';
 import { Spinner } from './Spinner';
+import { FunEmojiPicker } from './fun/FunEmojiPicker';
+import type { FunEmojiSelection } from './fun/panels/FunPanelEmojis';
+import { getEmojiVariantByKey } from './fun/data/emojis';
+import { FunEmojiPickerButton } from './fun/FunButton';
+import { isFunPickerEnabled } from './fun/isFunPickerEnabled';
 
 export type PropsType = {
   debouncedMaybeGrabLinkPreview: (
@@ -337,9 +339,30 @@ export function TextStoryCreator({
 
   const textEditorRef = useRef<HTMLTextAreaElement | null>(null);
 
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+
+  const handleEmojiPickerOpenChange = useCallback((open: boolean) => {
+    setEmojiPickerOpen(open);
+  }, []);
+
+  const handleSelectEmoji = useCallback((emojiSelection: FunEmojiSelection) => {
+    const emojiVariant = getEmojiVariantByKey(emojiSelection.variantKey);
+    const emojiValue = emojiVariant.value;
+
+    setText(originalText => {
+      const insertAt =
+        textEditorRef.current?.selectionEnd ?? originalText.length;
+
+      const before = originalText.substr(0, insertAt);
+      const after = originalText.substr(insertAt, originalText.length);
+
+      return `${before}${emojiValue}${after}`;
+    });
+  }, []);
+
   return (
-    <FocusTrap focusTrapOptions={{ allowOutsideClick: true }}>
-      <div className="StoryCreator">
+    <FocusScope contain restoreFocus>
+      <div className="StoryCreator dark-theme">
         <div className="StoryCreator__container">
           <TextAttachment
             disableLinkPreviewPopup
@@ -438,26 +461,42 @@ export function TextStoryCreator({
                 }}
                 type="button"
               />
-              <EmojiButton
-                className="StoryCreator__emoji-button"
-                i18n={i18n}
-                onPickEmoji={data => {
-                  onUseEmoji(data);
-                  const emoji = convertShortName(data.shortName, data.skinTone);
-                  const insertAt =
-                    textEditorRef.current?.selectionEnd ?? text.length;
-                  setText(
-                    originalText =>
-                      `${originalText.substr(
-                        0,
-                        insertAt
-                      )}${emoji}${originalText.substr(insertAt, text.length)}`
-                  );
-                }}
-                recentEmojis={recentEmojis}
-                emojiSkinToneDefault={emojiSkinToneDefault}
-                onEmojiSkinToneDefaultChange={onEmojiSkinToneDefaultChange}
-              />
+              {!isFunPickerEnabled() && (
+                <EmojiButton
+                  className="StoryCreator__emoji-button"
+                  i18n={i18n}
+                  onPickEmoji={data => {
+                    onUseEmoji(data);
+                    const emoji = convertShortName(
+                      data.shortName,
+                      data.skinTone
+                    );
+                    const insertAt =
+                      textEditorRef.current?.selectionEnd ?? text.length;
+                    setText(
+                      originalText =>
+                        `${originalText.substr(
+                          0,
+                          insertAt
+                        )}${emoji}${originalText.substr(insertAt, text.length)}`
+                    );
+                  }}
+                  recentEmojis={recentEmojis}
+                  emojiSkinToneDefault={emojiSkinToneDefault}
+                  onEmojiSkinToneDefaultChange={onEmojiSkinToneDefaultChange}
+                />
+              )}
+              {isFunPickerEnabled() && (
+                <FunEmojiPicker
+                  open={emojiPickerOpen}
+                  onOpenChange={handleEmojiPickerOpenChange}
+                  placement="top"
+                  onSelectEmoji={handleSelectEmoji}
+                  theme={ThemeType.dark}
+                >
+                  <FunEmojiPickerButton i18n={i18n} />
+                </FunEmojiPicker>
+              )}
             </div>
           ) : (
             <div className="StoryCreator__toolbar--space" />
@@ -624,6 +663,6 @@ export function TextStoryCreator({
           />
         )}
       </div>
-    </FocusTrap>
+    </FocusScope>
   );
 }