refactor Context Menu

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import {View} from 'react-native';
+import getReportActionContextMenuStyles from '../../../../styles/getReportActionContextMenuStyles';
+import ContextMenuItem from '../../../../components/ContextMenuItem';
+import {propTypes, defaultProps} from './ReportActionContextMenuPropsTypes';
+import withLocalize from '../../../../components/withLocalize';
+import ContextMenuActions from './ContextMenuActions';
+
+class BaseReportActionContextMenu extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
+    }
+
+    render() {
+        return this.props.isVisible && (
+            <View style={this.wrapperStyle}>
+                {ContextMenuActions.map(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,
+                        })}
+                    />
+                ))}
+            </View>
+        );
+    }
+}
+
+BaseReportActionContextMenu.propTypes = propTypes;
+BaseReportActionContextMenu.defaultProps = defaultProps;
+
+export default withLocalize(BaseReportActionContextMenu);

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

@@ -0,0 +1,116 @@
+import _ from 'underscore';
+import lodashGet from 'lodash/get';
+import Str from 'expensify-common/lib/str';
+import {
+    Clipboard as ClipboardIcon, LinkCopy, Mail, Pencil, Trashcan, Checkmark,
+} from '../../../../components/Icon/Expensicons';
+import {
+    setNewMarkerPosition, updateLastReadActionID, saveReportActionDraft,
+} from '../../../../libs/actions/Report';
+import Clipboard from '../../../../libs/Clipboard';
+import {isReportMessageAttachment, canEditReportAction, canDeleteReportAction} from '../../../../libs/reportUtils';
+import ReportActionComposeFocusManager from '../../../../libs/ReportActionComposeFocusManager';
+import {hideContextMenu, showDeleteConfirmModal} from './ReportActionContextMenu';
+
+/**
+ * Gets the markdown version of the message in an action.
+ * @param {Object} reportAction
+ * @return {String}
+ */
+function getActionText(reportAction) {
+    const message = _.last(lodashGet(reportAction, 'message', null));
+    return lodashGet(message, 'html', '');
+}
+
+// A list of all the context actions in this menu.
+export default [
+    // Copy to clipboard
+    {
+        textTranslateKey: 'contextMenuItem.copyToClipboard',
+        icon: ClipboardIcon,
+        successTextTranslateKey: 'contextMenuItem.copied',
+        successIcon: Checkmark,
+        shouldShow: () => true,
+
+        // If return value is true, we switch the `text` and `icon` on
+        // `ContextMenuItem` with `successText` and `successIcon` which will fallback to
+        // the `text` and `icon`
+        onPress: (closePopover, {reportAction, selection}) => {
+            const message = _.last(lodashGet(reportAction, 'message', null));
+            const html = lodashGet(message, 'html', '');
+            const text = Str.htmlDecode(selection || lodashGet(message, 'text', ''));
+            const isAttachment = _.has(reportAction, 'isAttachment')
+                ? reportAction.isAttachment
+                : isReportMessageAttachment(text);
+            if (!isAttachment) {
+                Clipboard.setString(text);
+            } else {
+                Clipboard.setString(html);
+            }
+            if (closePopover) {
+                hideContextMenu(true, ReportActionComposeFocusManager.focus);
+            }
+        },
+    },
+
+    {
+        textTranslateKey: 'reportActionContextMenu.copyLink',
+        icon: LinkCopy,
+        shouldShow: () => false,
+        onPress: () => {},
+    },
+
+    {
+        textTranslateKey: 'reportActionContextMenu.markAsUnread',
+        icon: Mail,
+        successIcon: Checkmark,
+        shouldShow: () => true,
+        onPress: (closePopover, {reportAction, reportID}) => {
+            updateLastReadActionID(reportID, reportAction.sequenceNumber);
+            setNewMarkerPosition(reportID, reportAction.sequenceNumber);
+            if (closePopover) {
+                hideContextMenu(true, ReportActionComposeFocusManager.focus);
+            }
+        },
+    },
+
+    {
+        textTranslateKey: 'reportActionContextMenu.editComment',
+        icon: Pencil,
+        shouldShow: reportAction => canEditReportAction(reportAction),
+        onPress: (closePopover, {reportID, reportAction, draftMessage}) => {
+            const editAction = () => saveReportActionDraft(
+                reportID,
+                reportAction.reportActionID,
+                _.isEmpty(draftMessage) ? getActionText(reportAction) : '',
+            );
+
+            if (closePopover) {
+                // Hide popover, then call editAction
+                hideContextMenu(false, editAction);
+                return;
+            }
+
+            // No popover to hide, call editAction immediately
+            editAction();
+        },
+    },
+    {
+        textTranslateKey: 'reportActionContextMenu.deleteComment',
+        icon: Trashcan,
+        shouldShow: reportAction => canDeleteReportAction(reportAction),
+        onPress: (closePopover, {reportID, reportAction}) => {
+            if (closePopover) {
+                // Hide popover, then call showDeleteConfirmModal
+                hideContextMenu(
+                    false,
+                    () => showDeleteConfirmModal(reportID, reportAction),
+                );
+                return;
+            }
+
+            // No popover to hide, call showDeleteConfirmModal immediately
+            showDeleteConfirmModal(reportID, reportAction);
+        },
+    },
+];

src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js

@@ -6,9 +6,8 @@ import {
     propTypes as ReportActionContextMenuPropsTypes,
     defaultProps as ReportActionContextMenuDefaultProps,
 } from '../ReportActionContextMenuPropsTypes';
-import withLocalize from '../../../../../components/withLocalize';
 import {getMiniReportActionContextMenuWrapperStyle} from '../../../../../styles/getReportActionItemStyles';
-import ReportActionContextMenu from '../ReportActionContextMenu';
+import BaseReportActionContextMenu from '../BaseReportActionContextMenu';
 
 const propTypes = {
     ..._.omit(ReportActionContextMenuPropsTypes, ['isMini']),
@@ -25,12 +24,12 @@ const defaultProps = {
 const MiniReportActionContextMenu = props => (
     <View style={getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}>
         {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-        <ReportActionContextMenu isMini {...props} />
+        <BaseReportActionContextMenu isMini {...props} />
     </View>
 );
 
 MiniReportActionContextMenu.propTypes = propTypes;
 MiniReportActionContextMenu.defaultProps = defaultProps;
 MiniReportActionContextMenu.displayName = 'MiniReportActionContextMenu';
 
-export default withLocalize(MiniReportActionContextMenu);
+export default MiniReportActionContextMenu;

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

@@ -2,19 +2,16 @@ import React from 'react';
 import {
     Dimensions,
 } from 'react-native';
-import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {
     deleteReportComment,
 } from '../../../../libs/actions/Report';
 import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
 import PopoverWithMeasuredContent from '../../../../components/PopoverWithMeasuredContent';
-import ReportActionContextMenu from './ReportActionContextMenu';
+import BaseReportActionContextMenu from './BaseReportActionContextMenu';
 import ConfirmModal from '../../../../components/ConfirmModal';
 
 const propTypes = {
-    /** Update the callbacks on ContextMenu Context */
-    setValue: PropTypes.func.isRequired,
     ...withLocalizePropTypes,
 };
 
@@ -55,12 +52,6 @@ class PopoverReportActionContextMenu extends React.Component {
     }
 
     componentDidMount() {
-        this.props.setValue({
-            showContextMenu: this.showContextMenu,
-            hideContextMenu: this.hideContextMenu,
-            isActiveReportAction: this.isActiveReportAction,
-            showDeleteConfirmModal: this.showDeleteConfirmModal,
-        });
         Dimensions.addEventListener('change', this.measureContextMenuAnchorPosition);
     }
 
@@ -181,7 +172,7 @@ class PopoverReportActionContextMenu extends React.Component {
      */
     measureContent() {
         return (
-            <ReportActionContextMenu
+            <BaseReportActionContextMenu
                 isVisible
                 selection={this.state.selection}
                 reportID={this.state.reportID}
@@ -229,7 +220,7 @@ class PopoverReportActionContextMenu extends React.Component {
                     shouldSetModalVisibility={false}
                     fullscreen={false}
                 >
-                    <ReportActionContextMenu
+                    <BaseReportActionContextMenu
                         isVisible
                         reportID={this.state.reportID}
                         reportAction={this.state.reportAction}