Migrate remaining emoji/sticker pickers to fun picker

ts/components/CompositionTextArea.tsx

@@ -1,7 +1,7 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-import React from 'react';
+import React, { useRef, useCallback, useState } from 'react';
 import type { LocalizerType } from '../types/I18N';
 import type { EmojiPickDataType } from './emoji/EmojiPicker';
 import type { InputApi } from './CompositionInput';
@@ -15,7 +15,11 @@ import type { ThemeType } from '../types/Util';
 import type { Props as EmojiButtonProps } from './emoji/EmojiButton';
 import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import * as grapheme from '../util/grapheme';
+import { FunEmojiPicker } from './fun/FunEmojiPicker';
+import type { FunEmojiSelection } from './fun/panels/FunPanelEmojis';
 import type { EmojiSkinTone } from './fun/data/emojis';
+import { FunEmojiPickerButton } from './fun/FunButton';
+import { isFunPickerEnabled } from './fun/isFunPickerEnabled';
 
 export type CompositionTextAreaProps = {
   bodyRanges: HydratedBodyRangesType | null;
@@ -75,12 +79,12 @@ export function CompositionTextArea({
   theme,
   whenToShowRemainingCount = Infinity,
 }: CompositionTextAreaProps): JSX.Element {
-  const inputApiRef = React.useRef<InputApi | undefined>();
-  const [characterCount, setCharacterCount] = React.useState(
+  const inputApiRef = useRef<InputApi | undefined>();
+  const [characterCount, setCharacterCount] = useState(
     grapheme.count(draftText)
   );
 
-  const insertEmoji = React.useCallback(
+  const insertEmoji = useCallback(
     (e: EmojiPickDataType) => {
       if (inputApiRef.current) {
         inputApiRef.current.insertEmoji(e);
@@ -90,13 +94,36 @@ export function CompositionTextArea({
     [inputApiRef, onPickEmoji]
   );
 
-  const focusTextEditInput = React.useCallback(() => {
+  const handleSelectEmoji = useCallback(
+    (emojiSelection: FunEmojiSelection) => {
+      const data: EmojiPickDataType = {
+        shortName: emojiSelection.englishShortName,
+        skinTone: emojiSelection.skinTone,
+      };
+      insertEmoji(data);
+    },
+    [insertEmoji]
+  );
+
+  const focusTextEditInput = useCallback(() => {
     if (inputApiRef.current) {
       inputApiRef.current.focus();
     }
   }, [inputApiRef]);
 
-  const handleChange = React.useCallback(
+  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+
+  const handleEmojiPickerOpenChange = useCallback(
+    (open: boolean) => {
+      setEmojiPickerOpen(open);
+      if (!open) {
+        focusTextEditInput();
+      }
+    },
+    [focusTextEditInput]
+  );
+
+  const handleChange = useCallback(
     ({
       bodyRanges: updatedBodyRanges,
       caretLocation,
@@ -167,14 +194,26 @@ export function CompositionTextArea({
         shouldHidePopovers={null}
       />
       <div className="CompositionTextArea__emoji">
-        <EmojiButton
-          i18n={i18n}
-          onClose={focusTextEditInput}
-          onPickEmoji={insertEmoji}
-          onEmojiSkinToneDefaultChange={onEmojiSkinToneDefaultChange}
-          recentEmojis={recentEmojis}
-          emojiSkinToneDefault={emojiSkinToneDefault}
-        />
+        {!isFunPickerEnabled() && (
+          <EmojiButton
+            i18n={i18n}
+            onClose={focusTextEditInput}
+            onPickEmoji={insertEmoji}
+            onEmojiSkinToneDefaultChange={onEmojiSkinToneDefaultChange}
+            recentEmojis={recentEmojis}
+            emojiSkinToneDefault={emojiSkinToneDefault}
+          />
+        )}
+        {isFunPickerEnabled() && (
+          <FunEmojiPicker
+            placement="bottom"
+            open={emojiPickerOpen}
+            onOpenChange={handleEmojiPickerOpenChange}
+            onSelectEmoji={handleSelectEmoji}
+          >
+            <FunEmojiPickerButton i18n={i18n} />
+          </FunEmojiPicker>
+        )}
       </div>
       {maxLength !== undefined &&
         characterCount >= whenToShowRemainingCount && (