diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.js index d395d375f304..a724fe0ddf74 100644 --- a/src/pages/settings/AppDownloadLinks.js +++ b/src/pages/settings/AppDownloadLinks.js @@ -7,15 +7,25 @@ import CONST from '../../CONST'; import * as Expensicons from '../../components/Icon/Expensicons'; import ScreenWrapper from '../../components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; +import compose from '../../libs/compose'; import MenuItem from '../../components/MenuItem'; import styles from '../../styles/styles'; import * as Link from '../../libs/actions/Link'; +import PressableWithSecondaryInteraction from '../../components/PressableWithSecondaryInteraction'; +import ControlSelection from '../../libs/ControlSelection'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../components/withWindowDimensions'; +import canUseTouchScreen from '../../libs/canUseTouchscreen'; +import * as ReportActionContextMenu from '../home/report/ContextMenu/ReportActionContextMenu'; +import * as ContextMenuActions from '../home/report/ContextMenu/ContextMenuActions'; const propTypes = { ...withLocalizePropTypes, + ...windowDimensionsPropTypes, }; const AppDownloadLinksPage = (props) => { + let popoverAnchor; + const menuItems = [ { translationKey: 'initialSettingsPage.appDownloadLinks.android.label', @@ -24,6 +34,7 @@ const AppDownloadLinksPage = (props) => { action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.ANDROID); }, + link: CONST.APP_DOWNLOAD_LINKS.ANDROID, }, { translationKey: 'initialSettingsPage.appDownloadLinks.ios.label', @@ -32,6 +43,7 @@ const AppDownloadLinksPage = (props) => { action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.IOS); }, + link: CONST.APP_DOWNLOAD_LINKS.IOS, }, { translationKey: 'initialSettingsPage.appDownloadLinks.desktop.label', @@ -40,9 +52,25 @@ const AppDownloadLinksPage = (props) => { action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.DESKTOP); }, + link: CONST.APP_DOWNLOAD_LINKS.DESKTOP, }, ]; + /** + * Show the ReportActionContextMenu modal popover. + * + * @param {Object} [event] - A press event. + * @param {string} [selection] - A copy text. + */ + const showPopover = (event, selection) => { + ReportActionContextMenu.showContextMenu( + ContextMenuActions.CONTEXT_MENU_TYPES.LINK, + event, + selection, + popoverAnchor, + ); + }; + return ( { /> {_.map(menuItems, item => ( - item.action()} - shouldShowRightIcon - /> + onPressIn={() => props.isSmallScreenWidth && canUseTouchScreen() && ControlSelection.block()} + onPressOut={() => ControlSelection.unblock()} + onSecondaryInteraction={e => showPopover(e, item.link)} + ref={el => popoverAnchor = el} + onKeyDown={(event) => { + event.target.blur(); + }} + > + item.action()} + shouldShowRightIcon + /> + ))} @@ -70,4 +108,7 @@ const AppDownloadLinksPage = (props) => { AppDownloadLinksPage.propTypes = propTypes; AppDownloadLinksPage.displayName = 'AppDownloadLinksPage'; -export default withLocalize(AppDownloadLinksPage); +export default compose( + withWindowDimensions, + withLocalize, +)(AppDownloadLinksPage);