From 233371b7f82293bf143a1535ced9ed258f87bd71 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 13 Jun 2024 12:01:47 +0800 Subject: [PATCH 1/6] filter out search central pane in small screen --- .../createCustomStackNavigator/index.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 29b9b1072d3d..72f79a5d3fff 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -61,20 +61,23 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { const {stateToRender, searchRoute} = useMemo(() => { const routes = reduceCentralPaneRoutes(state.routes); - const lastRoute = routes[routes.length - 1]; - const isLastRouteSearchRoute = getTopmostCentralPaneRoute({routes: [lastRoute]} as State)?.name === SCREENS.SEARCH.CENTRAL_PANE; + // On narrow layout, if we are on /search route we want to hide the search central pane route. + if (isSmallScreenWidth) { + const searchCentralPaneIndex = routes.findIndex((route) => { + if (route.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) { + return false; + } - const firstRoute = routes[0]; - - // On narrow layout, if we are on /search route we want to hide all central pane routes and show only the bottom tab navigator. - if (isSmallScreenWidth && isLastRouteSearchRoute) { + return (route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE; + }); + const filteredRoutes = searchCentralPaneIndex !== -1 ? [...routes.slice(0, searchCentralPaneIndex), ...routes.slice(searchCentralPaneIndex + 1)] : [...routes]; return { stateToRender: { ...state, - index: 0, - routes: [firstRoute], + index: filteredRoutes.length - 1, + routes: filteredRoutes, }, - searchRoute: lastRoute, + searchRoute: routes[searchCentralPaneIndex], }; } From 498e3a65b8f62cb133f1418bf842ce34f5b45a3a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 13 Jun 2024 13:11:37 +0800 Subject: [PATCH 2/6] lint --- .../AppNavigator/createCustomStackNavigator/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 72f79a5d3fff..7b4a37c8e379 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -6,9 +6,7 @@ import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import navigationRef from '@libs/Navigation/navigationRef'; -import type {RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import CustomRouter from './CustomRouter'; @@ -68,7 +66,7 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { return false; } - return (route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE; + return (!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE; }); const filteredRoutes = searchCentralPaneIndex !== -1 ? [...routes.slice(0, searchCentralPaneIndex), ...routes.slice(searchCentralPaneIndex + 1)] : [...routes]; return { From 6ba3cb8ef695a2b3fb0d05d99621ee3c94a1e072 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 13 Jun 2024 13:21:39 +0800 Subject: [PATCH 3/6] prettier --- .../AppNavigator/createCustomStackNavigator/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 7b4a37c8e379..69bf73b5565f 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -66,7 +66,9 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { return false; } - return (!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE; + return ( + (!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE + ); }); const filteredRoutes = searchCentralPaneIndex !== -1 ? [...routes.slice(0, searchCentralPaneIndex), ...routes.slice(searchCentralPaneIndex + 1)] : [...routes]; return { From d2342dbac8abf33d75926fb1fdeee5c94eed0685 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 15 Jun 2024 13:09:54 +0800 Subject: [PATCH 4/6] filter out all search central pane --- .../createCustomStackNavigator/index.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 69bf73b5565f..5a2c800bf09f 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -1,4 +1,4 @@ -import type {ParamListBase, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; +import type {ParamListBase, RouteProp, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; import {createNavigatorFactory, useNavigationBuilder} from '@react-navigation/native'; import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; import {StackView} from '@react-navigation/stack'; @@ -61,23 +61,23 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { // On narrow layout, if we are on /search route we want to hide the search central pane route. if (isSmallScreenWidth) { - const searchCentralPaneIndex = routes.findIndex((route) => { - if (route.name !== NAVIGATORS.CENTRAL_PANE_NAVIGATOR) { - return false; + let lastSearchCentralPane: RouteProp | undefined; + const filteredRoutes = routes.filter((route) => { + const isSearchCentralPane = + route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && + ((!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE); + if (isSearchCentralPane) { + lastSearchCentralPane = route; } - - return ( - (!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE - ); + return !isSearchCentralPane; }); - const filteredRoutes = searchCentralPaneIndex !== -1 ? [...routes.slice(0, searchCentralPaneIndex), ...routes.slice(searchCentralPaneIndex + 1)] : [...routes]; return { stateToRender: { ...state, index: filteredRoutes.length - 1, routes: filteredRoutes, }, - searchRoute: routes[searchCentralPaneIndex], + searchRoute: lastSearchCentralPane, }; } From e301f213c305581b42134507e4f4261fc7891d7c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 15 Jun 2024 13:20:39 +0800 Subject: [PATCH 5/6] simplify the code --- .../createCustomStackNavigator/index.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index 5a2c800bf09f..b28b58ee83f1 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -6,7 +6,9 @@ import React, {useEffect, useMemo} from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import navigationRef from '@libs/Navigation/navigationRef'; +import type {RootStackParamList, State} from '@libs/Navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import CustomRouter from './CustomRouter'; @@ -61,16 +63,12 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { // On narrow layout, if we are on /search route we want to hide the search central pane route. if (isSmallScreenWidth) { - let lastSearchCentralPane: RouteProp | undefined; - const filteredRoutes = routes.filter((route) => { - const isSearchCentralPane = - route.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && - ((!!route.params && 'screen' in route.params && route.params.screen === SCREENS.SEARCH.CENTRAL_PANE) || route.state?.routes.at(-1)?.name === SCREENS.SEARCH.CENTRAL_PANE); - if (isSearchCentralPane) { - lastSearchCentralPane = route; - } - return !isSearchCentralPane; - }); + const isSearchCentralPane = (route: RouteProp) => + getTopmostCentralPaneRoute({routes: [route]} as State)?.name === SCREENS.SEARCH.CENTRAL_PANE; + + const lastRoute = routes[routes.length - 1]; + const lastSearchCentralPane = isSearchCentralPane(lastRoute) ? lastRoute : undefined; + const filteredRoutes = routes.filter((route) => !isSearchCentralPane(route)); return { stateToRender: { ...state, From f64d2540766272fe61b3c8d50a649aac8b135ac7 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 15 Jun 2024 15:03:14 +0800 Subject: [PATCH 6/6] prettier --- .../AppNavigator/createCustomStackNavigator/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx index b28b58ee83f1..46c2d914c94a 100644 --- a/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx @@ -63,8 +63,7 @@ function ResponsiveStackNavigator(props: ResponsiveStackNavigatorProps) { // On narrow layout, if we are on /search route we want to hide the search central pane route. if (isSmallScreenWidth) { - const isSearchCentralPane = (route: RouteProp) => - getTopmostCentralPaneRoute({routes: [route]} as State)?.name === SCREENS.SEARCH.CENTRAL_PANE; + const isSearchCentralPane = (route: RouteProp) => getTopmostCentralPaneRoute({routes: [route]} as State)?.name === SCREENS.SEARCH.CENTRAL_PANE; const lastRoute = routes[routes.length - 1]; const lastSearchCentralPane = isSearchCentralPane(lastRoute) ? lastRoute : undefined;