@admin-layout/gluestack-ui-mobile 9.0.4-alpha.0 → 9.0.4-alpha.103

package/src/components/Layout/components/Header.tsx

@@ -7,101 +7,162 @@ import { useDispatch } from 'react-redux';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { useSelector } from 'react-redux';
 
+export const Header = React.memo(
+    ({
+        navigation,
+        route,
+        options,
+        back,
+        showToggle = null,
+        theme = 'light',
+        right = null,
+        rightComponent,
+        isMixedLayout = null,
+        ...rest
+    }: any) => {
+        const title = rest?.title || getHeaderTitle(options, route.name);
 
-export const Header = React.memo(({
-    navigation,
-    route,
-    options,
-    back,
-    showToggle = null,
-    theme = 'light',
-    right = null,
-    rightComponent,
-    isMixedLayout=null,
-    ...rest
-}: any)=>{
-    const title = rest?.title || getHeaderTitle(options, route.name);
+        const matches: any = title.match(/\b(\w)/g);
+        const acronym: any = matches.join('').substring(0, 2); // JSON
+        const [settingToggle, setSettingToggle] = useState(false);
+        const settings = useSelector<any>((state) => state.settings) as any;
+        const dispatch = useDispatch();
 
-    const matches: any = title.match(/\b(\w)/g);
-    const acronym: any = matches.join('').substring(0, 2); // JSON
-    const [settingToggle, setSettingToggle] = useState(false);
-    const settings = useSelector<any>((state) => state.settings) as any;
-    const dispatch = useDispatch();
+        const onSettingChange = useCallback(
+            (config: any) =>
+                dispatch({
+                    type: CHANGE_SETTINGS_ACTION,
+                    payload: config,
+                }),
+            [dispatch],
+        );
 
-    const onSettingChange = useCallback(
-        (config: any) =>
-            dispatch({
-                type: CHANGE_SETTINGS_ACTION,
-                payload: config,
-            }),
-        [dispatch],
-    );
+        return (
+            <SafeAreaView bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
+                <StatusBar
+                    barStyle={
+                        settings?.navTheme === 'light' || settings?.navTheme === 'dark'
+                            ? 'dark-content'
+                            : 'light-content'
+                    }
+                />
+                <Box bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}>
+                    <HStack
+                        bg={settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$white' : '$black'}
+                        px="$1"
+                        py="$3"
+                        // justifyContent={
+                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
+                        // }
+                        justifyContent={
+                            (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&
+                            !isMixedLayout &&
+                            !right
+                                ? 'center'
+                                : 'space-between'
+                        }
+                        alignItems="center"
+                        borderBottomWidth={'$1'}
+                        borderBottomColor={'#d3d3d3'}
+                        w="100%"
+                    >
+                        {back ? (
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
+                                <Ionicons
+                                    name={'arrow-back'}
+                                    color={
+                                        settings?.navTheme === 'light' || settings?.navTheme === 'dark'
+                                            ? 'black'
+                                            : 'white'
+                                    }
+                                    size={20}
+                                />
+                            </Button>
+                        ) : (showToggle && settings?.layout !== 'bottom') ||
+                          (showToggle && settings?.layout !== 'host-bottom') ? (
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
+                                <Ionicons
+                                    name={'menu'}
+                                    color={
+                                        settings?.navTheme === 'light' || settings?.navTheme === 'dark'
+                                            ? 'black'
+                                            : 'white'
+                                    }
+                                    size={20}
+                                />
+                            </Button>
+                        ) : (
+                            <></>
+                        )}
+                        <Text
+                            px={'$2'}
+                            color={
+                                settings?.navTheme === 'light' || settings?.navTheme === 'dark' ? '$black' : '$white'
+                            }
+                            style={{ fontSize: 20 }}
+                            fontWeight="$bold"
+                            textAlign="center"
+                        >
+                            {title}
+                        </Text>
+                        {!!settingToggle ? (
+                            <SettingDrawer
+                                isOpen={settingToggle}
+                                onSettingChange={(settings: any) => {
+                                    onSettingChange(settings);
+                                    setSettingToggle(false);
+                                }}
+                                handleClose={() => setSettingToggle(false)}
+                            />
+                        ) : null}
+                        {right && (
+                            <>
+                                <HStack alignItems={'center'}>
+                                    <Button
+                                        size="xs"
+                                        bg={'transparent'}
+                                        onPress={() => setSettingToggle(!settingToggle)}
+                                    >
+                                        <Ionicons
+                                            name={'cog'}
+                                            color={theme === 'light' ? 'black' : 'white'}
+                                            size={20}
+                                        />
+                                    </Button>
+                                    {rightComponent ? <Box>{rightComponent}</Box> : null}
+                                </HStack>
+                            </>
+                        )}
 
-    return (
-        <SafeAreaView>
-        <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />   
-        <Box bg={theme === 'light' ? '$white' : '$black'}>
-            <HStack
-                bg={theme === 'light' ? '$white' : '$black'}
-                px="$1"
-                py="$3"
-                // justifyContent={
-                //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
-                // }
-                justifyContent={
-                    (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&!isMixedLayout && !right
-                        ? 'center'
-                        : 'space-between'
-                }
-                alignItems="center"
-                borderBottomWidth={'$1'}
-                borderBottomColor={'#d3d3d3'}
-                w="100%"
-               
-            >
-                {back ? (
-                    <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
-                        <Ionicons name={'arrow-back'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                    </Button>
-                ) : (showToggle && settings?.layout !== 'bottom') || (showToggle && settings?.layout !== 'host-bottom') ? (
-                    <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
-                        <Ionicons name={'menu'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                    </Button>
-                ) : (
-                    <></>
-                )}
-                <Text
-                    px={'$2'}
-                    color={theme === 'light' ? '$black' : '$white'}
-                    style={{ fontSize: 20 }}
-                    fontWeight="$bold"
-                >
-                    {title}
-                </Text>
-                {!!settingToggle ? (
-                    <SettingDrawer
-                        onSettingChange={(settings: any) => {
-                            onSettingChange(settings);
-                            setSettingToggle(false);
-                        }}
-                    />
-                ) : null}
-                {right ? (
-                    <HStack alignItems={'center'}>
-                        <Button size="xs" bg={'transparent'} onPress={() => setSettingToggle(!settingToggle)}>
-                            <Ionicons name={'cog'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                        </Button>
-                        {rightComponent ? <Box>{rightComponent}</Box> : null}
+                        {(back ||
+                            (showToggle && settings?.layout !== 'bottom') ||
+                            (showToggle && settings?.layout !== 'host-bottom')) && (
+                            <Button bg={'transparent'} mr={'$2'}></Button>
+                        )}
+                        {/* {right ? (
+                            <HStack alignItems={'center'}>
+                                <Button size="xs" bg={'transparent'} onPress={() => setSettingToggle(!settingToggle)}>
+                                    <Ionicons
+                                        name={'cog'}
+                                        color={
+                                            settings?.navTheme === 'light' || settings?.navTheme === 'dark'
+                                                ? 'black'
+                                                : 'white'
+                                        }
+                                        size={20}
+                                    />
+                                </Button>
+                                {rightComponent ? <Box>{rightComponent}</Box> : null}
+                            </HStack>
+                        ) : (
+                            <Button bg={'transparent'} mr={'$2'}></Button>
+                        )} */}
                     </HStack>
-                ) : (
-                    <Button bg={'transparent'} mr={'$2'}></Button>
-                )}
-            </HStack>
-            
-        </Box>
-        </SafeAreaView>
-    );
-});
+                </Box>
+            </SafeAreaView>
+        );
+    },
+);
 
 export default Header;
 
@@ -134,7 +195,7 @@ export default Header;
 
 //     return (
 //         <SafeAreaView>
-//         <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />   
+//         <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />
 //         <Box bg={theme === 'light' ? '$white' : '$black'}>
 //             <HStack
 //                 bg={theme === 'light' ? '$white' : '$black'}
@@ -152,7 +213,7 @@ export default Header;
 //                 borderBottomWidth={'$1'}
 //                 borderBottomColor={'#d3d3d3'}
 //                 w="100%"
-               
+
 //             >
 //                 {back ? (
 //                     <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
@@ -192,7 +253,7 @@ export default Header;
 //                     <Button bg={'transparent'} mr={'$2'}></Button>
 //                 )}
 //             </HStack>
-            
+
 //         </Box>
 //         </SafeAreaView>
 //     );

package/src/components/Layout/components/SettingDrawer/LayoutButton.tsx

@@ -4,21 +4,29 @@ import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
 const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
     return (
         <Pressable
-            backgroundColor={'#f0f2f5'}
+            backgroundColor={color === 'light' || color === 'dark' ? '#f0f2f5' : '#263749'}
             width={50}
             height={50}
             borderRadius={'$sm'}
+            softShadow={'4'}
             mr={'$4'}
             onPress={() => {
                 if (mode === 'style') {
                     let { navTheme, ...rest } = settings;
-                    if (color === 'white') {
+                    if (color === 'light') {
                         navTheme = 'light';
                         const newSettings = {
                             ...rest,
                             navTheme,
                         };
                         onSettingChange(newSettings);
+                    } else if (color === 'realDark') {
+                        navTheme = 'realDark';
+                        const newSettings = {
+                            ...rest,
+                            navTheme,
+                        };
+                        onSettingChange(newSettings);
                     } else {
                         navTheme = 'dark';
                         const newSettings = {
@@ -63,33 +71,39 @@ const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOn
         >
             <HStack>
                 <Box
-                    backgroundColor={color}
+                    backgroundColor={color === 'light' ? '$white' : '$black'}
                     height={bottomOnly ? '$0' : 50}
-                    width={'28%'}
+                    width={bottomOnly ? '$0' : '28%'}
                     borderTopLeftRadius={'$sm'}
                     borderBottomLeftRadius={'$sm'}
                 />
                 <VStack justifyContent={'space-between'}>
-                    <Box height={15} width={36} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
+                    <Box
+                        height={15}
+                        width={bottomOnly ? 49 : 36}
+                        backgroundColor={color === 'light' || color === 'dark' ? '$white' : '$black'}
+                        borderTopRightRadius={'$sm'}
+                    />
                     {bottom ? (
                         <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
                     ) : null}
 
                     {bottomOnly ? (
                         <>
-                            <Box height={15} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
-                            <Box height={15} width={49} backgroundColor={'$black'} />
-                        </>
-                    ) : null}
-
-                    {bottomDrawer ? (
-                        <>
+                            <Box height={18} width={'$0'} backgroundColor={'$white'} borderTopRightRadius={'$sm'} />
                             <Box
                                 height={15}
-                                width={36}
+                                width={49}
                                 backgroundColor={'$black'}
+                                borderBottomLeftRadius={'$sm'}
                                 borderBottomRightRadius={'$sm'}
                             />
+                        </>
+                    ) : null}
+
+                    {bottomDrawer ? (
+                        <>
+                            <Box height={15} width={36} backgroundColor={'$black'} borderBottomRightRadius={'$sm'} />
                             <Text></Text>
                         </>
                     ) : null}

package/src/components/Layout/components/SettingDrawer/SettingDrawer.tsx

@@ -1,60 +1,163 @@
 import React from 'react';
-import {Box, Text, HStack} from '@gluestack-ui/themed';
+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';
 import { useSelector } from 'react-redux';
 
 import LayoutButton from './LayoutButton';
 import ThemeColorButton from './ThemeColorButton';
 import { THEMECOLOR } from '../../../../utils/ThemeColor';
 
-export const SettingDrawer = ({ onSettingChange }: any) => {
+export const SettingDrawer = ({ isOpen, onSettingChange, handleClose }: any) => {
     const settings = useSelector<any>((state) => state.settings) as any;
     return (
-        <Box position={'absolute'} flex={1} flexGrow={1}  p={"$5"} right={"$0"} bg={'$white'} top={"$4"} >
-            <Text color={'#000080'} style={{fontWeight:'900'}}>
-                Page style setting
-            </Text>
-            <HStack space={"md"} mt={"$3"}>
-                <LayoutButton mode="style" settings={settings} onSettingChange={onSettingChange} color={'white'} />
-                <LayoutButton mode="style" settings={settings} onSettingChange={onSettingChange} color={'black'} />
-            </HStack>
-            <Text color={'#000080'} style={{fontWeight:'900'}} mt={"$2"}>
-                Theme Color
-            </Text>
-            <HStack space={"md"} mt={"$3"} flexWrap={'wrap'}>
-                {THEMECOLOR.map((color, index) => (
-                    <ThemeColorButton key={index} color={color} settings={settings} onSettingChange={onSettingChange} />
-                ))}
-            </HStack>
-            <Text color={'#000080'} style={{fontWeight:'900'}} mt={"$2"}>
-                Navigation Mode
-            </Text>
-            <HStack space={"md"} mt={"$3"}>
-                <LayoutButton mode="layout" settings={settings} onSettingChange={onSettingChange} color={'black'} />
-                <LayoutButton
-                    mode="layout"
-                    bottom={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                />
+        <Actionsheet isOpen={isOpen} onClose={handleClose} zIndex={999}>
+            <ActionsheetBackdrop />
+            <ActionsheetContent zIndex={999} w={'100%'}>
+                <ActionsheetDragIndicatorWrapper>
+                    <ActionsheetDragIndicator />
+                </ActionsheetDragIndicatorWrapper>
+                <ScrollView>
+                    <Box alignItems="flex-start" bg={'$white'} w={'100%'} p={'$3'}>
+                        <Text color={'#00000'} fontWeight={'$semibold'}>
+                            Page style setting
+                        </Text>
+                        <HStack space={'md'} mt={'$3'}>
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'dark'}
+                            />
+                            <LayoutButton
+                                mode="style"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'realDark'}
+                            />
+                        </HStack>
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Select Theme
+                        </Text>
+                        <Select
+                            mt={'$2'}
+                            w={'100%'}
+                            selectedValue={settings?.themeName}
+                            onValueChange={(value) => {
+                                const newSettings = {
+                                    ...settings,
+                                    themeName: value,
+                                };
+                                onSettingChange(newSettings);
+                            }}
+                        >
+                            <SelectTrigger variant="outline" size="md">
+                                <SelectInput placeholder="Select option" />
+                                <Icon as={ChevronDownIcon} mr={'$3'} />
+                            </SelectTrigger>
+                            <SelectPortal>
+                                <SelectBackdrop />
+                                <SelectContent>
+                                    <SelectDragIndicatorWrapper>
+                                        <SelectDragIndicator />
+                                    </SelectDragIndicatorWrapper>
+                                    <SelectItem label="Default" value="default" />
+                                    <SelectItem label="Github Theme" value="github" />
+                                    <SelectItem label="Slack Theme" value="slack" />
+                                    <SelectItem label="Airbnb Theme" value="airbnb" />
+                                    <SelectItem label="Spotify Theme" value="spotify" />
+                                </SelectContent>
+                            </SelectPortal>
+                        </Select>
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Theme Color
+                        </Text>
+                        <HStack space={'md'} mt={'$3'} flexWrap={'wrap'}>
+                            {THEMECOLOR.map((color, index) => (
+                                <ThemeColorButton
+                                    key={index}
+                                    color={color}
+                                    settings={settings}
+                                    onSettingChange={onSettingChange}
+                                />
+                            ))}
+                        </HStack>
+                        <Divider my={'$4'} />
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Navigation Mode
+                        </Text>
+                        <HStack space={'md'} mt={'$3'}>
+                            <LayoutButton
+                                mode="layout"
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
+                            <LayoutButton
+                                mode="layout"
+                                bottom={true}
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
 
-                <LayoutButton
-                    mode="layout"
-                    bottomOnly={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                />
-            </HStack>
-            <HStack space={"md"} mt={"$3"}>
-            {/* <LayoutButton
-                    mode="layout"
-                    bottomDrawer={true}
-                    settings={settings}
-                    onSettingChange={onSettingChange}
-                    color={'black'}
-                /> */}
-            </HStack>
-        </Box>
+                            <LayoutButton
+                                mode="light"
+                                bottomOnly={true}
+                                settings={settings}
+                                onSettingChange={onSettingChange}
+                                color={'light'}
+                            />
+                        </HStack>
+                        <Divider my={'$4'} />
+                        <Text color={'#000000'} fontWeight={'$semibold'} mt={'$2'}>
+                            Regional Settings
+                        </Text>
+                        <HStack w={'100%'} mt={'$3'} justifyContent={'space-between'} alignItems="center">
+                            <Text>Menu Header</Text>
+                            <Switch
+                                onValueChange={(value) => {
+                                    console.log(value);
+                                    const newSettings = {
+                                        ...settings,
+                                        menuHeader: value,
+                                    };
+                                    onSettingChange(newSettings);
+                                }}
+                                isChecked={settings?.menuHeader}
+                                value={settings?.menuHeader}
+                            />
+                        </HStack>
+                    </Box>
+                </ScrollView>
+            </ActionsheetContent>
+        </Actionsheet>
     );
 };

package/src/components/Layout/components/SettingDrawer/ThemeColorButton.tsx

@@ -5,8 +5,8 @@ const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
     return (
         <Pressable
             backgroundColor={color}
-            height={'$4'}
-            width={'$4'}
+            height={'$6'}
+            width={'$6'}
             borderRadius={'$sm'}
             onPress={() => {
                 let { primaryColor, ...rest } = settings;

package/src/components/NavigationComponent.tsx

@@ -4,6 +4,7 @@ import { cloneDeep, merge } from 'lodash-es';
 import React, { MutableRefObject, ReactElement, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { navigationRef } from '@common-stack/client-react';
+import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
 
 interface INavigationContainerComponentProps {
     children: ReactElement[];
@@ -51,6 +52,7 @@ export const configurableRoutesWithNavigationRouteName = (
 
 export const useLocationChange = () => {
     const dispatch = useDispatch();
+    const { authenticated } = isUserAuthenticated();
     const [locationChange, setLocationChange] = React.useState<any>(null);
     const platformState = useSelector((state) => (state as any).platform);
 
@@ -64,9 +66,14 @@ export const useLocationChange = () => {
         const configuredRoutes = configurableRoutesWithNavigationRouteName(configurableRoutes);
         const currentPath = currentRouteName ? getPath(currentRouteName as string, configuredRoutes) : null;
         const previousPath = previousRoute ? getPath(previousRoute?.current!.name, configuredRoutes) : null;
+        const currentOrgName = authenticated
+            ? orgName
+                ? orgName
+                : currentRoute!.params?.orgName || platformState?.orgName || previousRoute?.current?.params?.orgName
+            : null;
         const currParams = {
             ...(currentRoute!.params || {}),
-            orgName: orgName ? orgName : currentRoute!.params?.orgName ?? platformState?.orgName,
+            orgName: currentOrgName,
         };
 
         navigationRef?.setParams(currParams);
@@ -104,7 +111,7 @@ export const NavigationContainerComponent = ({
         <NavigationContainer
             ref={navigationRef}
             linking={linking}
-            independent={independent}
+            // independent={independent}
             onReady={() => {
                 routeNameRef.current = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
                 const currentRoute: any = routeNameRef?.current;