From 38fda52dfcc3f91f12cb34f557b07e2db096b3c8 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 7 Nov 2024 12:05:49 +0800 Subject: [PATCH 1/3] Fix: Inconsistency in displaying Search icon when returning to expenses opened from Search --- src/components/MoneyReportHeader.tsx | 2 +- src/components/MoneyRequestHeader.tsx | 2 +- src/pages/home/HeaderView.tsx | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 3caf7a15d50e..8bf07e2d3a02 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -177,7 +177,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false); const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const confirmPayment = useCallback( (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => { diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 2dde3e9e2aa9..93ac363cff62 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -66,7 +66,7 @@ function MoneyRequestHeader({report, parentReportAction, policy, onBackButtonPre const reportID = report?.reportID; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const hasAllPendingRTERViolations = TransactionUtils.allHavePendingRTERViolation([transaction?.transactionID ?? '-1']); diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 71051b0986c0..465548ddc06a 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; @@ -64,6 +65,7 @@ const fallbackIcon: IconType = { }; function HeaderView({report, parentReportAction, reportID, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) { + const {isSmallScreenWidth} = useResponsiveLayout(); const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -145,7 +147,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isLoading = !report?.reportID || !title; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const isChatUsedForOnboarding = ReportUtils.isChatUsedForOnboarding(report); return ( From 0a493646c1484d3ff4405410ff94a2aa515d40f8 Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 7 Nov 2024 12:43:49 +0800 Subject: [PATCH 2/3] lint fix --- src/pages/home/HeaderView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 465548ddc06a..41cc089ac243 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -21,7 +21,6 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; @@ -65,7 +64,6 @@ const fallbackIcon: IconType = { }; function HeaderView({report, parentReportAction, reportID, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) { - const {isSmallScreenWidth} = useResponsiveLayout(); const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -147,7 +145,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isLoading = !report?.reportID || !title; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; + const shouldDisplaySearchRouter = !isReportInRHP || shouldUseNarrowLayout; const isChatUsedForOnboarding = ReportUtils.isChatUsedForOnboarding(report); return ( From 7f51fdc7abac4082f13be7e883ad3f711cf0830b Mon Sep 17 00:00:00 2001 From: I Nyoman Jyotisa Date: Thu, 7 Nov 2024 13:05:24 +0800 Subject: [PATCH 3/3] minor fix --- src/pages/home/HeaderView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 41cc089ac243..f3a98089b2b1 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -21,6 +21,7 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import usePolicy from '@hooks/usePolicy'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import isReportOpenInRHP from '@libs/Navigation/isReportOpenInRHP'; @@ -64,6 +65,8 @@ const fallbackIcon: IconType = { }; function HeaderView({report, parentReportAction, reportID, onNavigationMenuButtonClicked, shouldUseNarrowLayout = false}: HeaderViewProps) { + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth + const {isSmallScreenWidth} = useResponsiveLayout(); const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing @@ -145,7 +148,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isLoading = !report?.reportID || !title; const isReportInRHP = isReportOpenInRHP(navigationRef?.getRootState()); - const shouldDisplaySearchRouter = !isReportInRHP || shouldUseNarrowLayout; + const shouldDisplaySearchRouter = !isReportInRHP || isSmallScreenWidth; const isChatUsedForOnboarding = ReportUtils.isChatUsedForOnboarding(report); return (