From 2babc2d778cd6c0d9213e72270cfe346855c958f Mon Sep 17 00:00:00 2001
From: Cong Pham <ptcong411@gmail.com>
Date: Thu, 11 Jan 2024 00:49:41 +0700
Subject: [PATCH] 34265 update emoji offset

---
 src/CONST.ts                                    |  1 +
 src/components/EmojiPicker/EmojiPickerButton.js | 17 ++++++++++++++++-
 src/libs/calculateAnchorPosition.ts             |  2 +-
 .../ReportActionCompose/ReportActionCompose.js  |  8 ++++++++
 src/styles/index.ts                             |  2 +-
 5 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index fc4a3729bd01..881e520e0b12 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -965,6 +965,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
index e627119270dd..b056ccb22875 100644
--- a/src/components/EmojiPicker/EmojiPickerButton.js
+++ b/src/components/EmojiPicker/EmojiPickerButton.js
@@ -22,6 +22,9 @@ const propTypes = {
     /** Unique id for emoji picker */
     emojiPickerID: PropTypes.string,
 
+    /** Emoji popup anchor offset shift vertical */
+    shiftVertical: PropTypes.number,
+
     ...withLocalizePropTypes,
 };
 
@@ -29,6 +32,7 @@ const defaultProps = {
     isDisabled: false,
     id: '',
     emojiPickerID: '',
+    shiftVertical: 0,
 };
 
 function EmojiPickerButton(props) {
@@ -49,7 +53,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: 'right',
+                                vertical: 'bottom',
+                                shiftVertical: props.shiftVertical,
+                            },
+                            () => {},
+                            props.emojiPickerID,
+                        );
                     } else {
                         EmojiPickerAction.emojiPickerRef.current.hideEmojiPicker();
                     }
diff --git a/src/libs/calculateAnchorPosition.ts b/src/libs/calculateAnchorPosition.ts
index 66966b7b504c..3b6617aa3ed0 100644
--- 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
index c072666920ae..c52b8ec6760a 100644
--- 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
index a6ac2e269eb0..dd6bf03b9381 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1460,7 +1460,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: {