Merge pull request #48901 from shubham1206agra/fix-showcontext-menu

Fix showcontext menu on search page (cherry picked from commit c0c4f02) (CP triggered by luacmartins)
Expensify · Sep 10, 2024 · 4720a8c · 4720a8c
1 parent 537f432
commit 4720a8c
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 54 deletions.
diff --git a/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx b/src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx
@@ -41,7 +41,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <PressableWithoutFeedback
                     style={[style, isOffline && styles.cursorDefault]}
                     onPress={() => {
@@ -53,9 +53,12 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', dow
                     }}
                     onPressIn={onPressIn}
                     onPressOut={onPressOut}
-                    onLongPress={(event) =>
-                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                    }
+                    onLongPress={(event) => {
+                        if (isDisabled) {
+                            return;
+                        }
+                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                    }}
                     shouldUseHapticsOnLongPress
                     accessibilityLabel={displayName}
                     role={CONST.ROLE.BUTTON}

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx
@@ -80,7 +80,7 @@ function ImageRenderer({tnode}: ImageRendererProps) {
         thumbnailImageComponent
     ) : (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <AttachmentContext.Consumer>
                     {({reportID, accountID, type}) => (
                         <PressableWithoutFocus
@@ -93,9 +93,12 @@ function ImageRenderer({tnode}: ImageRendererProps) {
                                 const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID);
                                 Navigation.navigate(route);
                             }}
-                            onLongPress={(event) =>
-                                showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                            }
+                            onLongPress={(event) => {
+                                if (isDisabled) {
+                                    return;
+                                }
+                                showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                            }}
                             shouldUseHapticsOnLongPress
                             accessibilityRole={CONST.ROLE.BUTTON}
                             accessibilityLabel={translate('accessibilityHints.viewAttachment')}

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx
@@ -83,12 +83,15 @@ function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersona
 
     return (
         <ShowContextMenuContext.Consumer>
-            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+            {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                 <Text
                     suppressHighlighting
-                    onLongPress={(event) =>
-                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                    }
+                    onLongPress={(event) => {
+                        if (isDisabled) {
+                            return;
+                        }
+                        showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                    }}
                     onPress={(event) => {
                         event.preventDefault();
                         Navigation.navigate(navigationRoute);

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx
@@ -34,14 +34,17 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
     return (
         <View style={isLast ? styles.mt2 : styles.mv2}>
             <ShowContextMenuContext.Consumer>
-                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                     <PressableWithoutFeedback
                         onPress={onPressIn ?? (() => {})}
                         onPressIn={onPressIn}
                         onPressOut={onPressOut}
-                        onLongPress={(event) =>
-                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                        }
+                        onLongPress={(event) => {
+                            if (isDisabled) {
+                                return;
+                            }
+                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                        }}
                         shouldUseHapticsOnLongPress
                         role={CONST.ROLE.PRESENTATION}
                         accessibilityLabel={translate('accessibilityHints.prestyledText')}

diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {AttachmentContext} from '@components/AttachmentContext';
 import MultipleAvatars from '@components/MultipleAvatars';
+import {ShowContextMenuContext} from '@components/ShowContextMenuContext';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -40,6 +41,16 @@ function ChatListItem<TItem extends ListItem>({
 
     const attachmentContextValue = {type: CONST.ATTACHMENT_TYPE.SEARCH};
 
+    const contextValue = {
+        anchor: null,
+        report: undefined,
+        reportNameValuePairs: undefined,
+        action: undefined,
+        transactionThreadReport: undefined,
+        checkIfContextMenuActive: () => {},
+        isDisabled: true,
+    };
+
     const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor;
     const hoveredBackgroundColor = styles.sidebarLinkHover?.backgroundColor ? styles.sidebarLinkHover.backgroundColor : theme.sidebar;
 
@@ -66,42 +77,49 @@ function ChatListItem<TItem extends ListItem>({
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             {(hovered) => (
-                <AttachmentContext.Provider value={attachmentContextValue}>
-                    <MultipleAvatars
-                        icons={icons}
-                        shouldShowTooltip={showTooltip}
-                        secondAvatarStyle={[
-                            StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
-                            isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
-                            hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
-                        ]}
-                    />
-                    <View style={[styles.chatItemRight]}>
-                        <View style={[styles.chatItemMessageHeader]}>
-                            <View style={[styles.flexShrink1, styles.mr1]}>
-                                <TextWithTooltip
-                                    shouldShowTooltip={showTooltip}
-                                    text={reportActionItem.formattedFrom}
-                                    style={[styles.chatItemMessageHeaderSender, isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText, styles.sidebarLinkTextBold, styles.pre]}
-                                />
+                <ShowContextMenuContext.Provider value={contextValue}>
+                    <AttachmentContext.Provider value={attachmentContextValue}>
+                        <MultipleAvatars
+                            icons={icons}
+                            shouldShowTooltip={showTooltip}
+                            secondAvatarStyle={[
+                                StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
+                                isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
+                                hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
+                            ]}
+                        />
+                        <View style={[styles.chatItemRight]}>
+                            <View style={[styles.chatItemMessageHeader]}>
+                                <View style={[styles.flexShrink1, styles.mr1]}>
+                                    <TextWithTooltip
+                                        shouldShowTooltip={showTooltip}
+                                        text={reportActionItem.formattedFrom}
+                                        style={[
+                                            styles.chatItemMessageHeaderSender,
+                                            isFocused ? styles.sidebarLinkActiveText : styles.sidebarLinkText,
+                                            styles.sidebarLinkTextBold,
+                                            styles.pre,
+                                        ]}
+                                    />
+                                </View>
+                                <ReportActionItemDate created={reportActionItem.created ?? ''} />
+                            </View>
+                            <View style={styles.chatItemMessage}>
+                                {reportActionItem.message.map((fragment, index) => (
+                                    <ReportActionItemFragment
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
+                                        fragment={fragment}
+                                        actionName={reportActionItem.actionName}
+                                        source=""
+                                        accountID={from.accountID}
+                                        isFragmentContainingDisplayName={index === 0}
+                                    />
+                                ))}
                             </View>
-                            <ReportActionItemDate created={reportActionItem.created ?? ''} />
-                        </View>
-                        <View style={styles.chatItemMessage}>
-                            {reportActionItem.message.map((fragment, index) => (
-                                <ReportActionItemFragment
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    key={`actionFragment-${reportActionItem.reportActionID}-${index}`}
-                                    fragment={fragment}
-                                    actionName={reportActionItem.actionName}
-                                    source=""
-                                    accountID={from.accountID}
-                                    isFragmentContainingDisplayName={index === 0}
-                                />
-                            ))}
                         </View>
-                    </View>
-                </AttachmentContext.Provider>
+                    </AttachmentContext.Provider>
+                </ShowContextMenuContext.Provider>
             )}
         </BaseListItem>
     );

diff --git a/src/components/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts
@@ -16,6 +16,7 @@ type ShowContextMenuContextProps = {
     action: OnyxEntry<ReportAction>;
     transactionThreadReport?: OnyxEntry<Report>;
     checkIfContextMenuActive: () => void;
+    isDisabled: boolean;
 };
 
 const ShowContextMenuContext = createContext<ShowContextMenuContextProps>({
@@ -25,6 +26,7 @@ const ShowContextMenuContext = createContext<ShowContextMenuContextProps>({
     action: undefined,
     transactionThreadReport: undefined,
     checkIfContextMenuActive: () => {},
+    isDisabled: false,
 });
 
 ShowContextMenuContext.displayName = 'ShowContextMenuContext';

diff --git a/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx b/src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx
@@ -40,17 +40,20 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel}: Video
                 </View>
             )}
             <ShowContextMenuContext.Consumer>
-                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => (
+                {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, isDisabled}) => (
                     <PressableWithoutFeedback
                         style={[styles.videoThumbnailContainer]}
                         accessibilityLabel={accessibilityLabel}
                         accessibilityRole={CONST.ROLE.BUTTON}
                         onPress={onPress}
                         onPressIn={() => DeviceCapabilities.canUseTouchScreen() && ControlSelection.block()}
                         onPressOut={() => ControlSelection.unblock()}
-                        onLongPress={(event) =>
-                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs))
-                        }
+                        onLongPress={(event) => {
+                            if (isDisabled) {
+                                return;
+                            }
+                            showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs));
+                        }}
                         shouldUseHapticsOnLongPress
                     >
                         <View style={[styles.videoThumbnailPlayButton]}>

diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx
@@ -56,6 +56,7 @@ function Confirmation() {
             checkIfContextMenuActive: () => {},
             reportNameValuePairs: undefined,
             anchor: null,
+            isDisabled: false,
         }),
         [report, reportAction],
     );

diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx
@@ -395,6 +395,7 @@ function ReportActionItem({
             action,
             transactionThreadReport,
             checkIfContextMenuActive: toggleContextMenuFromActiveReportAction,
+            isDisabled: false,
         }),
         [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs],
     );