-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
954a411
commit c7c315e
Showing
10 changed files
with
124 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
105 changes: 33 additions & 72 deletions
105
src/libs/Navigation/AppNavigator/createSplitStackNavigator/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,50 @@ | ||
| import type {ParamListBase, StackActionHelpers, StackNavigationState} from '@react-navigation/native'; | ||
| import {createNavigatorFactory, useNavigationBuilder, useRoute} from '@react-navigation/native'; | ||
| import type {StackNavigationEventMap, StackNavigationOptions} from '@react-navigation/stack'; | ||
| import {StackView} from '@react-navigation/stack'; | ||
| import React, {useMemo} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import FocusTrapForScreens from '@components/FocusTrap/FocusTrapForScreen'; | ||
| import type {ParamListBase} from '@react-navigation/native'; | ||
| import {createNavigatorFactory} from '@react-navigation/native'; | ||
| import useResponsiveLayout from '@hooks/useResponsiveLayout'; | ||
| import useStyleUtils from '@hooks/useStyleUtils'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions'; | ||
| import useNavigationResetOnLayoutChange from '@libs/Navigation/AppNavigator/useNavigationResetOnLayoutChange'; | ||
| import createPlatformStackNavigatorComponent from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigatorComponent'; | ||
| import defaultPlatformStackScreenOptions from '@libs/Navigation/PlatformStackNavigation/defaultPlatformStackScreenOptions'; | ||
| import type { | ||
| CustomEffectsHookProps, | ||
| CustomStateHookProps, | ||
| PlatformStackNavigationEventMap, | ||
| PlatformStackNavigationOptions, | ||
| PlatformStackNavigationState, | ||
| } from '@libs/Navigation/PlatformStackNavigation/types'; | ||
| import SplitStackRouter from './SplitStackRouter'; | ||
| import type {SplitStackNavigatorProps, SplitStackNavigatorRouterOptions} from './types'; | ||
| import useHandleScreenResize from './useHandleScreenResize'; | ||
| import usePrepareSplitStackNavigatorChildren from './usePrepareSplitStackNavigatorChildren'; | ||
| import usePreserveSplitNavigatorState from './usePreserveSplitNavigatorState'; | ||
|
|
||
| function getStateToRender(state: StackNavigationState<ParamListBase>, isSmallScreenWidth: boolean): StackNavigationState<ParamListBase> { | ||
| function useCustomEffects(props: CustomEffectsHookProps, route) { | ||
| useNavigationResetOnLayoutChange(props); | ||
| usePreserveSplitNavigatorState(route, props.navigation.getState()); | ||
| } | ||
|
|
||
| function useCustomSplitNavigatorState({state}: CustomStateHookProps) { | ||
| const {shouldUseNarrowLayout} = useResponsiveLayout(); | ||
|
|
||
| const sidebarScreenRoute = state.routes.at(0); | ||
|
|
||
| if (!sidebarScreenRoute) { | ||
| return state; | ||
| } | ||
|
|
||
| const centralScreenRoutes = state.routes.slice(1); | ||
| const routes = isSmallScreenWidth ? state.routes.slice(-2) : [sidebarScreenRoute, ...centralScreenRoutes.slice(-2)]; | ||
| const routesToRender = shouldUseNarrowLayout ? state.routes.slice(-2) : [sidebarScreenRoute, ...centralScreenRoutes.slice(-2)]; | ||
|
|
||
| return { | ||
| ...state, | ||
| routes, | ||
| index: routes.length - 1, | ||
| }; | ||
| return {stateToRender: {...state, routes: routesToRender, index: routesToRender.length - 1}}; | ||
| } | ||
|
|
||
| function SplitStackNavigator<ParamList extends ParamListBase>(props: SplitStackNavigatorProps<ParamList>) { | ||
| const styles = useThemeStyles(); | ||
| const StyleUtils = useStyleUtils(); | ||
| const {shouldUseNarrowLayout} = useResponsiveLayout(); | ||
|
|
||
|
|
||
| // const children = usePrepareSplitStackNavigatorChildren(props.children, props.sidebarScreen, screenOptions.homeScreen); | ||
|
|
||
| const route = useRoute(); | ||
| const CustomFullScreenNavigatorComponent = createPlatformStackNavigatorComponent('CustomFullScreenNavigator', { | ||
| createRouter: SplitStackRouter, | ||
| useCustomEffects, | ||
| defaultScreenOptions: defaultPlatformStackScreenOptions, | ||
| useCustomState: useCustomSplitNavigatorState, | ||
| }); | ||
|
|
||
| const {navigation, state, descriptors, NavigationContent} = useNavigationBuilder< | ||
| StackNavigationState<ParamListBase>, | ||
| SplitStackNavigatorRouterOptions, | ||
| StackActionHelpers<ParamListBase>, | ||
| StackNavigationOptions, | ||
| StackNavigationEventMap | ||
| >(SplitStackRouter, { | ||
| children: props.children, | ||
| // screenOptions: screenOptions.centralPaneNavigator, | ||
| initialRouteName: props.initialRouteName, | ||
| sidebarScreen: props.sidebarScreen, | ||
| defaultCentralScreen: props.defaultCentralScreen, | ||
| parentRoute: route, | ||
| }); | ||
|
|
||
| // We need to copy the state to the params so that the state is preserved when the root navigator unmount this route for performance reasons. | ||
| usePreserveSplitNavigatorState(route, state); | ||
| useHandleScreenResize(navigation); | ||
|
|
||
| const stateToRender = useMemo(() => getStateToRender(state, shouldUseNarrowLayout), [state, shouldUseNarrowLayout]); | ||
|
|
||
| return ( | ||
| <FocusTrapForScreens> | ||
| <View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}> | ||
| <NavigationContent> | ||
| <StackView | ||
| // eslint-disable-next-line react/jsx-props-no-spreading | ||
| {...props} | ||
| state={stateToRender} | ||
| descriptors={descriptors} | ||
| navigation={navigation} | ||
| /> | ||
| </NavigationContent> | ||
| </View> | ||
| </FocusTrapForScreens> | ||
| ); | ||
| } | ||
|
|
||
| SplitStackNavigator.displayName = 'SplitStackNavigator'; | ||
|
|
||
| export default function <ParamList extends ParamListBase>() { | ||
| return createNavigatorFactory<StackNavigationState<ParamList>, StackNavigationOptions, StackNavigationEventMap, React.ComponentType<SplitStackNavigatorProps<ParamList>>>( | ||
| SplitStackNavigator, | ||
| function createCustomFullScreenNavigator<ParamList extends ParamListBase>() { | ||
| return createNavigatorFactory<PlatformStackNavigationState<ParamList>, PlatformStackNavigationOptions, PlatformStackNavigationEventMap, typeof CustomFullScreenNavigatorComponent>( | ||
| CustomFullScreenNavigatorComponent, | ||
| )<ParamList>(); | ||
| } | ||
|
|
||
| export default createCustomFullScreenNavigator; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.