Fix popover menu anchor alignment prop

src/CONST.js

@@ -829,6 +829,7 @@ const CONST = {
         WIDTH: 320,
         HEIGHT: 416,
     },
+    DESKTOP_HEADER_PADDING: 12,
     CATEGORY_SHORTCUT_BAR_HEIGHT: 32,
     SMALL_EMOJI_PICKER_SIZE: {
         WIDTH: '100%',

src/components/HeaderWithBackButton.js

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {View, Keyboard} from 'react-native';
+import _ from 'underscore';
 import styles from '../styles/styles';
 import Header from './Header';
 import Navigation from '../libs/Navigation/Navigation';
@@ -18,6 +19,7 @@ import withKeyboardState, {keyboardStatePropTypes} from './withKeyboardState';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import iouReportPropTypes from '../pages/iouReportPropTypes';
 import participantPropTypes from './participantPropTypes';
+import CONST from '../CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import PinButton from './PinButton';
 
@@ -66,6 +68,12 @@ 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,
 
@@ -135,6 +143,10 @@ const defaultProps = {
         vertical: 0,
         horizontal: 0,
     },
+    threeDotsAnchorAlignment: {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP,
+    },
 };
 
 class HeaderWithBackButton extends Component {
@@ -233,6 +245,7 @@ class HeaderWithBackButton extends Component {
                                 menuItems={this.props.threeDotsMenuItems}
                                 onIconPress={this.props.onThreeDotsButtonPress}
                                 anchorPosition={this.props.threeDotsAnchorPosition}
+                                anchorAlignment={this.props.threeDotsAnchorAlignment}
                             />
                         )}
 

src/components/PopoverMenu/index.js

@@ -64,7 +64,7 @@ const PopoverMenu = (props) => {
     return (
         <PopoverWithMeasuredContent
             anchorPosition={props.anchorPosition}
-            anchorAlignment={props.anchorOrigin}
+            anchorAlignment={props.anchorAlignment}
             onClose={props.onClose}
             isVisible={props.isVisible}
             onModalHide={() => {

src/components/ThreeDotsMenu/index.js

@@ -1,13 +1,15 @@
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
 import Icon from '../Icon';
 import PopoverMenu from '../PopoverMenu';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Tooltip from '../Tooltip';
 import * as Expensicons from '../Icon/Expensicons';
 import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
+import CONST from '../../CONST';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 
 const propTypes = {
@@ -39,6 +41,12 @@ const propTypes = {
         bottom: PropTypes.number,
         left: PropTypes.number,
     }).isRequired,
+
+    /** The anchor alignment of the menu */
+    anchorAlignment: PropTypes.shape({
+        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
+        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
+    }),
 };
 
 const defaultProps = {
@@ -47,6 +55,10 @@ const defaultProps = {
     iconStyles: [],
     icon: Expensicons.ThreeDots,
     onIconPress: () => {},
+    anchorAlignment: {
+        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
+        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
+    },
 };
 
 class ThreeDotsMenu extends Component {
@@ -97,6 +109,7 @@ class ThreeDotsMenu extends Component {
                     onClose={this.hidePopoverMenu}
                     isVisible={this.state.isPopupMenuVisible}
                     anchorPosition={this.props.anchorPosition}
+                    anchorAlignment={this.props.anchorAlignment}
                     onItemSelected={this.hidePopoverMenu}
                     menuItems={this.props.menuItems}
                 />

src/pages/settings/Profile/ProfilePage.js

@@ -93,7 +93,7 @@ const ProfilePage = (props) => {
                     onImageSelected={PersonalDetails.updateAvatar}
                     onImageRemoved={PersonalDetails.deleteAvatar}
                     anchorPosition={styles.createMenuPositionProfile(props.windowWidth)}
-                    anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                    anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
                     size={CONST.AVATAR_SIZE.LARGE}
                     pendingAction={lodashGet(props.currentUserPersonalDetails, 'pendingFields.avatar', null)}
                     errors={lodashGet(props.currentUserPersonalDetails, 'errorFields.avatar', null)}

src/pages/workspace/WorkspaceSettingsPage.js

@@ -123,7 +123,7 @@ function WorkspaceSettingsPage(props) {
                         fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
                         style={[styles.mb3]}
                         anchorPosition={styles.createMenuPositionProfile(props.windowWidth)}
-                        anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.CENTER, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
+                        anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP}}
                         isUsingDefaultAvatar={!lodashGet(props.policy, 'avatar', null)}
                         onImageSelected={(file) => Policy.updateWorkspaceAvatar(lodashGet(props.policy, 'id', ''), file)}
                         onImageRemoved={() => Policy.deleteWorkspaceAvatar(lodashGet(props.policy, 'id', ''))}

src/styles/getPopOverVerticalOffset/index.desktop.js

@@ -0,0 +1,13 @@
+import CONST from '../../CONST';
+
+/**
+ * Adds the header padding with vertical offset on desktop
+ * @param {Number} vertical
+ * @returns {Object}
+ */
+export default (vertical) => ({
+    // We add CONST.DESKTOP_HEADER_GAP on desktop which we
+    // need to add to vertical offset to have proper vertical
+    // offset on desktop
+    vertical: vertical + CONST.DESKTOP_HEADER_PADDING,
+});

src/styles/getPopOverVerticalOffset/index.js

@@ -0,0 +1 @@
+export default (vertical) => ({vertical});

src/styles/styles.js

@@ -18,6 +18,7 @@ import writingDirection from './utilities/writingDirection';
 import optionAlternateTextPlatformStyles from './optionAlternateTextPlatformStyles';
 import pointerEventsNone from './pointerEventsNone';
 import pointerEventsAuto from './pointerEventsAuto';
+import getPopOverVerticalOffset from './getPopOverVerticalOffset';
 import overflowXHidden from './overflowXHidden';
 import CONST from '../CONST';
 import cursor from './utilities/cursor';
@@ -768,7 +769,7 @@ const styles = {
     },
 
     headerGap: {
-        height: 12,
+        height: CONST.DESKTOP_HEADER_PADDING,
     },
 
     pushTextRight: {
@@ -1272,7 +1273,7 @@ const styles = {
 
     createMenuPositionProfile: (windowWidth) => ({
         horizontal: windowWidth - 355,
-        vertical: 250,
+        ...getPopOverVerticalOffset(162),
     }),
 
     createMenuPositionReportActionCompose: (windowHeight) => ({
@@ -2979,12 +2980,12 @@ const styles = {
     },
 
     threeDotsPopoverOffset: (windowWidth) => ({
-        vertical: 50,
+        ...getPopOverVerticalOffset(60),
         horizontal: windowWidth - 60,
     }),
 
     threeDotsPopoverOffsetNoCloseButton: (windowWidth) => ({
-        vertical: 50,
+        ...getPopOverVerticalOffset(60),
         horizontal: windowWidth - 10,
     }),