import type { NavigationState, PartialState, Route, } from '@react-navigation/routers'; import * as queryString from 'query-string'; import fromEntries from './fromEntries'; import type { PathConfig, PathConfigMap } from './types'; import validatePathConfig from './validatePathConfig'; type Options = { initialRouteName?: string; screens: PathConfigMap; }; type State = NavigationState | Omit, 'stale'>; type StringifyConfig = Record string>; type ConfigItem = { pattern?: string; stringify?: StringifyConfig; screens?: Record; }; const getActiveRoute = (state: State): { name: string; params?: object } => { const route = typeof state.index === 'number' ? state.routes[state.index] : state.routes[state.routes.length - 1]; if (route.state) { return getActiveRoute(route.state); } return route; }; /** * Utility to serialize a navigation state object to a path string. * * @example * ```js * getPathFromState( * { * routes: [ * { * name: 'Chat', * params: { author: 'Jane', id: 42 }, * }, * ], * }, * { * screens: { * Chat: { * path: 'chat/:author/:id', * stringify: { author: author => author.toLowerCase() } * } * } * } * ) * ``` * * @param state Navigation state to serialize. * @param options Extra options to fine-tune how to serialize the path. * @returns Path representing the state, e.g. /foo/bar?count=42. */ export default function getPathFromState( state: State, options?: Options ): string { if (state == null) { throw Error( "Got 'undefined' for the navigation state. You must pass a valid state object." ); } if (options) { validatePathConfig(options); } // Create a normalized configs object which will be easier to use const configs: Record = options?.screens ? createNormalizedConfigs(options?.screens) : {}; let path = '/'; let current: State | undefined = state; const allParams: Record = {}; while (current) { let index = typeof current.index === 'number' ? current.index : 0; let route = current.routes[index] as Route & { state?: State; }; let pattern: string | undefined; let focusedParams: Record | undefined; let focusedRoute = getActiveRoute(state); let currentOptions = configs; // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined let nestedRouteNames = []; let hasNext = true; while (route.name in currentOptions && hasNext) { pattern = currentOptions[route.name].pattern; nestedRouteNames.push(route.name); if (route.params) { const stringify = currentOptions[route.name]?.stringify; const currentParams = fromEntries( Object.entries(route.params).map(([key, value]) => [ key, stringify?.[key] ? stringify[key](value) : String(value), ]) ); if (pattern) { Object.assign(allParams, currentParams); } if (focusedRoute === route) { // If this is the focused route, keep the params for later use // We save it here since it's been stringified already focusedParams = { ...currentParams }; pattern ?.split('/') .filter((p) => p.startsWith(':')) // eslint-disable-next-line no-loop-func .forEach((p) => { const name = getParamName(p); // Remove the params present in the pattern since we'll only use the rest for query string if (focusedParams) { // eslint-disable-next-line @typescript-eslint/no-dynamic-delete delete focusedParams[name]; } }); } } // If there is no `screens` property or no nested state, we return pattern if (!currentOptions[route.name].screens || route.state === undefined) { hasNext = false; } else { index = typeof route.state.index === 'number' ? route.state.index : route.state.routes.length - 1; const nextRoute = route.state.routes[index]; const nestedConfig = currentOptions[route.name].screens; // if there is config for next route name, we go deeper if (nestedConfig && nextRoute.name in nestedConfig) { route = nextRoute as Route & { state?: State }; currentOptions = nestedConfig; } else { // If not, there is no sense in going deeper in config hasNext = false; } } } if (pattern === undefined) { pattern = nestedRouteNames.join('/'); } if (currentOptions[route.name] !== undefined) { path += pattern .split('/') .map((p) => { const name = getParamName(p); // We don't know what to show for wildcard patterns // Showing the route name seems ok, though whatever we show here will be incorrect // Since the page doesn't actually exist if (p === '*') { return route.name; } // If the path has a pattern for a param, put the param in the path if (p.startsWith(':')) { const value = allParams[name]; if (value === undefined && p.endsWith('?')) { // Optional params without value assigned in route.params should be ignored return ''; } return encodeURIComponent(value); } return encodeURIComponent(p); }) .join('/'); } else { path += encodeURIComponent(route.name); } if (!focusedParams) { focusedParams = focusedRoute.params; } if (route.state) { path += '/'; } else if (focusedParams) { for (let param in focusedParams) { if (focusedParams[param] === 'undefined') { // eslint-disable-next-line @typescript-eslint/no-dynamic-delete delete focusedParams[param]; } } const query = queryString.stringify(focusedParams, { sort: false }); if (query) { path += `?${query}`; } } current = route.state; } // Remove multiple as well as trailing slashes path = path.replace(/\/+/g, '/'); path = path.length > 1 ? path.replace(/\/$/, '') : path; return path; } const getParamName = (pattern: string) => pattern.replace(/^:/, '').replace(/\?$/, ''); const joinPaths = (...paths: string[]): string => ([] as string[]) .concat(...paths.map((p) => p.split('/'))) .filter(Boolean) .join('/'); const createConfigItem = ( config: PathConfig | string, parentPattern?: string ): ConfigItem => { if (typeof config === 'string') { // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern const pattern = parentPattern ? joinPaths(parentPattern, config) : config; return { pattern }; } // If an object is specified as the value (e.g. Foo: { ... }), // It can have `path` property and `screens` prop which has nested configs let pattern: string | undefined; if (config.exact && config.path === undefined) { throw new Error( "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`." ); } pattern = config.exact !== true ? joinPaths(parentPattern || '', config.path || '') : config.path || ''; const screens = config.screens ? createNormalizedConfigs(config.screens, pattern) : undefined; return { // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc. pattern: pattern?.split('/').filter(Boolean).join('/'), stringify: config.stringify, screens, }; }; const createNormalizedConfigs = ( options: PathConfigMap, pattern?: string ): Record => fromEntries( Object.entries(options).map(([name, c]) => { const result = createConfigItem(c, pattern); return [name, result]; }) );