From 4a1b08f29008c64416bf8c91105aa71ede0f5f8c Mon Sep 17 00:00:00 2001 From: daledah Date: Sat, 31 Aug 2024 15:49:30 +0700 Subject: [PATCH 1/5] fix: prevent open context menu on money request --- .../HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx | 11 +++++++---- src/components/ShowContextMenuContext.ts | 2 ++ src/pages/TransactionDuplicate/Confirmation.tsx | 1 + .../home/report/ReportActionItemContentCreated.tsx | 6 ++++-- 4 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx index 14666798e8c..01fb5a7f230 100644 --- 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 ( - {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive}) => ( + {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, canOpenContextMenu}) => ( {})} onPressIn={onPressIn} onPressOut={onPressOut} - onLongPress={(event) => - showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)) - } + onLongPress={(event) => { + if (!canOpenContextMenu) { + 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/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts index b3050f986be..77f9276b2d7 100644 --- a/src/components/ShowContextMenuContext.ts +++ b/src/components/ShowContextMenuContext.ts @@ -16,6 +16,7 @@ type ShowContextMenuContextProps = { action: OnyxEntry; transactionThreadReport?: OnyxEntry; checkIfContextMenuActive: () => void; + canOpenContextMenu?: boolean; }; const ShowContextMenuContext = createContext({ @@ -25,6 +26,7 @@ const ShowContextMenuContext = createContext({ action: undefined, transactionThreadReport: undefined, checkIfContextMenuActive: () => {}, + canOpenContextMenu: true, }); ShowContextMenuContext.displayName = 'ShowContextMenuContext'; diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index 96b32006675..a708734c5e4 100644 --- a/src/pages/TransactionDuplicate/Confirmation.tsx +++ b/src/pages/TransactionDuplicate/Confirmation.tsx @@ -56,6 +56,7 @@ function Confirmation() { checkIfContextMenuActive: () => {}, reportNameValuePairs: undefined, anchor: null, + canOpenContextMenu: false, }), [report, reportAction], ); diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 0c052fcb17d..9fc05ab9503 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -74,6 +74,8 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans [shouldHideThreadDividerLine, report.reportID, styles.reportHorizontalRule], ); + const contextMenuValue = useMemo(() => ({...contextValue, canOpenContextMenu: false}), [contextValue]); + if (ReportActionsUtils.isTransactionThread(parentReportAction)) { const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction); @@ -104,7 +106,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans } return ( - + - + Date: Fri, 6 Sep 2024 16:21:58 +0700 Subject: [PATCH 2/5] fix: add Context to split bill details --- .../MoneyRequestConfirmationListFooter.tsx | 50 ++++++++++++------- 1 file changed, 33 insertions(+), 17 deletions(-) diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx index 623348a4c7a..c00b5fa7627 100644 --- a/src/components/MoneyRequestConfirmationListFooter.tsx +++ b/src/components/MoneyRequestConfirmationListFooter.tsx @@ -34,6 +34,7 @@ import PDFThumbnail from './PDFThumbnail'; import PressableWithoutFocus from './Pressable/PressableWithoutFocus'; import ReceiptEmptyState from './ReceiptEmptyState'; import ReceiptImage from './ReceiptImage'; +import {ShowContextMenuContext} from './ShowContextMenuContext'; import ShowMoreButton from './ShowMoreButton'; type MoneyRequestConfirmationListFooterProps = { @@ -266,6 +267,19 @@ function MoneyRequestConfirmationListFooter({ const resolvedThumbnail = isLocalFile ? receiptThumbnail : tryResolveUrlFromApiRoot(receiptThumbnail ?? ''); const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? ''); + const contextValue = useMemo( + () => ({ + anchor: null, + report: undefined, + reportNameValuePairs: undefined, + action: undefined, + transactionThreadReport: undefined, + checkIfContextMenuActive: () => {}, + canOpenContextMenu: false, + }), + [], + ); + // An intermediate structure that helps us classify the fields as "primary" and "supplementary". // The primary fields are always shown to the user, while an extra action is needed to reveal the supplementary ones. const classifiedFields = [ @@ -296,23 +310,25 @@ function MoneyRequestConfirmationListFooter({ }, { item: ( - { - Navigation.navigate( - ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams(), reportActionID), - ); - }} - style={[styles.moneyRequestMenuItem]} - titleStyle={styles.flex1} - disabled={didConfirm} - interactive={!isReadOnly} - numberOfLinesTitle={2} - /> + + { + Navigation.navigate( + ROUTES.MONEY_REQUEST_STEP_DESCRIPTION.getRoute(action, iouType, transactionID, reportID, Navigation.getActiveRouteWithoutParams(), reportActionID), + ); + }} + style={[styles.moneyRequestMenuItem]} + titleStyle={styles.flex1} + disabled={didConfirm} + interactive={!isReadOnly} + numberOfLinesTitle={2} + /> + ), shouldShow: true, isSupplementary: false, From 8822d2d622f8d446743ff9e7e8d106b363108ff9 Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 10 Sep 2024 15:16:59 +0700 Subject: [PATCH 3/5] refactor: change default shouldOpenContextMenu to true --- src/components/MoneyRequestConfirmationListFooter.tsx | 2 +- src/components/ShowContextMenuContext.ts | 4 ++-- src/pages/TransactionDuplicate/Confirmation.tsx | 1 - src/pages/home/report/ReportActionItem.tsx | 1 + src/pages/home/report/ReportActionItemContentCreated.tsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx index 7767a2b8b38..9bad7359f96 100644 --- a/src/components/MoneyRequestConfirmationListFooter.tsx +++ b/src/components/MoneyRequestConfirmationListFooter.tsx @@ -277,7 +277,7 @@ function MoneyRequestConfirmationListFooter({ action: undefined, transactionThreadReport: undefined, checkIfContextMenuActive: () => {}, - canOpenContextMenu: false, + shouldOpenContextMenu: false, }), [], ); diff --git a/src/components/ShowContextMenuContext.ts b/src/components/ShowContextMenuContext.ts index 77f9276b2d7..9698b07d124 100644 --- a/src/components/ShowContextMenuContext.ts +++ b/src/components/ShowContextMenuContext.ts @@ -16,7 +16,7 @@ type ShowContextMenuContextProps = { action: OnyxEntry; transactionThreadReport?: OnyxEntry; checkIfContextMenuActive: () => void; - canOpenContextMenu?: boolean; + shouldOpenContextMenu?: boolean; }; const ShowContextMenuContext = createContext({ @@ -26,7 +26,7 @@ const ShowContextMenuContext = createContext({ action: undefined, transactionThreadReport: undefined, checkIfContextMenuActive: () => {}, - canOpenContextMenu: true, + shouldOpenContextMenu: false, }); ShowContextMenuContext.displayName = 'ShowContextMenuContext'; diff --git a/src/pages/TransactionDuplicate/Confirmation.tsx b/src/pages/TransactionDuplicate/Confirmation.tsx index a708734c5e4..96b32006675 100644 --- a/src/pages/TransactionDuplicate/Confirmation.tsx +++ b/src/pages/TransactionDuplicate/Confirmation.tsx @@ -56,7 +56,6 @@ function Confirmation() { checkIfContextMenuActive: () => {}, reportNameValuePairs: undefined, anchor: null, - canOpenContextMenu: false, }), [report, reportAction], ); diff --git a/src/pages/home/report/ReportActionItem.tsx b/src/pages/home/report/ReportActionItem.tsx index 1bbaebc274d..04c93eff087 100644 --- a/src/pages/home/report/ReportActionItem.tsx +++ b/src/pages/home/report/ReportActionItem.tsx @@ -395,6 +395,7 @@ function ReportActionItem({ action, transactionThreadReport, checkIfContextMenuActive: toggleContextMenuFromActiveReportAction, + shouldOpenContextMenu: true, }), [report, action, toggleContextMenuFromActiveReportAction, transactionThreadReport, reportNameValuePairs], ); diff --git a/src/pages/home/report/ReportActionItemContentCreated.tsx b/src/pages/home/report/ReportActionItemContentCreated.tsx index 9fc05ab9503..7a66b2fafa2 100644 --- a/src/pages/home/report/ReportActionItemContentCreated.tsx +++ b/src/pages/home/report/ReportActionItemContentCreated.tsx @@ -74,7 +74,7 @@ function ReportActionItemContentCreated({contextValue, parentReportAction, trans [shouldHideThreadDividerLine, report.reportID, styles.reportHorizontalRule], ); - const contextMenuValue = useMemo(() => ({...contextValue, canOpenContextMenu: false}), [contextValue]); + const contextMenuValue = useMemo(() => ({...contextValue, shouldOpenContextMenu: false}), [contextValue]); if (ReportActionsUtils.isTransactionThread(parentReportAction)) { const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction); From 2206063887a48db9e83f417de921101ff66a8558 Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 10 Sep 2024 15:18:17 +0700 Subject: [PATCH 4/5] fix: correct param name --- .../HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx index 01fb5a7f230..c1bab99d593 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx @@ -34,13 +34,13 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d return ( - {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, canOpenContextMenu}) => ( + {({anchor, report, reportNameValuePairs, action, checkIfContextMenuActive, shouldOpenContextMenu}) => ( {})} onPressIn={onPressIn} onPressOut={onPressOut} onLongPress={(event) => { - if (!canOpenContextMenu) { + if (!shouldOpenContextMenu) { return; } showContextMenuForReport(event, anchor, report?.reportID ?? '-1', action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report, reportNameValuePairs)); From 92411c39ecdde05b095efc070738d0f17b4933eb Mon Sep 17 00:00:00 2001 From: daledah Date: Tue, 10 Sep 2024 23:31:31 +0700 Subject: [PATCH 5/5] fix: remove unnecessary param --- src/components/MoneyRequestConfirmationListFooter.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestConfirmationListFooter.tsx b/src/components/MoneyRequestConfirmationListFooter.tsx index 9bad7359f96..a56a8710db3 100644 --- a/src/components/MoneyRequestConfirmationListFooter.tsx +++ b/src/components/MoneyRequestConfirmationListFooter.tsx @@ -269,7 +269,7 @@ function MoneyRequestConfirmationListFooter({ const resolvedThumbnail = isLocalFile ? receiptThumbnail : tryResolveUrlFromApiRoot(receiptThumbnail ?? ''); const resolvedReceiptImage = isLocalFile ? receiptImage : tryResolveUrlFromApiRoot(receiptImage ?? ''); - const contextValue = useMemo( + const contextMenuContextValue = useMemo( () => ({ anchor: null, report: undefined, @@ -277,7 +277,6 @@ function MoneyRequestConfirmationListFooter({ action: undefined, transactionThreadReport: undefined, checkIfContextMenuActive: () => {}, - shouldOpenContextMenu: false, }), [], ); @@ -314,7 +313,7 @@ function MoneyRequestConfirmationListFooter({ }, { item: ( - +