Skip to content

Commit

Permalink
Merge pull request #19849 from huzaifa-99/19453-fix-popover-menu-anch…
Browse files Browse the repository at this point in the history
…or-alignment-prop

Fix popover menu anchor alignment prop
  • Loading branch information
iwiznia authored Jun 9, 2023
2 parents a660121 + c2ce3bf commit d91fe14
Show file tree
Hide file tree
Showing 9 changed files with 49 additions and 7 deletions.
1 change: 1 addition & 0 deletions src/CONST.js
Original file line number Diff line number Diff line change
Expand Up @@ -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%',
Expand Down
13 changes: 13 additions & 0 deletions src/components/HeaderWithBackButton.js
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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';

Expand Down Expand Up @@ -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,

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -233,6 +245,7 @@ class HeaderWithBackButton extends Component {
menuItems={this.props.threeDotsMenuItems}
onIconPress={this.props.onThreeDotsButtonPress}
anchorPosition={this.props.threeDotsAnchorPosition}
anchorAlignment={this.props.threeDotsAnchorAlignment}
/>
)}

Expand Down
2 changes: 1 addition & 1 deletion src/components/PopoverMenu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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={() => {
Expand Down
13 changes: 13 additions & 0 deletions src/components/ThreeDotsMenu/index.js
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -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 = {
Expand All @@ -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 {
Expand Down Expand Up @@ -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}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/settings/Profile/ProfilePage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/WorkspaceSettingsPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', ''))}
Expand Down
13 changes: 13 additions & 0 deletions src/styles/getPopOverVerticalOffset/index.desktop.js
Original file line number Diff line number Diff line change
@@ -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,
});
1 change: 1 addition & 0 deletions src/styles/getPopOverVerticalOffset/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default (vertical) => ({vertical});
9 changes: 5 additions & 4 deletions src/styles/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -762,7 +763,7 @@ const styles = {
},

headerGap: {
height: 12,
height: CONST.DESKTOP_HEADER_PADDING,
},

pushTextRight: {
Expand Down Expand Up @@ -1266,7 +1267,7 @@ const styles = {

createMenuPositionProfile: (windowWidth) => ({
horizontal: windowWidth - 355,
vertical: 250,
...getPopOverVerticalOffset(162),
}),

createMenuPositionReportActionCompose: (windowHeight) => ({
Expand Down Expand Up @@ -2966,12 +2967,12 @@ const styles = {
},

threeDotsPopoverOffset: (windowWidth) => ({
vertical: 50,
...getPopOverVerticalOffset(60),
horizontal: windowWidth - 60,
}),

threeDotsPopoverOffsetNoCloseButton: (windowWidth) => ({
vertical: 50,
...getPopOverVerticalOffset(60),
horizontal: windowWidth - 10,
}),

Expand Down

0 comments on commit d91fe14

Please sign in to comment.