@admin-layout/gluestack-ui-mobile 9.0.4-alpha.74 → 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 +4 -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/utils/ThemeColor.js +11 -1
- package/lib/utils/ThemeColor.js.map +1 -1
- package/package.json +2 -2
- 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/utils/ThemeColor.ts +11 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [9.0.4-alpha.76](https://github.com/CDEBase/admin-layout/compare/v9.0.4-alpha.75...v9.0.4-alpha.76) (2024-12-10)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
|
|
9
|
+
|
|
6
10
|
## [9.0.4-alpha.74](https://github.com/CDEBase/admin-layout/compare/v9.0.4-alpha.73...v9.0.4-alpha.74) (2024-12-06)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @admin-layout/gluestack-ui-mobile
|
|
@@ -17,10 +17,12 @@ export const Header = React.memo(({ navigation, route, options, back, showToggle
|
|
|
17
17
|
type: CHANGE_SETTINGS_ACTION,
|
|
18
18
|
payload: config,
|
|
19
19
|
}), [dispatch]);
|
|
20
|
-
return (React.createElement(SafeAreaView, { bg: '$white' },
|
|
21
|
-
React.createElement(StatusBar, { barStyle:
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
return (React.createElement(SafeAreaView, { bg: settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black' },
|
|
21
|
+
React.createElement(StatusBar, { barStyle: settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
22
|
+
? 'dark-content'
|
|
23
|
+
: 'light-content' }),
|
|
24
|
+
React.createElement(Box, { bg: settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black' },
|
|
25
|
+
React.createElement(HStack, { bg: settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black', px: "$1", py: "$3",
|
|
24
26
|
// justifyContent={
|
|
25
27
|
// settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
|
|
26
28
|
// }
|
|
@@ -30,14 +32,18 @@ export const Header = React.memo(({ navigation, route, options, back, showToggle
|
|
|
30
32
|
? 'center'
|
|
31
33
|
: 'space-between', alignItems: "center", borderBottomWidth: '$1', borderBottomColor: '#d3d3d3', w: "100%" },
|
|
32
34
|
back ? (React.createElement(Button, { size: "xs", bg: 'transparent', onPress: () => navigation.goBack() },
|
|
33
|
-
React.createElement(Ionicons, { name: 'arrow-back', color:
|
|
35
|
+
React.createElement(Ionicons, { name: 'arrow-back', color: settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
36
|
+
? 'black'
|
|
37
|
+
: 'white', size: 20 }))) : (showToggle && settings?.layout !== 'bottom') ||
|
|
34
38
|
(showToggle && settings?.layout !== 'host-bottom') ? (React.createElement(Button, { size: "xs", bg: 'transparent', onPress: () => navigation.toggleDrawer() },
|
|
35
|
-
React.createElement(Ionicons, { name: 'menu', color:
|
|
36
|
-
|
|
37
|
-
|
|
39
|
+
React.createElement(Ionicons, { name: 'menu', color: settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
40
|
+
? 'black'
|
|
41
|
+
: 'white', size: 20 }))) : (React.createElement(React.Fragment, null)),
|
|
42
|
+
React.createElement(Text, { px: '$2', color: settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$black' : '$white', style: { fontSize: 20 }, fontWeight: "$bold", textAlign: "center" }, title),
|
|
43
|
+
!!settingToggle ? (React.createElement(SettingDrawer, { isOpen: settingToggle, onSettingChange: (settings) => {
|
|
38
44
|
onSettingChange(settings);
|
|
39
45
|
setSettingToggle(false);
|
|
40
|
-
} })) : null,
|
|
46
|
+
}, handleClose: () => setSettingToggle(false) })) : null,
|
|
41
47
|
right && (React.createElement(React.Fragment, null,
|
|
42
48
|
React.createElement(HStack, { alignItems: 'center' },
|
|
43
49
|
React.createElement(Button, { size: "xs", bg: 'transparent', onPress: () => setSettingToggle(!settingToggle) },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/Layout/components/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,MAAM,EAAQ,IAAI,EAAE,GAAG,EAAE,SAAS,EAAW,MAAM,EAAc,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACrH,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,IAAI,CAC5B,CAAC,EACG,UAAU,EACV,KAAK,EACL,OAAO,EACP,IAAI,EACJ,UAAU,GAAG,IAAI,EACjB,KAAK,GAAG,OAAO,EACf,KAAK,GAAG,IAAI,EACZ,cAAc,EACd,aAAa,GAAG,IAAI,EACpB,GAAG,IAAI,EACL,EAAE,EAAE;IACN,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,IAAI,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IAEjE,MAAM,OAAO,GAAQ,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAQ,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO;IAC9D,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC1D,MAAM,QAAQ,GAAG,WAAW,CAAM,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACpE,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,MAAW,EAAE,EAAE,CACZ,QAAQ,CAAC;QACL,IAAI,EAAE,sBAAsB;QAC5B,OAAO,EAAE,MAAM;KAClB,CAAC,EACN,CAAC,QAAQ,CAAC,CACb,CAAC;IAEF,OAAO,CACH,oBAAC,YAAY,IAAC,EAAE,EAAE,QAAQ;
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/components/Layout/components/Header.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
|
|
3
3
|
const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }) => {
|
|
4
|
-
return (React.createElement(Pressable, { backgroundColor: '#f0f2f5', width: 50, height: 50, borderRadius: '$sm', mr: '$4', onPress: () => {
|
|
4
|
+
return (React.createElement(Pressable, { backgroundColor: color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749', width: 50, height: 50, borderRadius: '$sm', softShadow: '4', mr: '$4', onPress: () => {
|
|
5
5
|
if (mode === 'style') {
|
|
6
6
|
let { navTheme, ...rest } = settings;
|
|
7
|
-
if (color === '
|
|
7
|
+
if (color === 'light') {
|
|
8
8
|
navTheme = 'light';
|
|
9
9
|
const newSettings = {
|
|
10
10
|
...rest,
|
|
@@ -12,6 +12,14 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
|
|
|
12
12
|
};
|
|
13
13
|
onSettingChange(newSettings);
|
|
14
14
|
}
|
|
15
|
+
else if (color === 'realDark') {
|
|
16
|
+
navTheme = 'realDark';
|
|
17
|
+
const newSettings = {
|
|
18
|
+
...rest,
|
|
19
|
+
navTheme,
|
|
20
|
+
};
|
|
21
|
+
onSettingChange(newSettings);
|
|
22
|
+
}
|
|
15
23
|
else {
|
|
16
24
|
navTheme = 'dark';
|
|
17
25
|
const newSettings = {
|
|
@@ -58,13 +66,13 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
|
|
|
58
66
|
}
|
|
59
67
|
} },
|
|
60
68
|
React.createElement(HStack, null,
|
|
61
|
-
React.createElement(Box, { backgroundColor: color, height: bottomOnly ? '$0' : 50, width: '28%', borderTopLeftRadius: '$sm', borderBottomLeftRadius: '$sm' }),
|
|
69
|
+
React.createElement(Box, { backgroundColor: color === 'light' ? '$white' : '$black', height: bottomOnly ? '$0' : 50, width: bottomOnly ? '$0' : '28%', borderTopLeftRadius: '$sm', borderBottomLeftRadius: '$sm' }),
|
|
62
70
|
React.createElement(VStack, { justifyContent: 'space-between' },
|
|
63
|
-
React.createElement(Box, { height: 15, width: 36, backgroundColor: '$white', borderTopRightRadius: '$sm' }),
|
|
71
|
+
React.createElement(Box, { height: 15, width: bottomOnly ? 49 : 36, backgroundColor: color === 'light' || color === 'dark' ? '$white' : '$black', borderTopRightRadius: '$sm' }),
|
|
64
72
|
bottom ? (React.createElement(Box, { height: 15, width: 36, backgroundColor: '$black', borderBottomRightRadius: '$sm' })) : null,
|
|
65
73
|
bottomOnly ? (React.createElement(React.Fragment, null,
|
|
66
|
-
React.createElement(Box, { height:
|
|
67
|
-
React.createElement(Box, { height: 15, width: 49, backgroundColor: '$black' }))) : null,
|
|
74
|
+
React.createElement(Box, { height: 18, width: '$0', backgroundColor: '$white', borderTopRightRadius: '$sm' }),
|
|
75
|
+
React.createElement(Box, { height: 15, width: 49, backgroundColor: '$black', borderBottomLeftRadius: '$sm', borderBottomRightRadius: '$sm' }))) : null,
|
|
68
76
|
bottomDrawer ? (React.createElement(React.Fragment, null,
|
|
69
77
|
React.createElement(Box, { height: 15, width: 36, backgroundColor: '$black', borderBottomRightRadius: '$sm' }),
|
|
70
78
|
React.createElement(Text, null))) : null))));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LayoutButton.js","sourceRoot":"","sources":["../../../../../src/components/Layout/components/SettingDrawer/LayoutButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5E,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAO,EAAE,EAAE;IACvG,OAAO,CACH,oBAAC,SAAS,IACN,eAAe,EAAE,SAAS,
|
|
1
|
+
{"version":3,"file":"LayoutButton.js","sourceRoot":"","sources":["../../../../../src/components/Layout/components/SettingDrawer/LayoutButton.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const SettingDrawer: ({ onSettingChange }: any) => React.JSX.Element;
|
|
2
|
+
export declare const SettingDrawer: ({ isOpen, onSettingChange, handleClose }: any) => React.JSX.Element;
|
|
@@ -1,23 +1,63 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { Box, Text, HStack } from '@gluestack-ui/themed';
|
|
2
|
+
import { Box, Text, HStack, Actionsheet, ActionsheetBackdrop, ActionsheetContent, ActionsheetDragIndicatorWrapper, ActionsheetDragIndicator, Select, SelectTrigger, SelectInput, Icon, ChevronDownIcon, SelectPortal, SelectBackdrop, SelectContent, SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem, Divider, Switch, ScrollView, } from '@gluestack-ui/themed';
|
|
3
3
|
import { useSelector } from 'react-redux';
|
|
4
4
|
import LayoutButton from './LayoutButton';
|
|
5
5
|
import ThemeColorButton from './ThemeColorButton';
|
|
6
6
|
import { THEMECOLOR } from '../../../../utils/ThemeColor';
|
|
7
|
-
export const SettingDrawer = ({ onSettingChange }) => {
|
|
7
|
+
export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }) => {
|
|
8
8
|
const settings = useSelector((state) => state.settings);
|
|
9
|
-
return (React.createElement(
|
|
10
|
-
React.createElement(
|
|
11
|
-
React.createElement(
|
|
12
|
-
React.createElement(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
9
|
+
return (React.createElement(Actionsheet, { isOpen: isOpen, onClose: handleClose, zIndex: 999 },
|
|
10
|
+
React.createElement(ActionsheetBackdrop, null),
|
|
11
|
+
React.createElement(ActionsheetContent, { zIndex: 999, w: '100%' },
|
|
12
|
+
React.createElement(ActionsheetDragIndicatorWrapper, null,
|
|
13
|
+
React.createElement(ActionsheetDragIndicator, null)),
|
|
14
|
+
React.createElement(ScrollView, null,
|
|
15
|
+
React.createElement(Box, { alignItems: "flex-start", bg: '$white', w: '100%', p: '$3' },
|
|
16
|
+
React.createElement(Text, { color: '#00000', fontWeight: '$semibold' }, "Page style setting"),
|
|
17
|
+
React.createElement(HStack, { space: 'md', mt: '$3' },
|
|
18
|
+
React.createElement(LayoutButton, { mode: "style", settings: settings, onSettingChange: onSettingChange, color: 'light' }),
|
|
19
|
+
React.createElement(LayoutButton, { mode: "style", settings: settings, onSettingChange: onSettingChange, color: 'dark' }),
|
|
20
|
+
React.createElement(LayoutButton, { mode: "style", settings: settings, onSettingChange: onSettingChange, color: 'realDark' })),
|
|
21
|
+
React.createElement(Text, { color: '#000000', fontWeight: '$semibold', mt: '$2' }, "Select Theme"),
|
|
22
|
+
React.createElement(Select, { mt: '$2', w: '100%', selectedValue: settings?.themeName, onValueChange: (value) => {
|
|
23
|
+
const newSettings = {
|
|
24
|
+
...settings,
|
|
25
|
+
themeName: value,
|
|
26
|
+
};
|
|
27
|
+
onSettingChange(newSettings);
|
|
28
|
+
} },
|
|
29
|
+
React.createElement(SelectTrigger, { variant: "outline", size: "md" },
|
|
30
|
+
React.createElement(SelectInput, { placeholder: "Select option" }),
|
|
31
|
+
React.createElement(Icon, { as: ChevronDownIcon, mr: '$3' })),
|
|
32
|
+
React.createElement(SelectPortal, null,
|
|
33
|
+
React.createElement(SelectBackdrop, null),
|
|
34
|
+
React.createElement(SelectContent, null,
|
|
35
|
+
React.createElement(SelectDragIndicatorWrapper, null,
|
|
36
|
+
React.createElement(SelectDragIndicator, null)),
|
|
37
|
+
React.createElement(SelectItem, { label: "Default", value: "default" }),
|
|
38
|
+
React.createElement(SelectItem, { label: "Github Theme", value: "github" }),
|
|
39
|
+
React.createElement(SelectItem, { label: "Slack Theme", value: "slack" }),
|
|
40
|
+
React.createElement(SelectItem, { label: "Airbnb Theme", value: "airbnb" }),
|
|
41
|
+
React.createElement(SelectItem, { label: "Spotify Theme", value: "spotify" })))),
|
|
42
|
+
React.createElement(Text, { color: '#000000', fontWeight: '$semibold', mt: '$2' }, "Theme Color"),
|
|
43
|
+
React.createElement(HStack, { space: 'md', mt: '$3', flexWrap: 'wrap' }, THEMECOLOR.map((color, index) => (React.createElement(ThemeColorButton, { key: index, color: color, settings: settings, onSettingChange: onSettingChange })))),
|
|
44
|
+
React.createElement(Divider, { my: '$4' }),
|
|
45
|
+
React.createElement(Text, { color: '#000000', fontWeight: '$semibold', mt: '$2' }, "Navigation Mode"),
|
|
46
|
+
React.createElement(HStack, { space: 'md', mt: '$3' },
|
|
47
|
+
React.createElement(LayoutButton, { mode: "layout", settings: settings, onSettingChange: onSettingChange, color: 'light' }),
|
|
48
|
+
React.createElement(LayoutButton, { mode: "layout", bottom: true, settings: settings, onSettingChange: onSettingChange, color: 'light' }),
|
|
49
|
+
React.createElement(LayoutButton, { mode: "light", bottomOnly: true, settings: settings, onSettingChange: onSettingChange, color: 'light' })),
|
|
50
|
+
React.createElement(Divider, { my: '$4' }),
|
|
51
|
+
React.createElement(Text, { color: '#000000', fontWeight: '$semibold', mt: '$2' }, "Regional Settings"),
|
|
52
|
+
React.createElement(HStack, { w: '100%', mt: '$3', justifyContent: 'space-between', alignItems: "center" },
|
|
53
|
+
React.createElement(Text, null, "Menu Header"),
|
|
54
|
+
React.createElement(Switch, { onValueChange: (value) => {
|
|
55
|
+
console.log(value);
|
|
56
|
+
const newSettings = {
|
|
57
|
+
...settings,
|
|
58
|
+
menuHeader: value,
|
|
59
|
+
};
|
|
60
|
+
onSettingChange(newSettings);
|
|
61
|
+
}, isChecked: settings?.menuHeader, value: settings?.menuHeader })))))));
|
|
22
62
|
};
|
|
23
63
|
//# sourceMappingURL=SettingDrawer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SettingDrawer.js","sourceRoot":"","sources":["../../../../../src/components/Layout/components/SettingDrawer/SettingDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"SettingDrawer.js","sourceRoot":"","sources":["../../../../../src/components/Layout/components/SettingDrawer/SettingDrawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,WAAW,EACX,mBAAmB,EACnB,kBAAkB,EAClB,+BAA+B,EAC/B,wBAAwB,EACxB,MAAM,EACN,aAAa,EACb,WAAW,EACX,IAAI,EACJ,eAAe,EACf,YAAY,EACZ,cAAc,EACd,aAAa,EACb,0BAA0B,EAC1B,mBAAmB,EACnB,UAAU,EACV,OAAO,EACP,MAAM,EACN,UAAU,GACb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAE1D,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,eAAe,EAAE,WAAW,EAAO,EAAE,EAAE;IAC3E,MAAM,QAAQ,GAAG,WAAW,CAAM,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAQ,CAAC;IACpE,OAAO,CACH,oBAAC,WAAW,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG;QAC1D,oBAAC,mBAAmB,OAAG;QACvB,oBAAC,kBAAkB,IAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM;YACtC,oBAAC,+BAA+B;gBAC5B,oBAAC,wBAAwB,OAAG,CACE;YAClC,oBAAC,UAAU;gBACP,oBAAC,GAAG,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI;oBACzD,oBAAC,IAAI,IAAC,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,WAAW,yBAEvC;oBACP,oBAAC,MAAM,IAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI;wBACzB,oBAAC,YAAY,IACT,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,OAAO,GAChB;wBACF,oBAAC,YAAY,IACT,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,MAAM,GACf;wBACF,oBAAC,YAAY,IACT,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,UAAU,GACnB,CACG;oBACT,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,mBAElD;oBACP,oBAAC,MAAM,IACH,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,MAAM,EACT,aAAa,EAAE,QAAQ,EAAE,SAAS,EAClC,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;4BACrB,MAAM,WAAW,GAAG;gCAChB,GAAG,QAAQ;gCACX,SAAS,EAAE,KAAK;6BACnB,CAAC;4BACF,eAAe,CAAC,WAAW,CAAC,CAAC;wBACjC,CAAC;wBAED,oBAAC,aAAa,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI;4BACtC,oBAAC,WAAW,IAAC,WAAW,EAAC,eAAe,GAAG;4BAC3C,oBAAC,IAAI,IAAC,EAAE,EAAE,eAAe,EAAE,EAAE,EAAE,IAAI,GAAI,CAC3B;wBAChB,oBAAC,YAAY;4BACT,oBAAC,cAAc,OAAG;4BAClB,oBAAC,aAAa;gCACV,oBAAC,0BAA0B;oCACvB,oBAAC,mBAAmB,OAAG,CACE;gCAC7B,oBAAC,UAAU,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,SAAS,GAAG;gCAC9C,oBAAC,UAAU,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ,GAAG;gCAClD,oBAAC,UAAU,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,OAAO,GAAG;gCAChD,oBAAC,UAAU,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,QAAQ,GAAG;gCAClD,oBAAC,UAAU,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,SAAS,GAAG,CACxC,CACL,CACV;oBACT,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,kBAElD;oBACP,oBAAC,MAAM,IAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,IAC1C,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,oBAAC,gBAAgB,IACb,GAAG,EAAE,KAAK,EACV,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,GAClC,CACL,CAAC,CACG;oBACT,oBAAC,OAAO,IAAC,EAAE,EAAE,IAAI,GAAI;oBACrB,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,sBAElD;oBACP,oBAAC,MAAM,IAAC,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI;wBACzB,oBAAC,YAAY,IACT,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,OAAO,GAChB;wBACF,oBAAC,YAAY,IACT,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,IAAI,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,OAAO,GAChB;wBAEF,oBAAC,YAAY,IACT,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,IAAI,EAChB,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,OAAO,GAChB,CACG;oBACT,oBAAC,OAAO,IAAC,EAAE,EAAE,IAAI,GAAI;oBACrB,oBAAC,IAAI,IAAC,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,IAAI,wBAElD;oBACP,oBAAC,MAAM,IAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,eAAe,EAAE,UAAU,EAAC,QAAQ;wBAC7E,oBAAC,IAAI,sBAAmB;wBACxB,oBAAC,MAAM,IACH,aAAa,EAAE,CAAC,KAAK,EAAE,EAAE;gCACrB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;gCACnB,MAAM,WAAW,GAAG;oCAChB,GAAG,QAAQ;oCACX,UAAU,EAAE,KAAK;iCACpB,CAAC;gCACF,eAAe,CAAC,WAAW,CAAC,CAAC;4BACjC,CAAC,EACD,SAAS,EAAE,QAAQ,EAAE,UAAU,EAC/B,KAAK,EAAE,QAAQ,EAAE,UAAU,GAC7B,CACG,CACP,CACG,CACI,CACX,CACjB,CAAC;AACN,CAAC,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { Pressable, Box } from '@gluestack-ui/themed';
|
|
3
3
|
const ThemeColorButton = ({ color, onSettingChange, settings }) => {
|
|
4
|
-
return (React.createElement(Pressable, { backgroundColor: color, height: '$
|
|
4
|
+
return (React.createElement(Pressable, { backgroundColor: color, height: '$6', width: '$6', borderRadius: '$sm', onPress: () => {
|
|
5
5
|
let { primaryColor, ...rest } = settings;
|
|
6
6
|
primaryColor = color;
|
|
7
7
|
const newSettings = {
|
package/lib/utils/ThemeColor.js
CHANGED
|
@@ -5,5 +5,15 @@ export const COLOR = {
|
|
|
5
5
|
LIGHT_GREY: '#b1b1b1',
|
|
6
6
|
GREYISH_BLACK: '#1f1f1f',
|
|
7
7
|
};
|
|
8
|
-
export const THEMECOLOR = [
|
|
8
|
+
export const THEMECOLOR = [
|
|
9
|
+
'#4a154b',
|
|
10
|
+
'#601e69',
|
|
11
|
+
'#1d1c1d',
|
|
12
|
+
'#36c5ef',
|
|
13
|
+
'#2db57c',
|
|
14
|
+
'#e01d5a',
|
|
15
|
+
'#ecb12f',
|
|
16
|
+
'#616061',
|
|
17
|
+
'#dcd9d4',
|
|
18
|
+
];
|
|
9
19
|
//# sourceMappingURL=ThemeColor.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeColor.js","sourceRoot":"","sources":["../../src/utils/ThemeColor.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"ThemeColor.js","sourceRoot":"","sources":["../../src/utils/ThemeColor.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;CAC3B,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG;IACtB,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACZ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@admin-layout/gluestack-ui-mobile",
|
|
3
|
-
"version": "9.0.4-alpha.
|
|
3
|
+
"version": "9.0.4-alpha.76",
|
|
4
4
|
"description": "Glustack-ui for mobile component layout",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "CDMBase LLC",
|
|
@@ -42,5 +42,5 @@
|
|
|
42
42
|
"typescript": {
|
|
43
43
|
"definition": "lib/index.d.ts"
|
|
44
44
|
},
|
|
45
|
-
"gitHead": "
|
|
45
|
+
"gitHead": "f600ebf5f48ef718c42b52884a8db414b54c173d"
|
|
46
46
|
}
|
|
@@ -38,11 +38,17 @@ export const Header = React.memo(
|
|
|
38
38
|
);
|
|
39
39
|
|
|
40
40
|
return (
|
|
41
|
-
<SafeAreaView bg={'$white'}>
|
|
42
|
-
<StatusBar
|
|
43
|
-
|
|
41
|
+
<SafeAreaView bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
|
|
42
|
+
<StatusBar
|
|
43
|
+
barStyle={
|
|
44
|
+
settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
45
|
+
? 'dark-content'
|
|
46
|
+
: 'light-content'
|
|
47
|
+
}
|
|
48
|
+
/>
|
|
49
|
+
<Box bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
|
|
44
50
|
<HStack
|
|
45
|
-
bg={
|
|
51
|
+
bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}
|
|
46
52
|
px="$1"
|
|
47
53
|
py="$3"
|
|
48
54
|
// justifyContent={
|
|
@@ -62,19 +68,37 @@ export const Header = React.memo(
|
|
|
62
68
|
>
|
|
63
69
|
{back ? (
|
|
64
70
|
<Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
|
|
65
|
-
<Ionicons
|
|
71
|
+
<Ionicons
|
|
72
|
+
name={'arrow-back'}
|
|
73
|
+
color={
|
|
74
|
+
settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
75
|
+
? 'black'
|
|
76
|
+
: 'white'
|
|
77
|
+
}
|
|
78
|
+
size={20}
|
|
79
|
+
/>
|
|
66
80
|
</Button>
|
|
67
81
|
) : (showToggle && settings?.layout !== 'bottom') ||
|
|
68
82
|
(showToggle && settings?.layout !== 'host-bottom') ? (
|
|
69
83
|
<Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
|
|
70
|
-
<Ionicons
|
|
84
|
+
<Ionicons
|
|
85
|
+
name={'menu'}
|
|
86
|
+
color={
|
|
87
|
+
settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
88
|
+
? 'black'
|
|
89
|
+
: 'white'
|
|
90
|
+
}
|
|
91
|
+
size={20}
|
|
92
|
+
/>
|
|
71
93
|
</Button>
|
|
72
94
|
) : (
|
|
73
95
|
<></>
|
|
74
96
|
)}
|
|
75
97
|
<Text
|
|
76
98
|
px={'$2'}
|
|
77
|
-
color={
|
|
99
|
+
color={
|
|
100
|
+
settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$black' : '$white'
|
|
101
|
+
}
|
|
78
102
|
style={{ fontSize: 20 }}
|
|
79
103
|
fontWeight="$bold"
|
|
80
104
|
textAlign="center"
|
|
@@ -83,10 +107,12 @@ export const Header = React.memo(
|
|
|
83
107
|
</Text>
|
|
84
108
|
{!!settingToggle ? (
|
|
85
109
|
<SettingDrawer
|
|
110
|
+
isOpen={settingToggle}
|
|
86
111
|
onSettingChange={(settings: any) => {
|
|
87
112
|
onSettingChange(settings);
|
|
88
113
|
setSettingToggle(false);
|
|
89
114
|
}}
|
|
115
|
+
handleClose={() => setSettingToggle(false)}
|
|
90
116
|
/>
|
|
91
117
|
) : null}
|
|
92
118
|
{right && (
|
|
@@ -116,7 +142,15 @@ export const Header = React.memo(
|
|
|
116
142
|
{/* {right ? (
|
|
117
143
|
<HStack alignItems={'center'}>
|
|
118
144
|
<Button size="xs" bg={'transparent'} onPress={() => setSettingToggle(!settingToggle)}>
|
|
119
|
-
<Ionicons
|
|
145
|
+
<Ionicons
|
|
146
|
+
name={'cog'}
|
|
147
|
+
color={
|
|
148
|
+
settings?.navTheme === 'light' || settings?.navTheme === 'dark'
|
|
149
|
+
? 'black'
|
|
150
|
+
: 'white'
|
|
151
|
+
}
|
|
152
|
+
size={20}
|
|
153
|
+
/>
|
|
120
154
|
</Button>
|
|
121
155
|
{rightComponent ? <Box>{rightComponent}</Box> : null}
|
|
122
156
|
</HStack>
|
|
@@ -4,21 +4,29 @@ import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
|
|
|
4
4
|
const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
|
|
5
5
|
return (
|
|
6
6
|
<Pressable
|
|
7
|
-
backgroundColor={'#f0f2f5'}
|
|
7
|
+
backgroundColor={color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749'}
|
|
8
8
|
width={50}
|
|
9
9
|
height={50}
|
|
10
10
|
borderRadius={'$sm'}
|
|
11
|
+
softShadow={'4'}
|
|
11
12
|
mr={'$4'}
|
|
12
13
|
onPress={() => {
|
|
13
14
|
if (mode === 'style') {
|
|
14
15
|
let { navTheme, ...rest } = settings;
|
|
15
|
-
if (color === '
|
|
16
|
+
if (color === 'light') {
|
|
16
17
|
navTheme = 'light';
|
|
17
18
|
const newSettings = {
|
|
18
19
|
...rest,
|
|
19
20
|
navTheme,
|
|
20
21
|
};
|
|
21
22
|
onSettingChange(newSettings);
|
|
23
|
+
} else if (color === 'realDark') {
|
|
24
|
+
navTheme = 'realDark';
|
|
25
|
+
const newSettings = {
|
|
26
|
+
...rest,
|
|
27
|
+
navTheme,
|
|
28
|
+
};
|
|
29
|
+
onSettingChange(newSettings);
|
|
22
30
|
} else {
|
|
23
31
|
navTheme = 'dark';
|
|
24
32
|
const newSettings = {
|
|
@@ -63,33 +71,39 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
|
|
|
63
71
|
>
|
|
64
72
|
<HStack>
|
|
65
73
|
<Box
|
|
66
|
-
backgroundColor={color}
|
|
74
|
+
backgroundColor={color === 'light' ? '$white' : '$black'}
|
|
67
75
|
height={bottomOnly ? '$0' : 50}
|
|
68
|
-
width={'28%'}
|
|
76
|
+
width={bottomOnly ? '$0' : '28%'}
|
|
69
77
|
borderTopLeftRadius={'$sm'}
|
|
70
78
|
borderBottomLeftRadius={'$sm'}
|
|
71
79
|
/>
|
|
72
80
|
<VStack justifyContent={'space-between'}>
|
|
73
|
-
<Box
|
|
81
|
+
<Box
|
|
82
|
+
height={15}
|
|
83
|
+
width={bottomOnly ? 49 : 36}
|
|
84
|
+
backgroundColor={color === 'light' || color === 'dark' ? '$white' : '$black'}
|
|
85
|
+
borderTopRightRadius={'$sm'}
|
|
86
|
+
/>
|
|
74
87
|
{bottom ? (
|
|
75
88
|
<Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
|
|
76
89
|
) : null}
|
|
77
90
|
|
|
78
91
|
{bottomOnly ? (
|
|
79
92
|
<>
|
|
80
|
-
<Box height={
|
|
81
|
-
<Box height={15} width={49} backgroundColor={'$black'} />
|
|
82
|
-
</>
|
|
83
|
-
) : null}
|
|
84
|
-
|
|
85
|
-
{bottomDrawer ? (
|
|
86
|
-
<>
|
|
93
|
+
<Box height={18} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
|
|
87
94
|
<Box
|
|
88
95
|
height={15}
|
|
89
|
-
width={
|
|
96
|
+
width={49}
|
|
90
97
|
backgroundColor={'$black'}
|
|
98
|
+
borderBottomLeftRadius={'$sm'}
|
|
91
99
|
borderBottomRightRadius={'$sm'}
|
|
92
100
|
/>
|
|
101
|
+
</>
|
|
102
|
+
) : null}
|
|
103
|
+
|
|
104
|
+
{bottomDrawer ? (
|
|
105
|
+
<>
|
|
106
|
+
<Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
|
|
93
107
|
<Text></Text>
|
|
94
108
|
</>
|
|
95
109
|
) : null}
|
|
@@ -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;
|
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
|
+
];
|