@idealyst/navigation 1.0.24 → 1.0.26
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
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@idealyst/navigation",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.26",
|
|
4
4
|
"description": "Cross-platform navigation library for React and React Native",
|
|
5
5
|
"main": "src/index.ts",
|
|
6
6
|
"module": "src/index.ts",
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
"publish:npm": "npm publish"
|
|
38
38
|
},
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"@idealyst/components": "^1.0.
|
|
41
|
-
"@idealyst/theme": "^1.0.
|
|
40
|
+
"@idealyst/components": "^1.0.26",
|
|
41
|
+
"@idealyst/theme": "^1.0.26",
|
|
42
42
|
"@react-navigation/bottom-tabs": "^7.0.0",
|
|
43
43
|
"@react-navigation/drawer": "^7.0.0",
|
|
44
44
|
"@react-navigation/native": "^7.0.0",
|
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import React, { createContext, memo, useContext, useMemo } from 'react';
|
|
2
|
-
import { NavigateParams, NavigatorProviderProps } from './types';
|
|
3
|
-
import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
|
|
4
|
-
import { buildRouter } from '../routing';
|
|
5
|
-
import { useUnistyles } from 'react-native-unistyles';
|
|
6
|
-
|
|
7
|
-
const NavigatorContext = createContext<{
|
|
8
|
-
navigate: (params: NavigateParams) => void;
|
|
9
|
-
}>({
|
|
10
|
-
navigate: () => {},
|
|
11
|
-
});
|
|
12
|
-
|
|
13
|
-
const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
|
|
14
|
-
|
|
15
|
-
const navigation = useNavigation();
|
|
16
|
-
|
|
17
|
-
const navigate = (params: NavigateParams) => {
|
|
18
|
-
console.log('navigate', params);
|
|
19
|
-
navigation.navigate(params.path as never);
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
const RouteComponent = useMemo(() => {
|
|
23
|
-
// Memoize the router to prevent unnecessary re-renders
|
|
24
|
-
return memo(buildRouter(route));
|
|
25
|
-
}, [route]);
|
|
26
|
-
|
|
27
|
-
return (
|
|
28
|
-
<NavigatorContext.Provider value={{ navigate }}>
|
|
29
|
-
<RouteComponent />
|
|
30
|
-
</NavigatorContext.Provider>
|
|
31
|
-
)
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
|
|
35
|
-
const {rt} = useUnistyles()
|
|
36
|
-
|
|
37
|
-
const isDarkMode = rt.themeName === 'dark';
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
|
|
41
|
-
<UnwrappedNavigatorProvider route={route} />
|
|
42
|
-
</NavigationContainer>
|
|
43
|
-
)
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export { NavigatorProvider };
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
export const useNavigator = () => {
|
|
50
|
-
return useContext(NavigatorContext);
|
|
1
|
+
import React, { createContext, memo, useContext, useMemo } from 'react';
|
|
2
|
+
import { NavigateParams, NavigatorProviderProps } from './types';
|
|
3
|
+
import { useNavigation, useNavigationState, DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
|
|
4
|
+
import { buildRouter } from '../routing';
|
|
5
|
+
import { useUnistyles } from 'react-native-unistyles';
|
|
6
|
+
|
|
7
|
+
const NavigatorContext = createContext<{
|
|
8
|
+
navigate: (params: NavigateParams) => void;
|
|
9
|
+
}>({
|
|
10
|
+
navigate: () => {},
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
const UnwrappedNavigatorProvider = ({ route }: NavigatorProviderProps) => {
|
|
14
|
+
|
|
15
|
+
const navigation = useNavigation();
|
|
16
|
+
|
|
17
|
+
const navigate = (params: NavigateParams) => {
|
|
18
|
+
console.log('navigate', params);
|
|
19
|
+
navigation.navigate(params.path as never);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const RouteComponent = useMemo(() => {
|
|
23
|
+
// Memoize the router to prevent unnecessary re-renders
|
|
24
|
+
return memo(buildRouter(route));
|
|
25
|
+
}, [route]);
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<NavigatorContext.Provider value={{ navigate }}>
|
|
29
|
+
<RouteComponent />
|
|
30
|
+
</NavigatorContext.Provider>
|
|
31
|
+
)
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
const NavigatorProvider = ({ route }: NavigatorProviderProps) => {
|
|
35
|
+
const {rt} = useUnistyles()
|
|
36
|
+
|
|
37
|
+
const isDarkMode = rt.themeName === 'dark';
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<NavigationContainer theme={isDarkMode ? DarkTheme : DefaultTheme}>
|
|
41
|
+
<UnwrappedNavigatorProvider route={route} />
|
|
42
|
+
</NavigationContainer>
|
|
43
|
+
)
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export { NavigatorProvider };
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
export const useNavigator = () => {
|
|
50
|
+
return useContext(NavigatorContext);
|
|
51
51
|
};
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
import React, { createContext, memo, useContext, useMemo } from 'react';
|
|
2
|
-
import { NavigateParams, NavigatorProviderProps } from './types';
|
|
3
|
-
import { useNavigate } from "react-router-dom";
|
|
4
|
-
import { buildRouter } from '../routing';
|
|
5
|
-
|
|
6
|
-
const NavigatorContext = createContext<{
|
|
7
|
-
navigate: (params: NavigateParams) => void;
|
|
8
|
-
}>({
|
|
9
|
-
navigate: () => {},
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
export const NavigatorProvider = ({
|
|
13
|
-
route,
|
|
14
|
-
}: NavigatorProviderProps) => {
|
|
15
|
-
const routerNavigate = useNavigate();
|
|
16
|
-
|
|
17
|
-
const navigateFunction = (params: NavigateParams) => {
|
|
18
|
-
if (params.path) {
|
|
19
|
-
routerNavigate(params.path);
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
const RouteComponent = useMemo(() => {
|
|
24
|
-
// Memoize the router to prevent unnecessary re-renders
|
|
25
|
-
return memo(buildRouter(route));
|
|
26
|
-
}, [route]);
|
|
27
|
-
|
|
28
|
-
return (
|
|
29
|
-
<NavigatorContext.Provider value={{ navigate: navigateFunction }}>
|
|
30
|
-
<RouteComponent />
|
|
31
|
-
</NavigatorContext.Provider>
|
|
32
|
-
);
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
export const useNavigator = () => {
|
|
36
|
-
return useContext(NavigatorContext);
|
|
1
|
+
import React, { createContext, memo, useContext, useMemo } from 'react';
|
|
2
|
+
import { NavigateParams, NavigatorProviderProps } from './types';
|
|
3
|
+
import { useNavigate } from "react-router-dom";
|
|
4
|
+
import { buildRouter } from '../routing';
|
|
5
|
+
|
|
6
|
+
const NavigatorContext = createContext<{
|
|
7
|
+
navigate: (params: NavigateParams) => void;
|
|
8
|
+
}>({
|
|
9
|
+
navigate: () => {},
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export const NavigatorProvider = ({
|
|
13
|
+
route,
|
|
14
|
+
}: NavigatorProviderProps) => {
|
|
15
|
+
const routerNavigate = useNavigate();
|
|
16
|
+
|
|
17
|
+
const navigateFunction = (params: NavigateParams) => {
|
|
18
|
+
if (params.path) {
|
|
19
|
+
routerNavigate(params.path);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
const RouteComponent = useMemo(() => {
|
|
24
|
+
// Memoize the router to prevent unnecessary re-renders
|
|
25
|
+
return memo(buildRouter(route));
|
|
26
|
+
}, [route]);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<NavigatorContext.Provider value={{ navigate: navigateFunction }}>
|
|
30
|
+
<RouteComponent />
|
|
31
|
+
</NavigatorContext.Provider>
|
|
32
|
+
);
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export const useNavigator = () => {
|
|
36
|
+
return useContext(NavigatorContext);
|
|
37
37
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './NavigatorContext.native';
|
|
1
|
+
export * from './NavigatorContext.native';
|
|
2
2
|
export * from './types';
|
package/src/context/index.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './NavigatorContext.web';
|
|
1
|
+
export * from './NavigatorContext.web';
|
|
2
2
|
export * from './types';
|
package/src/context/index.web.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from './NavigatorContext.web';
|
|
1
|
+
export * from './NavigatorContext.web';
|
|
2
2
|
export * from './types';
|
package/src/context/types.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { RouteParam } from "../routing";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* When navigating to a new route, specify the path and the variables to be used in the route.
|
|
5
|
-
*/
|
|
6
|
-
export type NavigateParams = {
|
|
7
|
-
path: string;
|
|
8
|
-
vars: Record<string, string>;
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export type NavigatorProviderProps = {
|
|
12
|
-
route: RouteParam;
|
|
1
|
+
import { RouteParam } from "../routing";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* When navigating to a new route, specify the path and the variables to be used in the route.
|
|
5
|
+
*/
|
|
6
|
+
export type NavigateParams = {
|
|
7
|
+
path: string;
|
|
8
|
+
vars: Record<string, string>;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export type NavigatorProviderProps = {
|
|
12
|
+
route: RouteParam;
|
|
13
13
|
};
|
|
@@ -1,159 +1,159 @@
|
|
|
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 HomeDrawerScreen = () => {
|
|
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 style={{ gap: 16 }}>
|
|
36
|
-
<Text size="large" weight="bold">
|
|
37
|
-
Welcome to the Component Library
|
|
38
|
-
</Text>
|
|
39
|
-
<Text size="medium">
|
|
40
|
-
Use the drawer menu to explore different components
|
|
41
|
-
</Text>
|
|
42
|
-
|
|
43
|
-
<View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8, marginTop: 8 }}>
|
|
44
|
-
<Text size="medium" weight="semibold">
|
|
45
|
-
Theme Controls
|
|
46
|
-
</Text>
|
|
47
|
-
<Text size="small">
|
|
48
|
-
Current Theme: {getThemeDisplayName(currentTheme)}
|
|
49
|
-
</Text>
|
|
50
|
-
|
|
51
|
-
<View style={{ gap: 8 }}>
|
|
52
|
-
<Button variant="outlined" onPress={cycleTheme}>
|
|
53
|
-
🔄 Cycle Theme (Light → Dark → Light HC → Dark HC)
|
|
54
|
-
</Button>
|
|
55
|
-
|
|
56
|
-
<Button variant="outlined" onPress={toggleHighContrast}>
|
|
57
|
-
♿ Toggle High Contrast
|
|
58
|
-
</Button>
|
|
59
|
-
</View>
|
|
60
|
-
|
|
61
|
-
{isHighContrastTheme(currentTheme) && (
|
|
62
|
-
<Text size="small" style={{ fontStyle: 'italic' }}>
|
|
63
|
-
♿ High contrast mode is active for better accessibility
|
|
64
|
-
</Text>
|
|
65
|
-
)}
|
|
66
|
-
</View>
|
|
67
|
-
</View>
|
|
68
|
-
</Screen>
|
|
69
|
-
);
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
const AvatarDrawerScreen = () => (
|
|
73
|
-
<Screen>
|
|
74
|
-
<AvatarExamples />
|
|
75
|
-
</Screen>
|
|
76
|
-
);
|
|
77
|
-
|
|
78
|
-
const BadgeDrawerScreen = () => (
|
|
79
|
-
<Screen>
|
|
80
|
-
<BadgeExamples />
|
|
81
|
-
</Screen>
|
|
82
|
-
);
|
|
83
|
-
|
|
84
|
-
const ButtonDrawerScreen = () => (
|
|
85
|
-
<Screen>
|
|
86
|
-
<ButtonExamples />
|
|
87
|
-
</Screen>
|
|
88
|
-
);
|
|
89
|
-
|
|
90
|
-
const CardDrawerScreen = () => (
|
|
91
|
-
<Screen>
|
|
92
|
-
<CardExamples />
|
|
93
|
-
</Screen>
|
|
94
|
-
);
|
|
95
|
-
|
|
96
|
-
const CheckboxDrawerScreen = () => (
|
|
97
|
-
<Screen>
|
|
98
|
-
<CheckboxExamples />
|
|
99
|
-
</Screen>
|
|
100
|
-
);
|
|
101
|
-
|
|
102
|
-
const DividerDrawerScreen = () => (
|
|
103
|
-
<Screen>
|
|
104
|
-
<DividerExamples />
|
|
105
|
-
</Screen>
|
|
106
|
-
);
|
|
107
|
-
|
|
108
|
-
const InputDrawerScreen = () => (
|
|
109
|
-
<Screen>
|
|
110
|
-
<InputExamples />
|
|
111
|
-
</Screen>
|
|
112
|
-
);
|
|
113
|
-
|
|
114
|
-
const TextDrawerScreen = () => (
|
|
115
|
-
<Screen>
|
|
116
|
-
<TextExamples />
|
|
117
|
-
</Screen>
|
|
118
|
-
);
|
|
119
|
-
|
|
120
|
-
const ViewDrawerScreen = () => (
|
|
121
|
-
<Screen>
|
|
122
|
-
<ViewExamples />
|
|
123
|
-
</Screen>
|
|
124
|
-
);
|
|
125
|
-
|
|
126
|
-
const IconDrawerScreen = () => (
|
|
127
|
-
<Screen>
|
|
128
|
-
<IconExamples />
|
|
129
|
-
</Screen>
|
|
130
|
-
);
|
|
131
|
-
|
|
132
|
-
const ThemeExtensionDrawerScreen = () => (
|
|
133
|
-
<Screen>
|
|
134
|
-
<ThemeExtensionExamples />
|
|
135
|
-
</Screen>
|
|
136
|
-
);
|
|
137
|
-
|
|
138
|
-
const DrawerRouter: RouteParam = {
|
|
139
|
-
path: "/",
|
|
140
|
-
component: HomeDrawerScreen,
|
|
141
|
-
layout: {
|
|
142
|
-
type: "drawer",
|
|
143
|
-
},
|
|
144
|
-
routes: [
|
|
145
|
-
{ path: "avatar", component: AvatarDrawerScreen },
|
|
146
|
-
{ path: "badge", component: BadgeDrawerScreen },
|
|
147
|
-
{ path: "button", component: ButtonDrawerScreen },
|
|
148
|
-
{ path: "card", component: CardDrawerScreen },
|
|
149
|
-
{ path: "checkbox", component: CheckboxDrawerScreen },
|
|
150
|
-
{ path: "divider", component: DividerDrawerScreen },
|
|
151
|
-
{ path: "input", component: InputDrawerScreen },
|
|
152
|
-
{ path: "text", component: TextDrawerScreen },
|
|
153
|
-
{ path: "view", component: ViewDrawerScreen },
|
|
154
|
-
{ path: "icon", component: IconDrawerScreen },
|
|
155
|
-
{ path: "theme-extension", component: ThemeExtensionDrawerScreen },
|
|
156
|
-
],
|
|
157
|
-
};
|
|
158
|
-
|
|
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 HomeDrawerScreen = () => {
|
|
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 style={{ gap: 16 }}>
|
|
36
|
+
<Text size="large" weight="bold">
|
|
37
|
+
Welcome to the Component Library
|
|
38
|
+
</Text>
|
|
39
|
+
<Text size="medium">
|
|
40
|
+
Use the drawer menu to explore different components
|
|
41
|
+
</Text>
|
|
42
|
+
|
|
43
|
+
<View style={{ gap: 12, padding: 16, backgroundColor: 'rgba(128, 128, 128, 0.1)', borderRadius: 8, marginTop: 8 }}>
|
|
44
|
+
<Text size="medium" weight="semibold">
|
|
45
|
+
Theme Controls
|
|
46
|
+
</Text>
|
|
47
|
+
<Text size="small">
|
|
48
|
+
Current Theme: {getThemeDisplayName(currentTheme)}
|
|
49
|
+
</Text>
|
|
50
|
+
|
|
51
|
+
<View style={{ gap: 8 }}>
|
|
52
|
+
<Button variant="outlined" onPress={cycleTheme}>
|
|
53
|
+
🔄 Cycle Theme (Light → Dark → Light HC → Dark HC)
|
|
54
|
+
</Button>
|
|
55
|
+
|
|
56
|
+
<Button variant="outlined" onPress={toggleHighContrast}>
|
|
57
|
+
♿ Toggle High Contrast
|
|
58
|
+
</Button>
|
|
59
|
+
</View>
|
|
60
|
+
|
|
61
|
+
{isHighContrastTheme(currentTheme) && (
|
|
62
|
+
<Text size="small" style={{ fontStyle: 'italic' }}>
|
|
63
|
+
♿ High contrast mode is active for better accessibility
|
|
64
|
+
</Text>
|
|
65
|
+
)}
|
|
66
|
+
</View>
|
|
67
|
+
</View>
|
|
68
|
+
</Screen>
|
|
69
|
+
);
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const AvatarDrawerScreen = () => (
|
|
73
|
+
<Screen>
|
|
74
|
+
<AvatarExamples />
|
|
75
|
+
</Screen>
|
|
76
|
+
);
|
|
77
|
+
|
|
78
|
+
const BadgeDrawerScreen = () => (
|
|
79
|
+
<Screen>
|
|
80
|
+
<BadgeExamples />
|
|
81
|
+
</Screen>
|
|
82
|
+
);
|
|
83
|
+
|
|
84
|
+
const ButtonDrawerScreen = () => (
|
|
85
|
+
<Screen>
|
|
86
|
+
<ButtonExamples />
|
|
87
|
+
</Screen>
|
|
88
|
+
);
|
|
89
|
+
|
|
90
|
+
const CardDrawerScreen = () => (
|
|
91
|
+
<Screen>
|
|
92
|
+
<CardExamples />
|
|
93
|
+
</Screen>
|
|
94
|
+
);
|
|
95
|
+
|
|
96
|
+
const CheckboxDrawerScreen = () => (
|
|
97
|
+
<Screen>
|
|
98
|
+
<CheckboxExamples />
|
|
99
|
+
</Screen>
|
|
100
|
+
);
|
|
101
|
+
|
|
102
|
+
const DividerDrawerScreen = () => (
|
|
103
|
+
<Screen>
|
|
104
|
+
<DividerExamples />
|
|
105
|
+
</Screen>
|
|
106
|
+
);
|
|
107
|
+
|
|
108
|
+
const InputDrawerScreen = () => (
|
|
109
|
+
<Screen>
|
|
110
|
+
<InputExamples />
|
|
111
|
+
</Screen>
|
|
112
|
+
);
|
|
113
|
+
|
|
114
|
+
const TextDrawerScreen = () => (
|
|
115
|
+
<Screen>
|
|
116
|
+
<TextExamples />
|
|
117
|
+
</Screen>
|
|
118
|
+
);
|
|
119
|
+
|
|
120
|
+
const ViewDrawerScreen = () => (
|
|
121
|
+
<Screen>
|
|
122
|
+
<ViewExamples />
|
|
123
|
+
</Screen>
|
|
124
|
+
);
|
|
125
|
+
|
|
126
|
+
const IconDrawerScreen = () => (
|
|
127
|
+
<Screen>
|
|
128
|
+
<IconExamples />
|
|
129
|
+
</Screen>
|
|
130
|
+
);
|
|
131
|
+
|
|
132
|
+
const ThemeExtensionDrawerScreen = () => (
|
|
133
|
+
<Screen>
|
|
134
|
+
<ThemeExtensionExamples />
|
|
135
|
+
</Screen>
|
|
136
|
+
);
|
|
137
|
+
|
|
138
|
+
const DrawerRouter: RouteParam = {
|
|
139
|
+
path: "/",
|
|
140
|
+
component: HomeDrawerScreen,
|
|
141
|
+
layout: {
|
|
142
|
+
type: "drawer",
|
|
143
|
+
},
|
|
144
|
+
routes: [
|
|
145
|
+
{ path: "avatar", component: AvatarDrawerScreen },
|
|
146
|
+
{ path: "badge", component: BadgeDrawerScreen },
|
|
147
|
+
{ path: "button", component: ButtonDrawerScreen },
|
|
148
|
+
{ path: "card", component: CardDrawerScreen },
|
|
149
|
+
{ path: "checkbox", component: CheckboxDrawerScreen },
|
|
150
|
+
{ path: "divider", component: DividerDrawerScreen },
|
|
151
|
+
{ path: "input", component: InputDrawerScreen },
|
|
152
|
+
{ path: "text", component: TextDrawerScreen },
|
|
153
|
+
{ path: "view", component: ViewDrawerScreen },
|
|
154
|
+
{ path: "icon", component: IconDrawerScreen },
|
|
155
|
+
{ path: "theme-extension", component: ThemeExtensionDrawerScreen },
|
|
156
|
+
],
|
|
157
|
+
};
|
|
158
|
+
|
|
159
159
|
export default DrawerRouter;
|