From 796379f4beeb2baa90d4721d70fe1c178b83541a Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 19 Apr 2024 12:20:03 +0200 Subject: [PATCH 01/19] Add ReportScreen to RHP --- src/ROUTES.ts | 5 +++++ src/SCREENS.ts | 2 ++ src/components/MoneyReportHeader.tsx | 16 +++++++++++++-- src/components/MoneyRequestHeader.tsx | 16 +++++++++++++-- .../SelectionList/BaseSelectionList.tsx | 5 ++++- .../ModalStackNavigators/index.tsx | 7 ++++++- .../Navigators/RightModalNavigator.tsx | 4 ++++ src/libs/Navigation/getTopmostRouteName.ts | 12 +++++++++++ .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 1 + src/libs/Navigation/linkingConfig/config.ts | 5 +++++ src/libs/Navigation/types.ts | 9 +++++++++ src/pages/home/HeaderView.tsx | 20 ++++++++++++++++--- src/pages/home/ReportScreen.tsx | 13 +++++++++--- 13 files changed, 103 insertions(+), 12 deletions(-) create mode 100644 src/libs/Navigation/getTopmostRouteName.ts diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 46f2e2fef049..46e149fdb323 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -28,6 +28,11 @@ const ROUTES = { getRoute: (query: string) => `search/${query}` as const, }, + SEARCH_REPORT: { + route: '/search/:query/view/:reportID', + getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const, + }, + // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated CONCIERGE: 'concierge', FLAG_COMMENT: { diff --git a/src/SCREENS.ts b/src/SCREENS.ts index acbb4b507b65..1d157be8c775 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -25,6 +25,7 @@ const SCREENS = { WORKSPACES_CENTRAL_PANE: 'WorkspacesCentralPane', SEARCH: { CENTRAL_PANE: 'Search_Central_Pane', + REPORT: 'Search_Report', BOTTOM_TAB: 'Search_Bottom_Tab', }, SETTINGS: { @@ -131,6 +132,7 @@ const SCREENS = { ROOM_INVITE: 'RoomInvite', REFERRAL: 'Referral', PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold', + SEARCH_REPORT: 'Search_Report', }, ONBOARDING_MODAL: { ONBOARDING: 'Onboarding', diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 56dc6bf0075d..8d2936229158 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -52,9 +52,21 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { /** The reportID of the transaction thread report associated with this current report, if any */ // eslint-disable-next-line react/no-unused-prop-types transactionThreadReportID?: string | null; + + /** Whether we should show the back button on the header */ + shouldShowBackButton?: boolean; }; -function MoneyReportHeader({session, policy, chatReport, nextStep, report: moneyRequestReport, transactionThreadReport, reportActions}: MoneyReportHeaderProps) { +function MoneyReportHeader({ + session, + policy, + chatReport, + nextStep, + report: moneyRequestReport, + transactionThreadReport, + reportActions, + shouldShowBackButton = false, +}: MoneyReportHeaderProps) { const styles = useThemeStyles(); const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false); const {translate} = useLocalize(); @@ -185,7 +197,7 @@ function MoneyReportHeader({session, policy, chatReport, nextStep, report: money shouldShowPinButton={false} report={moneyRequestReport} policy={policy} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldShowBackButton || isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(undefined, false, true)} // Shows border if no buttons or next steps are showing below the header shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextStep && !isSmallScreenWidth)} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index da087c57fcba..59cb3ae7232d 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -50,9 +50,21 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & { /** The report action the transaction is tied to from the parent report */ parentReportAction: OnyxEntry; + + /** Whether we should show the back button on the header */ + shouldShowBackButton?: boolean; }; -function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, shownHoldUseExplanation = false, policy}: MoneyRequestHeaderProps) { +function MoneyRequestHeader({ + session, + parentReport, + report, + parentReportAction, + transaction, + shownHoldUseExplanation = false, + policy, + shouldShowBackButton = false, +}: MoneyRequestHeaderProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false); @@ -180,7 +192,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction, ownerAccountID: parentReport?.ownerAccountID, }} policy={policy} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldShowBackButton || isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(undefined, false, true)} /> {isPending && ( diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 9ab89aa73f86..82565bbe7e96 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -20,6 +20,7 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; import useThemeStyles from '@hooks/useThemeStyles'; import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset'; import Log from '@libs/Log'; @@ -94,6 +95,8 @@ function BaseSelectionList( const itemFocusTimeoutRef = useRef(null); const [currentPage, setCurrentPage] = useState(1); const isTextInputFocusedRef = useRef(false); + const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); + console.log('didScreemTransitionEnd', didScreenTransitionEnd); const incrementPage = () => setCurrentPage((prev) => prev + 1); @@ -356,7 +359,7 @@ function BaseSelectionList( keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} onFocus={() => setFocusedIndex(normalizedIndex)} - shouldSyncFocus={!isTextInputFocusedRef.current} + shouldSyncFocus={!isTextInputFocusedRef.current && didScreenTransitionEnd} /> ); }; diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index a596acf0a3ac..05f041312d61 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -23,6 +23,7 @@ import type { ReportSettingsNavigatorParamList, RoomInviteNavigatorParamList, RoomMembersNavigatorParamList, + SearchReportParamList, SettingsNavigatorParamList, SignInNavigatorParamList, SplitDetailsNavigatorParamList, @@ -312,7 +313,6 @@ const PrivateNotesModalStackNavigator = createModalStackNavigator({ [SCREENS.SIGN_IN_ROOT]: () => require('../../../../pages/signin/SignInModal').default as React.ComponentType, }); - const ReferralModalStackNavigator = createModalStackNavigator({ [SCREENS.REFERRAL_DETAILS]: () => require('../../../../pages/ReferralDetailsPage').default as React.ComponentType, }); @@ -321,6 +321,10 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({ [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require('../../../../pages/ProcessMoneyRequestHoldPage').default as React.ComponentType, }); +const SearchReportModalStackNavigator = createModalStackNavigator({ + [SCREENS.SEARCH.REPORT]: () => require('../../../../pages/home/ReportScreen').default as React.ComponentType, +}); + export { AddPersonalBankAccountModalStackNavigator, DetailsModalStackNavigator, @@ -351,4 +355,5 @@ export { WalletStatementStackNavigator, ProcessMoneyRequestHoldStackNavigator, WorkspaceSettingsModalStackNavigator, + SearchReportModalStackNavigator, }; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index c421bdc82028..3d3fb569f69f 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -137,6 +137,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { name="ProcessMoneyRequestHold" component={ModalStackNavigators.ProcessMoneyRequestHoldStackNavigator} /> + diff --git a/src/libs/Navigation/getTopmostRouteName.ts b/src/libs/Navigation/getTopmostRouteName.ts new file mode 100644 index 000000000000..7ae3afaf2cc9 --- /dev/null +++ b/src/libs/Navigation/getTopmostRouteName.ts @@ -0,0 +1,12 @@ +import type {NavigationState, PartialState} from '@react-navigation/native'; + +// Get the name of topmost route in the navigation stack. +function getTopmostRouteName(state: NavigationState | PartialState): string | undefined { + if (!state) { + return; + } + + return state.routes.at(-1)?.name; +} + +export default getTopmostRouteName; diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 3407656c5e94..1db8738bc9a5 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -38,6 +38,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS], [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER], [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE], + [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT], }; export default CENTRAL_PANE_TO_RHP_MAPPING; diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 05b7190fa181..73f5146f8c02 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -638,6 +638,11 @@ const config: LinkingOptions['config'] = { [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: ROUTES.PROCESS_MONEY_REQUEST_HOLD, }, }, + [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: { + screens: { + [SCREENS.SEARCH.REPORT]: ROUTES.SEARCH_REPORT.route, + }, + }, }, }, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 54eb5f4663bc..5e288090bb1c 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -648,6 +648,7 @@ type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.PROCESS_MONEY_REQUEST_HOLD]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.REFERRAL]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.PRIVATE_NOTES]: NavigatorScreenParams; + [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams; }; type WorkspacesCentralPaneNavigatorParamList = { @@ -794,6 +795,13 @@ type AuthScreensParamList = SharedScreensParamList & { }; }; +type SearchReportParamList = { + [SCREENS.SEARCH.REPORT]: { + query: string; + reportID: string; + }; +}; + type RootStackParamList = PublicScreensParamList & AuthScreensParamList & ChatFinderNavigatorParamList; type BottomTabName = keyof BottomTabNavigatorParamList; @@ -859,4 +867,5 @@ export type { WelcomeVideoModalNavigatorParamList, WorkspaceSwitcherNavigatorParamList, WorkspacesCentralPaneNavigatorParamList, + SearchReportParamList, }; diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 7f2bdbf9ed1e..ae594e02bfdd 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -65,9 +65,23 @@ type HeaderViewProps = HeaderViewOnyxProps & { /** The reportID of the current report */ reportID: string; + + /** Whether we should show the back button on the header */ + shouldShowBackButton?: boolean; }; -function HeaderView({report, personalDetails, parentReport, parentReportAction, policy, session, reportID, guideCalendarLink, onNavigationMenuButtonClicked}: HeaderViewProps) { +function HeaderView({ + report, + personalDetails, + parentReport, + parentReportAction, + policy, + session, + reportID, + guideCalendarLink, + onNavigationMenuButtonClicked, + shouldShowBackButton = false, +}: HeaderViewProps) { const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); const {translate} = useLocalize(); @@ -211,12 +225,12 @@ function HeaderView({report, personalDetails, parentReport, parentReportAction, dataSet={{dragArea: true}} > - + {isLoading ? ( ) : ( <> - {isSmallScreenWidth && ( + {(isSmallScreenWidth || shouldShowBackButton) && ( (null); const reactionListRef = useRef(null); const {isOffline} = useNetwork(); + const activeRoute = useNavigationState(getTopmostRouteName); + const isReportOpenedInRHP = activeRoute === SCREENS.SEARCH.REPORT; + /** * Create a lightweight Report so as to keep the re-rendering as light as possible by * passing in only the required props. @@ -324,6 +328,7 @@ function ReportScreen({ onNavigationMenuButtonClicked={goBack} report={report} parentReportAction={parentReportAction} + shouldShowBackButton={isReportOpenedInRHP} /> ); @@ -333,6 +338,7 @@ function ReportScreen({ report={report} policy={policy} parentReportAction={parentReportAction} + shouldShowBackButton={isReportOpenedInRHP} /> ); } @@ -356,6 +362,7 @@ function ReportScreen({ policy={policy} transactionThreadReportID={transactionThreadReportID} reportActions={reportActions} + shouldShowBackButton={isReportOpenedInRHP} /> ); } @@ -369,7 +376,7 @@ function ReportScreen({ return reportIDFromRoute !== '' && !!report.reportID && !isTransitioning; }, [report, reportIDFromRoute]); - const isLoading = !reportIDFromRoute || !isSidebarLoaded || PersonalDetailsUtils.isPersonalDetailsEmpty(); + const isLoading = !reportIDFromRoute || (!isSidebarLoaded && !isReportOpenedInRHP) || PersonalDetailsUtils.isPersonalDetailsEmpty(); const shouldShowSkeleton = !isLinkedMessageAvailable && (isLinkingToMessage || From 997e19e610b4682a74a132283efc29d33eae9375 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 19 Apr 2024 13:05:26 +0200 Subject: [PATCH 02/19] Add shouldUseNarrowLayout prop to report header components --- src/components/MoneyReportHeader.tsx | 8 ++++---- src/components/MoneyRequestHeader.tsx | 8 ++++---- .../SelectionList/BaseSelectionList.tsx | 5 +---- src/pages/home/HeaderView.tsx | 20 ++++++++++--------- src/pages/home/ReportScreen.tsx | 13 ++++++------ 5 files changed, 27 insertions(+), 27 deletions(-) diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 8d2936229158..278e34244346 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -53,8 +53,8 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { // eslint-disable-next-line react/no-unused-prop-types transactionThreadReportID?: string | null; - /** Whether we should show the back button on the header */ - shouldShowBackButton?: boolean; + /** Whether we should display the header as in narrow layout */ + shouldUseNarrowLayout?: boolean; }; function MoneyReportHeader({ @@ -65,7 +65,7 @@ function MoneyReportHeader({ report: moneyRequestReport, transactionThreadReport, reportActions, - shouldShowBackButton = false, + shouldUseNarrowLayout = false, }: MoneyReportHeaderProps) { const styles = useThemeStyles(); const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false); @@ -197,7 +197,7 @@ function MoneyReportHeader({ shouldShowPinButton={false} report={moneyRequestReport} policy={policy} - shouldShowBackButton={shouldShowBackButton || isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout || isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(undefined, false, true)} // Shows border if no buttons or next steps are showing below the header shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextStep && !isSmallScreenWidth)} diff --git a/src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.tsx index 59cb3ae7232d..9b37d57cb4cf 100644 --- a/src/components/MoneyRequestHeader.tsx +++ b/src/components/MoneyRequestHeader.tsx @@ -51,8 +51,8 @@ type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & { /** The report action the transaction is tied to from the parent report */ parentReportAction: OnyxEntry; - /** Whether we should show the back button on the header */ - shouldShowBackButton?: boolean; + /** Whether we should display the header as in narrow layout */ + shouldUseNarrowLayout?: boolean; }; function MoneyRequestHeader({ @@ -63,7 +63,7 @@ function MoneyRequestHeader({ transaction, shownHoldUseExplanation = false, policy, - shouldShowBackButton = false, + shouldUseNarrowLayout = false, }: MoneyRequestHeaderProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -192,7 +192,7 @@ function MoneyRequestHeader({ ownerAccountID: parentReport?.ownerAccountID, }} policy={policy} - shouldShowBackButton={shouldShowBackButton || isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout || isSmallScreenWidth} onBackButtonPress={() => Navigation.goBack(undefined, false, true)} /> {isPending && ( diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 82565bbe7e96..9ab89aa73f86 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -20,7 +20,6 @@ import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; -import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; import useThemeStyles from '@hooks/useThemeStyles'; import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset'; import Log from '@libs/Log'; @@ -95,8 +94,6 @@ function BaseSelectionList( const itemFocusTimeoutRef = useRef(null); const [currentPage, setCurrentPage] = useState(1); const isTextInputFocusedRef = useRef(false); - const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); - console.log('didScreemTransitionEnd', didScreenTransitionEnd); const incrementPage = () => setCurrentPage((prev) => prev + 1); @@ -359,7 +356,7 @@ function BaseSelectionList( keyForList={item.keyForList ?? ''} isMultilineSupported={isRowMultilineSupported} onFocus={() => setFocusedIndex(normalizedIndex)} - shouldSyncFocus={!isTextInputFocusedRef.current && didScreenTransitionEnd} + shouldSyncFocus={!isTextInputFocusedRef.current} /> ); }; diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index ae594e02bfdd..c932730c2bae 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -66,8 +66,8 @@ type HeaderViewProps = HeaderViewOnyxProps & { /** The reportID of the current report */ reportID: string; - /** Whether we should show the back button on the header */ - shouldShowBackButton?: boolean; + /** Whether we should display the header as in narrow layout */ + shouldUseNarrowLayout?: boolean; }; function HeaderView({ @@ -80,7 +80,7 @@ function HeaderView({ reportID, guideCalendarLink, onNavigationMenuButtonClicked, - shouldShowBackButton = false, + shouldUseNarrowLayout = false, }: HeaderViewProps) { const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); @@ -214,7 +214,7 @@ function HeaderView({ const defaultSubscriptSize = ReportUtils.isExpenseRequest(report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; const icons = ReportUtils.getIcons(reportHeaderData, personalDetails); const brickRoadIndicator = ReportUtils.hasReportNameError(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; - const shouldShowBorderBottom = !isTaskReport || !isSmallScreenWidth; + const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout; const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); const isLoading = !report.reportID || !title; @@ -224,13 +224,13 @@ function HeaderView({ style={[shouldShowBorderBottom && styles.borderBottom]} dataSet={{dragArea: true}} > - - + + {isLoading ? ( ) : ( <> - {(isSmallScreenWidth || shouldShowBackButton) && ( + {(isSmallScreenWidth || shouldUseNarrowLayout) && ( - {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && } - {canJoin && !isSmallScreenWidth && joinButton} + {isTaskReport && !(isSmallScreenWidth || shouldUseNarrowLayout) && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( + + )} + {canJoin && !(isSmallScreenWidth || shouldUseNarrowLayout) && joinButton} {shouldShowThreeDotsButton && ( ); @@ -338,7 +339,7 @@ function ReportScreen({ report={report} policy={policy} parentReportAction={parentReportAction} - shouldShowBackButton={isReportOpenedInRHP} + shouldUseNarrowLayout={shouldUseNarrowLayout} /> ); } @@ -362,7 +363,7 @@ function ReportScreen({ policy={policy} transactionThreadReportID={transactionThreadReportID} reportActions={reportActions} - shouldShowBackButton={isReportOpenedInRHP} + shouldUseNarrowLayout={shouldUseNarrowLayout} /> ); } @@ -481,7 +482,7 @@ function ReportScreen({ // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates useEffect(() => { - if (!isSmallScreenWidth || !isFocused || prevIsFocused || !ReportUtils.isChatThread(report) || report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) { + if (!shouldUseNarrowLayout || !isFocused || prevIsFocused || !ReportUtils.isChatThread(report) || report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) { return; } Report.openReport(report.reportID); @@ -646,7 +647,7 @@ function ReportScreen({ @@ -657,7 +658,7 @@ function ReportScreen({ needsOffscreenAlphaCompositing > {headerView} - {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( + {ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( From 2243bb591dd3c580f13e86e49759c2d7469de468 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 19 Apr 2024 15:44:20 +0200 Subject: [PATCH 03/19] Adjust position of PopoverMenu in ReportScreen displayed in RHP --- .../AttachmentPickerWithMenuItems.tsx | 11 ++++++++--- src/styles/index.ts | 4 ++-- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx index 1294d2ca8aea..8bb00006f03c 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx @@ -1,4 +1,4 @@ -import {useIsFocused} from '@react-navigation/native'; +import {useIsFocused, useNavigationState} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import type {OnyxEntry} from 'react-native-onyx'; @@ -18,6 +18,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; +import getTopmostRouteName from '@libs/Navigation/getTopmostRouteName'; import * as ReportUtils from '@libs/ReportUtils'; import * as IOU from '@userActions/IOU'; import * as Report from '@userActions/Report'; @@ -25,6 +26,7 @@ import * as Task from '@userActions/Task'; import type {IOUType} from '@src/CONST'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; type MoneyRequestOptions = Record; @@ -115,8 +117,11 @@ function AttachmentPickerWithMenuItems({ const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const {windowHeight} = useWindowDimensions(); + const {isSmallScreenWidth, windowHeight, windowWidth} = useWindowDimensions(); const {canUseTrackExpense} = usePermissions(); + const activeRoute = useNavigationState(getTopmostRouteName); + const isReportOpenedInRHP = activeRoute === SCREENS.SEARCH.REPORT; + const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenedInRHP; /** * Returns the list of IOU Options @@ -302,7 +307,7 @@ function AttachmentPickerWithMenuItems({ triggerAttachmentPicker(); } }} - anchorPosition={styles.createMenuPositionReportActionCompose(windowHeight)} + anchorPosition={styles.createMenuPositionReportActionCompose(shouldUseNarrowLayout, windowHeight, windowWidth)} anchorAlignment={{horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT, vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM}} menuItems={menuItems} withoutOverlay diff --git a/src/styles/index.ts b/src/styles/index.ts index 537038d9f2e1..da39235b510b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1622,9 +1622,9 @@ const styles = (theme: ThemeColors) => ...getPopOverVerticalOffset(202 + 40), } satisfies AnchorPosition), - createMenuPositionReportActionCompose: (windowHeight: number) => + createMenuPositionReportActionCompose: (shouldUseNarrowLayout: boolean, windowHeight: number, windowWidth: number) => ({ - horizontal: 18 + variables.sideBarWidth, + horizontal: shouldUseNarrowLayout ? windowWidth - (variables.sideBarWidth - 18) : 18 + variables.sideBarWidth, vertical: windowHeight - CONST.MENU_POSITION_REPORT_ACTION_COMPOSE_BOTTOM, } satisfies AnchorPosition), From 8650c30c0679bf64d67f284232956d7da78c6934 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 23 Apr 2024 10:19:51 +0200 Subject: [PATCH 04/19] Add useIsNarrowLayout hook --- src/components/MoneyReportHeader.tsx | 22 +++++++++++----------- src/components/MoneyRequestHeader.tsx | 14 +++++++------- src/hooks/useIsNarrowLayout.ts | 12 ++++++++++++ src/hooks/useThumbnailDimensions.ts | 6 +++--- src/pages/home/HeaderView.tsx | 22 ++++++++++------------ src/pages/home/ReportScreen.tsx | 14 +++++++------- 6 files changed, 50 insertions(+), 40 deletions(-) create mode 100644 src/hooks/useIsNarrowLayout.ts diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx index 278e34244346..1832ea7a9db0 100644 --- a/src/components/MoneyReportHeader.tsx +++ b/src/components/MoneyReportHeader.tsx @@ -54,7 +54,7 @@ type MoneyReportHeaderProps = MoneyReportHeaderOnyxProps & { transactionThreadReportID?: string | null; /** Whether we should display the header as in narrow layout */ - shouldUseNarrowLayout?: boolean; + isNarrowLayout?: boolean; }; function MoneyReportHeader({ @@ -65,12 +65,12 @@ function MoneyReportHeader({ report: moneyRequestReport, transactionThreadReport, reportActions, - shouldUseNarrowLayout = false, + isNarrowLayout = false, }: MoneyReportHeaderProps) { const styles = useThemeStyles(); const [isDeleteRequestModalVisible, setIsDeleteRequestModalVisible] = useState(false); const {translate} = useLocalize(); - const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); + const {windowWidth} = useWindowDimensions(); const {reimbursableSpend} = ReportUtils.getMoneyRequestSpendBreakdown(moneyRequestReport); const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const requestParentReportAction = useMemo(() => { @@ -120,7 +120,7 @@ function MoneyReportHeader({ const formattedAmount = CurrencyUtils.convertToDisplayString(reimbursableSpend, moneyRequestReport.currency); const [nonHeldAmount, fullAmount] = ReportUtils.getNonHeldAndFullAmount(moneyRequestReport, policy); const displayedAmount = ReportUtils.hasHeldExpenses(moneyRequestReport.reportID) && canAllowSettlement ? nonHeldAmount : formattedAmount; - const isMoreContentShown = shouldShowNextStep || (shouldShowAnyButton && isSmallScreenWidth); + const isMoreContentShown = shouldShowNextStep || (shouldShowAnyButton && isNarrowLayout); const confirmPayment = (type?: PaymentMethodType | undefined) => { if (!type) { @@ -197,15 +197,15 @@ function MoneyReportHeader({ shouldShowPinButton={false} report={moneyRequestReport} policy={policy} - shouldShowBackButton={shouldUseNarrowLayout || isSmallScreenWidth} + shouldShowBackButton={isNarrowLayout} onBackButtonPress={() => Navigation.goBack(undefined, false, true)} // Shows border if no buttons or next steps are showing below the header - shouldShowBorderBottom={!(shouldShowAnyButton && isSmallScreenWidth) && !(shouldShowNextStep && !isSmallScreenWidth)} + shouldShowBorderBottom={!(shouldShowAnyButton && isNarrowLayout) && !(shouldShowNextStep && !isNarrowLayout)} shouldShowThreeDotsButton threeDotsMenuItems={threeDotsMenuItems} threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)} > - {shouldShowSettlementButton && !isSmallScreenWidth && ( + {shouldShowSettlementButton && !isNarrowLayout && ( )} - {shouldShowSubmitButton && !isSmallScreenWidth && ( + {shouldShowSubmitButton && !isNarrowLayout && (