@sigmela/router 0.0.11 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -2
- package/src/Navigation.tsx +0 -102
- package/src/NavigationStack.ts +0 -106
- package/src/Router.ts +0 -684
- package/src/RouterContext.tsx +0 -58
- package/src/ScreenStackItem.tsx +0 -64
- package/src/StackRenderer.tsx +0 -41
- package/src/TabBar/RenderTabBar.tsx +0 -154
- package/src/TabBar/TabBar.ts +0 -106
- package/src/TabBar/TabBarContext.ts +0 -4
- package/src/TabBar/useTabBar.ts +0 -10
- package/src/createController.ts +0 -27
- package/src/index.ts +0 -24
- package/src/types.ts +0 -272
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sigmela/router",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.12",
|
|
4
4
|
"description": "React Native Router",
|
|
5
5
|
"main": "./lib/module/index.js",
|
|
6
6
|
"types": "./lib/typescript/src/index.d.ts",
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
"./package.json": "./package.json"
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
16
|
-
"src",
|
|
17
16
|
"lib",
|
|
18
17
|
"android",
|
|
19
18
|
"ios",
|
package/src/Navigation.tsx
DELETED
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ScreenStack,
|
|
3
|
-
ScreenStackItem as RNNScreenStackItem,
|
|
4
|
-
} from 'react-native-screens';
|
|
5
|
-
import {
|
|
6
|
-
memo,
|
|
7
|
-
useCallback,
|
|
8
|
-
useEffect,
|
|
9
|
-
useState,
|
|
10
|
-
useSyncExternalStore,
|
|
11
|
-
} from 'react';
|
|
12
|
-
import { RenderTabBar } from './TabBar/RenderTabBar';
|
|
13
|
-
import { ScreenStackItem } from './ScreenStackItem';
|
|
14
|
-
import { RouterContext } from './RouterContext';
|
|
15
|
-
import { StyleSheet } from 'react-native';
|
|
16
|
-
import { Router } from './Router';
|
|
17
|
-
import type { NavigationAppearance } from './types';
|
|
18
|
-
|
|
19
|
-
export interface NavigationProps {
|
|
20
|
-
router: Router;
|
|
21
|
-
appearance?: NavigationAppearance;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
const EMPTY_HISTORY: any[] = [];
|
|
25
|
-
|
|
26
|
-
function useStackHistory(router: Router, stackId?: string) {
|
|
27
|
-
const subscribe = useCallback(
|
|
28
|
-
(cb: () => void) =>
|
|
29
|
-
stackId ? router.subscribeStack(stackId, cb) : () => {},
|
|
30
|
-
[router, stackId]
|
|
31
|
-
);
|
|
32
|
-
const get = useCallback(
|
|
33
|
-
() => (stackId ? router.getStackHistory(stackId) : EMPTY_HISTORY),
|
|
34
|
-
[router, stackId]
|
|
35
|
-
);
|
|
36
|
-
return useSyncExternalStore(subscribe, get, get);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export const Navigation = memo<NavigationProps>(({ router, appearance }) => {
|
|
40
|
-
const [root, setRoot] = useState(() => ({
|
|
41
|
-
hasTabBar: router.hasTabBar(),
|
|
42
|
-
rootId: router.getRootStackId(),
|
|
43
|
-
}));
|
|
44
|
-
|
|
45
|
-
useEffect(() => {
|
|
46
|
-
return router.subscribeRoot(() => {
|
|
47
|
-
setRoot({
|
|
48
|
-
hasTabBar: router.hasTabBar(),
|
|
49
|
-
rootId: router.getRootStackId(),
|
|
50
|
-
});
|
|
51
|
-
});
|
|
52
|
-
}, [router]);
|
|
53
|
-
|
|
54
|
-
const { hasTabBar, rootId } = root;
|
|
55
|
-
const rootTransition = router.getRootTransition();
|
|
56
|
-
const globalId = router.getGlobalStackId();
|
|
57
|
-
const rootItems = useStackHistory(router, rootId);
|
|
58
|
-
const globalItems = useStackHistory(router, globalId);
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<RouterContext.Provider value={router}>
|
|
62
|
-
<ScreenStack style={styles.flex}>
|
|
63
|
-
{hasTabBar && (
|
|
64
|
-
<RNNScreenStackItem
|
|
65
|
-
screenId="root-tabbar"
|
|
66
|
-
headerConfig={{ hidden: true }}
|
|
67
|
-
style={styles.flex}
|
|
68
|
-
stackAnimation={rootTransition}
|
|
69
|
-
>
|
|
70
|
-
<RenderTabBar
|
|
71
|
-
tabBar={router.tabBar!}
|
|
72
|
-
appearance={appearance?.tabBar}
|
|
73
|
-
/>
|
|
74
|
-
</RNNScreenStackItem>
|
|
75
|
-
)}
|
|
76
|
-
{rootItems.map((item) => (
|
|
77
|
-
<ScreenStackItem
|
|
78
|
-
key={item.key}
|
|
79
|
-
stackId={rootId}
|
|
80
|
-
item={item}
|
|
81
|
-
stackAnimation={rootTransition}
|
|
82
|
-
screenStyle={appearance?.screenStyle}
|
|
83
|
-
headerAppearance={appearance?.header}
|
|
84
|
-
/>
|
|
85
|
-
))}
|
|
86
|
-
{globalItems.map((item) => (
|
|
87
|
-
<ScreenStackItem
|
|
88
|
-
key={item.key}
|
|
89
|
-
stackId={globalId}
|
|
90
|
-
item={item}
|
|
91
|
-
screenStyle={appearance?.screenStyle}
|
|
92
|
-
headerAppearance={appearance?.header}
|
|
93
|
-
/>
|
|
94
|
-
))}
|
|
95
|
-
</ScreenStack>
|
|
96
|
-
</RouterContext.Provider>
|
|
97
|
-
);
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
const styles = StyleSheet.create({
|
|
101
|
-
flex: { flex: 1 },
|
|
102
|
-
});
|
package/src/NavigationStack.ts
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import type { ScreenOptions } from './types';
|
|
2
|
-
import { nanoid } from 'nanoid/non-secure';
|
|
3
|
-
import { match } from 'path-to-regexp';
|
|
4
|
-
import {
|
|
5
|
-
type ComponentWithController,
|
|
6
|
-
type MixedComponent,
|
|
7
|
-
} from './createController';
|
|
8
|
-
|
|
9
|
-
type BuiltRoute = {
|
|
10
|
-
routeId: string;
|
|
11
|
-
path: string;
|
|
12
|
-
match: (path: string) => false | { params: Record<string, any> };
|
|
13
|
-
component: React.ComponentType<any>;
|
|
14
|
-
controller?: ComponentWithController['controller'];
|
|
15
|
-
options?: ScreenOptions; // per-screen options only (no stack defaults merged)
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export class NavigationStack {
|
|
19
|
-
private readonly stackId: string;
|
|
20
|
-
private readonly routes: BuiltRoute[] = [];
|
|
21
|
-
private readonly defaultOptions: ScreenOptions | undefined;
|
|
22
|
-
|
|
23
|
-
// Overloads
|
|
24
|
-
constructor();
|
|
25
|
-
constructor(id: string);
|
|
26
|
-
constructor(defaultOptions: ScreenOptions);
|
|
27
|
-
constructor(id: string, defaultOptions: ScreenOptions);
|
|
28
|
-
constructor(
|
|
29
|
-
idOrOptions?: string | ScreenOptions,
|
|
30
|
-
maybeOptions?: ScreenOptions
|
|
31
|
-
) {
|
|
32
|
-
if (typeof idOrOptions === 'string') {
|
|
33
|
-
this.stackId = idOrOptions ?? `stack-${nanoid()}`;
|
|
34
|
-
this.defaultOptions = maybeOptions;
|
|
35
|
-
} else {
|
|
36
|
-
this.stackId = `stack-${nanoid()}`;
|
|
37
|
-
this.defaultOptions = idOrOptions;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
public getId(): string {
|
|
42
|
-
return this.stackId;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
public addScreen(
|
|
46
|
-
path: string,
|
|
47
|
-
mixedComponent: MixedComponent,
|
|
48
|
-
options?: ScreenOptions
|
|
49
|
-
): NavigationStack {
|
|
50
|
-
const { component, controller } = this.extractComponent(mixedComponent);
|
|
51
|
-
const routeId = `${this.stackId}-route-${this.routes.length}`;
|
|
52
|
-
const matcher = match(path);
|
|
53
|
-
|
|
54
|
-
this.routes.push({
|
|
55
|
-
routeId,
|
|
56
|
-
path,
|
|
57
|
-
match: (p: string) => {
|
|
58
|
-
const result = matcher(p);
|
|
59
|
-
return result ? { params: (result as any).params ?? {} } : false;
|
|
60
|
-
},
|
|
61
|
-
component,
|
|
62
|
-
controller,
|
|
63
|
-
options,
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
return this;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
public addModal(
|
|
70
|
-
path: string,
|
|
71
|
-
mixedComponent: MixedComponent,
|
|
72
|
-
options?: ScreenOptions
|
|
73
|
-
): NavigationStack {
|
|
74
|
-
return this.addScreen(path, mixedComponent, {
|
|
75
|
-
...options,
|
|
76
|
-
stackPresentation: 'modal',
|
|
77
|
-
});
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
public getRoutes(): BuiltRoute[] {
|
|
81
|
-
return this.routes.slice();
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
public getFirstRoute(): BuiltRoute | undefined {
|
|
85
|
-
return this.routes[0];
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
public getDefaultOptions(): ScreenOptions | undefined {
|
|
89
|
-
return this.defaultOptions;
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
private extractComponent(component: MixedComponent) {
|
|
93
|
-
const componentWithController = component as ComponentWithController;
|
|
94
|
-
if (componentWithController?.component) {
|
|
95
|
-
return {
|
|
96
|
-
controller: componentWithController.controller,
|
|
97
|
-
component: componentWithController.component,
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return {
|
|
102
|
-
component: component as React.ComponentType<any>,
|
|
103
|
-
controller: undefined,
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
}
|