From 021a1ac1ea61d7a00e8615d759a662dc7e4ffb56 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 19 Apr 2023 01:27:31 +0500 Subject: [PATCH 1/2] fix: moved popover menu max width from menu item into context menu item component --- src/components/ContextMenuItem.js | 14 +++++++++++++- src/components/MenuItem.js | 3 ++- .../report/ContextMenu/ContextMenuActions.js | 3 +-- .../ContextMenu/ContextMenuUtils/index.js | 17 ----------------- .../ContextMenuUtils/index.native.js | 15 --------------- src/styles/styles.js | 3 +++ 6 files changed, 19 insertions(+), 36 deletions(-) delete mode 100644 src/pages/home/report/ContextMenu/ContextMenuUtils/index.js delete mode 100644 src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 07059a92c5ed..2ca3f5bfe6b3 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -7,6 +7,9 @@ import * as StyleUtils from '../styles/StyleUtils'; import getButtonState from '../libs/getButtonState'; import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from './withDelayToggleButtonState'; import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; +import withWindowDimensions from './withWindowDimensions'; +import compose from '../libs/compose'; +import variables from '../styles/variables'; const propTypes = { /** Icon Component */ @@ -93,6 +96,12 @@ class ContextMenuItem extends Component { wrapperStyle={styles.pr9} success={this.props.isDelayButtonStateComplete} description={this.props.description} + descriptionTextStyle={styles.breakAll} + style={ + this.props.windowWidth > variables.mobileResponsiveWidthBreakpoint + ? [styles.popoverMenuItem, styles.contextMenuItemPopoverMaxWidth] + : [styles.popoverMenuItem] + } /> ) ); @@ -102,4 +111,7 @@ class ContextMenuItem extends Component { ContextMenuItem.propTypes = propTypes; ContextMenuItem.defaultProps = defaultProps; -export default withDelayToggleButtonState(ContextMenuItem); +export default compose( + withWindowDimensions, + withDelayToggleButtonState, +)(ContextMenuItem); diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index fd525ee2dd1f..959651a6d5c5 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -35,6 +35,7 @@ const defaultProps = { wrapperStyle: [], style: styles.popoverMenuItem, titleStyle: {}, + descriptionTextStyle: styles.breakWord, success: false, icon: undefined, iconWidth: undefined, @@ -72,9 +73,9 @@ const MenuItem = (props) => { const descriptionTextStyle = StyleUtils.combineStyles([ styles.textLabelSupporting, (props.icon ? styles.ml3 : undefined), - styles.breakWord, styles.lineHeightNormal, props.title ? descriptionVerticalMargin : undefined, + props.descriptionTextStyle, ]); return ( diff --git a/src/pages/home/report/ContextMenu/ContextMenuActions.js b/src/pages/home/report/ContextMenu/ContextMenuActions.js index 385fee477f7b..b4ad16ce1bf7 100644 --- a/src/pages/home/report/ContextMenu/ContextMenuActions.js +++ b/src/pages/home/report/ContextMenu/ContextMenuActions.js @@ -14,7 +14,6 @@ import CONST from '../../../../CONST'; import getAttachmentDetails from '../../../../libs/fileDownload/getAttachmentDetails'; import fileDownload from '../../../../libs/fileDownload'; import addEncryptedAuthTokenToURL from '../../../../libs/addEncryptedAuthTokenToURL'; -import * as ContextMenuUtils from './ContextMenuUtils'; import * as Environment from '../../../../libs/Environment/Environment'; import Permissions from '../../../../libs/Permissions'; import QuickEmojiReactions from '../../../../components/Reactions/QuickEmojiReactions'; @@ -119,7 +118,7 @@ export default [ Clipboard.setString(selection); hideContextMenu(true, ReportActionComposeFocusManager.focus); }, - getDescription: ContextMenuUtils.getPopoverDescription, + getDescription: selection => selection, }, { textTranslateKey: 'reportActionContextMenu.copyEmailToClipboard', diff --git a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js b/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js deleted file mode 100644 index f694f413e29a..000000000000 --- a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.js +++ /dev/null @@ -1,17 +0,0 @@ -/* eslint-disable import/prefer-default-export */ - -/** - * The popover description will be an empty string on anything but mobile web - * because we show link in tooltip instead of popover on web - * - * @param {String} selection - * @param {Boolean} isSmallScreenWidth - * @returns {String} - */ -function getPopoverDescription(selection, isSmallScreenWidth) { - return isSmallScreenWidth ? selection : ''; -} - -export { - getPopoverDescription, -}; diff --git a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js b/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js deleted file mode 100644 index 3dbf81926098..000000000000 --- a/src/pages/home/report/ContextMenu/ContextMenuUtils/index.native.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable import/prefer-default-export */ - -/** - * Always show popover description on native platforms - * - * @param {String} selection - * @returns {String} - */ -function getPopoverDescription(selection) { - return selection; -} - -export { - getPopoverDescription, -}; diff --git a/src/styles/styles.js b/src/styles/styles.js index 21c807ef04ba..b5a9d7c6d5ef 100644 --- a/src/styles/styles.js +++ b/src/styles/styles.js @@ -3142,6 +3142,9 @@ const styles = { whisper: { backgroundColor: themeColors.cardBG, }, + contextMenuItemPopoverMaxWidth: { + maxWidth: 375, + }, }; export default styles; From 72a8298619a64fdba3dba0df049a18b189a50d60 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 1 May 2023 00:07:21 +0500 Subject: [PATCH 2/2] fix: create native style for context menu item --- src/components/ContextMenuItem.js | 8 ++------ src/styles/getContextMenuItemStyles/index.js | 9 +++++++++ src/styles/getContextMenuItemStyles/index.native.js | 3 +++ 3 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 src/styles/getContextMenuItemStyles/index.js create mode 100644 src/styles/getContextMenuItemStyles/index.native.js diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js index 2ca3f5bfe6b3..6ad9e0ecf585 100644 --- a/src/components/ContextMenuItem.js +++ b/src/components/ContextMenuItem.js @@ -9,7 +9,7 @@ import withDelayToggleButtonState, {withDelayToggleButtonStatePropTypes} from '. import BaseMiniContextMenuItem from './BaseMiniContextMenuItem'; import withWindowDimensions from './withWindowDimensions'; import compose from '../libs/compose'; -import variables from '../styles/variables'; +import getContextMenuItemStyles from '../styles/getContextMenuItemStyles'; const propTypes = { /** Icon Component */ @@ -97,11 +97,7 @@ class ContextMenuItem extends Component { success={this.props.isDelayButtonStateComplete} description={this.props.description} descriptionTextStyle={styles.breakAll} - style={ - this.props.windowWidth > variables.mobileResponsiveWidthBreakpoint - ? [styles.popoverMenuItem, styles.contextMenuItemPopoverMaxWidth] - : [styles.popoverMenuItem] - } + style={getContextMenuItemStyles(this.props.windowWidth)} /> ) ); diff --git a/src/styles/getContextMenuItemStyles/index.js b/src/styles/getContextMenuItemStyles/index.js new file mode 100644 index 000000000000..17f4b82f1290 --- /dev/null +++ b/src/styles/getContextMenuItemStyles/index.js @@ -0,0 +1,9 @@ +import styles from '../styles'; +import variables from '../variables'; + +export default (windowWidth) => { + if (windowWidth > variables.mobileResponsiveWidthBreakpoint) { + return [styles.popoverMenuItem, styles.contextMenuItemPopoverMaxWidth]; + } + return [styles.popoverMenuItem]; +}; diff --git a/src/styles/getContextMenuItemStyles/index.native.js b/src/styles/getContextMenuItemStyles/index.native.js new file mode 100644 index 000000000000..aa7ed19a88d7 --- /dev/null +++ b/src/styles/getContextMenuItemStyles/index.native.js @@ -0,0 +1,3 @@ +import styles from '../styles'; + +export default () => [styles.popoverMenuItem];