Andrew 3313 link context menu

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js

@@ -2,6 +2,11 @@ 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 {contextMenuTypes} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
+
+const linkRef = React.createRef();
 
 /*
  * This is a default anchor component for regular links.
@@ -14,16 +19,30 @@ const BaseAnchorForCommentsOnly = ({
     style,
     ...props
 }) => (
-    <Text
-        style={StyleSheet.flatten(style)}
-        accessibilityRole="link"
-        href={href}
-        hrefAttrs={{rel, target}}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
+    <PressableWithSecondaryInteraction
+        onSecondaryInteraction={
+            (event) => {
+                showContextMenu(
+                    contextMenuTypes.link,
+                    event,
+                    href,
+                    linkRef.current,
+                );
+            }
+        }
     >
-        {children}
-    </Text>
+        <Text
+            ref={linkRef}
+            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;

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

@@ -3,6 +3,12 @@ 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 {contextMenuTypes} from '../../../pages/home/report/ContextMenu/ContextMenuActions';
+
+const linkRef = React.createRef();
+
 
 /*
  * This is a default anchor component for regular links.
@@ -14,14 +20,28 @@ const BaseAnchorForCommentsOnly = ({
     shouldDownloadFile,
     ...props
 }) => (
-    <Text
-        style={StyleSheet.flatten(style)}
+    <PressableWithSecondaryInteraction
+        onSecondaryInteraction={
+            (event) => {
+                showContextMenu(
+                    contextMenuTypes.link,
+                    event,
+                    href,
+                    linkRef.current,
+                );
+            }
+        }
         onPress={() => (shouldDownloadFile ? fileDownload(href) : Linking.openURL(href))}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
     >
-        {children}
-    </Text>
+        <Text
+            ref={linkRef}
+            style={StyleSheet.flatten(style)}
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+        >
+            {children}
+        </Text>
+    </PressableWithSecondaryInteraction>
 );
 
 BaseAnchorForCommentsOnly.propTypes = propTypes;

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/languages/en.js

@@ -119,12 +119,11 @@ export default {
         roomIsArchived: 'This chat room has been deleted',
         localTime: ({user, time}) => `It's ${time} for ${user}`,
     },
-    contextMenuItem: {
+    reportActionContextMenu: {
         copyToClipboard: 'Copy to Clipboard',
         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

@@ -119,12 +119,11 @@ export default {
         roomIsArchived: 'Esta sala de chat ha sido eliminada',
         localTime: ({user, time}) => `Son las ${time} para ${user}`,
     },
-    contextMenuItem: {
+    reportActionContextMenu: {
         copyToClipboard: 'Copiar al Portapapeles',
         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,38 +12,44 @@ import withLocalize, {withLocalizePropTypes} from '../../../../components/withLo
 import ContextMenuActions from './ContextMenuActions';
 
 const propTypes = {
+    type: PropTypes.string,
     ...GenericReportActionContextMenuPropTypes,
     ...withLocalizePropTypes,
 };
-
 class BaseReportActionContextMenu extends React.Component {
     constructor(props) {
         super(props);
-
         this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
     }
 
     render() {
         return this.props.isVisible && (
             <View style={this.wrapperStyle}>
-                {_.map(ContextMenuActions, contextAction => contextAction.shouldShow(this.props.reportAction) && (
-                    <ContextMenuItem
-                        icon={contextAction.icon}
-                        text={this.props.translate(contextAction.textTranslateKey)}
-                        successIcon={contextAction.successIcon}
-                        successText={contextAction.successTextTranslateKey
-                            ? this.props.translate(contextAction.successTextTranslateKey)
-                            : undefined}
-                        isMini={this.props.isMini}
-                        key={contextAction.textTranslateKey}
-                        onPress={() => contextAction.onPress(!this.props.isMini, {
-                            reportAction: this.props.reportAction,
-                            reportID: this.props.reportID,
-                            draftMessage: this.props.draftMessage,
-                            selection: this.props.selection,
-                        })}
-                    />
-                ))}
+                {_.map(
+                    ContextMenuActions, (contextAction) => {
+                        if (!contextAction.shouldShow(this.props.type, this.props.reportAction)) {
+                            return;
+                        }
+                        return (
+                            <ContextMenuItem
+                                icon={contextAction.icon}
+                                text={this.props.translate(contextAction.textTranslateKey)}
+                                successIcon={contextAction.successIcon}
+                                successText={contextAction.successTextTranslateKey
+                                    ? this.props.translate(contextAction.successTextTranslateKey)
+                                    : undefined}
+                                isMini={this.props.isMini}
+                                key={contextAction.textTranslateKey}
+                                onPress={() => contextAction.onPress(!this.props.isMini, {
+                                    reportAction: this.props.reportAction,
+                                    reportID: this.props.reportID,
+                                    draftMessage: this.props.draftMessage,
+                                    selection: this.props.selection,
+                                })}
+                            />
+                        );
+                    },
+                )}
             </View>
         );
     }

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

@@ -22,15 +22,31 @@ function getActionText(reportAction) {
     return lodashGet(message, 'html', '');
 }
 
+export const contextMenuTypes = {
+    link: 'LINK',
+    image: 'IMAGE',
+    reportAction: 'REPORT_ACTION',
+};
+
 // A list of all the context actions in this menu.
 export default [
-    // Copy to clipboard
     {
-        textTranslateKey: 'contextMenuItem.copyToClipboard',
+        textTranslateKey: 'reportActionContextMenu.copyURLToClipboard',
+        icon: ClipboardIcon,
+        successTextTranslateKey: 'reportActionContextMenu.copied',
+        successIcon: Checkmark,
+        shouldShow: type => type === contextMenuTypes.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 === contextMenuTypes.reportAction,
 
         // If return value is true, we switch the `text` and `icon` on
         // `ContextMenuItem` with `successText` and `successIcon` which will fallback to
@@ -64,7 +80,7 @@ export default [
         textTranslateKey: 'reportActionContextMenu.markAsUnread',
         icon: Mail,
         successIcon: Checkmark,
-        shouldShow: () => true,
+        shouldShow: type => type === contextMenuTypes.reportAction,
         onPress: (closePopover, {reportAction, reportID}) => {
             updateLastReadActionID(reportID, reportAction.sequenceNumber);
             setNewMarkerPosition(reportID, reportAction.sequenceNumber);
@@ -77,7 +93,7 @@ export default [
     {
         textTranslateKey: 'reportActionContextMenu.editComment',
         icon: Pencil,
-        shouldShow: reportAction => canEditReportAction(reportAction),
+        shouldShow: (type, reportAction) => type === contextMenuTypes.reportAction && canEditReportAction(reportAction),
         onPress: (closePopover, {reportID, reportAction, draftMessage}) => {
             const editAction = () => saveReportActionDraft(
                 reportID,
@@ -98,7 +114,8 @@ export default [
     {
         textTranslateKey: 'reportActionContextMenu.deleteComment',
         icon: Trashcan,
-        shouldShow: reportAction => canDeleteReportAction(reportAction),
+        shouldShow: (type, reportAction) => type === contextMenuTypes.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, IMAGE, 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 who [LINK, IMAGE, 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,

src/pages/home/report/ReportActionItem.js

@@ -23,6 +23,7 @@ import ControlSelection from '../../../libs/ControlSelection';
 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
 import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu';
 import {isActiveReportAction, showContextMenu} from './ContextMenu/ReportActionContextMenu';
+import {contextMenuTypes} from './ContextMenu/ContextMenuActions';
 
 const propTypes = {
     /** The ID of the report this action is on. */
@@ -90,6 +91,7 @@ class ReportActionItem extends Component {
             return;
         }
         showContextMenu(
+            contextMenuTypes.reportAction,
             event,
             selection,
             this.popoverAnchor,