Merge pull request #28840 from ShogunFire/longPressForTaskPreviews

Show the context menu when we long press assignee of a task
Expensify · Nov 2, 2023 · fdfa3f2 · fdfa3f2
2 parents f7d7a9d + 6d8043a
commit fdfa3f2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/src/components/ReportActionItem/TaskPreview.js b/src/components/ReportActionItem/TaskPreview.js
@@ -8,10 +8,14 @@ import Checkbox from '@components/Checkbox';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import refPropTypes from '@components/refPropTypes';
 import RenderHTML from '@components/RenderHTML';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
 import compose from '@libs/compose';
+import ControlSelection from '@libs/ControlSelection';
+import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import getButtonState from '@libs/getButtonState';
 import * as LocalePhoneNumber from '@libs/LocalePhoneNumber';
 import Navigation from '@libs/Navigation/Navigation';
@@ -52,6 +56,16 @@ const propTypes = {
         ownerAccountID: PropTypes.number,
     }),
 
+    /** The chat report associated with taskReport */
+    chatReportID: PropTypes.string.isRequired,
+
+    /** Popover context menu anchor, used for showing context menu */
+    contextMenuAnchor: refPropTypes,
+
+    /** Callback for updating context menu active state, used for showing context menu */
+    checkIfContextMenuActive: PropTypes.func,
+
+    /* Onyx Props */
     ...withLocalizePropTypes,
 
     ...withCurrentUserPersonalDetailsPropTypes,
@@ -90,6 +104,9 @@ function TaskPreview(props) {
         <View style={[styles.chatItemMessage]}>
             <PressableWithoutFeedback
                 onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(props.taskReportID))}
+                onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
+                onPressOut={() => ControlSelection.unblock()}
+                onLongPress={(event) => showContextMenuForReport(event, props.contextMenuAnchor, props.chatReportID, props.action, props.checkIfContextMenuActive)}
                 style={[styles.flexRow, styles.justifyContentBetween]}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
                 accessibilityLabel={props.translate('task.task')}

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -353,11 +353,16 @@ function ReportActionItem(props) {
             );
         } else if (ReportActionsUtils.isCreatedTaskReportAction(props.action)) {
             children = (
-                <TaskPreview
-                    taskReportID={props.action.originalMessage.taskReportID.toString()}
-                    action={props.action}
-                    isHovered={hovered}
-                />
+                <ShowContextMenuContext.Provider value={contextValue}>
+                    <TaskPreview
+                        taskReportID={props.action.originalMessage.taskReportID.toString()}
+                        chatReportID={props.report.reportID}
+                        action={props.action}
+                        isHovered={hovered}
+                        contextMenuAnchor={popoverAnchorRef}
+                        checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
+                    />
+                </ShowContextMenuContext.Provider>
             );
         } else if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.REIMBURSEMENTQUEUED) {
             const submitterDisplayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetails, [props.report.ownerAccountID, 'displayName'], props.report.ownerEmail);