From 379ac08067a73e97d950c6e92276b8d2420700ff Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 22 Nov 2023 10:15:05 +0100 Subject: [PATCH 01/24] Add LeftModalNavigator --- src/NAVIGATORS.ts | 1 + .../Navigation/AppNavigator/AuthScreens.tsx | 7 +++ .../Navigators/LeftModalNavigator.js | 43 +++++++++++++++++++ .../Navigators/RightModalNavigator.tsx | 4 -- .../getRootNavigatorScreenOptions.ts | 16 +++++++ src/libs/Navigation/Navigation.ts | 1 + src/libs/Navigation/linkingConfig.ts | 15 ++++--- src/styles/styles.ts | 8 +++- 8 files changed, 84 insertions(+), 11 deletions(-) create mode 100644 src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.js diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts index a3a041e65684..c68a950d3501 100644 --- a/src/NAVIGATORS.ts +++ b/src/NAVIGATORS.ts @@ -4,6 +4,7 @@ * */ export default { CENTRAL_PANE_NAVIGATOR: 'CentralPaneNavigator', + LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator', RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator', FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator', } as const; diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 4fbc0078689a..563a4ca20803 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -34,6 +34,7 @@ import createCustomStackNavigator from './createCustomStackNavigator'; import defaultScreenOptions from './defaultScreenOptions'; import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; +import LeftModalNavigator from './Navigators/LeftModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; type AuthScreensProps = { @@ -317,6 +318,12 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom component={RightModalNavigator} listeners={modalScreenListeners} /> + + {!isSmallScreenWidth && } + + + + + + + ); +} + +LeftModalNavigator.propTypes = propTypes; +LeftModalNavigator.displayName = 'RightModalNavigator'; + +export default LeftModalNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 75358648be59..8e1c9c60cacd 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -32,10 +32,6 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { name="NewChat" component={ModalStackNavigators.NewChatModalStackNavigator} /> - modalCardStyleInterpolator(isSmallScreenWidth, false, props), + presentation: 'transparentModal', + + // We want pop in RHP since there are some flows that would work weird otherwise + animationTypeForReplace: 'pop', + cardStyle: { + ...getNavigationModalCardStyle(), + // This is necessary to cover translated sidebar with overlay. + width: isSmallScreenWidth ? '100%' : '200%', + + transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}], + ...(isSmallScreenWidth ? {} : styles.borderRight), + }, + }, homeScreen: { title: CONFIG.SITE_TITLE, ...commonScreenOptions, diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index c2dd3e76e7ad..272252517c07 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -212,6 +212,7 @@ function dismissModal(targetReportID?: string) { const rootState = navigationRef.getRootState(); const lastRoute = rootState.routes.at(-1); switch (lastRoute?.name) { + case NAVIGATORS.LEFT_MODAL_NAVIGATOR: case NAVIGATORS.RIGHT_MODAL_NAVIGATOR: case SCREENS.NOT_FOUND: case SCREENS.REPORT_ATTACHMENTS: diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts index 92a04778b9a6..cdee3d4de1f1 100644 --- a/src/libs/Navigation/linkingConfig.ts +++ b/src/libs/Navigation/linkingConfig.ts @@ -36,7 +36,15 @@ const linkingConfig: LinkingOptions = { }, }, [SCREENS.NOT_FOUND]: '*', - + [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: { + screens: { + Search: { + screens: { + Search_Root: ROUTES.SEARCH, + }, + }, + }, + }, [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: { screens: { Settings: { @@ -328,11 +336,6 @@ const linkingConfig: LinkingOptions = { I_Am_A_Teacher: ROUTES.I_AM_A_TEACHER, }, }, - Search: { - screens: { - Search_Root: ROUTES.SEARCH, - }, - }, Details: { screens: { Details_Root: ROUTES.DETAILS.route, diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 983f1ba82caa..73fdf5655274 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1377,7 +1377,13 @@ const styles = (theme: ThemeColors) => justifyContent: 'center', textDecorationLine: 'none', }, - + LHPNavigatorContainer: (isSmallScreenWidth: boolean) => + ({ + width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, + position: 'absolute', + left: 0, + height: '100%', + } satisfies ViewStyle), RHPNavigatorContainer: (isSmallScreenWidth: boolean) => ({ width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, From 3af493802981021cd2cacd12e63dff880362e554 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 23 Nov 2023 17:16:42 +0100 Subject: [PATCH 02/24] Add LHP Animation, dismissing modals, borderRadius --- .../AppNavigator/getRootNavigatorScreenOptions.ts | 4 +++- .../AppNavigator/modalCardStyleInterpolator.ts | 9 +++++++-- src/styles/styles.ts | 3 +++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index 3cf4541e17d9..ae68b60b0a87 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -15,6 +15,8 @@ const commonScreenOptions: StackNavigationOptions = { animationTypeForReplace: 'push', }; +const SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER = -1; + export default (isSmallScreenWidth: boolean, themeStyles: typeof styles): ScreenOptions => ({ rightModalNavigator: { ...commonScreenOptions, @@ -34,7 +36,7 @@ export default (isSmallScreenWidth: boolean, themeStyles: typeof styles): Screen }, leftModalNavigator: { ...commonScreenOptions, - // cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), presentation: 'transparentModal', // We want pop in RHP since there are some flows that would work weird otherwise diff --git a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts index f7e772148e79..b4855c4892ed 100644 --- a/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts +++ b/src/libs/Navigation/AppNavigator/modalCardStyleInterpolator.ts @@ -3,11 +3,16 @@ import {Animated} from 'react-native'; import getCardStyles from '@styles/cardStyles'; import variables from '@styles/variables'; -export default (isSmallScreenWidth: boolean, isFullScreenModal: boolean, {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps): StackCardInterpolatedStyle => { +export default ( + isSmallScreenWidth: boolean, + isFullScreenModal: boolean, + {current: {progress}, inverted, layouts: {screen}}: StackCardInterpolationProps, + outputRangeMultiplier = 1, +): StackCardInterpolatedStyle => { const translateX = Animated.multiply( progress.interpolate({ inputRange: [0, 1], - outputRange: [isSmallScreenWidth ? screen.width : variables.sideBarWidth, 0], + outputRange: [outputRangeMultiplier * (isSmallScreenWidth ? screen.width : variables.sideBarWidth), 0], extrapolate: 'clamp', }), inverted, diff --git a/src/styles/styles.ts b/src/styles/styles.ts index 73fdf5655274..9f489300eca4 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1383,6 +1383,9 @@ const styles = (theme: ThemeColors) => position: 'absolute', left: 0, height: '100%', + borderTopRightRadius: 20, + borderBottomRightRadius: 20, + overflow: 'hidden', } satisfies ViewStyle), RHPNavigatorContainer: (isSmallScreenWidth: boolean) => ({ From b2130bb78d8d8cd5a5a5140d72bfd7f10ae1c4a6 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 28 Nov 2023 09:24:21 +0100 Subject: [PATCH 03/24] Modify linkTo function --- src/libs/Navigation/linkTo.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 1a4aa2d0cfb7..630bba5d95ee 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -75,6 +75,9 @@ export default function linkTo(navigation: NavigationContainerRef Date: Wed, 29 Nov 2023 11:09:10 +0100 Subject: [PATCH 04/24] Add types for LHP screens, move dismissModal to separated file --- src/libs/Navigation/dismissModal.ts | 55 +++++++++++++++++++++++++++++ src/libs/Navigation/linkTo.ts | 2 +- src/libs/Navigation/types.ts | 5 +++ 3 files changed, 61 insertions(+), 1 deletion(-) create mode 100644 src/libs/Navigation/dismissModal.ts diff --git a/src/libs/Navigation/dismissModal.ts b/src/libs/Navigation/dismissModal.ts new file mode 100644 index 000000000000..111684e69f4c --- /dev/null +++ b/src/libs/Navigation/dismissModal.ts @@ -0,0 +1,55 @@ +import {getActionFromState, StackActions} from '@react-navigation/native'; +import {findLastIndex} from 'lodash'; +import Log from '@libs/Log'; +import NAVIGATORS from '@src/NAVIGATORS'; +import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; +import getStateFromPath from './getStateFromPath'; +import getTopmostReportId from './getTopmostReportId'; +import linkingConfig from './linkingConfig'; +import navigationRef from './navigationRef'; +import {StackNavigationAction} from './types'; + +// This function is in a separate file than Navigation.js to avoid cyclic dependency. + +/** + * Dismisses the last modal stack if there is any + * + * @param targetReportID - The reportID to navigate to after dismissing the modal + */ +function dismissModal(targetReportID?: string) { + // if (!canNavigate('dismissModal')) { + // return; + // } + const rootState = navigationRef.getRootState(); + const lastRoute = rootState.routes.at(-1); + switch (lastRoute?.name) { + case NAVIGATORS.LEFT_MODAL_NAVIGATOR: + case NAVIGATORS.RIGHT_MODAL_NAVIGATOR: + case SCREENS.NOT_FOUND: + case SCREENS.REPORT_ATTACHMENTS: + // if we are not in the target report, we need to navigate to it after dismissing the modal + if (targetReportID && targetReportID !== getTopmostReportId(rootState)) { + const state = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID)); + + const action: StackNavigationAction = getActionFromState(state, linkingConfig.config); + if (action) { + action.type = 'REPLACE'; + navigationRef.current?.dispatch(action); + } + // If not-found page is in the route stack, we need to close it + } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { + const lastRouteIndex = rootState.routes.length - 1; + const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); + } else { + navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key}); + } + break; + default: { + Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss'); + } + } +} + +export default dismissModal; diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 630bba5d95ee..61ff33d5b606 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -76,7 +76,7 @@ export default function linkTo(navigation: NavigationContainerRef; +}; + type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.SETTINGS]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.NEW_CHAT]: NavigatorScreenParams; @@ -405,6 +409,7 @@ type AuthScreensParamList = { name: string; }; [SCREENS.NOT_FOUND]: undefined; + [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: NavigatorScreenParams; [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams; [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined; [CONST.DEMO_PAGES.MONEY2020]: undefined; From e0cc1c70dcc1646447e9f2203f483f72fc0edf9e Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 29 Nov 2023 12:20:12 +0100 Subject: [PATCH 05/24] Remove dismissModal from Navigation.ts --- src/libs/Navigation/Navigation.ts | 49 +++---------------------------- 1 file changed, 4 insertions(+), 45 deletions(-) diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 272252517c07..a79290d46752 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -1,18 +1,17 @@ -import {findFocusedRoute, getActionFromState} from '@react-navigation/core'; +import {findFocusedRoute} from '@react-navigation/core'; import {CommonActions, EventMapCore, getPathFromState, NavigationState, PartialState, StackActions} from '@react-navigation/native'; -import findLastIndex from 'lodash/findLastIndex'; import Log from '@libs/Log'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES, {Route} from '@src/ROUTES'; -import SCREENS, {PROTECTED_SCREENS} from '@src/SCREENS'; -import getStateFromPath from './getStateFromPath'; +import {PROTECTED_SCREENS} from '@src/SCREENS'; +import dismissModal from './dismissModal'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; import linkTo from './linkTo'; import navigationRef from './navigationRef'; -import {StackNavigationAction, StateOrRoute} from './types'; +import {StateOrRoute} from './types'; let resolveNavigationIsReadyPromise: () => void; const navigationIsReadyPromise = new Promise((resolve) => { @@ -200,46 +199,6 @@ function setParams(params: Record, routeKey: string) { }); } -/** - * Dismisses the last modal stack if there is any - * - * @param targetReportID - The reportID to navigate to after dismissing the modal - */ -function dismissModal(targetReportID?: string) { - if (!canNavigate('dismissModal')) { - return; - } - const rootState = navigationRef.getRootState(); - const lastRoute = rootState.routes.at(-1); - switch (lastRoute?.name) { - case NAVIGATORS.LEFT_MODAL_NAVIGATOR: - case NAVIGATORS.RIGHT_MODAL_NAVIGATOR: - case SCREENS.NOT_FOUND: - case SCREENS.REPORT_ATTACHMENTS: - // if we are not in the target report, we need to navigate to it after dismissing the modal - if (targetReportID && targetReportID !== getTopmostReportId(rootState)) { - const state = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID)); - - const action: StackNavigationAction = getActionFromState(state, linkingConfig.config); - if (action) { - action.type = 'REPLACE'; - navigationRef.current?.dispatch(action); - } - // If not-found page is in the route stack, we need to close it - } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { - const lastRouteIndex = rootState.routes.length - 1; - const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); - navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); - } else { - navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key}); - } - break; - default: { - Log.hmmm('[Navigation] dismissModal failed because there is no modal stack to dismiss'); - } - } -} - /** * Returns the current active route without the URL params */ From a0806cb801220adfbcda76a2a6f62f9e7c203bfa Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Wed, 29 Nov 2023 14:57:55 +0100 Subject: [PATCH 06/24] Refactor linkTo method --- src/libs/Navigation/linkTo.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 61ff33d5b606..67140135ad8f 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -4,6 +4,7 @@ import {Writable} from 'type-fest'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import {Route} from '@src/ROUTES'; +import dismissModal from './dismissModal'; import getStateFromPath from './getStateFromPath'; import getTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; @@ -55,6 +56,10 @@ function getMinimalAction(action: NavigationAction, state: NavigationState): Wri return currentAction; } +function isModalNavigator(targetNavigator?: string) { + return targetNavigator === NAVIGATORS.LEFT_MODAL_NAVIGATOR || targetNavigator === NAVIGATORS.RIGHT_MODAL_NAVIGATOR; +} + export default function linkTo(navigation: NavigationContainerRef | null, path: Route, type?: string, isActiveRoute?: boolean) { if (!navigation) { throw new Error("Couldn't find a navigation object. Is your component inside a screen in a navigator?"); @@ -75,8 +80,8 @@ export default function linkTo(navigation: NavigationContainerRef Date: Thu, 30 Nov 2023 14:25:10 +0100 Subject: [PATCH 07/24] Refactor dismissModal function --- src/libs/Navigation/Navigation.ts | 7 ++++-- src/libs/Navigation/dismissModal.ts | 36 ++++++++++++++--------------- src/libs/Navigation/linkTo.ts | 2 +- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index a79290d46752..6f14b6677414 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -5,7 +5,7 @@ import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES, {Route} from '@src/ROUTES'; import {PROTECTED_SCREENS} from '@src/SCREENS'; -import dismissModal from './dismissModal'; +import originalDismissModal from './dismissModal'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; @@ -43,6 +43,9 @@ const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopm // Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies. const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state); +// Re-exporting the dismissModal here to fill in default value for navigationRef. The dismissModal isn't defined in this file to avoid cyclic dependencies. +const dismissModal = (targetReportId = '', ref = navigationRef) => originalDismissModal(targetReportId, ref); + /** Method for finding on which index in stack we are. */ function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number | undefined { if ('routes' in stateOrRoute && stateOrRoute.routes) { @@ -55,7 +58,7 @@ function getActiveRouteIndex(stateOrRoute: StateOrRoute, index?: number): number return getActiveRouteIndex(childActiveRoute, stateOrRoute.state.index ?? 0); } - if ('name' in stateOrRoute && stateOrRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) { + if ('name' in stateOrRoute && (stateOrRoute.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || stateOrRoute.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR)) { return 0; } diff --git a/src/libs/Navigation/dismissModal.ts b/src/libs/Navigation/dismissModal.ts index 111684e69f4c..dbbf59ddca83 100644 --- a/src/libs/Navigation/dismissModal.ts +++ b/src/libs/Navigation/dismissModal.ts @@ -1,4 +1,4 @@ -import {getActionFromState, StackActions} from '@react-navigation/native'; +import {getActionFromState, NavigationContainerRef, StackActions} from '@react-navigation/native'; import {findLastIndex} from 'lodash'; import Log from '@libs/Log'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -7,8 +7,7 @@ import SCREENS from '@src/SCREENS'; import getStateFromPath from './getStateFromPath'; import getTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; -import navigationRef from './navigationRef'; -import {StackNavigationAction} from './types'; +import {RootStackParamList, StackNavigationAction} from './types'; // This function is in a separate file than Navigation.js to avoid cyclic dependency. @@ -17,33 +16,34 @@ import {StackNavigationAction} from './types'; * * @param targetReportID - The reportID to navigate to after dismissing the modal */ -function dismissModal(targetReportID?: string) { - // if (!canNavigate('dismissModal')) { - // return; - // } - const rootState = navigationRef.getRootState(); - const lastRoute = rootState.routes.at(-1); +function dismissModal(targetReportID: string, navigationRef: NavigationContainerRef) { + if (!navigationRef.isReady()) { + return; + } + + const state = navigationRef.getState(); + const lastRoute = state.routes.at(-1); switch (lastRoute?.name) { case NAVIGATORS.LEFT_MODAL_NAVIGATOR: case NAVIGATORS.RIGHT_MODAL_NAVIGATOR: case SCREENS.NOT_FOUND: case SCREENS.REPORT_ATTACHMENTS: // if we are not in the target report, we need to navigate to it after dismissing the modal - if (targetReportID && targetReportID !== getTopmostReportId(rootState)) { - const state = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID)); + if (targetReportID && targetReportID !== getTopmostReportId(state)) { + const reportState = getStateFromPath(ROUTES.REPORT_WITH_ID.getRoute(targetReportID)); - const action: StackNavigationAction = getActionFromState(state, linkingConfig.config); + const action: StackNavigationAction = getActionFromState(reportState, linkingConfig.config); if (action) { action.type = 'REPLACE'; - navigationRef.current?.dispatch(action); + navigationRef.dispatch(action); } // If not-found page is in the route stack, we need to close it - } else if (targetReportID && rootState.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { - const lastRouteIndex = rootState.routes.length - 1; - const centralRouteIndex = findLastIndex(rootState.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); - navigationRef.current?.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: rootState.key}); + } else if (targetReportID && state.routes.some((route) => route.name === SCREENS.NOT_FOUND)) { + const lastRouteIndex = state.routes.length - 1; + const centralRouteIndex = findLastIndex(state.routes, (route) => route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR); + navigationRef.dispatch({...StackActions.pop(lastRouteIndex - centralRouteIndex), target: state.key}); } else { - navigationRef.current?.dispatch({...StackActions.pop(), target: rootState.key}); + navigationRef.dispatch({...StackActions.pop(), target: state.key}); } break; default: { diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 67140135ad8f..12c836c4c93f 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -99,7 +99,7 @@ export default function linkTo(navigation: NavigationContainerRef Date: Mon, 23 Oct 2023 09:45:06 +0700 Subject: [PATCH 08/24] fix: 30062 --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 68d2af8beb63..92815219959b 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -314,7 +314,7 @@ function ReportScreen({ prevOnyxReportID === routeReportID && !onyxReportID && prevReport.statusNum === CONST.REPORT.STATUS.OPEN && - (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID))) + (report.statusNum === CONST.REPORT.STATUS.CLOSED || (!report.statusNum && !prevReport.parentReportID && prevReport.chatType === CONST.REPORT.CHAT_TYPE.POLICY_ROOM))) ) { Navigation.dismissModal(); if (Navigation.getTopmostReportId() === prevOnyxReportID) { From ca645b6f91aa3dc5930f62d58f0097171d8fe8ab Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 29 Nov 2023 13:02:15 +0700 Subject: [PATCH 09/24] add dependency --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 92815219959b..e9b79c41dcd7 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -339,7 +339,7 @@ function ReportScreen({ fetchReportIfNeeded(); ComposerActions.setShouldShowComposeInput(true); - }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum, prevReport.parentReportID]); + }, [route, report, errors, fetchReportIfNeeded, prevReport.reportID, prevUserLeavingStatus, userLeavingStatus, prevReport.statusNum, prevReport.parentReportID, prevReport.chatType]); useEffect(() => { if (!ReportUtils.isValidReportIDFromPath(reportID)) { From 6a315f676e644739e10d2b001f61a2f8ea4ee4d0 Mon Sep 17 00:00:00 2001 From: Dylan Date: Mon, 27 Nov 2023 10:45:55 +0700 Subject: [PATCH 10/24] add name value --- src/pages/iou/WaypointEditor.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 74a3a353ef50..338ca22c9ef3 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -144,6 +144,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp lat: null, lng: null, address: waypointValue, + name: waypointValue }; saveWaypoint(waypoint); } @@ -163,7 +164,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp lat: values.lat, lng: values.lng, address: values.address, - name: values.name, + name: values.name || null, }; saveWaypoint(waypoint); From f32a907e7dc9a74eca45f0f8f948cd3b0d8c22e0 Mon Sep 17 00:00:00 2001 From: Dylan Date: Mon, 27 Nov 2023 11:04:46 +0700 Subject: [PATCH 11/24] fix lint --- src/pages/iou/WaypointEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 338ca22c9ef3..1769aa6f98e8 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -144,7 +144,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp lat: null, lng: null, address: waypointValue, - name: waypointValue + name: waypointValue, }; saveWaypoint(waypoint); } From e180b9957aa661e3c44c810613064c22f2f1406a Mon Sep 17 00:00:00 2001 From: Dylan Date: Fri, 1 Dec 2023 10:42:53 +0700 Subject: [PATCH 12/24] update name to null when offline --- src/pages/iou/WaypointEditor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/WaypointEditor.js b/src/pages/iou/WaypointEditor.js index 1769aa6f98e8..f50ae766ac88 100644 --- a/src/pages/iou/WaypointEditor.js +++ b/src/pages/iou/WaypointEditor.js @@ -144,7 +144,7 @@ function WaypointEditor({route: {params: {iouType = '', transactionID = '', wayp lat: null, lng: null, address: waypointValue, - name: waypointValue, + name: null, }; saveWaypoint(waypoint); } From 9677a229c4816deeacd3706ae1d75814b2a9ff2f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 4 Dec 2023 11:47:36 +0800 Subject: [PATCH 13/24] spread the array --- src/components/LHNOptionsList/LHNOptionsList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index 86de188f9db8..8febd7f247d6 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -118,7 +118,7 @@ function LHNOptionsList({ const transactionID = lodashGet(itemParentReportAction, ['originalMessage', 'IOUTransactionID'], ''); const itemTransaction = transactionID ? transactions[`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`] : {}; const itemComment = draftComments[`${ONYXKEYS.COLLECTION.REPORT_DRAFT_COMMENT}${reportID}`] || ''; - const participants = [ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID]; + const participants = [...ReportUtils.getParticipantsIDs(itemFullReport), itemFullReport.ownerAccountID]; const participantsPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs(participants, personalDetails); From 152c13636cc0a706cce904c1957cea705b162b7e Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 4 Dec 2023 16:08:01 +0100 Subject: [PATCH 14/24] Add TS to LHP --- src/SCREENS.ts | 4 +++- ...dalNavigator.js => LeftModalNavigator.tsx} | 24 ++++++++----------- src/libs/Navigation/types.ts | 4 ++-- 3 files changed, 15 insertions(+), 17 deletions(-) rename src/libs/Navigation/AppNavigator/Navigators/{LeftModalNavigator.js => LeftModalNavigator.tsx} (57%) diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 91ebc6f030ea..df00f392c2a7 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -69,10 +69,12 @@ const SCREENS = { SAVE_THE_WORLD: { ROOT: 'SaveTheWorld_Root', }, + LEFT_MODAL: { + SEARCH: 'Search', + }, RIGHT_MODAL: { SETTINGS: 'Settings', NEW_CHAT: 'NewChat', - SEARCH: 'Search', DETAILS: 'Details', PROFILE: 'Profile', REPORT_DETAILS: 'Report_Details', diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx similarity index 57% rename from src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.js rename to src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index da493166c262..191ab614b654 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.js +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -1,32 +1,29 @@ -import {createStackNavigator} from '@react-navigation/stack'; -import PropTypes from 'prop-types'; -import React from 'react'; +import {createStackNavigator, StackScreenProps} from '@react-navigation/stack'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions'; +import {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; import useThemeStyles from '@styles/useThemeStyles'; +import NAVIGATORS from '@src/NAVIGATORS'; import Overlay from './Overlay'; -const Stack = createStackNavigator(); +type LeftModalNavigatorProps = StackScreenProps; -const propTypes = { - /* Navigation functions provided by React Navigation */ - navigation: PropTypes.shape({ - goBack: PropTypes.func.isRequired, - }).isRequired, -}; +const Stack = createStackNavigator(); -function LeftModalNavigator(props) { +function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); + const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]); return ( - {!isSmallScreenWidth && } + {!isSmallScreenWidth && } - + ; + [SCREENS.LEFT_MODAL.SEARCH]: NavigatorScreenParams; }; type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.SETTINGS]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.NEW_CHAT]: NavigatorScreenParams; - [SCREENS.RIGHT_MODAL.SEARCH]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.DETAILS]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.PROFILE]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.REPORT_DETAILS]: NavigatorScreenParams; @@ -426,6 +425,7 @@ export type { NavigationStateRoute, NavigationRoot, AuthScreensParamList, + LeftModalNavigatorParamList, RightModalNavigatorParamList, PublicScreensParamList, MoneyRequestNavigatorParamList, From 0c7d7b89adcb95319274a3a22b1227b11828623e Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 5 Dec 2023 14:18:04 +0100 Subject: [PATCH 15/24] Refactor LHP linking config --- src/libs/Navigation/linkingConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts index cdee3d4de1f1..3c6b3cc8ce72 100644 --- a/src/libs/Navigation/linkingConfig.ts +++ b/src/libs/Navigation/linkingConfig.ts @@ -40,7 +40,7 @@ const linkingConfig: LinkingOptions = { screens: { Search: { screens: { - Search_Root: ROUTES.SEARCH, + [SCREENS.SEARCH_ROOT]: ROUTES.SEARCH, }, }, }, From 4b875bb92e4faff2747143151ef1858e25ff5344 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 5 Dec 2023 14:23:07 +0100 Subject: [PATCH 16/24] Rename RHPScreenOptions to ModalNavigatorScreenOptions --- .../{RHPScreenOptions.ts => ModalNavigatorScreenOptions.ts} | 4 ++-- .../Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx | 4 ++-- .../AppNavigator/Navigators/RightModalNavigator.tsx | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename src/libs/Navigation/AppNavigator/{RHPScreenOptions.ts => ModalNavigatorScreenOptions.ts} (77%) diff --git a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts similarity index 77% rename from src/libs/Navigation/AppNavigator/RHPScreenOptions.ts rename to src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts index 6b56bb00cf56..19ae3e722534 100644 --- a/src/libs/Navigation/AppNavigator/RHPScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts @@ -6,7 +6,7 @@ import styles from '@styles/styles'; * @param themeStyles - The styles object * @returns The screen options object */ -const RHPScreenOptions = (themeStyles: typeof styles): StackNavigationOptions => ({ +const ModalNavigatorScreenOptions = (themeStyles: typeof styles): StackNavigationOptions => ({ headerShown: false, animationEnabled: true, gestureDirection: 'horizontal', @@ -14,4 +14,4 @@ const RHPScreenOptions = (themeStyles: typeof styles): StackNavigationOptions => cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, }); -export default RHPScreenOptions; +export default ModalNavigatorScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index 191ab614b654..d3c831797a8c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -4,7 +4,7 @@ import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; -import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions'; +import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; import {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; import useThemeStyles from '@styles/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -17,7 +17,7 @@ const Stack = createStackNavigator(); function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); - const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]); + const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); return ( diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 8e1c9c60cacd..4494c244edf1 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -4,7 +4,7 @@ import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; -import RHPScreenOptions from '@libs/Navigation/AppNavigator/RHPScreenOptions'; +import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; import useThemeStyles from '@styles/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; @@ -17,7 +17,7 @@ const Stack = createStackNavigator(); function RightModalNavigator({navigation}: RightModalNavigatorProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); - const screenOptions = useMemo(() => RHPScreenOptions(styles), [styles]); + const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); return ( From 7694af7c5e730a810ed0b344b7c93a71cafb627b Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Tue, 5 Dec 2023 14:36:28 +0100 Subject: [PATCH 17/24] Fix import order in LHP and RHP --- .../Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx | 2 +- .../Navigation/AppNavigator/Navigators/RightModalNavigator.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index d3c831797a8c..e24dbd284a96 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -3,8 +3,8 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types'; import useThemeStyles from '@styles/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 4494c244edf1..0dad08b8a6d7 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -3,8 +3,8 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; +import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; import useThemeStyles from '@styles/useThemeStyles'; import NAVIGATORS from '@src/NAVIGATORS'; From 6f5fab2f0dbea493de116ead38bd7dbf76ec65ad Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 14 Dec 2023 12:37:24 +0100 Subject: [PATCH 18/24] Refactor LHPNavigatorContainer borderRadius --- src/styles/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index cd833d2c4ec4..faae2f3cffa8 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1385,8 +1385,8 @@ const styles = (theme: ThemeColors) => position: 'absolute', left: 0, height: '100%', - borderTopRightRadius: 20, - borderBottomRightRadius: 20, + borderTopRightRadius: 24, + borderBottomRightRadius: 24, overflow: 'hidden', } satisfies ViewStyle), RHPNavigatorContainer: (isSmallScreenWidth: boolean) => From 7753b91d0fee1d0472f28fe2c4a0aaa2aea4158d Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 14 Dec 2023 13:19:06 +0100 Subject: [PATCH 19/24] Remove referral from SearchPage --- src/pages/SearchPage.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/SearchPage.js b/src/pages/SearchPage.js index 5d111e7c181f..01fe83289d71 100755 --- a/src/pages/SearchPage.js +++ b/src/pages/SearchPage.js @@ -201,8 +201,6 @@ class SearchPage extends Component { textInputAlert={ this.props.network.isOffline ? `${this.props.translate('common.youAppearToBeOffline')} ${this.props.translate('search.resultsAreLimited')}` : '' } - shouldShowReferralCTA - referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} onLayout={this.searchRendered} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} autoFocus From 3bbad0eaaa06ca0d7bf1541e6d68b4115350ff44 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Thu, 14 Dec 2023 14:31:44 +0100 Subject: [PATCH 20/24] Remove borderRadius from the LHP on small screens --- src/styles/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.ts b/src/styles/index.ts index faae2f3cffa8..6bd5beb0ce01 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1385,8 +1385,8 @@ const styles = (theme: ThemeColors) => position: 'absolute', left: 0, height: '100%', - borderTopRightRadius: 24, - borderBottomRightRadius: 24, + borderTopRightRadius: isSmallScreenWidth ? 0 : 24, + borderBottomRightRadius: isSmallScreenWidth ? 0 : 24, overflow: 'hidden', } satisfies ViewStyle), RHPNavigatorContainer: (isSmallScreenWidth: boolean) => From c959ad8ccd9216346975d513324cb09674e0b455 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 15 Dec 2023 09:42:52 +0100 Subject: [PATCH 21/24] LHP code cleanup --- src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts | 2 +- .../Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx | 2 +- .../Navigation/AppNavigator/getRootNavigatorScreenOptions.ts | 1 - src/libs/Navigation/linkTo.ts | 2 +- src/libs/Navigation/linkingConfig.ts | 2 +- 5 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts index f89f597feded..88ef57807010 100644 --- a/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts @@ -2,7 +2,7 @@ import {CardStyleInterpolators, StackNavigationOptions} from '@react-navigation/ import {ThemeStyles} from '@styles/index'; /** - * RHP stack navigator screen options generator function + * Modal stack navigator screen options generator function * @param themeStyles - The styles object * @returns The screen options object */ diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index ffa99e59e729..71d1992d3247 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -35,6 +35,6 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { ); } -LeftModalNavigator.displayName = 'RightModalNavigator'; +LeftModalNavigator.displayName = 'LeftModalNavigator'; export default LeftModalNavigator; diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index 26e293e0bfd8..7cd347ae3785 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -48,7 +48,6 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp width: isSmallScreenWidth ? '100%' : '200%', transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}], - ...(isSmallScreenWidth ? {} : themeStyles.borderRight), }, }, homeScreen: { diff --git a/src/libs/Navigation/linkTo.ts b/src/libs/Navigation/linkTo.ts index 12c836c4c93f..bb680bf4cb27 100644 --- a/src/libs/Navigation/linkTo.ts +++ b/src/libs/Navigation/linkTo.ts @@ -96,7 +96,7 @@ export default function linkTo(navigation: NavigationContainerRef = { [SCREENS.NOT_FOUND]: '*', [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: { screens: { - Search: { + [SCREENS.LEFT_MODAL.SEARCH]: { screens: { [SCREENS.SEARCH_ROOT]: ROUTES.SEARCH, }, From 4d45639e417ff2da04568df9e98547aa95686e08 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 15 Dec 2023 16:56:31 +0100 Subject: [PATCH 22/24] Fix overlay animationfor LHP --- .../AppNavigator/Navigators/LeftModalNavigator.tsx | 7 ++++++- src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx | 7 +++++-- src/styles/index.ts | 6 +++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx index 71d1992d3247..b7385c930e2c 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx @@ -22,7 +22,12 @@ function LeftModalNavigator({navigation}: LeftModalNavigatorProps) { return ( - {!isSmallScreenWidth && } + {!isSmallScreenWidth && ( + + )} void; + + /* Returns whether a modal is displayed on the left side of the screen. By default, the modal is displayed on the right */ + isModalOnTheLeft?: boolean; }; -function Overlay({onPress}: OverlayProps) { +function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) { const styles = useThemeStyles(); const {current} = useCardAnimation(); const {translate} = useLocalize(); return ( - + {/* In the latest Electron version buttons can't be both clickable and draggable. That's why we added this workaround. Because of two Pressable components on the desktop app diff --git a/src/styles/index.ts b/src/styles/index.ts index 6bd5beb0ce01..6b598056ec3c 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1610,14 +1610,14 @@ const styles = (theme: ThemeColors) => marginBottom: 4, }, - overlayStyles: (current: OverlayStylesParams) => + overlayStyles: (current: OverlayStylesParams, isModalOnTheLeft: boolean) => ({ ...positioning.pFixed, // We need to stretch the overlay to cover the sidebar and the translate animation distance. - left: -2 * variables.sideBarWidth, + left: isModalOnTheLeft ? 0 : -2 * variables.sideBarWidth, top: 0, bottom: 0, - right: 0, + right: isModalOnTheLeft ? -2 * variables.sideBarWidth : 0, backgroundColor: theme.overlay, opacity: current.progress.interpolate({ inputRange: [0, 1], From 02953bfae39b6bd64cf57c2d5cf7a40f1d600afd Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Fri, 15 Dec 2023 19:32:27 +0100 Subject: [PATCH 23/24] Refactor goBack function to handle LHP --- src/libs/Navigation/Navigation.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/Navigation/Navigation.ts b/src/libs/Navigation/Navigation.ts index 72ad5b42cbc0..a3e89a983f98 100644 --- a/src/libs/Navigation/Navigation.ts +++ b/src/libs/Navigation/Navigation.ts @@ -162,8 +162,8 @@ function goBack(fallbackRoute: Route, shouldEnforceFallback = false, shouldPopTo if (isFirstRouteInNavigator) { const rootState = navigationRef.getRootState(); const lastRoute = rootState.routes.at(-1); - // If the user comes from a different flow (there is more than one route in RHP) we should go back to the previous flow on UP button press instead of using the fallbackRoute. - if (lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR && (lastRoute.state?.index ?? 0) > 0) { + // If the user comes from a different flow (there is more than one route in ModalNavigator) we should go back to the previous flow on UP button press instead of using the fallbackRoute. + if ((lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR || lastRoute?.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR) && (lastRoute.state?.index ?? 0) > 0) { navigationRef.current.goBack(); return; } From b54996f26b70be998af2c5fa9140b1079eb53b39 Mon Sep 17 00:00:00 2001 From: Wojciech Boman Date: Mon, 18 Dec 2023 10:31:30 +0100 Subject: [PATCH 24/24] Update leftModalNavigator comment --- .../Navigation/AppNavigator/getRootNavigatorScreenOptions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index 7cd347ae3785..3be7de786223 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -39,7 +39,7 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), presentation: 'transparentModal', - // We want pop in RHP since there are some flows that would work weird otherwise + // We want pop in LHP since there are some flows that would work weird otherwise animationTypeForReplace: 'pop', cardStyle: { ...getNavigationModalCardStyle(),