Merge pull request Expensify#34589 from suneox/34265-update-emoji-offset

34265 update emoji offset
DylanDylann · Jan 24, 2024 · 036a4be · 036a4be
2 parents f8ac17b + b469f07
commit 036a4be
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 3 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -975,6 +975,7 @@ const CONST = {
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',
     },
+    MENU_POSITION_REPORT_ACTION_COMPOSE_BOTTOM: 83,
     NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT: 300,
     NON_NATIVE_EMOJI_PICKER_LIST_HEIGHT_WEB: 200,
     EMOJI_PICKER_ITEM_HEIGHT: 32,

diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -11,6 +11,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import compose from '@libs/compose';
 import getButtonState from '@libs/getButtonState';
 import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
+import CONST from '@src/CONST';
 
 const propTypes = {
     /** Flag to disable the emoji picker button */
@@ -22,13 +23,17 @@ const propTypes = {
     /** Unique id for emoji picker */
     emojiPickerID: PropTypes.string,
 
+    /** Emoji popup anchor offset shift vertical */
+    shiftVertical: PropTypes.number,
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     isDisabled: false,
     id: '',
     emojiPickerID: '',
+    shiftVertical: 0,
 };
 
 function EmojiPickerButton(props) {
@@ -49,7 +54,18 @@ function EmojiPickerButton(props) {
                         return;
                     }
                     if (!EmojiPickerAction.emojiPickerRef.current.isEmojiPickerVisible) {
-                        EmojiPickerAction.showEmojiPicker(props.onModalHide, props.onEmojiSelected, emojiPopoverAnchor, undefined, () => {}, props.emojiPickerID);
+                        EmojiPickerAction.showEmojiPicker(
+                            props.onModalHide,
+                            props.onEmojiSelected,
+                            emojiPopoverAnchor,
+                            {
+                                horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                                vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                                shiftVertical: props.shiftVertical,
+                            },
+                            () => {},
+                            props.emojiPickerID,
+                        );
                     } else {
                         EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
                     }

diff --git a/src/libs/calculateAnchorPosition.ts b/src/libs/calculateAnchorPosition.ts
@@ -22,7 +22,7 @@ export default function calculateAnchorPosition(anchorComponent: View, anchorOri
             if (anchorOrigin?.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP && anchorOrigin?.horizontal === CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT) {
                 return resolve({horizontal: x, vertical: y + height + (anchorOrigin?.shiftVertical ?? 0)});
             }
-            return resolve({horizontal: x + width, vertical: y});
+            return resolve({horizontal: x + width, vertical: y + (anchorOrigin?.shiftVertical ?? 0)});
         });
     });
 }
diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js
@@ -354,6 +354,13 @@ function ReportActionCompose({
         runOnJS(submitForm)();
     }, [isSendDisabled, resetFullComposerSize, submitForm, animatedRef, isReportReadyForDisplay]);
 
+    const emojiShiftVertical = useMemo(() => {
+        const chatItemComposeSecondaryRowHeight = styles.chatItemComposeSecondaryRow.height + styles.chatItemComposeSecondaryRow.marginTop + styles.chatItemComposeSecondaryRow.marginBottom;
+        const reportActionComposeHeight = styles.chatItemComposeBox.minHeight + chatItemComposeSecondaryRowHeight;
+        const emojiOffsetWithComposeBox = (styles.chatItemComposeBox.minHeight - styles.chatItemEmojiButton.height) / 2;
+        return reportActionComposeHeight - emojiOffsetWithComposeBox - CONST.MENU_POSITION_REPORT_ACTION_COMPOSE_BOTTOM;
+    }, [styles]);
+
     return (
         <View style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
             <OfflineWithFeedback pendingAction={pendingAction}>
@@ -453,6 +460,7 @@ function ReportActionCompose({
                                 onModalHide={focus}
                                 onEmojiSelected={(...args) => composerRef.current.replaceSelectionWithText(...args)}
                                 emojiPickerID={report.reportID}
+                                shiftVertical={emojiShiftVertical}
                             />
                         )}
                         <SendButton

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -1467,7 +1467,7 @@ const styles = (theme: ThemeColors) =>
         createMenuPositionReportActionCompose: (windowHeight: number) =>
             ({
                 horizontal: 18 + variables.sideBarWidth,
-                vertical: windowHeight - 83,
+                vertical: windowHeight - CONST.MENU_POSITION_REPORT_ACTION_COMPOSE_BOTTOM,
             } satisfies AnchorPosition),
 
         createMenuPositionRightSidepane: {