@admin-layout/gluestack-ui-mobile 9.0.4-alpha.68 → 9.0.4-alpha.76
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/CHANGELOG.md +8 -0
- package/lib/components/Layout/components/Drawer.js +2 -2
- package/lib/components/Layout/components/Drawer.js.map +1 -1
- package/lib/components/Layout/components/Header.js +23 -13
- package/lib/components/Layout/components/Header.js.map +1 -1
- package/lib/components/Layout/components/SettingDrawer/LayoutButton.js +14 -6
- package/lib/components/Layout/components/SettingDrawer/LayoutButton.js.map +1 -1
- package/lib/components/Layout/components/SettingDrawer/SettingDrawer.d.ts +1 -1
- package/lib/components/Layout/components/SettingDrawer/SettingDrawer.js +55 -15
- package/lib/components/Layout/components/SettingDrawer/SettingDrawer.js.map +1 -1
- package/lib/components/Layout/components/SettingDrawer/ThemeColorButton.js +1 -1
- package/lib/components/NavigationComponent.js +3 -1
- package/lib/components/NavigationComponent.js.map +1 -1
- package/lib/components/with-interactions-lifecycle-managed.js.map +1 -1
- package/lib/utils/ThemeColor.js +11 -1
- package/lib/utils/ThemeColor.js.map +1 -1
- package/lib/utils/generateMobileNavigations.js +16 -8
- package/lib/utils/generateMobileNavigations.js.map +1 -1
- package/package.json +2 -2
- package/src/components/Layout/components/Drawer.tsx +2 -2
- package/src/components/Layout/components/Header.tsx +69 -10
- package/src/components/Layout/components/SettingDrawer/LayoutButton.tsx +27 -13
- package/src/components/Layout/components/SettingDrawer/SettingDrawer.tsx +151 -48
- package/src/components/Layout/components/SettingDrawer/ThemeColorButton.tsx +2 -2
- package/src/components/NavigationComponent.tsx +1 -1
- package/src/components/with-interactions-lifecycle-managed.tsx +3 -3
- package/src/utils/ThemeColor.ts +11 -1
- package/src/utils/generateMobileNavigations.ts +14 -8
|
@@ -1,60 +1,163 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
Box,
|
|
4
|
+
Text,
|
|
5
|
+
HStack,
|
|
6
|
+
Actionsheet,
|
|
7
|
+
ActionsheetBackdrop,
|
|
8
|
+
ActionsheetContent,
|
|
9
|
+
ActionsheetDragIndicatorWrapper,
|
|
10
|
+
ActionsheetDragIndicator,
|
|
11
|
+
Select,
|
|
12
|
+
SelectTrigger,
|
|
13
|
+
SelectInput,
|
|
14
|
+
Icon,
|
|
15
|
+
ChevronDownIcon,
|
|
16
|
+
SelectPortal,
|
|
17
|
+
SelectBackdrop,
|
|
18
|
+
SelectContent,
|
|
19
|
+
SelectDragIndicatorWrapper,
|
|
20
|
+
SelectDragIndicator,
|
|
21
|
+
SelectItem,
|
|
22
|
+
Divider,
|
|
23
|
+
Switch,
|
|
24
|
+
ScrollView,
|
|
25
|
+
} from '@gluestack-ui/themed';
|
|
3
26
|
import { useSelector } from 'react-redux';
|
|
4
27
|
|
|
5
28
|
import LayoutButton from './LayoutButton';
|
|
6
29
|
import ThemeColorButton from './ThemeColorButton';
|
|
7
30
|
import { THEMECOLOR } from '../../../../utils/ThemeColor';
|
|
8
31
|
|
|
9
|
-
export const SettingDrawer = ({ onSettingChange }: any) => {
|
|
32
|
+
export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) => {
|
|
10
33
|
const settings = useSelector<any>((state) => state.settings) as any;
|
|
11
34
|
return (
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
35
|
+
<Actionsheet isOpen={isOpen} onClose={handleClose} zIndex={999}>
|
|
36
|
+
<ActionsheetBackdrop />
|
|
37
|
+
<ActionsheetContent zIndex={999} w={'100%'}>
|
|
38
|
+
<ActionsheetDragIndicatorWrapper>
|
|
39
|
+
<ActionsheetDragIndicator />
|
|
40
|
+
</ActionsheetDragIndicatorWrapper>
|
|
41
|
+
<ScrollView>
|
|
42
|
+
<Box alignItems="flex-start" bg={'$white'} w={'100%'} p={'$3'}>
|
|
43
|
+
<Text color={'#00000'} fontWeight={'$semibold'}>
|
|
44
|
+
Page style setting
|
|
45
|
+
</Text>
|
|
46
|
+
<HStack space={'md'} mt={'$3'}>
|
|
47
|
+
<LayoutButton
|
|
48
|
+
mode="style"
|
|
49
|
+
settings={settings}
|
|
50
|
+
onSettingChange={onSettingChange}
|
|
51
|
+
color={'light'}
|
|
52
|
+
/>
|
|
53
|
+
<LayoutButton
|
|
54
|
+
mode="style"
|
|
55
|
+
settings={settings}
|
|
56
|
+
onSettingChange={onSettingChange}
|
|
57
|
+
color={'dark'}
|
|
58
|
+
/>
|
|
59
|
+
<LayoutButton
|
|
60
|
+
mode="style"
|
|
61
|
+
settings={settings}
|
|
62
|
+
onSettingChange={onSettingChange}
|
|
63
|
+
color={'realDark'}
|
|
64
|
+
/>
|
|
65
|
+
</HStack>
|
|
66
|
+
<Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
|
|
67
|
+
Select Theme
|
|
68
|
+
</Text>
|
|
69
|
+
<Select
|
|
70
|
+
mt={'$2'}
|
|
71
|
+
w={'100%'}
|
|
72
|
+
selectedValue={settings?.themeName}
|
|
73
|
+
onValueChange={(value) => {
|
|
74
|
+
const newSettings = {
|
|
75
|
+
...settings,
|
|
76
|
+
themeName: value,
|
|
77
|
+
};
|
|
78
|
+
onSettingChange(newSettings);
|
|
79
|
+
}}
|
|
80
|
+
>
|
|
81
|
+
<SelectTrigger variant="outline" size="md">
|
|
82
|
+
<SelectInput placeholder="Select option" />
|
|
83
|
+
<Icon as={ChevronDownIcon} mr={'$3'} />
|
|
84
|
+
</SelectTrigger>
|
|
85
|
+
<SelectPortal>
|
|
86
|
+
<SelectBackdrop />
|
|
87
|
+
<SelectContent>
|
|
88
|
+
<SelectDragIndicatorWrapper>
|
|
89
|
+
<SelectDragIndicator />
|
|
90
|
+
</SelectDragIndicatorWrapper>
|
|
91
|
+
<SelectItem label="Default" value="default" />
|
|
92
|
+
<SelectItem label="Github Theme" value="github" />
|
|
93
|
+
<SelectItem label="Slack Theme" value="slack" />
|
|
94
|
+
<SelectItem label="Airbnb Theme" value="airbnb" />
|
|
95
|
+
<SelectItem label="Spotify Theme" value="spotify" />
|
|
96
|
+
</SelectContent>
|
|
97
|
+
</SelectPortal>
|
|
98
|
+
</Select>
|
|
99
|
+
<Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
|
|
100
|
+
Theme Color
|
|
101
|
+
</Text>
|
|
102
|
+
<HStack space={'md'} mt={'$3'} flexWrap={'wrap'}>
|
|
103
|
+
{THEMECOLOR.map((color, index) => (
|
|
104
|
+
<ThemeColorButton
|
|
105
|
+
key={index}
|
|
106
|
+
color={color}
|
|
107
|
+
settings={settings}
|
|
108
|
+
onSettingChange={onSettingChange}
|
|
109
|
+
/>
|
|
110
|
+
))}
|
|
111
|
+
</HStack>
|
|
112
|
+
<Divider my={'$4'} />
|
|
113
|
+
<Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
|
|
114
|
+
Navigation Mode
|
|
115
|
+
</Text>
|
|
116
|
+
<HStack space={'md'} mt={'$3'}>
|
|
117
|
+
<LayoutButton
|
|
118
|
+
mode="layout"
|
|
119
|
+
settings={settings}
|
|
120
|
+
onSettingChange={onSettingChange}
|
|
121
|
+
color={'light'}
|
|
122
|
+
/>
|
|
123
|
+
<LayoutButton
|
|
124
|
+
mode="layout"
|
|
125
|
+
bottom={true}
|
|
126
|
+
settings={settings}
|
|
127
|
+
onSettingChange={onSettingChange}
|
|
128
|
+
color={'light'}
|
|
129
|
+
/>
|
|
40
130
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
131
|
+
<LayoutButton
|
|
132
|
+
mode="light"
|
|
133
|
+
bottomOnly={true}
|
|
134
|
+
settings={settings}
|
|
135
|
+
onSettingChange={onSettingChange}
|
|
136
|
+
color={'light'}
|
|
137
|
+
/>
|
|
138
|
+
</HStack>
|
|
139
|
+
<Divider my={'$4'} />
|
|
140
|
+
<Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
|
|
141
|
+
Regional Settings
|
|
142
|
+
</Text>
|
|
143
|
+
<HStack w={'100%'} mt={'$3'} justifyContent={'space-between'} alignItems="center">
|
|
144
|
+
<Text>Menu Header</Text>
|
|
145
|
+
<Switch
|
|
146
|
+
onValueChange={(value) => {
|
|
147
|
+
console.log(value);
|
|
148
|
+
const newSettings = {
|
|
149
|
+
...settings,
|
|
150
|
+
menuHeader: value,
|
|
151
|
+
};
|
|
152
|
+
onSettingChange(newSettings);
|
|
153
|
+
}}
|
|
154
|
+
isChecked={settings?.menuHeader}
|
|
155
|
+
value={settings?.menuHeader}
|
|
156
|
+
/>
|
|
157
|
+
</HStack>
|
|
158
|
+
</Box>
|
|
159
|
+
</ScrollView>
|
|
160
|
+
</ActionsheetContent>
|
|
161
|
+
</Actionsheet>
|
|
59
162
|
);
|
|
60
163
|
};
|
|
@@ -5,8 +5,8 @@ const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
|
|
|
5
5
|
return (
|
|
6
6
|
<Pressable
|
|
7
7
|
backgroundColor={color}
|
|
8
|
-
height={'$
|
|
9
|
-
width={'$
|
|
8
|
+
height={'$6'}
|
|
9
|
+
width={'$6'}
|
|
10
10
|
borderRadius={'$sm'}
|
|
11
11
|
onPress={() => {
|
|
12
12
|
let { primaryColor, ...rest } = settings;
|
|
@@ -111,7 +111,7 @@ export const NavigationContainerComponent = ({
|
|
|
111
111
|
<NavigationContainer
|
|
112
112
|
ref={navigationRef}
|
|
113
113
|
linking={linking}
|
|
114
|
-
independent={independent}
|
|
114
|
+
// independent={independent}
|
|
115
115
|
onReady={() => {
|
|
116
116
|
routeNameRef.current = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
|
|
117
117
|
const currentRoute: any = routeNameRef?.current;
|
|
@@ -14,7 +14,7 @@ const LoadingComponent = () => (
|
|
|
14
14
|
</Center>
|
|
15
15
|
);
|
|
16
16
|
|
|
17
|
-
const LifecycleComponent = ({ children }) => {
|
|
17
|
+
const LifecycleComponent = ({ children }: { children?: any }) => {
|
|
18
18
|
const { authenticated } = isUserAuthenticated();
|
|
19
19
|
if (authenticated) {
|
|
20
20
|
return (
|
|
@@ -27,7 +27,7 @@ const LifecycleComponent = ({ children }) => {
|
|
|
27
27
|
}
|
|
28
28
|
};
|
|
29
29
|
|
|
30
|
-
const IntractionComponent = ({ children, interationTime }) => {
|
|
30
|
+
const IntractionComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
|
|
31
31
|
const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
|
|
32
32
|
React.useEffect(() => {
|
|
33
33
|
if (interationTime) setInteractionsTimeOut(interationTime);
|
|
@@ -51,7 +51,7 @@ const IntractionComponent = ({ children, interationTime }) => {
|
|
|
51
51
|
);
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
const IntractionWithLifeCycleComponent = ({ children, interationTime }) => {
|
|
54
|
+
const IntractionWithLifeCycleComponent = ({ children, interationTime }: { children?: any; interationTime: number }) => {
|
|
55
55
|
const { interactionsComplete, opacity, setInteractionsTimeOut } = useAfterInteractions();
|
|
56
56
|
React.useEffect(() => {
|
|
57
57
|
if (interationTime) setInteractionsTimeOut(interationTime);
|
package/src/utils/ThemeColor.ts
CHANGED
|
@@ -6,4 +6,14 @@ export const COLOR = {
|
|
|
6
6
|
GREYISH_BLACK: '#1f1f1f',
|
|
7
7
|
};
|
|
8
8
|
|
|
9
|
-
export const THEMECOLOR = [
|
|
9
|
+
export const THEMECOLOR = [
|
|
10
|
+
'#4a154b',
|
|
11
|
+
'#601e69',
|
|
12
|
+
'#1d1c1d',
|
|
13
|
+
'#36c5ef',
|
|
14
|
+
'#2db57c',
|
|
15
|
+
'#e01d5a',
|
|
16
|
+
'#ecb12f',
|
|
17
|
+
'#616061',
|
|
18
|
+
'#dcd9d4',
|
|
19
|
+
];
|
|
@@ -70,6 +70,7 @@ export class GenerateMobileNavigations {
|
|
|
70
70
|
//#layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
|
|
71
71
|
#appDirPath: any;
|
|
72
72
|
#modules: any;
|
|
73
|
+
#initialRouteNameRootStack: string;
|
|
73
74
|
#initialRouteName: string;
|
|
74
75
|
#unauthenticatedComponentPath: string;
|
|
75
76
|
#customTabBarPath: string;
|
|
@@ -89,6 +90,7 @@ export class GenerateMobileNavigations {
|
|
|
89
90
|
this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
|
|
90
91
|
this.#modules = config?.modules ?? [];
|
|
91
92
|
this.#initialRouteName = config?.mobileConfig?.initialRouteName ?? '';
|
|
93
|
+
this.#initialRouteNameRootStack = config?.mobileConfig?.initialRouteNameRootStack ?? 'MainStack';
|
|
92
94
|
this.#unauthenticatedComponentPath = config?.mobileConfig?.unauthenticatedComponentPath ?? '';
|
|
93
95
|
this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
|
|
94
96
|
this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
|
|
@@ -841,7 +843,8 @@ export class GenerateMobileNavigations {
|
|
|
841
843
|
initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
|
|
842
844
|
options={{...${options},...{${
|
|
843
845
|
pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
|
|
844
|
-
? `drawerIcon: ({
|
|
846
|
+
? `drawerIcon: ({ color }) => {
|
|
847
|
+
const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
|
|
845
848
|
const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
|
|
846
849
|
return (<SelectedIcon
|
|
847
850
|
{...{
|
|
@@ -1106,7 +1109,8 @@ export class GenerateMobileNavigations {
|
|
|
1106
1109
|
initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
|
|
1107
1110
|
options={{...${options},...{${
|
|
1108
1111
|
pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
|
|
1109
|
-
? `tabBarIcon: ({
|
|
1112
|
+
? `tabBarIcon: ({ color }) => {
|
|
1113
|
+
const focused = color === '${pkgRouteConfig?.props?.options?.tabBarActiveTintColor}' ? true : false;
|
|
1110
1114
|
const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
|
|
1111
1115
|
return (<SelectedIcon
|
|
1112
1116
|
{...{
|
|
@@ -1414,11 +1418,13 @@ export class GenerateMobileNavigations {
|
|
|
1414
1418
|
const layoutRouteConfig = layoutConfigFileData[layoutType];
|
|
1415
1419
|
const layoutRouteKey = Object.keys(layoutRouteConfig)[1];
|
|
1416
1420
|
const appLayout = layoutRouteConfig[layoutRouteKey];
|
|
1417
|
-
|
|
1418
|
-
const
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1421
|
+
const initialRouteNameRootStack = this.#initialRouteNameRootStack;
|
|
1422
|
+
const layoutInitialRouteName = this.#initialRouteName;
|
|
1423
|
+
const initialRouteName = layoutInitialRouteName
|
|
1424
|
+
? layoutInitialRouteName
|
|
1425
|
+
: layoutType === 'mixSide'
|
|
1426
|
+
? appLayout?.[appLayout?.key]?.props?.initialRouteName ?? 'MainStack.Layout.Home'
|
|
1427
|
+
: appLayout?.props?.initialRouteName || 'MainStack.Home';
|
|
1422
1428
|
const isShowTabs = layoutType === 'mixSide' || layoutType === 'bottom' ? true : false;
|
|
1423
1429
|
const isShowDefalutHeader = layoutType === 'mixSide' ? true : false;
|
|
1424
1430
|
const defaultHeaderProps = {
|
|
@@ -1627,7 +1633,7 @@ export class GenerateMobileNavigations {
|
|
|
1627
1633
|
appComponent += `
|
|
1628
1634
|
const AppNavigations = () => {
|
|
1629
1635
|
return (
|
|
1630
|
-
<Stack.Navigator initialRouteName="${
|
|
1636
|
+
<Stack.Navigator initialRouteName="${initialRouteNameRootStack}">
|
|
1631
1637
|
<Stack.Screen
|
|
1632
1638
|
name="MainStack"
|
|
1633
1639
|
options={{ headerShown: false }}
|