@sigmela/router 0.0.14 → 0.0.15
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/lib/module/Navigation.js +10 -16
- package/lib/module/Router.js +299 -52
- package/lib/module/ScreenStack/ScreenStack.native.js +3 -0
- package/lib/module/ScreenStack/ScreenStack.web.js +139 -0
- package/lib/module/ScreenStack/index.js +3 -0
- package/lib/module/{ScreenStackItem.js → ScreenStackItem/ScreenStackItem.js} +2 -2
- package/lib/module/ScreenStackItem/ScreenStackItem.types.js +3 -0
- package/lib/module/ScreenStackItem/ScreenStackItem.web.js +38 -0
- package/lib/module/ScreenStackItem/index.js +3 -0
- package/lib/module/StackRenderer.js +5 -5
- package/lib/module/TabBar/RenderTabBar.native.js +224 -0
- package/lib/module/TabBar/RenderTabBar.web.js +130 -0
- package/lib/module/TabBar/TabIcon.web.js +42 -0
- package/lib/module/TabBar/index.js +3 -0
- package/lib/module/styles.css +139 -0
- package/lib/module/web/TransitionStack.js +227 -0
- package/lib/typescript/src/Navigation.d.ts +2 -1
- package/lib/typescript/src/Router.d.ts +15 -1
- package/lib/typescript/src/ScreenStack/ScreenStack.native.d.ts +2 -0
- package/lib/typescript/src/ScreenStack/ScreenStack.web.d.ts +11 -0
- package/lib/typescript/src/ScreenStack/index.d.ts +2 -0
- package/lib/typescript/src/ScreenStackItem/ScreenStackItem.d.ts +3 -0
- package/lib/typescript/src/ScreenStackItem/ScreenStackItem.types.d.ts +10 -0
- package/lib/typescript/src/ScreenStackItem/ScreenStackItem.web.d.ts +3 -0
- package/lib/typescript/src/ScreenStackItem/index.d.ts +3 -0
- package/lib/typescript/src/TabBar/RenderTabBar.native.d.ts +8 -0
- package/lib/typescript/src/TabBar/{RenderTabBar.d.ts → RenderTabBar.web.d.ts} +1 -1
- package/lib/typescript/src/TabBar/TabBar.d.ts +11 -3
- package/lib/typescript/src/TabBar/TabIcon.web.d.ts +7 -0
- package/lib/typescript/src/TabBar/index.d.ts +2 -0
- package/lib/typescript/src/index.d.ts +1 -1
- package/lib/typescript/src/types.d.ts +24 -165
- package/lib/typescript/src/web/TransitionStack.d.ts +21 -0
- package/package.json +3 -2
- package/lib/module/TabBar/RenderTabBar.js +0 -123
- package/lib/typescript/src/ScreenStackItem.d.ts +0 -10
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
import { useCallback, useSyncExternalStore, memo, useEffect } from 'react';
|
|
4
|
-
import { Platform } from 'react-native';
|
|
5
|
-
import { StackRenderer } from "../StackRenderer.js";
|
|
6
|
-
import { TabBarContext } from "./TabBarContext.js";
|
|
7
|
-
import { useRouter } from "../RouterContext.js";
|
|
8
|
-
import { BottomTabsScreen, BottomTabs } from 'react-native-screens';
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
// Helpers outside render to avoid re-creation
|
|
11
|
-
const isImageSource = value => {
|
|
12
|
-
if (value == null) return false;
|
|
13
|
-
const valueType = typeof value;
|
|
14
|
-
if (valueType === 'number') return true;
|
|
15
|
-
if (Array.isArray(value)) return value.length > 0;
|
|
16
|
-
if (valueType === 'object') {
|
|
17
|
-
if ('uri' in value || 'width' in value || 'height' in value) return true;
|
|
18
|
-
if ('sfSymbolName' in value || 'imageSource' in value || 'templateSource' in value) return false;
|
|
19
|
-
}
|
|
20
|
-
return false;
|
|
21
|
-
};
|
|
22
|
-
const buildIOSIcon = value => {
|
|
23
|
-
if (!value) return undefined;
|
|
24
|
-
if (typeof value === 'object' && ('sfSymbolName' in value || 'imageSource' in value || 'templateSource' in value)) {
|
|
25
|
-
return value;
|
|
26
|
-
}
|
|
27
|
-
return {
|
|
28
|
-
templateSource: value
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
export const RenderTabBar = /*#__PURE__*/memo(({
|
|
32
|
-
tabBar,
|
|
33
|
-
appearance
|
|
34
|
-
}) => {
|
|
35
|
-
const router = useRouter();
|
|
36
|
-
const subscribe = useCallback(cb => tabBar.subscribe(cb), [tabBar]);
|
|
37
|
-
const snapshot = useSyncExternalStore(subscribe, tabBar.getState, tabBar.getState);
|
|
38
|
-
const {
|
|
39
|
-
tabs,
|
|
40
|
-
index
|
|
41
|
-
} = snapshot;
|
|
42
|
-
const {
|
|
43
|
-
standardAppearance,
|
|
44
|
-
scrollEdgeAppearance,
|
|
45
|
-
tabBarItemStyle,
|
|
46
|
-
tintColor,
|
|
47
|
-
backgroundColor
|
|
48
|
-
} = appearance?.tabBar ?? {};
|
|
49
|
-
useEffect(() => {
|
|
50
|
-
router.ensureTabSeed(index);
|
|
51
|
-
}, [index, router]);
|
|
52
|
-
const onNativeFocusChange = useCallback(event => {
|
|
53
|
-
const tabKey = event.nativeEvent.tabKey;
|
|
54
|
-
const tabIndex = tabs.findIndex(route => route.tabKey === tabKey);
|
|
55
|
-
router.onTabIndexChange(tabIndex);
|
|
56
|
-
}, [tabs, router]);
|
|
57
|
-
return /*#__PURE__*/_jsx(TabBarContext.Provider, {
|
|
58
|
-
value: tabBar,
|
|
59
|
-
children: /*#__PURE__*/_jsx(BottomTabs, {
|
|
60
|
-
onNativeFocusChange: onNativeFocusChange,
|
|
61
|
-
tabBarBackgroundColor: backgroundColor,
|
|
62
|
-
tabBarTintColor: tintColor,
|
|
63
|
-
tabBarItemTitleFontFamily: tabBarItemStyle?.titleFontFamily,
|
|
64
|
-
tabBarItemTitleFontSize: tabBarItemStyle?.titleFontSize,
|
|
65
|
-
tabBarItemTitleFontSizeActive: tabBarItemStyle?.titleFontSizeActive,
|
|
66
|
-
tabBarItemTitleFontWeight: tabBarItemStyle?.titleFontWeight,
|
|
67
|
-
tabBarItemTitleFontStyle: tabBarItemStyle?.titleFontStyle,
|
|
68
|
-
tabBarItemTitleFontColor: tabBarItemStyle?.titleFontColor,
|
|
69
|
-
tabBarItemTitleFontColorActive: tabBarItemStyle?.titleFontColorActive,
|
|
70
|
-
tabBarItemIconColor: tabBarItemStyle?.iconColor,
|
|
71
|
-
tabBarItemIconColorActive: tabBarItemStyle?.iconColorActive,
|
|
72
|
-
tabBarItemActiveIndicatorColor: tabBarItemStyle?.activeIndicatorColor,
|
|
73
|
-
tabBarItemActiveIndicatorEnabled: tabBarItemStyle?.activeIndicatorEnabled,
|
|
74
|
-
tabBarItemRippleColor: tabBarItemStyle?.rippleColor,
|
|
75
|
-
tabBarItemLabelVisibilityMode: tabBarItemStyle?.labelVisibilityMode
|
|
76
|
-
// tabBarMinimizeBehavior={}
|
|
77
|
-
,
|
|
78
|
-
children: tabs.map(tab => {
|
|
79
|
-
const isFocused = tab.tabKey === tabs[index]?.tabKey;
|
|
80
|
-
const stack = tabBar.stacks[tab.tabKey];
|
|
81
|
-
const Screen = tabBar.screens[tab.tabKey];
|
|
82
|
-
|
|
83
|
-
// Map unified icon to platform-specific props expected by RNS BottomTabsScreen
|
|
84
|
-
const {
|
|
85
|
-
icon,
|
|
86
|
-
selectedIcon,
|
|
87
|
-
...restTab
|
|
88
|
-
} = tab;
|
|
89
|
-
let mappedTabProps = restTab;
|
|
90
|
-
if (icon || selectedIcon) {
|
|
91
|
-
if (Platform.OS === 'android') {
|
|
92
|
-
mappedTabProps = {
|
|
93
|
-
...restTab,
|
|
94
|
-
...(isImageSource(icon) ? {
|
|
95
|
-
iconResource: icon
|
|
96
|
-
} : null)
|
|
97
|
-
};
|
|
98
|
-
} else {
|
|
99
|
-
mappedTabProps = {
|
|
100
|
-
...restTab,
|
|
101
|
-
...(icon ? {
|
|
102
|
-
icon: buildIOSIcon(icon)
|
|
103
|
-
} : null),
|
|
104
|
-
...(selectedIcon ? {
|
|
105
|
-
selectedIcon: buildIOSIcon(selectedIcon)
|
|
106
|
-
} : null)
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
return /*#__PURE__*/_jsx(BottomTabsScreen, {
|
|
111
|
-
scrollEdgeAppearance: scrollEdgeAppearance,
|
|
112
|
-
standardAppearance: standardAppearance,
|
|
113
|
-
isFocused: isFocused,
|
|
114
|
-
...mappedTabProps,
|
|
115
|
-
children: stack ? /*#__PURE__*/_jsx(StackRenderer, {
|
|
116
|
-
appearance: appearance,
|
|
117
|
-
stack: stack
|
|
118
|
-
}) : Screen ? /*#__PURE__*/_jsx(Screen, {}) : null
|
|
119
|
-
}, tab.tabKey);
|
|
120
|
-
})
|
|
121
|
-
})
|
|
122
|
-
});
|
|
123
|
-
});
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { HistoryItem, ScreenOptions, NavigationAppearance } from './types';
|
|
2
|
-
interface ScreenStackItemProps {
|
|
3
|
-
item: HistoryItem;
|
|
4
|
-
stackId?: string;
|
|
5
|
-
stackAnimation?: ScreenOptions['stackAnimation'];
|
|
6
|
-
appearance?: NavigationAppearance;
|
|
7
|
-
}
|
|
8
|
-
export declare const ScreenStackItem: import("react").NamedExoticComponent<ScreenStackItemProps>;
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=ScreenStackItem.d.ts.map
|