Merge pull request #24013 from Nikhil-Vats/23140_fix_popover_menu_position

Julesssss · web-flow · commit 474a8f10f122 · 2023-08-07T14:16:46.000+01:00
Fix popover menu position for three dots menu and settlement button
diff --git a/src/CONST.js b/src/CONST.js
@@ -666,6 +666,7 @@ const CONST = {
             CENTER: 'center',
             RIGHT: 'right',
         },
+        POPOVER_MENU_PADDING: 8,
     },
     TIMING: {
         CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
diff --git a/src/components/ButtonWithDropdownMenu.js b/src/components/ButtonWithDropdownMenu.js
@@ -39,13 +39,23 @@ const propTypes = {
             iconDescription: PropTypes.string,
         }),
     ).isRequired,
+
+    /** The anchor alignment of the popover menu */
+    anchorAlignment: PropTypes.shape({
+        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
+        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
+    }),
 };
 
 const defaultProps = {
     isLoading: false,
     isDisabled: false,
     menuHeaderText: '',
     style: [],
+    anchorAlignment: {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
+    },
 };
 
 function ButtonWithDropdownMenu(props) {
@@ -66,10 +76,13 @@ function ButtonWithDropdownMenu(props) {
         caretButton.current.measureInWindow((x, y, w, h) => {
             setPopoverAnchorPosition({
                 horizontal: x + w,
-                vertical: y + h,
+                vertical:
+                    props.anchorAlignment.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP
+                        ? y + h + CONST.MODAL.POPOVER_MENU_PADDING // if vertical anchorAlignment is TOP, menu will open below the button and we need to add the height of button and padding
+                        : y - CONST.MODAL.POPOVER_MENU_PADDING, // if it is BOTTOM, menu will open above the button so NO need to add height but DO subtract padding
             });
         });
-    }, [windowWidth, windowHeight, isMenuVisible]);
+    }, [windowWidth, windowHeight, isMenuVisible, props.anchorAlignment.vertical]);
 
     return (
         <View>
@@ -119,10 +132,7 @@ function ButtonWithDropdownMenu(props) {
                     anchorPosition={popoverAnchorPosition}
                     anchorRef={caretButton}
                     withoutOverlay
-                    anchorAlignment={{
-                        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
-                        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
-                    }}
+                    anchorAlignment={props.anchorAlignment}
                     headerText={props.menuHeaderText}
                     menuItems={_.map(props.options, (item, index) => ({
                         ...item,
diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
@@ -1,7 +1,5 @@
-import _ from 'underscore';
 import PropTypes from 'prop-types';
 import {ThreeDotsMenuItemPropTypes} from '../ThreeDotsMenu';
-import CONST from '../../CONST';
 import iouReportPropTypes from '../../pages/iouReportPropTypes';
 import participantPropTypes from '../participantPropTypes';
 
@@ -50,12 +48,6 @@ const propTypes = {
         left: PropTypes.number,
     }),
 
-    /** The anchor alignment of the menu */
-    threeDotsAnchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
-
     /** Whether we should show a close button */
     shouldShowCloseButton: PropTypes.bool,
 
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
@@ -41,10 +41,6 @@ function HeaderWithBackButton({
     subtitle = '',
     title = '',
     titleColor = undefined,
-    threeDotsAnchorAlignment = {
-        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
-    },
     threeDotsAnchorPosition = {
         vertical: 0,
         horizontal: 0,
@@ -141,7 +137,6 @@ function HeaderWithBackButton({
                             menuItems={threeDotsMenuItems}
                             onIconPress={onThreeDotsButtonPress}
                             anchorPosition={threeDotsAnchorPosition}
-                            anchorAlignment={threeDotsAnchorAlignment}
                         />
                     )}
                     {shouldShowCloseButton && (
diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
@@ -69,7 +69,7 @@ class KYCWall extends React.Component {
         }
 
         return {
-            anchorPositionVertical: domRect.top - 8,
+            anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,
             anchorPositionHorizontal: domRect.left,
         };
     }
diff --git a/src/components/MoneyReportHeader.js b/src/components/MoneyReportHeader.js
@@ -68,7 +68,6 @@ function MoneyReportHeader(props) {
             <HeaderWithBackButton
                 shouldShowAvatarWithDisplay
                 shouldShowPinButton={false}
-                shouldShowThreeDotsButton={false}
                 report={props.report}
                 policies={props.policies}
                 personalDetails={props.personalDetails}
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
@@ -303,6 +303,10 @@ function MoneyRequestConfirmationList(props) {
                 currency={props.iouCurrencyCode}
                 policyID={props.policyID}
                 shouldShowPaymentOptions
+                anchorAlignment={{
+                    horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+                    vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+                }}
             />
         ) : (
             <ButtonWithDropdownMenu
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
@@ -57,6 +57,12 @@ const propTypes = {
     /** Total money amount in form <currency><amount> */
     formattedAmount: PropTypes.string,
 
+    /** The anchor alignment of the popover menu */
+    anchorAlignment: PropTypes.shape({
+        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
+        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
+    }),
+
     ...withLocalizePropTypes,
 };
 
@@ -71,6 +77,10 @@ const defaultProps = {
     iouReport: {},
     policyID: '',
     formattedAmount: '',
+    anchorAlignment: {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
+    },
 };
 
 class SettlementButton extends React.Component {
@@ -178,6 +188,7 @@ class SettlementButton extends React.Component {
                         }}
                         options={this.getButtonOptionsFromProps()}
                         style={this.props.style}
+                        anchorAlignment={this.props.anchorAlignment}
                     />
                 )}
             </KYCWall>
diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
@@ -57,7 +57,7 @@ const defaultProps = {
     onIconPress: () => {},
     anchorAlignment: {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
-        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
 };
 
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -424,7 +424,7 @@ function BasePaymentsPage(props) {
                 onClose={hideAddPaymentMenu}
                 anchorPosition={{
                     horizontal: anchorPosition.anchorPositionHorizontal,
-                    vertical: anchorPosition.anchorPositionVertical - 10,
+                    vertical: anchorPosition.anchorPositionVertical - CONST.MODAL.POPOVER_MENU_PADDING,
                 }}
                 onItemSelected={(method) => addPaymentMethodTypePressed(method)}
                 anchorRef={addPaymentMethodAnchorRef}

Original file line number	Diff line number	Diff line change
`@@ -69,7 +69,7 @@ class KYCWall extends React.Component {`
`69`	`69`	`}`
`70`	`70`
`71`	`71`	`return {`
`72`		`- anchorPositionVertical: domRect.top - 8,`
	`72`	`+ anchorPositionVertical: domRect.top - CONST.MODAL.POPOVER_MENU_PADDING,`
`73`	`73`	`anchorPositionHorizontal: domRect.left,`
`74`	`74`	`};`
`75`	`75`	`}`