close context menu when open emoji picker or selected emoji

Expensify · Feb 16, 2023 · 44909ab · 44909ab
1 parent 71220c0
commit 44909ab
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 10 deletions.
diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js
@@ -15,18 +15,23 @@ import emojis from '../../../assets/emojis';
 const propTypes = {
     sizeScale: PropTypes.number,
     iconSizeScale: PropTypes.number,
+    onPressOpenPicker: PropTypes.func,
     onSelectEmoji: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
     sizeScale: 1,
     iconSizeScale: 1,
+    onPressOpenPicker: () => {
+
+    },
 };
 
 const AddReactionBubble = (props) => {
     const ref = React.createRef();
 
     const onPress = () => {
+        props.onPressOpenPicker();
         EmojiPickerAction.showEmojiPicker(() => {}, (emojiCode) => {
             const emoji = _.find(emojis, e => e.code === emojiCode);
             if (emoji != null) {

diff --git a/src/components/Reactions/QuickEmojiReactions.js b/src/components/Reactions/QuickEmojiReactions.js
@@ -27,12 +27,14 @@ const QUICK_REACTIONS = [
 const EMOJI_BUBBLE_SCALE = 1.5;
 
 const propTypes = {
-    onEmojiSelected: PropTypes.func.isRequired,
     emojiIconRef: PropTypes.func,
+    onEmojiSelected: PropTypes.func.isRequired,
+    onPressOpenPicker: PropTypes.func,
 };
 
 const defaultProps = {
     emojiIconRef: () => {},
+    onPressOpenPicker: () => {},
 };
 
 const QuickEmojiReactions = props => (
@@ -59,6 +61,7 @@ const QuickEmojiReactions = props => (
             iconSizeScale={1.2}
             sizeScale={EMOJI_BUBBLE_SCALE}
             onSelectEmoji={props.onEmojiSelected}
+            onPressOpenPicker={props.onPressOpenPicker}
         />
     </View>
 );

diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js
@@ -39,15 +39,26 @@ const CONTEXT_MENU_TYPES = {
 export default [
     {
         shouldShow: () => true,
-        renderContent: (closePopup, {reportID, reportAction}) => (
-            <QuickEmojiReactions
-                key="QuickEmojiReactions"
-                onEmojiSelected={(emoji) => {
-                    // TODO: we need to add the preferred skin tone here as well somehow
-                    Report.toggleReaction(reportID, reportAction, emoji);
-                }}
-            />
-        ),
+        renderContent: (closePopover, {reportID, reportAction}) => {
+            const close = () => {
+                if (!closePopover) {
+                    return;
+                }
+                hideContextMenu(false);
+            };
+
+            return (
+                <QuickEmojiReactions
+                    key="QuickEmojiReactions"
+                    onEmojiSelected={(emoji) => {
+                        // TODO: we need to add the preferred skin tone here as well somehow
+                        Report.toggleReaction(reportID, reportAction, emoji);
+                        close();
+                    }}
+                    onPressOpenPicker={close}
+                />
+            );
+        },
     },
     {
         textTranslateKey: 'common.download',