@amazon-devices/react-navigation__routers 2.0.1758683737

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,177 @@
+import type * as CommonActions from './CommonActions';
+export type CommonNavigationAction = CommonActions.Action;
+type NavigationRoute<ParamList extends ParamListBase, RouteName extends keyof ParamList> = Route<Extract<RouteName, string>, ParamList[RouteName]> & {
+    state?: NavigationState | PartialState<NavigationState>;
+};
+export type NavigationState<ParamList extends ParamListBase = ParamListBase> = Readonly<{
+    /**
+     * Unique key for the navigation state.
+     */
+    key: string;
+    /**
+     * Index of the currently focused route.
+     */
+    index: number;
+    /**
+     * List of valid route names as defined in the screen components.
+     */
+    routeNames: Extract<keyof ParamList, string>[];
+    /**
+     * Alternative entries for history.
+     */
+    history?: unknown[];
+    /**
+     * List of rendered routes.
+     */
+    routes: NavigationRoute<ParamList, keyof ParamList>[];
+    /**
+     * Custom type for the state, whether it's for tab, stack, drawer etc.
+     * During rehydration, the state will be discarded if type doesn't match with router type.
+     * It can also be used to detect the type of the navigator we're dealing with.
+     */
+    type: string;
+    /**
+     * Whether the navigation state has been rehydrated.
+     */
+    stale: false;
+}>;
+export type InitialState = Readonly<Partial<Omit<NavigationState, 'stale' | 'routes'>> & {
+    routes: (Omit<Route<string>, 'key'> & {
+        state?: InitialState;
+    })[];
+}>;
+export type PartialRoute<R extends Route<string>> = Omit<R, 'key'> & {
+    key?: string;
+    state?: PartialState<NavigationState>;
+};
+export type PartialState<State extends NavigationState> = Partial<Omit<State, 'stale' | 'routes'>> & Readonly<{
+    stale?: true;
+    routes: PartialRoute<Route<State['routeNames'][number]>>[];
+}>;
+export type Route<RouteName extends string, Params extends object | undefined = object | undefined> = Readonly<{
+    /**
+     * Unique key for the route.
+     */
+    key: string;
+    /**
+     * User-provided name for the route.
+     */
+    name: RouteName;
+    /**
+     * Path associated with the route.
+     * Usually present when the screen was opened from a deep link.
+     */
+    path?: string;
+}> & (undefined extends Params ? Readonly<{
+    /**
+     * Params for this route
+     */
+    params?: Readonly<Params>;
+}> : Readonly<{
+    /**
+     * Params for this route
+     */
+    params: Readonly<Params>;
+}>);
+export type ParamListBase = Record<string, object | undefined>;
+export type NavigationAction = Readonly<{
+    /**
+     * Type of the action (e.g. `NAVIGATE`)
+     */
+    type: string;
+    /**
+     * Additional data for the action
+     */
+    payload?: object;
+    /**
+     * Key of the route which dispatched this action.
+     */
+    source?: string;
+    /**
+     * Key of the navigator which should handle this action.
+     */
+    target?: string;
+}>;
+export type ActionCreators<Action extends NavigationAction> = {
+    [key: string]: (...args: any) => Action;
+};
+export type DefaultRouterOptions<RouteName extends string = string> = {
+    /**
+     * Name of the route to focus by on initial render.
+     * If not specified, usually the first route is used.
+     */
+    initialRouteName?: RouteName;
+};
+export type RouterFactory<State extends NavigationState, Action extends NavigationAction, RouterOptions extends DefaultRouterOptions> = (options: RouterOptions) => Router<State, Action>;
+export type RouterConfigOptions = {
+    routeNames: string[];
+    routeParamList: ParamListBase;
+    routeGetIdList: Record<string, ((options: {
+        params?: Record<string, any>;
+    }) => string | undefined) | undefined>;
+};
+export type Router<State extends NavigationState, Action extends NavigationAction> = {
+    /**
+     * Type of the router. Should match the `type` property in state.
+     * If the type doesn't match, the state will be discarded during rehydration.
+     */
+    type: State['type'];
+    /**
+     * Initialize the navigation state.
+     *
+     * @param options.routeNames List of valid route names as defined in the screen components.
+     * @param options.routeParamsList Object containing params for each route.
+     */
+    getInitialState(options: RouterConfigOptions): State;
+    /**
+     * Rehydrate the full navigation state from a given partial state.
+     *
+     * @param partialState Navigation state to rehydrate from.
+     * @param options.routeNames List of valid route names as defined in the screen components.
+     * @param options.routeParamsList Object containing params for each route.
+     */
+    getRehydratedState(partialState: PartialState<State> | State, options: RouterConfigOptions): State;
+    /**
+     * Take the current state and updated list of route names, and return a new state.
+     *
+     * @param state State object to update.
+     * @param options.routeNames New list of route names.
+     * @param options.routeParamsList Object containing params for each route.
+     */
+    getStateForRouteNamesChange(state: State, options: RouterConfigOptions & {
+        /**
+         * List of routes whose key has changed even if they still have the same name.
+         * This allows to remove screens declaratively.
+         */
+        routeKeyChanges: string[];
+    }): State;
+    /**
+     * Take the current state and key of a route, and return a new state with the route focused
+     *
+     * @param state State object to apply the action on.
+     * @param key Key of the route to focus.
+     */
+    getStateForRouteFocus(state: State, key: string): State;
+    /**
+     * Take the current state and action, and return a new state.
+     * If the action cannot be handled, return `null`.
+     *
+     * @param state State object to apply the action on.
+     * @param action Action object to apply.
+     * @param options.routeNames List of valid route names as defined in the screen components.
+     * @param options.routeParamsList Object containing params for each route.
+     */
+    getStateForAction(state: State, action: Action, options: RouterConfigOptions): State | PartialState<State> | null;
+    /**
+     * Whether the action should also change focus in parent navigator
+     *
+     * @param action Action object to check.
+     */
+    shouldActionChangeFocus(action: NavigationAction): boolean;
+    /**
+     * Action creators for the router.
+     */
+    actionCreators?: ActionCreators<Action>;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1 @@
+{"name": "@amazon-devices/react-navigation__routers", "description": "Routers to help build custom navigators", "version": "2.0.1758683737+6.1.9", "keywords": ["react", "react-native", "react-navigation"], "license": "See license in LICENSE", "repository": {"type": "git", "url": "https://github.com/react-navigation/react-navigation.git", "directory": "packages/routers"}, "bugs": {"url": "https://github.com/react-navigation/react-navigation/issues"}, "homepage": "https://reactnavigation.org/docs/custom-routers/", "main": "lib/commonjs/index.js", "react-native": "src/index.tsx", "source": "src/index.tsx", "module": "lib/module/index.js", "types": "lib/typescript/src/index.d.ts", "files": ["src", "lib", "kepler-compatibility.json", "!**/__tests__", "SystemModules", "SystemBundles", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "sideEffects": false, "kepler": {"temporary-alias-for-package": {"name": "@react-navigation/routers", "version": "6.1.9"}}, "publishConfig": {"access": "public"}, "scripts": {"clean": "del lib"}, "dependencies": {"nanoid": "3.1.23"}, "devDependencies": {"del-cli": "5.0.0", "react-native-builder-bob": "0.20.4", "typescript": "4.9.4", "@types/jest": "26.0.15"}, "react-native-builder-bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", ["typescript", {"project": "tsconfig.build.json"}]]}}

package/src/BaseRouter.tsx

@@ -0,0 +1,81 @@
+import { nanoid } from 'nanoid/non-secure';
+
+import type {
+  CommonNavigationAction,
+  NavigationState,
+  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`.
+ */
+const BaseRouter = {
+  getStateForAction<State extends NavigationState>(
+    state: State,
+    action: CommonNavigationAction
+  ): State | PartialState<State> | null {
+    switch (action.type) {
+      case 'SET_PARAMS': {
+        const index = action.source
+          ? 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: { ...r.params, ...action.payload.params } }
+              : r
+          ),
+        };
+      }
+
+      case 'RESET': {
+        const nextState = action.payload as State | PartialState<State>;
+
+        if (
+          nextState.routes.length === 0 ||
+          nextState.routes.some(
+            (route: { name: string }) => !state.routeNames.includes(route.name)
+          )
+        ) {
+          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;
+      }
+
+      default:
+        return null;
+    }
+  },
+
+  shouldActionChangeFocus(action: CommonNavigationAction) {
+    return action.type === 'NAVIGATE';
+  },
+};
+
+export default BaseRouter;

package/src/CommonActions.tsx

@@ -0,0 +1,89 @@
+import type { NavigationState, PartialState, Route } from './types';
+
+type ResetState =
+  | PartialState<NavigationState>
+  | NavigationState
+  | (Omit<NavigationState, 'routes'> & {
+      routes: Omit<Route<string>, 'key'>[];
+    });
+
+export type Action =
+  | {
+      type: 'GO_BACK';
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'NAVIGATE';
+      payload:
+        | {
+            key: string;
+            name?: undefined;
+            params?: object;
+            path?: string;
+            merge?: boolean;
+          }
+        | {
+            name: string;
+            key?: string;
+            params?: object;
+            path?: string;
+            merge?: boolean;
+          };
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'RESET';
+      payload: ResetState | undefined;
+      source?: string;
+      target?: string;
+    }
+  | {
+      type: 'SET_PARAMS';
+      payload: { params?: object };
+      source?: string;
+      target?: string;
+    };
+
+export function goBack(): Action {
+  return { type: 'GO_BACK' };
+}
+
+export function navigate(
+  options:
+    | { key: string; params?: object; path?: string; merge?: boolean }
+    | {
+        name: string;
+        key?: string;
+        params?: object;
+        path?: string;
+        merge?: boolean;
+      }
+): Action;
+// eslint-disable-next-line no-redeclare
+export function navigate(name: string, params?: object): Action;
+// eslint-disable-next-line no-redeclare
+export function navigate(...args: any): Action {
+  if (typeof args[0] === 'string') {
+    return { type: 'NAVIGATE', payload: { name: args[0], params: args[1] } };
+  } else {
+    const payload = args[0] || {};
+
+    if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {
+      throw new Error(
+        'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions#navigate for usage.'
+      );
+    }
+
+    return { type: 'NAVIGATE', payload };
+  }
+}
+
+export function reset(state: ResetState | undefined): Action {
+  return { type: 'RESET', payload: state };
+}
+
+export function setParams(params: object): Action {
+  return { type: 'SET_PARAMS', payload: { params } };
+}

package/src/DrawerRouter.tsx

@@ -0,0 +1,247 @@
+import { nanoid } from 'nanoid/non-secure';
+
+import TabRouter, {
+  TabActionHelpers,
+  TabActions,
+  TabActionType,
+  TabNavigationState,
+  TabRouterOptions,
+} from './TabRouter';
+import type {
+  CommonNavigationAction,
+  ParamListBase,
+  PartialState,
+  Router,
+} from './types';
+export type DrawerStatus = 'open' | 'closed';
+
+export type DrawerActionType =
+  | TabActionType
+  | {
+      type: 'OPEN_DRAWER' | 'CLOSE_DRAWER' | 'TOGGLE_DRAWER';
+      source?: string;
+      target?: string;
+    };
+
+export type DrawerRouterOptions = TabRouterOptions & {
+  defaultStatus?: DrawerStatus;
+};
+
+export type DrawerNavigationState<ParamList extends ParamListBase> = Omit<
+  TabNavigationState<ParamList>,
+  'type' | 'history'
+> & {
+  /**
+   * Type of the router, in this case, it's drawer.
+   */
+  type: 'drawer';
+  /**
+   * Default status of the drawer.
+   */
+  default: DrawerStatus;
+  /**
+   * List of previously visited route keys and drawer open status.
+   */
+  history: (
+    | { type: 'route'; key: string }
+    | { type: 'drawer'; status: DrawerStatus }
+  )[];
+};
+
+export type DrawerActionHelpers<ParamList extends ParamListBase> =
+  TabActionHelpers<ParamList> & {
+    /**
+     * Open the drawer sidebar.
+     */
+    openDrawer(): void;
+
+    /**
+     * Close the drawer sidebar.
+     */
+    closeDrawer(): void;
+
+    /**
+     * Open the drawer sidebar if closed, or close if opened.
+     */
+    toggleDrawer(): void;
+  };
+
+export const DrawerActions = {
+  ...TabActions,
+  openDrawer(): DrawerActionType {
+    return { type: 'OPEN_DRAWER' };
+  },
+  closeDrawer(): DrawerActionType {
+    return { type: 'CLOSE_DRAWER' };
+  },
+  toggleDrawer(): DrawerActionType {
+    return { type: 'TOGGLE_DRAWER' };
+  },
+};
+
+export default function DrawerRouter({
+  defaultStatus = 'closed',
+  ...rest
+}: DrawerRouterOptions): Router<
+  DrawerNavigationState<ParamListBase>,
+  DrawerActionType | CommonNavigationAction
+> {
+  const router = TabRouter(rest) as unknown as Router<
+    DrawerNavigationState<ParamListBase>,
+    TabActionType | CommonNavigationAction
+  >;
+
+  const isDrawerInHistory = (
+    state:
+      | DrawerNavigationState<ParamListBase>
+      | PartialState<DrawerNavigationState<ParamListBase>>
+  ) => Boolean(state.history?.some((it) => it.type === 'drawer'));
+
+  const addDrawerToHistory = (
+    state: DrawerNavigationState<ParamListBase>
+  ): DrawerNavigationState<ParamListBase> => {
+    if (isDrawerInHistory(state)) {
+      return state;
+    }
+
+    return {
+      ...state,
+      history: [
+        ...state.history,
+        {
+          type: 'drawer',
+          status: defaultStatus === 'open' ? 'closed' : 'open',
+        },
+      ],
+    };
+  };
+
+  const removeDrawerFromHistory = (
+    state: DrawerNavigationState<ParamListBase>
+  ): DrawerNavigationState<ParamListBase> => {
+    if (!isDrawerInHistory(state)) {
+      return state;
+    }
+
+    return {
+      ...state,
+      history: state.history.filter((it) => it.type !== 'drawer'),
+    };
+  };
+
+  const openDrawer = (
+    state: DrawerNavigationState<ParamListBase>
+  ): DrawerNavigationState<ParamListBase> => {
+    if (defaultStatus === 'open') {
+      return removeDrawerFromHistory(state);
+    }
+
+    return addDrawerToHistory(state);
+  };
+
+  const closeDrawer = (
+    state: DrawerNavigationState<ParamListBase>
+  ): DrawerNavigationState<ParamListBase> => {
+    if (defaultStatus === 'open') {
+      return addDrawerToHistory(state);
+    }
+
+    return removeDrawerFromHistory(state);
+  };
+
+  return {
+    ...router,
+
+    type: 'drawer',
+
+    getInitialState({ routeNames, routeParamList, routeGetIdList }) {
+      const state = router.getInitialState({
+        routeNames,
+        routeParamList,
+        routeGetIdList,
+      });
+
+      return {
+        ...state,
+        default: defaultStatus,
+        stale: false,
+        type: 'drawer',
+        key: `drawer-${nanoid()}`,
+      };
+    },
+
+    getRehydratedState(
+      partialState,
+      { routeNames, routeParamList, routeGetIdList }
+    ) {
+      if (partialState.stale === false) {
+        return partialState;
+      }
+
+      let state = router.getRehydratedState(partialState, {
+        routeNames,
+        routeParamList,
+        routeGetIdList,
+      });
+
+      if (isDrawerInHistory(partialState)) {
+        // Re-sync the drawer entry in history to correct it if it was wrong
+        state = removeDrawerFromHistory(state);
+        state = addDrawerToHistory(state);
+      }
+
+      return {
+        ...state,
+        default: defaultStatus,
+        type: 'drawer',
+        key: `drawer-${nanoid()}`,
+      };
+    },
+
+    getStateForRouteFocus(state, key) {
+      const result = router.getStateForRouteFocus(state, key);
+
+      return closeDrawer(result);
+    },
+
+    getStateForAction(state, action, options) {
+      switch (action.type) {
+        case 'OPEN_DRAWER':
+          return openDrawer(state);
+
+        case 'CLOSE_DRAWER':
+          return closeDrawer(state);
+
+        case 'TOGGLE_DRAWER':
+          if (isDrawerInHistory(state)) {
+            return removeDrawerFromHistory(state);
+          }
+
+          return addDrawerToHistory(state);
+
+        case 'JUMP_TO':
+        case 'NAVIGATE': {
+          const result = router.getStateForAction(state, action, options);
+
+          if (result != null && result.index !== state.index) {
+            return closeDrawer(result as DrawerNavigationState<ParamListBase>);
+          }
+
+          return result;
+        }
+
+        case 'GO_BACK':
+          if (isDrawerInHistory(state)) {
+            return removeDrawerFromHistory(state);
+          }
+
+          return router.getStateForAction(state, action, options);
+
+        default:
+          return router.getStateForAction(state, action, options);
+      }
+    },
+
+    actionCreators: DrawerActions,
+  };
+}