kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-26 13:35:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add nested config in deep linking (#210)

Browse Source 
Fixes #154
This commit is contained in:
Wojciech Lewicki
2019-12-16 13:30:28 +01:00
committed by Satyajit Sahoo
parent 31cf19912b
commit 8002d51795
3 changed files with 390 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
packages/core/src/__tests__/getStateFromPath.test.tsx
View File

@@ -127,3 +127,238 @@ it('handles route without param', () => {
it('returns undefined for invalid path', () => {
expect(getStateFromPath('//')).toBe(undefined);
});
it('converts path string to initial state with config with nested screens', () => {
expect(
getStateFromPath(
'/few/bar/sweet/apple/baz/jane?count=10&answer=42&valid=true',
{
Foo: {
Foe: 'few',
},
Bar: 'bar/:type/:fruit',
Baz: {
path: 'baz/:author',
parse: {
author: (author: string) =>
author.replace(/^\w/, c => c.toUpperCase()),
count: Number,
valid: Boolean,
},
},
}
)
).toEqual({
routes: [
{
name: 'Foo',
state: {
routes: [
{
name: 'Foe',
state: {
routes: [
{
name: 'Bar',
params: { fruit: 'apple', type: 'sweet' },
state: {
routes: [
{
name: 'Baz',
params: {
author: 'Jane',
count: 10,
answer: '42',
valid: true,
},
},
],
},
},
],
},
},
],
},
},
],
});
});
it('converts path string to initial state with config with nested screens and unused configs', () => {
expect(
getStateFromPath('/few/baz/jane?count=10&answer=42&valid=true', {
Foo: {
Foe: 'few',
},
Baz: {
path: 'baz/:author',
parse: {
author: (author: string) =>
author.replace(/^\w/, c => c.toUpperCase()),
count: Number,
valid: Boolean,
},
},
})
).toEqual({
routes: [
{
name: 'Foo',
state: {
routes: [
{
name: 'Foe',
state: {
routes: [
{
name: 'Baz',
params: {
author: 'Jane',
count: 10,
answer: '42',
valid: true,
},
},
],
},
},
],
},
},
],
});
});
it('handles parse in nested object with parse in it', () => {
expect(
getStateFromPath(
'/bar/sweet/apple/few/bis/jane?count=10&answer=42&valid=true',
{
Foo: {
Foe: 'few',
},
Bar: 'bar/:type/:fruit',
Baz: {
Bis: {
path: 'bis/:author',
parse: {
author: (author: string) =>
author.replace(/^\w/, c => c.toUpperCase()),
count: Number,
valid: Boolean,
},
},
},
}
)
).toEqual({
routes: [
{
name: 'Bar',
params: { fruit: 'apple', type: 'sweet' },
state: {
routes: [
{
name: 'Foo',
state: {
routes: [
{
name: 'Foe',
state: {
routes: [
{
name: 'Baz',
state: {
routes: [
{
name: 'Bis',
params: {
author: 'Jane',
count: 10,
answer: '42',
valid: true,
},
},
],
},
},
],
},
},
],
},
},
],
},
},
],
});
});
it('handles parse in nested object for second route depth', () => {
expect(
getStateFromPath('/baz', {
Foo: {
path: 'foo',
Foe: 'foe',
Bar: {
Baz: 'baz',
},
},
})
).toEqual({
routes: [
{
name: 'Foo',
state: {
routes: [
{
name: 'Bar',
state: {
routes: [{ name: 'Baz' }],
},
},
],
},
},
],
});
});
it('handles parse in nested object for second route depth and and path and parse in roots', () => {
expect(
getStateFromPath('/baz', {
Foo: {
path: 'foo/:id',
parse: {
id: Number,
},
Foe: 'foe',
Bar: {
path: 'bar/:id',
parse: {
id: Number,
},
Baz: 'baz',
},
},
})
).toEqual({
routes: [
{
name: 'Foo',
state: {
routes: [
{
name: 'Bar',
state: {
routes: [{ name: 'Baz' }],
},
},
],
},
},
],
});
});

189
packages/core/src/getStateFromPath.tsx
View File

@@ -1,11 +1,18 @@
import escape from 'escape-string-regexp';
import queryString from 'query-string';
import { NavigationState, PartialState } from './types';
import { NavigationState, PartialState, InitialState } from './types';
type ParseConfig = Record<string, (value: string) => any>;
type Options = {
[routeName: string]: string | { path: string; parse?: ParseConfig };
[routeName: string]: string | { path: string; parse?: ParseConfig } | Options;
};
type RouteConfig = {
match: RegExp;
pattern: string;
routeNames: string[];
parse: Record<string, (value: string) => any> | undefined;
};
/**
@@ -31,27 +38,10 @@ export default function getStateFromPath(
path: string,
options: Options = {}
): PartialState<NavigationState> | undefined {
// Create a normalized config array which will be easier to use
const routeConfig = Object.keys(options).map(key => {
const pattern =
typeof options[key] === 'string'
? (options[key] as string)
: (options[key] as { path: string }).path;
// Create a regex from the provided path pattern
// With the pattern, we can match segements containing params and extract them
const match = new RegExp(
'^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
);
return {
match,
pattern,
routeName: key,
// @ts-ignore
parse: options[key].parse,
};
});
// Create a normalized configs array which will be easier to use
const configs = ([] as RouteConfig[]).concat(
...Object.keys(options).map(key => createNormalizedConfigs(key, options))
);
let result: PartialState<NavigationState> | undefined;
let current: PartialState<NavigationState> | undefined;
@@ -62,16 +52,16 @@ export default function getStateFromPath(
.replace(/\?.*/, ''); // Remove query params which we will handle later
while (remaining) {
let routeName;
let routeNames;
let params;
// Go through all configs, and see if the next path segment matches our regex
for (const config of routeConfig) {
for (const config of configs) {
const match = remaining.match(config.match);
// If our regex matches, we need to extract params from the path
if (match) {
routeName = config.routeName;
routeNames = config.routeNames;
const paramPatterns = config.pattern
.split('/')
@@ -99,20 +89,54 @@ export default function getStateFromPath(
}
// If we hadn't matched any segments earlier, use the path as route name
if (routeName === undefined) {
if (routeNames === undefined) {
const segments = remaining.split('/');
routeName = decodeURIComponent(segments[0]);
routeNames = [decodeURIComponent(segments[0])];
segments.shift();
remaining = segments.join('/');
}
const state = {
routes: [{ name: routeName, params }],
};
let state: InitialState;
if (routeNames.length === 1) {
state = {
routes: [
{ name: routeNames.shift() as string, ...(params && { params }) },
],
};
} else {
state = {
routes: [{ name: routeNames.shift() as string, state: { routes: [] } }],
};
let helper = state.routes[0].state as InitialState;
let routeName;
while ((routeName = routeNames.shift())) {
if (routeNames.length === 0) {
helper.routes.push({
name: routeName,
...(params && { params }),
});
} else {
helper.routes[0] = {
name: routeName,
state: {
routes: [],
},
};
helper = helper.routes[0].state as InitialState;
}
}
}
if (current) {
// The state should be nested inside the route we parsed before
// The state should be nested inside the deepest route we parsed before
while (current.routes[0].state) {
current = current.routes[0].state;
}
current.routes[0].state = state;
} else {
result = state;
@@ -128,17 +152,20 @@ export default function getStateFromPath(
const query = path.split('?')[1];
if (query) {
while (current.routes[0].state) {
// The query params apply to the deepest route
current = current.routes[0].state;
}
const route = current.routes[0];
const params = queryString.parse(query);
const config = options[route.name]
? (options[route.name] as { parse?: ParseConfig }).parse
: undefined;
const parseFunction = findParseConfigForRoute(route.name, options);
if (config) {
if (parseFunction) {
Object.keys(params).forEach(name => {
if (config[name] && typeof params[name] === 'string') {
params[name] = config[name](params[name] as string);
if (parseFunction[name] && typeof params[name] === 'string') {
params[name] = parseFunction[name](params[name] as string);
}
});
}
@@ -148,3 +175,89 @@ export default function getStateFromPath(
return result;
}
function createNormalizedConfigs(
key: string,
routeConfig: Options,
routeNames: string[] = []
): RouteConfig[] {
const configs = [];
routeNames.push(key);
const value = routeConfig[key];
if (typeof value === 'string') {
// If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
configs.push(createConfigItem(routeNames, value));
} else if (typeof value === 'object') {
// if an object is specified as the value (e.g. Foo: { ... }),
// it could have config object and optionally nested config
Object.keys(value).forEach(nestedKey => {
if (nestedKey === 'path') {
configs.push(
createConfigItem(
routeNames,
value[nestedKey] as string,
value.parse ? (value.parse as ParseConfig) : undefined
)
);
} else if (nestedKey === 'parse') {
// We handle custom parse function when a `path` is specified (in nestedKey === path)
} else {
// If the name of the key is not `path` or `parse`, it's a nested config for route
// So we need to traverse into it and collect the configs
const result = createNormalizedConfigs(
nestedKey,
routeConfig[key] as Options,
routeNames
);
configs.push(...result);
}
});
}
routeNames.pop();
return configs;
}
function createConfigItem(
routeNames: string[],
pattern: string,
parse?: ParseConfig
): RouteConfig {
const match = new RegExp(
'^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
);
return {
match,
pattern,
// The routeNames array is mutated, so copy it to keep the current state
routeNames: [...routeNames],
parse,
};
}
function findParseConfigForRoute(
routeName: string,
config: Options
): ParseConfig | undefined {
if (config[routeName]) {
return (config[routeName] as { parse?: ParseConfig }).parse;
}
for (const name in config) {
if (typeof config[name] === 'object') {
const parse = findParseConfigForRoute(routeName, config[name] as Options);
if (parse) {
return parse;
}
}
}
return undefined;
}

15
packages/native/src/useLinking.tsx
View File

@@ -3,15 +3,11 @@ import { Linking } from 'react-native';
import {
getStateFromPath as getStateFromPathDefault,
NavigationContainerRef,
NavigationState,
PartialState,
} from '@react-navigation/core';
type Config = {
[routeName: string]:
| string
| { path: string; parse?: Record<string, (value: string) => any> };
};
type GetStateFromPath = typeof getStateFromPathDefault;
type Config = Parameters<GetStateFromPath>[1];
type Options = {
/**
@@ -36,10 +32,7 @@ type Options = {
/**
* Custom function to parse the URL object to a valid navigation state (advanced).
*/
getStateFromPath?: (
path: string,
options?: Config
) => PartialState<NavigationState> | undefined;
getStateFromPath?: GetStateFromPath;
};
export default function useLinking(