@admin-layout/gluestack-ui-mobile 9.0.4-alpha.74 → 9.0.4-alpha.77
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/Header.js +15 -9
- 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/WithConfiguration.js +2 -1
- package/lib/components/WithConfiguration.js.map +1 -1
- package/lib/components/WithPermission.js +2 -1
- package/lib/components/WithPermission.js.map +1 -1
- package/lib/components/usePermissionAutoFetch.d.ts +17 -5
- package/lib/containers/layout/DrawerBottomNavigationConfig.d.ts +393 -88
- package/lib/containers/layout/DrawerConfig.d.ts +266 -60
- package/lib/containers/layout/module.js +2 -2
- package/lib/containers/layout/module.js.map +1 -1
- package/lib/hooks/use-after-interactions.d.ts +0 -1
- package/lib/utils/ThemeColor.js +11 -1
- package/lib/utils/ThemeColor.js.map +1 -1
- package/lib/utils/generateMobileNavigations.d.ts +1 -1
- package/lib/utils/generateMobileNavigations.js +15 -5
- package/lib/utils/generateMobileNavigations.js.map +1 -1
- package/package.json +3 -3
- package/src/components/Layout/components/Header.tsx +42 -8
- 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/WithConfiguration.tsx +2 -1
- package/src/components/WithPermission.tsx +2 -2
- package/src/containers/layout/module.ts +2 -2
- package/src/utils/ThemeColor.ts +11 -1
- package/src/utils/generateMobileNavigations.ts +17 -3
|
@@ -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;
|
|
@@ -25,7 +25,8 @@ export const WithConfiguration = (props: IWithConfigurationProps) => {
|
|
|
25
25
|
configKey,
|
|
26
26
|
overrides: { resource: props.settingsUri },
|
|
27
27
|
});
|
|
28
|
-
const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
28
|
+
// const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
29
|
+
const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
29
30
|
|
|
30
31
|
const isPrivate = React.useMemo(
|
|
31
32
|
() => IVisibility.Private === data?.resolveConfiguration,
|
|
@@ -29,8 +29,8 @@ export const WithPermission = ({
|
|
|
29
29
|
alternative,
|
|
30
30
|
render,
|
|
31
31
|
}: IWithPermissionProps) => {
|
|
32
|
-
const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
33
|
-
|
|
32
|
+
// const { data: permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
33
|
+
const { permissions, loading: permissionLoading } = usePermissionAutoFetch();
|
|
34
34
|
const hasPermission = React.useMemo(() => {
|
|
35
35
|
return permissionKeys.some((key) => permissionTypes.includes(get(permissions?.resolveConfiguration, key)));
|
|
36
36
|
}, [permissions, permissionTypes, permissionKeys]);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
2
|
import { Feature } from '@common-stack/client-react';
|
|
3
|
-
import { createStackNavigator } from '@react-navigation/stack';
|
|
3
|
+
// import { createStackNavigator } from '@react-navigation/stack';
|
|
4
4
|
import { ProLayout, AppFeatures, AppLayout } from './ProLayout';
|
|
5
5
|
|
|
6
6
|
export { ProLayout, AppFeatures, AppLayout };
|
|
@@ -8,7 +8,7 @@ export { ProLayout, AppFeatures, AppLayout };
|
|
|
8
8
|
const layoutConfig = {
|
|
9
9
|
['/']: {
|
|
10
10
|
exact: false,
|
|
11
|
-
container: createStackNavigator(),
|
|
11
|
+
// container: createStackNavigator(),
|
|
12
12
|
name: 'MainStack',
|
|
13
13
|
props: {
|
|
14
14
|
initialRouteName: 'MainStack.MainBottomTab',
|
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
|
+
];
|
|
@@ -66,6 +66,7 @@ export class GenerateMobileNavigations {
|
|
|
66
66
|
#configFileData: any = {};
|
|
67
67
|
#configFilePath: any;
|
|
68
68
|
#appPath: string = 'app';
|
|
69
|
+
#isDefaultPackagePathMobileRoot: boolean;
|
|
69
70
|
#mobileStackPath: string = 'mobile-stack-react';
|
|
70
71
|
//#layoutSettings: any = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
|
|
71
72
|
#appDirPath: any;
|
|
@@ -85,6 +86,7 @@ export class GenerateMobileNavigations {
|
|
|
85
86
|
this.#configFileData = config;
|
|
86
87
|
// this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
|
|
87
88
|
this.#appPath = config?.commonPaths?.appPath ?? 'app';
|
|
89
|
+
this.#isDefaultPackagePathMobileRoot = config?.mobileConfig?.isDefaultPackagePathMobileRoot ?? false;
|
|
88
90
|
this.#iconsRepository = config?.iconsRepository ?? '';
|
|
89
91
|
this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
|
|
90
92
|
this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
|
|
@@ -157,10 +159,20 @@ export class GenerateMobileNavigations {
|
|
|
157
159
|
|
|
158
160
|
async #getModulesRouteConfig({ modules }) {
|
|
159
161
|
const allFilteredRoutes = [];
|
|
162
|
+
let pkgFile;
|
|
160
163
|
for (const pkg of modules) {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
+
if (this.#isDefaultPackagePathMobileRoot) {
|
|
165
|
+
const pkgRootFilePath = path.join(
|
|
166
|
+
path.join(path.dirname(this.#configFilePath), 'node_modules/lib'),
|
|
167
|
+
pkg,
|
|
168
|
+
);
|
|
169
|
+
pkgFile = path.join(pkgRootFilePath, 'routes.json');
|
|
170
|
+
} else {
|
|
171
|
+
const pkgPath = require.resolve(pkg);
|
|
172
|
+
const pkgDirPath = path.dirname(pkgPath);
|
|
173
|
+
pkgFile = path.join(pkgDirPath, 'routes.json');
|
|
174
|
+
}
|
|
175
|
+
|
|
164
176
|
if (fs.existsSync(pkgFile)) {
|
|
165
177
|
const fileModuleJSON: any = await readJsonFile(pkgFile);
|
|
166
178
|
if (fileModuleJSON) {
|
|
@@ -1912,3 +1924,5 @@ export class GenerateMobileNavigations {
|
|
|
1912
1924
|
return this.#createAppDirectory();
|
|
1913
1925
|
}
|
|
1914
1926
|
}
|
|
1927
|
+
|
|
1928
|
+
export default GenerateMobileNavigations;
|