Remove EmojiPicker & related code

GetStream · Oct 7, 2023 · 8ab64fd · 8ab64fd
1 parent 344dd5f
commit 8ab64fd
Show file tree

Hide file tree

Showing 14 changed files with 27 additions and 392 deletions.
diff --git a/src/components/Channel/Channel.tsx b/src/components/Channel/Channel.tsx
@@ -142,15 +142,12 @@ export type ChannelProps<
   dragAndDropWindow?: boolean;
   /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
   EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
-
   /** Custom prop to override default `facebook.json` emoji data set from `emoji-mart` */
   emojiData?: EmojiMartData;
-  /** Custom UI component for emoji button in input, defaults to and accepts same props as: [EmojiIconSmall](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) */
-  EmojiIcon?: ComponentContextValue<StreamChatGenerics>['EmojiIcon'];
   /** Custom UI component to override default `NimbleEmojiIndex` from `emoji-mart` */
   EmojiIndex?: EmojiContextValue['EmojiIndex'];
-  /** Custom UI component to override default `NimblePicker` from `emoji-mart` */
-  EmojiPicker?: EmojiContextValue['EmojiPicker'];
+  /** Custom UI component for rendering button with emoji picker in MessageInput */
+  EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
   /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
   EmptyPlaceholder?: React.ReactElement;
   /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)  */
@@ -970,7 +967,7 @@ const ChannelInner = <
       CooldownTimer: props.CooldownTimer,
       DateSeparator: props.DateSeparator,
       EditMessageInput: props.EditMessageInput,
-      EmojiIcon: props.EmojiIcon,
+      EmojiPicker: props.EmojiPicker,
       EmptyStateIndicator: props.EmptyStateIndicator,
       FileUploadIcon: props.FileUploadIcon,
       GiphyPreviewMessage: props.GiphyPreviewMessage,
@@ -1009,7 +1006,6 @@ const ChannelInner = <
     () => ({
       emojiConfig,
       EmojiIndex: props.EmojiIndex,
-      EmojiPicker: props.EmojiPicker,
     }),
     [],
   );

diff --git a/src/components/MessageInput/EditMessageForm.tsx b/src/components/MessageInput/EditMessageForm.tsx
@@ -1,11 +1,7 @@
 import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
 
-import { EmojiPicker } from './EmojiPicker';
-import {
-  EmojiIconSmall as DefaultEmojiIcon,
-  FileUploadIcon as DefaultFileUploadIcon,
-} from './icons';
+import { FileUploadIcon as DefaultFileUploadIcon } from './icons';
 import { UploadsPreview } from './UploadsPreview';
 
 import { ChatAutoComplete } from '../ChatAutoComplete/ChatAutoComplete';
@@ -33,18 +29,15 @@ export const EditMessageForm = <
 
   const {
     clearEditingState,
-    closeEmojiPicker,
-    emojiPickerIsOpen,
     handleSubmit,
     isUploadEnabled,
     maxFilesLeft,
-    openEmojiPicker,
     uploadNewFiles,
   } = useMessageInputContext<StreamChatGenerics, V>('EditMessageForm');
 
   const {
-    EmojiIcon = DefaultEmojiIcon,
     FileUploadIcon = DefaultFileUploadIcon,
+    EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('EditMessageForm');
 
   const { themeVersion } = useChatContext('EditMessageForm');
@@ -88,17 +81,10 @@ export const EditMessageForm = <
       >
         <form onSubmit={handleSubmit}>
           {isUploadEnabled && <UploadsPreview />}
-          <EmojiPicker small />
           <ChatAutoComplete />
           <div className='str-chat__message-team-form-footer'>
             <div className='str-chat__edit-message-form-options'>
-              <button
-                aria-label='Open Emoji Picker'
-                className='str-chat__input-emojiselect'
-                onClick={emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker}
-              >
-                <EmojiIcon />
-              </button>
+              {EmojiPicker && <EmojiPicker />}
               {isUploadEnabled && (
                 <div className='str-chat__fileupload-wrapper' data-testid='fileinput'>
                   <Tooltip>

diff --git a/src/components/MessageInput/EmojiPicker.tsx b/src/components/MessageInput/EmojiPicker.tsx
diff --git a/src/components/MessageInput/MessageInput.tsx b/src/components/MessageInput/MessageInput.tsx
@@ -33,8 +33,6 @@ export type MessageInputProps<
   additionalTextareaProps?: React.TextareaHTMLAttributes<HTMLTextAreaElement>;
   /** Function to clear the editing state while editing a message */
   clearEditingState?: () => void;
-  /** If true, picking an emoji from the `EmojiPicker` component will close the picker */
-  closeEmojiPickerOnClick?: boolean;
   /** If true, disables the text input */
   disabled?: boolean;
   /** If true, the suggestion list will not display and autocomplete @mentions. Default: false. */

diff --git a/src/components/MessageInput/MessageInputFlat.tsx b/src/components/MessageInput/MessageInputFlat.tsx
@@ -1,15 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { FileUploadButton, ImageDropzone, UploadButton } from '../ReactFileUtilities';
 import type { Event } from 'stream-chat';
 import clsx from 'clsx';
-import { usePopper } from 'react-popper';
 import { useDropzone } from 'react-dropzone';
 import { nanoid } from 'nanoid';
 
-import { EmojiPicker } from './EmojiPicker';
 import {
-  EmojiIconLarge as DefaultEmojiIcon,
-  EmojiPickerIcon as DefaultEmojiPickerIcon,
   FileUploadIconFlat as DefaultFileUploadIcon,
   SendButton as DefaultSendButton,
   UploadIcon as DefaultUploadIcon,
@@ -77,26 +73,21 @@ const MessageInputV1 = <
   } = useChannelStateContext<StreamChatGenerics>('MessageInputFlat');
   const { t } = useTranslationContext('MessageInputFlat');
   const {
-    closeEmojiPicker,
     cooldownRemaining,
-    emojiPickerIsOpen,
     handleSubmit,
     hideSendButton,
     isUploadEnabled,
     maxFilesLeft,
     numberOfUploads,
-    openEmojiPicker,
-    setCooldownRemaining,
     uploadNewFiles,
   } = useMessageInputContext<StreamChatGenerics>('MessageInputFlat');
 
   const {
-    CooldownTimer = DefaultCooldownTimer,
-    EmojiIcon = DefaultEmojiIcon,
     FileUploadIcon = DefaultFileUploadIcon,
     QuotedMessagePreview = DefaultQuotedMessagePreview,
     SendButton = DefaultSendButton,
     AttachmentPreviewList = UploadsPreview,
+    EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputFlat');
 
   return (
@@ -120,30 +111,11 @@ const MessageInputV1 = <
         <div className='str-chat__input-flat-wrapper'>
           {isUploadEnabled && <AttachmentPreviewList />}
           <div className='str-chat__input-flat--textarea-wrapper'>
-            <div className='str-chat__emojiselect-wrapper'>
-              <Tooltip>
-                {emojiPickerIsOpen
-                  ? t<string>('Close emoji picker')
-                  : t<string>('Open emoji picker')}
-              </Tooltip>
-              <button
-                aria-label='Emoji picker'
-                className='str-chat__input-flat-emojiselect'
-                onClick={emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker}
-              >
-                {cooldownRemaining ? (
-                  <div className='str-chat__input-flat-cooldown'>
-                    <CooldownTimer
-                      cooldownInterval={cooldownRemaining}
-                      setCooldownRemaining={setCooldownRemaining}
-                    />
-                  </div>
-                ) : (
-                  <EmojiIcon />
-                )}
-              </button>
-            </div>
-            <EmojiPicker />
+            {EmojiPicker && (
+              <div className='str-chat__emojiselect-wrapper'>
+                <EmojiPicker />
+              </div>
+            )}
             <ChatAutoComplete />
             {isUploadEnabled && !cooldownRemaining && (
               <div className='str-chat__fileupload-wrapper' data-testid='fileinput'>
@@ -184,9 +156,7 @@ const MessageInputV2 = <
   const { t } = useTranslationContext('MessageInputV2');
 
   const {
-    closeEmojiPicker,
     cooldownRemaining,
-    emojiPickerIsOpen,
     findAndEnqueueURLsToEnrich,
     handleSubmit,
     hideSendButton,
@@ -195,7 +165,6 @@ const MessageInputV2 = <
     maxFilesLeft,
     message,
     numberOfUploads,
-    openEmojiPicker,
     setCooldownRemaining,
     text,
     uploadNewFiles,
@@ -204,19 +173,13 @@ const MessageInputV2 = <
   const {
     AttachmentPreviewList = DefaultAttachmentPreviewList,
     CooldownTimer = DefaultCooldownTimer,
-    EmojiIcon = DefaultEmojiPickerIcon,
     FileUploadIcon = DefaultUploadIcon,
     LinkPreviewList = DefaultLinkPreviewList,
     QuotedMessagePreview = DefaultQuotedMessagePreview,
     SendButton = DefaultSendButton,
+    EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputV2');
 
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  const { attributes, styles } = usePopper(referenceElement, popperElement, {
-    placement: 'top-end',
-  });
-
   const id = useMemo(() => nanoid(), []);
 
   const accept = useMemo(
@@ -282,28 +245,7 @@ const MessageInputV2 = <
             <div className='str-chat__message-textarea-with-emoji-picker'>
               <ChatAutoComplete />
 
-              <div className='str-chat__message-textarea-emoji-picker'>
-                {emojiPickerIsOpen && (
-                  <div
-                    className='str-chat__message-textarea-emoji-picker-container'
-                    style={styles.popper}
-                    {...attributes.popper}
-                    ref={setPopperElement}
-                  >
-                    <EmojiPicker />
-                  </div>
-                )}
-
-                <button
-                  aria-label='Emoji picker'
-                  className='str-chat__emoji-picker-button'
-                  onClick={emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker}
-                  ref={setReferenceElement}
-                  type='button'
-                >
-                  <EmojiIcon />
-                </button>
-              </div>
+              {EmojiPicker && <EmojiPicker />}
             </div>
           </div>
           {!hideSendButton && (

diff --git a/src/components/MessageInput/MessageInputSmall.tsx b/src/components/MessageInput/MessageInputSmall.tsx
@@ -2,9 +2,7 @@ import React, { useEffect } from 'react';
 import { FileUploadButton, ImageDropzone } from '../ReactFileUtilities';
 import type { Event } from 'stream-chat';
 
-import { EmojiPicker } from './EmojiPicker';
 import {
-  EmojiIconSmall as DefaultEmojiIcon,
   FileUploadIconFlat as DefaultFileUploadIcon,
   SendButton as DefaultSendButton,
 } from './icons';
@@ -48,25 +46,22 @@ export const MessageInputSmall = <
   const { channel } = useChatContext<StreamChatGenerics>('MessageInputSmall');
 
   const {
-    closeEmojiPicker,
     cooldownRemaining,
-    emojiPickerIsOpen,
     handleSubmit,
     hideSendButton,
     isUploadEnabled,
     maxFilesLeft,
     numberOfUploads,
-    openEmojiPicker,
     setCooldownRemaining,
     uploadNewFiles,
   } = useMessageInputContext<StreamChatGenerics, V>('MessageInputSmall');
 
   const {
     CooldownTimer = DefaultCooldownTimer,
-    EmojiIcon = DefaultEmojiIcon,
     FileUploadIcon = DefaultFileUploadIcon,
     SendButton = DefaultSendButton,
     QuotedMessagePreview = DefaultQuotedMessagePreview,
+    EmojiPicker,
   } = useComponentContext<StreamChatGenerics>('MessageInputSmall');
 
   useEffect(() => {
@@ -136,23 +131,13 @@ export const MessageInputSmall = <
                     </FileUploadButton>
                   </div>
                 )}
-                <div className='str-chat__emojiselect-wrapper'>
-                  <Tooltip>
-                    {emojiPickerIsOpen
-                      ? t<string>('Close emoji picker')
-                      : t<string>('Open emoji picker')}
-                  </Tooltip>
-                  <button
-                    aria-label='Emoji picker'
-                    className='str-chat__small-message-input-emojiselect'
-                    onClick={emojiPickerIsOpen ? closeEmojiPicker : openEmojiPicker}
-                  >
-                    <EmojiIcon />
-                  </button>
-                </div>
+                {EmojiPicker && (
+                  <div className='str-chat__emojiselect-wrapper'>
+                    <EmojiPicker />
+                  </div>
+                )}
               </>
             )}
-            <EmojiPicker small />
           </div>
           {!(cooldownRemaining || hideSendButton) && <SendButton sendMessage={handleSubmit} />}
         </div>