@idealyst/navigation 1.0.24 → 1.0.25
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 +3 -3
- package/src/context/NavigatorContext.native.tsx +50 -50
- package/src/context/NavigatorContext.web.tsx +36 -36
- package/src/context/index.native.ts +1 -1
- package/src/context/index.ts +1 -1
- package/src/context/index.web.ts +1 -1
- package/src/context/types.ts +12 -12
- package/src/examples/ExampleDrawerRouter.tsx +158 -158
- package/src/examples/ExampleStackRouter.tsx +244 -244
- package/src/examples/ExampleTabRouter.tsx +156 -156
- package/src/examples/highContrastThemes.ts +582 -582
- package/src/examples/index.ts +2 -2
- package/src/examples/unistyles.ts +83 -83
- package/src/index.ts +4 -4
- package/src/layouts/GeneralLayout/GeneralLayout.styles.ts +55 -55
- package/src/layouts/GeneralLayout/GeneralLayout.tsx +144 -144
- package/src/layouts/GeneralLayout/index.ts +2 -2
- package/src/layouts/GeneralLayout/types.ts +98 -98
- package/src/routing/index.native.tsx +1 -1
- package/src/routing/index.ts +1 -1
- package/src/routing/index.web.tsx +1 -1
- package/src/routing/router.native.tsx +89 -89
- package/src/routing/router.web.tsx +73 -73
- package/src/routing/types.ts +14 -14
|
@@ -1,157 +1,157 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
|
|
3
|
-
import { Screen, Text, View, Button } from "../../../components/src";
|
|
4
|
-
import { UnistylesRuntime } from 'react-native-unistyles';
|
|
5
|
-
import { RouteParam } from '../routing';
|
|
6
|
-
import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
|
|
7
|
-
|
|
8
|
-
const HomeTabScreen = () => {
|
|
9
|
-
const currentTheme = UnistylesRuntime.themeName || 'light';
|
|
10
|
-
|
|
11
|
-
const cycleTheme = () => {
|
|
12
|
-
const nextTheme = getNextTheme(currentTheme);
|
|
13
|
-
UnistylesRuntime.setTheme(nextTheme as any);
|
|
14
|
-
console.log('Theme changed to:', nextTheme);
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
const toggleHighContrast = () => {
|
|
18
|
-
const currentTheme = UnistylesRuntime.themeName || 'light';
|
|
19
|
-
let newTheme: string;
|
|
20
|
-
|
|
21
|
-
if (isHighContrastTheme(currentTheme)) {
|
|
22
|
-
// Switch to standard variant
|
|
23
|
-
newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
|
|
24
|
-
} else {
|
|
25
|
-
// Switch to high contrast variant
|
|
26
|
-
newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
UnistylesRuntime.setTheme(newTheme as any);
|
|
30
|
-
console.log('Theme toggled to:', newTheme);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<Screen>
|
|
35
|
-
<View>
|
|
36
|
-
<Text size="large" weight="bold">
|
|
37
|
-
Welcome to the Component Library
|
|
38
|
-
</Text>
|
|
39
|
-
<Text size="medium">
|
|
40
|
-
Use the tabs above to explore different components
|
|
41
|
-
</Text>
|
|
42
|
-
|
|
43
|
-
<View style={{ marginTop: 24, gap: 12 }}>
|
|
44
|
-
<Text size="medium" weight="semibold">
|
|
45
|
-
Theme Controls
|
|
46
|
-
</Text>
|
|
47
|
-
<Text size="small">
|
|
48
|
-
Current Theme: {getThemeDisplayName(currentTheme)}
|
|
49
|
-
</Text>
|
|
50
|
-
|
|
51
|
-
<Button variant="outlined" onPress={cycleTheme}>
|
|
52
|
-
Cycle Theme (Light → Dark → Light HC → Dark HC)
|
|
53
|
-
</Button>
|
|
54
|
-
|
|
55
|
-
<Button variant="outlined" onPress={toggleHighContrast}>
|
|
56
|
-
Toggle High Contrast
|
|
57
|
-
</Button>
|
|
58
|
-
|
|
59
|
-
{isHighContrastTheme(currentTheme) && (
|
|
60
|
-
<Text size="small" style={{ fontStyle: 'italic' }}>
|
|
61
|
-
♿ High contrast mode is active for better accessibility
|
|
62
|
-
</Text>
|
|
63
|
-
)}
|
|
64
|
-
</View>
|
|
65
|
-
</View>
|
|
66
|
-
</Screen>
|
|
67
|
-
);
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
const AvatarTabScreen = () => (
|
|
71
|
-
<Screen>
|
|
72
|
-
<AvatarExamples />
|
|
73
|
-
</Screen>
|
|
74
|
-
);
|
|
75
|
-
|
|
76
|
-
const BadgeTabScreen = () => (
|
|
77
|
-
<Screen>
|
|
78
|
-
<BadgeExamples />
|
|
79
|
-
</Screen>
|
|
80
|
-
);
|
|
81
|
-
|
|
82
|
-
const ButtonTabScreen = () => (
|
|
83
|
-
<Screen>
|
|
84
|
-
<ButtonExamples />
|
|
85
|
-
</Screen>
|
|
86
|
-
);
|
|
87
|
-
|
|
88
|
-
const CardTabScreen = () => (
|
|
89
|
-
<Screen>
|
|
90
|
-
<CardExamples />
|
|
91
|
-
</Screen>
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
const CheckboxTabScreen = () => (
|
|
95
|
-
<Screen>
|
|
96
|
-
<CheckboxExamples />
|
|
97
|
-
</Screen>
|
|
98
|
-
);
|
|
99
|
-
|
|
100
|
-
const DividerTabScreen = () => (
|
|
101
|
-
<Screen>
|
|
102
|
-
<DividerExamples />
|
|
103
|
-
</Screen>
|
|
104
|
-
);
|
|
105
|
-
|
|
106
|
-
const InputTabScreen = () => (
|
|
107
|
-
<Screen>
|
|
108
|
-
<InputExamples />
|
|
109
|
-
</Screen>
|
|
110
|
-
);
|
|
111
|
-
|
|
112
|
-
const TextTabScreen = () => (
|
|
113
|
-
<Screen>
|
|
114
|
-
<TextExamples />
|
|
115
|
-
</Screen>
|
|
116
|
-
);
|
|
117
|
-
|
|
118
|
-
const ViewTabScreen = () => (
|
|
119
|
-
<Screen>
|
|
120
|
-
<ViewExamples />
|
|
121
|
-
</Screen>
|
|
122
|
-
);
|
|
123
|
-
|
|
124
|
-
const IconTabScreen = () => (
|
|
125
|
-
<Screen>
|
|
126
|
-
<IconExamples />
|
|
127
|
-
</Screen>
|
|
128
|
-
);
|
|
129
|
-
|
|
130
|
-
const ThemeExtensionTabScreen = () => (
|
|
131
|
-
<Screen>
|
|
132
|
-
<ThemeExtensionExamples />
|
|
133
|
-
</Screen>
|
|
134
|
-
);
|
|
135
|
-
|
|
136
|
-
const TabRouter: RouteParam = {
|
|
137
|
-
path: "/",
|
|
138
|
-
component: HomeTabScreen,
|
|
139
|
-
layout: {
|
|
140
|
-
type: "tab",
|
|
141
|
-
},
|
|
142
|
-
routes: [
|
|
143
|
-
{ path: "avatar", component: AvatarTabScreen },
|
|
144
|
-
{ path: "badge", component: BadgeTabScreen },
|
|
145
|
-
{ path: "button", component: ButtonTabScreen },
|
|
146
|
-
{ path: "card", component: CardTabScreen },
|
|
147
|
-
{ path: "checkbox", component: CheckboxTabScreen },
|
|
148
|
-
{ path: "divider", component: DividerTabScreen },
|
|
149
|
-
{ path: "input", component: InputTabScreen },
|
|
150
|
-
{ path: "text", component: TextTabScreen },
|
|
151
|
-
{ path: "view", component: ViewTabScreen },
|
|
152
|
-
{ path: "icon", component: IconTabScreen },
|
|
153
|
-
{ path: "theme-extension", component: ThemeExtensionTabScreen },
|
|
154
|
-
],
|
|
155
|
-
}
|
|
156
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { AvatarExamples, BadgeExamples, ButtonExamples, CardExamples, CheckboxExamples, DividerExamples, IconExamples, InputExamples, TextExamples, ViewExamples, ThemeExtensionExamples } from "../../../components/src/examples";
|
|
3
|
+
import { Screen, Text, View, Button } from "../../../components/src";
|
|
4
|
+
import { UnistylesRuntime } from 'react-native-unistyles';
|
|
5
|
+
import { RouteParam } from '../routing';
|
|
6
|
+
import { getNextTheme, getThemeDisplayName, isHighContrastTheme } from './unistyles';
|
|
7
|
+
|
|
8
|
+
const HomeTabScreen = () => {
|
|
9
|
+
const currentTheme = UnistylesRuntime.themeName || 'light';
|
|
10
|
+
|
|
11
|
+
const cycleTheme = () => {
|
|
12
|
+
const nextTheme = getNextTheme(currentTheme);
|
|
13
|
+
UnistylesRuntime.setTheme(nextTheme as any);
|
|
14
|
+
console.log('Theme changed to:', nextTheme);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const toggleHighContrast = () => {
|
|
18
|
+
const currentTheme = UnistylesRuntime.themeName || 'light';
|
|
19
|
+
let newTheme: string;
|
|
20
|
+
|
|
21
|
+
if (isHighContrastTheme(currentTheme)) {
|
|
22
|
+
// Switch to standard variant
|
|
23
|
+
newTheme = currentTheme.includes('dark') ? 'dark' : 'light';
|
|
24
|
+
} else {
|
|
25
|
+
// Switch to high contrast variant
|
|
26
|
+
newTheme = currentTheme.includes('dark') ? 'darkHighContrast' : 'lightHighContrast';
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
UnistylesRuntime.setTheme(newTheme as any);
|
|
30
|
+
console.log('Theme toggled to:', newTheme);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<Screen>
|
|
35
|
+
<View>
|
|
36
|
+
<Text size="large" weight="bold">
|
|
37
|
+
Welcome to the Component Library
|
|
38
|
+
</Text>
|
|
39
|
+
<Text size="medium">
|
|
40
|
+
Use the tabs above to explore different components
|
|
41
|
+
</Text>
|
|
42
|
+
|
|
43
|
+
<View style={{ marginTop: 24, gap: 12 }}>
|
|
44
|
+
<Text size="medium" weight="semibold">
|
|
45
|
+
Theme Controls
|
|
46
|
+
</Text>
|
|
47
|
+
<Text size="small">
|
|
48
|
+
Current Theme: {getThemeDisplayName(currentTheme)}
|
|
49
|
+
</Text>
|
|
50
|
+
|
|
51
|
+
<Button variant="outlined" onPress={cycleTheme}>
|
|
52
|
+
Cycle Theme (Light → Dark → Light HC → Dark HC)
|
|
53
|
+
</Button>
|
|
54
|
+
|
|
55
|
+
<Button variant="outlined" onPress={toggleHighContrast}>
|
|
56
|
+
Toggle High Contrast
|
|
57
|
+
</Button>
|
|
58
|
+
|
|
59
|
+
{isHighContrastTheme(currentTheme) && (
|
|
60
|
+
<Text size="small" style={{ fontStyle: 'italic' }}>
|
|
61
|
+
♿ High contrast mode is active for better accessibility
|
|
62
|
+
</Text>
|
|
63
|
+
)}
|
|
64
|
+
</View>
|
|
65
|
+
</View>
|
|
66
|
+
</Screen>
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
const AvatarTabScreen = () => (
|
|
71
|
+
<Screen>
|
|
72
|
+
<AvatarExamples />
|
|
73
|
+
</Screen>
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
const BadgeTabScreen = () => (
|
|
77
|
+
<Screen>
|
|
78
|
+
<BadgeExamples />
|
|
79
|
+
</Screen>
|
|
80
|
+
);
|
|
81
|
+
|
|
82
|
+
const ButtonTabScreen = () => (
|
|
83
|
+
<Screen>
|
|
84
|
+
<ButtonExamples />
|
|
85
|
+
</Screen>
|
|
86
|
+
);
|
|
87
|
+
|
|
88
|
+
const CardTabScreen = () => (
|
|
89
|
+
<Screen>
|
|
90
|
+
<CardExamples />
|
|
91
|
+
</Screen>
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
const CheckboxTabScreen = () => (
|
|
95
|
+
<Screen>
|
|
96
|
+
<CheckboxExamples />
|
|
97
|
+
</Screen>
|
|
98
|
+
);
|
|
99
|
+
|
|
100
|
+
const DividerTabScreen = () => (
|
|
101
|
+
<Screen>
|
|
102
|
+
<DividerExamples />
|
|
103
|
+
</Screen>
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
const InputTabScreen = () => (
|
|
107
|
+
<Screen>
|
|
108
|
+
<InputExamples />
|
|
109
|
+
</Screen>
|
|
110
|
+
);
|
|
111
|
+
|
|
112
|
+
const TextTabScreen = () => (
|
|
113
|
+
<Screen>
|
|
114
|
+
<TextExamples />
|
|
115
|
+
</Screen>
|
|
116
|
+
);
|
|
117
|
+
|
|
118
|
+
const ViewTabScreen = () => (
|
|
119
|
+
<Screen>
|
|
120
|
+
<ViewExamples />
|
|
121
|
+
</Screen>
|
|
122
|
+
);
|
|
123
|
+
|
|
124
|
+
const IconTabScreen = () => (
|
|
125
|
+
<Screen>
|
|
126
|
+
<IconExamples />
|
|
127
|
+
</Screen>
|
|
128
|
+
);
|
|
129
|
+
|
|
130
|
+
const ThemeExtensionTabScreen = () => (
|
|
131
|
+
<Screen>
|
|
132
|
+
<ThemeExtensionExamples />
|
|
133
|
+
</Screen>
|
|
134
|
+
);
|
|
135
|
+
|
|
136
|
+
const TabRouter: RouteParam = {
|
|
137
|
+
path: "/",
|
|
138
|
+
component: HomeTabScreen,
|
|
139
|
+
layout: {
|
|
140
|
+
type: "tab",
|
|
141
|
+
},
|
|
142
|
+
routes: [
|
|
143
|
+
{ path: "avatar", component: AvatarTabScreen },
|
|
144
|
+
{ path: "badge", component: BadgeTabScreen },
|
|
145
|
+
{ path: "button", component: ButtonTabScreen },
|
|
146
|
+
{ path: "card", component: CardTabScreen },
|
|
147
|
+
{ path: "checkbox", component: CheckboxTabScreen },
|
|
148
|
+
{ path: "divider", component: DividerTabScreen },
|
|
149
|
+
{ path: "input", component: InputTabScreen },
|
|
150
|
+
{ path: "text", component: TextTabScreen },
|
|
151
|
+
{ path: "view", component: ViewTabScreen },
|
|
152
|
+
{ path: "icon", component: IconTabScreen },
|
|
153
|
+
{ path: "theme-extension", component: ThemeExtensionTabScreen },
|
|
154
|
+
],
|
|
155
|
+
}
|
|
156
|
+
|
|
157
157
|
export default TabRouter;
|