@react-navigation/routers 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/BaseRouter.tsx

@@ -6,105 +6,118 @@ import type {
   PartialState,
 } from './types';
 
-/**
- * Base router object that can be used when writing custom routers.
- * This provides few helper methods to handle common actions such as `RESET`.
- */
-export const BaseRouter = {
-  getStateForAction<State extends NavigationState>(
-    state: State,
-    action: CommonNavigationAction
-  ): State | PartialState<State> | null {
-    switch (action.type) {
-      case 'SET_PARAMS':
-      case 'REPLACE_PARAMS': {
-        const index = action.source
+function getStateForAction<State extends NavigationState>(
+  state: State,
+  action: CommonNavigationAction
+): State | PartialState<State> | null;
+function getStateForAction(
+  state: NavigationState,
+  action: CommonNavigationAction
+) {
+  switch (action.type) {
+    case 'SET_PARAMS':
+    case 'REPLACE_PARAMS': {
+      const index =
+        action.source !== undefined
           ? state.routes.findIndex((r) => r.key === action.source)
           : state.index;
 
-        if (index === -1) {
-          return null;
-        }
-
-        return {
-          ...state,
-          routes: state.routes.map((r, i) =>
-            i === index
-              ? {
-                  ...r,
-                  params:
-                    action.type === 'REPLACE_PARAMS'
-                      ? action.payload.params
-                      : { ...r.params, ...action.payload.params },
-                }
-              : r
-          ),
-        };
+      if (index === -1) {
+        return null;
       }
 
-      case 'PUSH_PARAMS': {
-        const index = action.source
+      return {
+        ...state,
+        routes: state.routes.map((r, i) =>
+          i === index
+            ? {
+                ...r,
+                params:
+                  action.type === 'REPLACE_PARAMS'
+                    ? action.payload.params
+                    : { ...r.params, ...action.payload.params },
+              }
+            : r
+        ),
+      };
+    }
+
+    case 'PUSH_PARAMS': {
+      const index =
+        action.source !== undefined
           ? state.routes.findIndex((r) => r.key === action.source)
           : state.index;
 
-        if (index === -1) {
-          return null;
-        }
-
-        return {
-          ...state,
-          routes: state.routes.map((r, i) =>
-            i === index
-              ? {
-                  ...r,
-                  params: action.payload.params,
-                  history: [
-                    ...(r.history ?? []),
-                    { type: 'params', params: r.params },
-                  ],
-                }
-              : r
-          ),
-        };
+      if (index === -1) {
+        return null;
       }
 
-      case 'RESET': {
-        const nextState = action.payload as State | PartialState<State>;
+      return {
+        ...state,
+        routes: state.routes.map((r, i) =>
+          i === index
+            ? {
+                ...r,
+                params: action.payload.params,
+                history: [
+                  ...(r.history ?? []),
+                  { type: 'params', params: r.params },
+                ],
+              }
+            : r
+        ),
+      };
+    }
+
+    case 'RESET': {
+      const nextState = action.payload;
+
+      const routeNamesSet = new Set(state.routeNames);
+
+      if (
+        nextState.routes.length === 0 ||
+        nextState.routes.some(
+          (route: { name: string }) => !routeNamesSet.has(route.name)
+        )
+      ) {
+        return null;
+      }
 
+      if (nextState.stale === false) {
         if (
-          nextState.routes.length === 0 ||
-          nextState.routes.some(
-            (route: { name: string }) => !state.routeNames.includes(route.name)
-          )
+          state.routeNames.length !== nextState.routeNames.length ||
+          nextState.routeNames.some((name) => !routeNamesSet.has(name)) ||
+          !Number.isInteger(nextState.index) ||
+          nextState.index < 0 ||
+          nextState.index >= nextState.routes.length
         ) {
           return null;
         }
 
-        if (nextState.stale === false) {
-          if (
-            state.routeNames.length !== nextState.routeNames.length ||
-            nextState.routeNames.some(
-              (name) => !state.routeNames.includes(name)
-            )
-          ) {
-            return null;
-          }
-
-          return {
-            ...nextState,
-            routes: nextState.routes.map((route) =>
-              route.key ? route : { ...route, key: `${route.name}-${nanoid()}` }
-            ),
-          };
-        }
-
-        return nextState;
+        return {
+          ...nextState,
+          routes: nextState.routes.map((route) =>
+            'key' in route && route.key
+              ? route
+              : { ...route, key: `${route.name}-${nanoid()}` }
+          ),
+        };
       }
 
-      default:
-        return null;
+      return nextState;
     }
-  },
+
+    default:
+      return null;
+  }
+}
+
+/**
+ * Base router object that can be used when writing custom routers.
+ * This provides few helper methods to handle common actions such as `RESET`.
+ */
+export const BaseRouter = {
+  getStateForAction,
 
   shouldActionChangeFocus(action: CommonNavigationAction) {
     return action.type === 'NAVIGATE';

package/src/CommonActions.tsx

@@ -9,59 +9,59 @@ type ResetState =
 
 type GoBackAction = {
   type: 'GO_BACK';
-  source?: string;
-  target?: string;
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type NavigateAction = {
   type: 'NAVIGATE';
   payload: {
     name: string;
-    params?: object;
-    path?: string;
-    merge?: boolean;
-    pop?: boolean;
+    params?: object | undefined;
+    path?: string | undefined;
+    merge?: boolean | undefined;
+    pop?: boolean | undefined;
   };
-  source?: string;
-  target?: string;
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type ResetAction = {
   type: 'RESET';
-  payload: ResetState | undefined;
-  source?: string;
-  target?: string;
+  payload: ResetState;
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type SetParamsAction = {
   type: 'SET_PARAMS';
-  payload: { params?: object };
-  source?: string;
-  target?: string;
+  payload: { params?: object | undefined };
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type ReplaceParamsAction = {
   type: 'REPLACE_PARAMS';
-  payload: { params?: object };
-  source?: string;
-  target?: string;
+  payload: { params?: object | undefined };
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type PushParamsAction = {
   type: 'PUSH_PARAMS';
-  payload: { params?: object };
-  source?: string;
-  target?: string;
+  payload: { params?: object | undefined };
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 type PreloadAction = {
   type: 'PRELOAD';
   payload: {
     name: string;
-    params?: object;
+    params?: object | undefined;
   };
-  source?: string;
-  target?: string;
+  source?: string | undefined;
+  target?: string | undefined;
 };
 
 export type Action =
@@ -73,54 +73,32 @@ export type Action =
   | PushParamsAction
   | PreloadAction;
 
-export function goBack(): Action {
-  return { type: 'GO_BACK' };
+export function goBack() {
+  return { type: 'GO_BACK' } as const satisfies GoBackAction;
 }
 
 export function navigate(
   name: string,
-  params?: object,
-  options?: {
-    merge?: boolean;
-    pop?: boolean;
-  }
-): Action;
-
-export function navigate(options: {
-  name: string;
-  params?: object;
-  path?: string;
-  merge?: boolean;
-  pop?: boolean;
-}): Action;
-
-export function navigate(...args: any): Action {
-  if (typeof args[0] === 'string') {
-    const [name, params, options] = args;
-
-    return {
-      type: 'NAVIGATE',
-      payload: {
-        name,
-        params,
-        merge: options?.merge,
-        pop: options?.pop,
-      },
-    };
-  } else {
-    const payload = args[0] || {};
-
-    if (!('name' in payload)) {
-      throw new Error(
-        'You need to specify a name when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions#navigate for usage.'
-      );
-    }
-
-    return { type: 'NAVIGATE', payload };
-  }
+  params?: object | undefined,
+  options?:
+    | {
+        merge?: boolean | undefined;
+        pop?: boolean | undefined;
+      }
+    | undefined
+) {
+  return {
+    type: 'NAVIGATE',
+    payload: {
+      name,
+      params,
+      merge: options?.merge,
+      pop: options?.pop,
+    },
+  } as const satisfies NavigateAction;
 }
 
-export function reset(state: ResetState | undefined) {
+export function reset(state: ResetState) {
   return { type: 'RESET', payload: state } as const satisfies ResetAction;
 }
 
@@ -145,7 +123,7 @@ export function pushParams(params: object) {
   } as const satisfies PushParamsAction;
 }
 
-export function preload(name: string, params?: object) {
+export function preload(name: string, params?: object | undefined) {
   return {
     type: 'PRELOAD',
     payload: { name, params },

package/src/DrawerRouter.tsx

@@ -1,11 +1,11 @@
 import { nanoid } from 'nanoid/non-secure';
 
+import { SwitchRouter } from './SwitchRouter';
 import {
   type TabActionHelpers,
   TabActions,
   type TabActionType,
   type TabNavigationState,
-  TabRouter,
   type TabRouterOptions,
 } from './TabRouter';
 import type {
@@ -14,18 +14,19 @@ import type {
   PartialState,
   Router,
 } from './types';
+
 export type DrawerStatus = 'open' | 'closed';
 
 export type DrawerActionType =
   | TabActionType
   | {
       type: 'OPEN_DRAWER' | 'CLOSE_DRAWER' | 'TOGGLE_DRAWER';
-      source?: string;
-      target?: string;
+      source?: string | undefined;
+      target?: string | undefined;
     };
 
 export type DrawerRouterOptions = TabRouterOptions & {
-  defaultStatus?: DrawerStatus;
+  defaultStatus?: DrawerStatus | undefined;
 };
 
 export type DrawerNavigationState<ParamList extends ParamListBase> = Omit<
@@ -44,7 +45,11 @@ export type DrawerNavigationState<ParamList extends ParamListBase> = Omit<
    * List of previously visited route keys and drawer open status.
    */
   history: (
-    | { type: 'route'; key: string }
+    | {
+        type: 'route';
+        key: string;
+        params?: object | undefined;
+      }
     | { type: 'drawer'; status: DrawerStatus }
   )[];
 };
@@ -87,10 +92,7 @@ export function DrawerRouter({
   DrawerNavigationState<ParamListBase>,
   DrawerActionType | CommonNavigationAction
 > {
-  const router = TabRouter(rest) as unknown as Router<
-    DrawerNavigationState<ParamListBase>,
-    TabActionType | CommonNavigationAction
-  >;
+  const router = SwitchRouter<'drawer'>(rest);
 
   const isDrawerInHistory = (
     state:
@@ -179,11 +181,16 @@ export function DrawerRouter({
         return partialState;
       }
 
-      let state = router.getRehydratedState(partialState, {
-        routeNames,
-        routeParamList,
-        routeGetIdList,
-      });
+      let state: DrawerNavigationState<ParamListBase> = {
+        ...router.getRehydratedState(partialState, {
+          routeNames,
+          routeParamList,
+          routeGetIdList,
+        }),
+        default: defaultStatus,
+        type: 'drawer',
+        key: `drawer-${nanoid()}`,
+      };
 
       if (isDrawerInHistory(partialState)) {
         // Re-sync the drawer entry in history to correct it if it was wrong
@@ -191,12 +198,7 @@ export function DrawerRouter({
         state = addDrawerToHistory(state);
       }
 
-      return {
-        ...state,
-        default: defaultStatus,
-        type: 'drawer',
-        key: `drawer-${nanoid()}`,
-      };
+      return state;
     },
 
     getStateForRouteFocus(state, key) {
@@ -224,8 +226,12 @@ export function DrawerRouter({
         case 'NAVIGATE': {
           const result = router.getStateForAction(state, action, options);
 
-          if (result != null && result.index !== state.index) {
-            return closeDrawer(result as DrawerNavigationState<ParamListBase>);
+          if (
+            result != null &&
+            result.stale === false &&
+            result.index !== state.index
+          ) {
+            return closeDrawer(result);
           }
 
           return result;