refactor: toggle emoji picker on emoji picker icon clicked

mattermost · Aug 28, 2024 · 6b4dc17 · 6b4dc17
1 parent 628eaa8
commit 6b4dc17
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/app/components/post_draft/draft_input/index.tsx b/app/components/post_draft/draft_input/index.tsx
@@ -184,14 +184,19 @@ export default function DraftInput({
         inputRef.current?.focus();
     }, []);
 
-    const handleOpenEmojiPicker = () => {
-        setIsEmojiPickerOpen(true);
-        inputRef.current?.setNativeProps({
-            showSoftInputOnFocus: false,
-        });
-        Keyboard.dismiss();
-        keyboardTracker.current?.pauseTracking(channelId);
-        inputRef.current?.focus();
+    const handleToggleEmojiPicker = () => {
+        if (!isEmojiPickerOpen) {
+            setIsEmojiPickerOpen(true);
+            inputRef.current?.setNativeProps({
+                showSoftInputOnFocus: false,
+            });
+            Keyboard.dismiss();
+            keyboardTracker.current?.pauseTracking(channelId);
+            inputRef.current?.focus();
+            return;
+        }
+        setIsEmojiPickerOpen(false);
+        focus();
     };
 
     const deleteCharFromCurrentCursorPosition = () => {
@@ -300,7 +305,7 @@ export default function DraftInput({
                             updatePostPriority={updatePostPriority}
                             canShowPostPriority={canShowPostPriority}
                             focus={focus}
-                            handleOpenEmojiPicker={handleOpenEmojiPicker}
+                            handleToggleEmojiPicker={handleToggleEmojiPicker}
                             isEmojiPickerOpen={isEmojiPickerOpen}
                         />
                         <SendAction

diff --git a/app/components/post_draft/quick_actions/emojii_quick_action/index.tsx b/app/components/post_draft/quick_actions/emojii_quick_action/index.tsx
@@ -12,7 +12,7 @@ import {changeOpacity, makeStyleSheetFromTheme} from '@app/utils/theme';
 type Props = {
     testID?: string;
     disabled?: boolean;
-    handleOpenEmojiPicker: () => void;
+    handleToggleEmojiPicker: () => void;
     isEmojiPickerOpen: boolean;
 }
 
@@ -36,7 +36,7 @@ const getStyleSheet = (theme: Theme, isEmojiPickerOpen: boolean) => {
 const EmojiQuickAction: React.FC<Props> = ({
     testID,
     disabled,
-    handleOpenEmojiPicker,
+    handleToggleEmojiPicker,
     isEmojiPickerOpen,
 }) => {
     const theme = useTheme();
@@ -48,7 +48,7 @@ const EmojiQuickAction: React.FC<Props> = ({
         <Pressable
             testID={actionTestID}
             style={style.icon}
-            onPress={handleOpenEmojiPicker}
+            onPress={handleToggleEmojiPicker}
         >
             <CompassIcon
                 name='emoticon-happy-outline'

diff --git a/app/components/post_draft/quick_actions/quick_actions.tsx b/app/components/post_draft/quick_actions/quick_actions.tsx
@@ -24,7 +24,7 @@ type Props = {
     postPriority: PostPriority;
     updatePostPriority: (postPriority: PostPriority) => void;
     focus: () => void;
-    handleOpenEmojiPicker: () => void;
+    handleToggleEmojiPicker: () => void;
     isEmojiPickerOpen: boolean;
 }
 
@@ -51,7 +51,7 @@ export default function QuickActions({
     postPriority,
     updatePostPriority,
     focus,
-    handleOpenEmojiPicker,
+    handleToggleEmojiPicker,
     isEmojiPickerOpen,
 }: Props) {
     const atDisabled = value[value.length - 1] === '@';
@@ -89,7 +89,7 @@ export default function QuickActions({
                 focus={focus}
             />
             <EmojiQuickAction
-                handleOpenEmojiPicker={handleOpenEmojiPicker}
+                handleToggleEmojiPicker={handleToggleEmojiPicker}
                 isEmojiPickerOpen={isEmojiPickerOpen}
             />
             {isPostPriorityEnabled && canShowPostPriority && (