Andrew 3313 link context menu

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -2,29 +2,50 @@ import React from 'react';
 import {StyleSheet} from 'react-native';
 import Text from '../../Text';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
+import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
+import {showContextMenu} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
+
 
 /*
- * This is a default anchor component for regular links.
- */
+* This is a default anchor component for regular links.
+*/
 const BaseAnchorForCommentsOnly = ({
     href,
     rel,
     target,
     children,
     style,
     ...props
-}) => (
-    <Text
-        style={StyleSheet.flatten(style)}
-        accessibilityRole="link"
-        href={href}
-        hrefAttrs={{rel, target}}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {children}
-    </Text>
-);
+}) => {
+    let linkRef;
+    return (
+        <PressableWithSecondaryInteraction
+            onSecondaryInteraction={
+                (event) => {
+                    showContextMenu(
+                        CONTEXT_MENU_TYPES.link,
+                        event,
+                        href,
+                        linkRef.current,
+                    );
+                }
+            }
+        >
+            <Text
+                ref={el => linkRef = el}
+                style={StyleSheet.flatten(style)}
+                accessibilityRole="link"
+                href={href}
+                hrefAttrs={{rel, target}}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            >
+                {children}
+            </Text>
+        </PressableWithSecondaryInteraction>
+    );
+};
 
 BaseAnchorForCommentsOnly.propTypes = propTypes;
 BaseAnchorForCommentsOnly.defaultProps = defaultProps;

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js

@@ -3,6 +3,9 @@ import {Linking, StyleSheet} from 'react-native';
 import {propTypes, defaultProps} from '../anchorForCommentsOnlyPropTypes';
 import fileDownload from '../../../libs/fileDownload';
 import Text from '../../Text';
+import PressableWithSecondaryInteraction from '../../PressableWithSecondaryInteraction';
+import {showContextMenu} from '../../../pages/home/report/ContextMenu/ReportActionContextMenu';
+import {CONTEXT_MENU_TYPES} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
 
 /*
  * This is a default anchor component for regular links.
@@ -13,16 +16,33 @@ const BaseAnchorForCommentsOnly = ({
     style,
     shouldDownloadFile,
     ...props
-}) => (
-    <Text
-        style={StyleSheet.flatten(style)}
-        onPress={() => (shouldDownloadFile ? fileDownload(href) : Linking.openURL(href))}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-    >
-        {children}
-    </Text>
-);
+}) => {
+    let linkRef;
+    return (
+        <PressableWithSecondaryInteraction
+            onSecondaryInteraction={
+                (event) => {
+                    showContextMenu(
+                        CONTEXT_MENU_TYPES.link,
+                        event,
+                        href,
+                        linkRef.current,
+                    );
+                }
+            }
+            onPress={() => (shouldDownloadFile ? fileDownload(href) : Linking.openURL(href))}
+        >
+            <Text
+                ref={el => linkRef = el}
+                style={StyleSheet.flatten(style)}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+            >
+                {children}
+            </Text>
+        </PressableWithSecondaryInteraction>
+    )
+};
 
 BaseAnchorForCommentsOnly.propTypes = propTypes;
 BaseAnchorForCommentsOnly.defaultProps = defaultProps;

src/components/CommunicationsLink.js

@@ -55,9 +55,9 @@ const CommunicationsLink = props => (
                     {props.children}
                     <ContextMenuItem
                         icon={ClipboardIcon}
-                        text={props.translate('contextMenuItem.copyToClipboard')}
+                        text={props.translate('reportActionContextMenu.copyToClipboard')}
                         successIcon={Checkmark}
-                        successText={props.translate('contextMenuItem.copied')}
+                        successText={props.translate('reportActionContextMenu.copied')}
                         isMini
                         autoReset
                         onPress={() => Clipboard.setString(props.value)}

src/components/PressableWithSecondaryInteraction/index.js

@@ -30,6 +30,7 @@ class PressableWithSecondaryInteraction extends Component {
      */
     executeSecondaryInteractionOnContextMenu(e) {
         const selection = window.getSelection().toString();
+        e.stopPropagation();
         if (this.props.preventDefaultContentMenu) {
             e.preventDefault();
         }
@@ -44,6 +45,7 @@ class PressableWithSecondaryInteraction extends Component {
                 delayLongPress={200}
                 onLongPress={this.props.onSecondaryInteraction}
                 onPressOut={this.props.onPressOut}
+                onPress={this.props.onPress}
                 ref={el => this.pressableRef = el}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...defaultPressableProps}

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -13,6 +13,7 @@ import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTy
 const PressableWithSecondaryInteraction = props => (
     <Pressable
         ref={props.forwardedRef}
+        onPress={props.onPress}
         onPressIn={props.onPressIn}
         delayLongPress={200}
         onLongPress={(e) => {

src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
 
 const propTypes = {
+    /** The function that should be called when this pressable is pressed */
+    onPress: PropTypes.func,
+
     /** The function that should be called when this pressable is pressedIn */
     onPressIn: PropTypes.func,
 

src/languages/en.js

@@ -121,12 +121,12 @@ export default {
         roomIsArchived: 'This chat room has been deleted',
         localTime: ({user, time}) => `It's ${time} for ${user}`,
     },
-    contextMenuItem: {
+    reportActionContextMenu: {
         copyToClipboard: 'Copy to Clipboard',
+        openLink: 'Open Link',
         copied: 'Copied!',
-    },
-    reportActionContextMenu: {
         copyLink: 'Copy Link',
+        copyURLToClipboard: 'Copy URL to Clipboard',
         markAsUnread: 'Mark as Unread',
         editComment: 'Edit Comment',
         deleteComment: 'Delete Comment',

src/languages/es.js

@@ -121,12 +121,12 @@ export default {
         roomIsArchived: 'Esta sala de chat ha sido eliminada',
         localTime: ({user, time}) => `Son las ${time} para ${user}`,
     },
-    contextMenuItem: {
+    reportActionContextMenu: {
         copyToClipboard: 'Copiar al Portapapeles',
+        openLink: 'Abrir Enlace',
         copied: '¡Copiado!',
-    },
-    reportActionContextMenu: {
         copyLink: 'Copiar Enlace',
+        copyURLToClipboard: 'Copiar URL al Portapapeles',
         markAsUnread: 'Marcar como no leído',
         editComment: 'Editar Commentario',
         deleteComment: 'Eliminar Comentario',

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
+import PropTypes from 'prop-types';
 import getReportActionContextMenuStyles from '../../../../styles/getReportActionContextMenuStyles';
 import ContextMenuItem from '../../../../components/ContextMenuItem';
 import {
@@ -11,21 +12,23 @@ import withLocalize, {withLocalizePropTypes} from '../../../../components/withLo
 import ContextMenuActions from './ContextMenuActions';
 
 const propTypes = {
+    /** String representing the context menu type [LINK, REPORT_ACTION] which controls context menu choices  */
+    type: PropTypes.string,
     ...GenericReportActionContextMenuPropTypes,
     ...withLocalizePropTypes,
 };
-
 class BaseReportActionContextMenu extends React.Component {
     constructor(props) {
         super(props);
-
         this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
     }
 
     render() {
+        const shouldShowFilter = contextAction => contextAction.shouldShow(this.props.type, this.props.reportAction);
+
         return this.props.isVisible && (
             <View style={this.wrapperStyle}>
-                {_.map(ContextMenuActions, contextAction => contextAction.shouldShow(this.props.reportAction) && (
+                {ContextMenuActions.filter(shouldShowFilter).map(contextAction => (
                     <ContextMenuItem
                         icon={contextAction.icon}
                         text={this.props.translate(contextAction.textTranslateKey)}

src/pages/home/report/ContextMenu/ContextMenuActions.js

@@ -1,8 +1,9 @@
+import {Linking} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import Str from 'expensify-common/lib/str';
 import {
-    Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark,
+    Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark, Link,
 } from '../../../../components/Icon/Expensicons';
 import {
     setNewMarkerPosition, updateLastReadActionID, saveReportActionDraft,
@@ -22,15 +23,39 @@ function getActionText(reportAction) {
     return lodashGet(message, 'html', '');
 }
 
+export const CONTEXT_MENU_TYPES = {
+    link: 'LINK',
+    reportAction: 'REPORT_ACTION',
+};
+
 // A list of all the context actions in this menu.
 export default [
-    // Copy to clipboard
     {
-        textTranslateKey: 'contextMenuItem.copyToClipboard',
+        textTranslateKey: 'reportActionContextMenu.openLink',
+        icon: Link,
+        shouldShow: type => type === CONTEXT_MENU_TYPES.link,
+        onPress: (closePopover, {selection}) => {
+            Linking.openURL(selection);
+            hideContextMenu(false, ReportActionComposeFocusManager.focus);
+        },
+    },
+    {
+        textTranslateKey: 'reportActionContextMenu.copyURLToClipboard',
+        icon: ClipboardIcon,
+        successTextTranslateKey: 'reportActionContextMenu.copied',
+        successIcon: Checkmark,
+        shouldShow: type => type === CONTEXT_MENU_TYPES.link,
+        onPress: (closePopover, {selection}) => {
+            Clipboard.setString(selection);
+            hideContextMenu(true, ReportActionComposeFocusManager.focus);
+        },
+    },
+    {
+        textTranslateKey: 'reportActionContextMenu.copyToClipboard',
         icon: ClipboardIcon,
-        successTextTranslateKey: 'contextMenuItem.copied',
+        successTextTranslateKey: 'reportActionContextMenu.copied',
         successIcon: Checkmark,
-        shouldShow: () => true,
+        shouldShow: type => type === CONTEXT_MENU_TYPES.reportAction,
 
         // If return value is true, we switch the `text` and `icon` on
         // `ContextMenuItem` with `successText` and `successIcon` which will fallback to
@@ -64,7 +89,7 @@ export default [
         textTranslateKey: 'reportActionContextMenu.markAsUnread',
         icon: Mail,
         successIcon: Checkmark,
-        shouldShow: () => true,
+        shouldShow: type => type === CONTEXT_MENU_TYPES.reportAction,
         onPress: (closePopover, {reportAction, reportID}) => {
             updateLastReadActionID(reportID, reportAction.sequenceNumber);
             setNewMarkerPosition(reportID, reportAction.sequenceNumber);
@@ -77,7 +102,9 @@ export default [
     {
         textTranslateKey: 'reportActionContextMenu.editComment',
         icon: Pencil,
-        shouldShow: reportAction => canEditReportAction(reportAction),
+        shouldShow: (type, reportAction) => (
+            type === CONTEXT_MENU_TYPES.reportAction && canEditReportAction(reportAction)
+        ),
         onPress: (closePopover, {reportID, reportAction, draftMessage}) => {
             const editAction = () => saveReportActionDraft(
                 reportID,
@@ -98,7 +125,8 @@ export default [
     {
         textTranslateKey: 'reportActionContextMenu.deleteComment',
         icon: Trashcan,
-        shouldShow: reportAction => canDeleteReportAction(reportAction),
+        shouldShow: (type, reportAction) => type === CONTEXT_MENU_TYPES.reportAction
+            && canDeleteReportAction(reportAction),
         onPress: (closePopover, {reportID, reportAction}) => {
             if (closePopover) {
                 // Hide popover, then call showDeleteConfirmModal

src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

@@ -94,6 +94,7 @@ class PopoverReportActionContextMenu extends React.Component {
     /**
      * Show the ReportActionContextMenu modal popover.
      *
+     * @param {string} type - context menu type [LINK, REPORT_ACTION]
      * @param {Object} [event] - A press event.
      * @param {string} [selection] - A copy text.
      * @param {Element} contextMenuAnchor - popoverAnchor
@@ -104,6 +105,7 @@ class PopoverReportActionContextMenu extends React.Component {
      * @param {Function} [onHide] - Run a callback when Menu is hidden
      */
     showContextMenu(
+        type,
         event,
         selection,
         contextMenuAnchor,
@@ -126,6 +128,7 @@ class PopoverReportActionContextMenu extends React.Component {
                     horizontal: nativeEvent.pageX,
                     vertical: nativeEvent.pageY,
                 },
+                type,
                 reportID,
                 reportAction,
                 selection,
@@ -190,6 +193,7 @@ class PopoverReportActionContextMenu extends React.Component {
     measureContent() {
         return (
             <BaseReportActionContextMenu
+                type={this.state.type}
                 isVisible
                 selection={this.state.selection}
                 reportID={this.state.reportID}
@@ -236,6 +240,7 @@ class PopoverReportActionContextMenu extends React.Component {
                 >
                     <BaseReportActionContextMenu
                         isVisible
+                        type={this.state.type}
                         reportID={this.state.reportID}
                         reportAction={this.state.reportAction}
                         draftMessage={this.state.reportActionDraftMessage}

src/pages/home/report/ContextMenu/ReportActionContextMenu.js

@@ -5,6 +5,7 @@ const contextMenuRef = React.createRef();
 /**
  * Show the ReportActionContextMenu modal popover.
  *
+ * @param {string} type - the context menu type to display [LINK, REPORT_ACTION]
  * @param {Object} [event] - A press event.
  * @param {string} [selection] - A copy text.
  * @param {Element} contextMenuAnchor - popoverAnchor
@@ -15,19 +16,21 @@ const contextMenuRef = React.createRef();
  * @param {Function} [onHide=() => {}] - Run a callback when Menu is hidden
  */
 function showContextMenu(
+    type,
     event,
     selection,
     contextMenuAnchor,
-    reportID,
-    reportAction,
-    draftMessage,
+    reportID = 0,
+    reportAction = {},
+    draftMessage = '',
     onShow = () => {},
     onHide = () => {},
 ) {
     if (!contextMenuRef.current) {
         return;
     }
     contextMenuRef.current.showContextMenu(
+        type,
         event,
         selection,
         contextMenuAnchor,