@admin-layout/gluestack-ui-mobile 6.5.1-alpha.0

package/src/components/Layout/components/Drawer.tsx

@@ -0,0 +1,412 @@
+import React from 'react';
+import { Ionicons } from '@expo/vector-icons';
+import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';
+import {
+    SafeAreaView,
+    Box,
+    Text,
+    Heading,
+    Divider,
+    StatusBar,
+    Avatar,
+    AvatarFallbackText,
+    AvatarImage,
+    HStack,
+    VStack,
+    useToast,
+    Toast,
+    ToastTitle,
+    ToastDescription,
+} from '@gluestack-ui/themed';
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { navigationRef } from '@common-stack/client-react';
+import { useSelector, useDispatch } from 'react-redux';
+import { logoutAndRedirect, resetReduxState } from '@adminide-stack/user-auth0-client';
+
+export const Drawer = (props: any) => {
+    const settings = useSelector<any>((state) => state.settings) as any;
+    const platform = useSelector<any>((state) => state.platform) as any;
+    const user = useSelector<any>((state) => state.user) as any;
+    const dispatch = useDispatch();
+    const navigation = useNavigation<any>();
+    const route = useRoute<any>();
+    const toast = useToast();
+    const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+    let getRootState: any = null;
+    let allRoutes: any = null;
+    let tabRoutes: any = null;
+    if (settings && settings.layout == 'mixSide') {
+        getRootState = navigationRef.isReady() ? navigationRef?.getRootState() : null;
+        if (getRootState) {
+            allRoutes = getRootState?.routes[0]?.state?.routes ?? null;
+            tabRoutes =
+                allRoutes
+                    ?.map((tr: any) => tr?.state?.routes?.filter((r: any) => r?.params?.menu_position == 'side'))
+                    ?.flat(1) ?? [];
+        }
+    }
+
+    const drawerRoutes = props?.state?.routes;
+
+    const routes = settings && settings.layout == 'mixSide' ? tabRoutes : drawerRoutes;
+
+    const sideRoutes =
+        routes
+            ?.filter((r: any) => r?.params?.menu_position == 'side')
+            ?.sort(
+                (a: any, b: any) =>
+                    (a?.params?.priority ? a?.params?.priority : a?.name) -
+                    (b?.params?.priority ? b?.params?.priority : b?.name),
+            ) ?? [];
+    const bottomRoutes =
+        routes
+            ?.filter((r: any) => r?.params?.menu_position == 'bottom')
+            ?.sort(
+                (a: any, b: any) =>
+                    (a?.params?.priority ? a?.params?.priority : a?.name) -
+                    (b?.params?.priority ? b?.params?.priority : b?.name),
+            ) ?? [];
+
+    const logoUrl = settings?.logo?.split('.') ?? null;
+    const logoType = logoUrl ? logoUrl[logoUrl.length - 1] : null;
+
+    return (
+        <Box flex={1}>
+            <StatusBar barStyle={settings?.navTheme == 'dark' ? 'light-content':'dark-content'} />
+            <DrawerContentScrollView
+                {...props}
+                style={{
+                    backgroundColor: props?.backgroundColor
+                        ? props?.backgroundColor
+                        : settings?.navTheme == 'dark'
+                        ? '#000'
+                        : '#fff',
+                }}
+            >
+                {settings?.logo && logoType && logoType != 'svg' ? (
+                    <HStack px={"$3"} alignItems={'center'}>
+                        <Avatar size={'sm'} bg='transparent'>
+                            <AvatarFallbackText>Logo</AvatarFallbackText>
+                            <AvatarImage
+                                source={{
+                                    uri: settings?.logo,
+                                }}
+                                alt='logo'
+                            />
+                        </Avatar>
+
+                        {props.title ? (
+                            <Heading
+                                p={"$5"}
+                                size={'lg'}
+                                color={
+                                    props?.titleColor
+                                        ? props?.titleColor
+                                        : settings?.navTheme == 'dark'
+                                        ? '$white'
+                                        : '$black'
+                                }
+                            >
+                                {props?.headingTitle ?? settings?.title ?? props.title}
+                            </Heading>
+                        ) : null}
+                    </HStack>
+                ) : (
+                    <>
+                        {props.title ? (
+                            <Heading
+                                p={"$5"}
+                                size={'lg'}
+                                color={
+                                    props?.titleColor
+                                        ? props?.titleColor
+                                        : settings?.navTheme == 'dark'
+                                        ? '$white'
+                                        : '$black'
+                                }
+                            >
+                                {props?.headingTitle ?? settings?.title ?? props.title}
+                            </Heading>
+                        ) : null}
+                    </>
+                )}
+
+                {[...sideRoutes]?.map((data: any) => {
+                    return (
+                        <DrawerItem
+                            key={data.key}
+                            icon={({ focused }) => {
+                                if (settings && settings.layout == 'mixSide') {
+                                    const option = data.params.options ? JSON.parse(data.params.options) : null;
+                                    if (option) {
+                                        const drawerIcon = option?.drawerIcon??'home';
+                                        if (typeof drawerIcon === 'function')
+                                            return drawerIcon({
+                                                color: focused
+                                                    ? props?.activeTintColor ?? '#ff5a00'
+                                                    : props?.inactiveTintColor
+                                                    ? props?.inactiveTintColor
+                                                    : settings?.navTheme == 'dark'
+                                                    ? 'white'
+                                                    : 'black',
+                                                size: 'md',
+                                            });
+                                        return (
+                                            <Ionicons
+                                                name={drawerIcon}
+                                                color={
+                                                    focused
+                                                        ? props?.activeTintColor ?? '#ff5a00'
+                                                        : props?.inactiveTintColor
+                                                        ? props?.inactiveTintColor
+                                                        : settings?.navTheme == 'dark'
+                                                        ? 'white'
+                                                        : 'black'
+                                                }
+                                                size={20}
+                                            />
+                                        );
+                                    } else {
+                                        <Ionicons
+                                            name={`grid`}
+                                            color={
+                                                focused
+                                                    ? props?.activeTintColor ?? '#ff5a00'
+                                                    : props?.inactiveTintColor
+                                                    ? props?.inactiveTintColor
+                                                    : settings?.navTheme == 'dark'
+                                                    ? 'white'
+                                                    : 'black'
+                                            }
+                                            size={20}
+                                        />;
+                                    }
+                                } else {
+                                    if (typeof props.descriptors[data.key].options.drawerIcon === 'function')
+                                        return props.descriptors[data.key].options.drawerIcon({
+                                            color: focused
+                                                ? props?.activeTintColor ?? '#ff5a00'
+                                                : props?.inactiveTintColor
+                                                ? props?.inactiveTintColor
+                                                : settings?.navTheme == 'dark'
+                                                ? 'white'
+                                                : 'black',
+                                            size: 'md',
+                                        });
+                                    const drawerIcon = props?.descriptors?.[data?.key]?.options?.drawerIcon??'home';
+                                    return (
+                                        <Ionicons
+                                            name={drawerIcon}
+                                            color={
+                                                focused
+                                                    ? props?.activeTintColor ?? '#ff5a00'
+                                                    : props?.inactiveTintColor
+                                                    ? props?.inactiveTintColor
+                                                    : settings?.navTheme == 'dark'
+                                                    ? 'white'
+                                                    : 'black'
+                                            }
+                                            size={20}
+                                        />
+                                    );
+                                }
+                            }}
+                            label={({ color }) => (
+                                <Text style={{ color,fontSize:15 }} fontWeight={'$semibold'}>
+                                    {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
+                                </Text>
+                            )}
+                            focused={
+                                // props.state.routes.findIndex((e: any) => e.name === data.name) === props.state.index
+                                settings?.layout == 'side'
+                                    ? props.state.routes.findIndex((e: any) => e.name === data.name) ===
+                                      props.state.index
+                                    : data.name === currentRoute?.name
+                            }
+                            onPress={() => navigation.navigate(data.name, { orgName: platform.orgName })}
+                            activeTintColor={props?.activeTintColor ?? '#ff5a00'}
+                            inactiveTintColor={
+                                props?.inactiveTintColor
+                                    ? props?.inactiveTintColor
+                                    : settings?.navTheme == 'dark'
+                                    ? 'white'
+                                    : 'black'
+                            }
+                        />
+                    );
+                })}
+            </DrawerContentScrollView>
+
+            <Box
+                mb={settings?.layout == 'bottomDrawer' ? "$0" : "$4"}
+                bg={props?.backgroundColor ? props?.backgroundColor : settings?.navTheme == 'dark' ? '#000' : '#fff'}
+            >
+                <Divider />
+                <>
+                    {[...bottomRoutes]?.map((data: any) => {
+                        return (
+                            <DrawerItem
+                                key={data.key}
+                                icon={({ focused }) => {
+                                    if (settings && settings.layout == 'mixSide') {
+                                        const option = data.params.options ? JSON.parse(data.params.options) : null;
+                                        if (option) {
+                                            const drawerIcon = option?.drawerIcon??'home';
+                                            if (typeof drawerIcon === 'function')
+                                                return drawerIcon({
+                                                    color: focused
+                                                        ? props?.activeTintColor ?? '#ff5a00'
+                                                        : props?.inactiveTintColor
+                                                        ? props?.inactiveTintColor
+                                                        : settings?.navTheme == 'dark'
+                                                        ? 'white'
+                                                        : 'black',
+                                                    size: 'md',
+                                                });
+                                            return (
+                                                <Ionicons
+                                                    name={drawerIcon}
+                                                    color={
+                                                        focused
+                                                            ? props?.activeTintColor ?? '#ff5a00'
+                                                            : props?.inactiveTintColor
+                                                            ? props?.inactiveTintColor
+                                                            : settings?.navTheme == 'dark'
+                                                            ? 'white'
+                                                            : 'black'
+                                                    }
+                                                    size={20}
+                                                />
+                                            );
+                                        } else {
+                                            <Ionicons
+                                                name={`grid`}
+                                                color={
+                                                    focused
+                                                        ? props?.activeTintColor ?? '#ff5a00'
+                                                        : props?.inactiveTintColor
+                                                        ? props?.inactiveTintColor
+                                                        : settings?.navTheme == 'dark'
+                                                        ? 'white'
+                                                        : 'black'
+                                                }
+                                                size={20}
+                                            />;
+                                        }
+                                    } else {
+                                        if (typeof props.descriptors[data.key].options.drawerIcon === 'function')
+                                            return props.descriptors[data.key].options.drawerIcon({
+                                                color: focused
+                                                    ? props?.activeTintColor ?? '#ff5a00'
+                                                    : props?.inactiveTintColor
+                                                    ? props?.inactiveTintColor
+                                                    : settings?.navTheme == 'dark'
+                                                    ? 'white'
+                                                    : 'black',
+                                                size: 'md',
+                                            });
+                                        const drawerIcon = props?.descriptors?.[data?.key]?.options?.drawerIcon??'home';
+                                        return (
+                                            <Ionicons
+                                                name={drawerIcon}
+                                                color={
+                                                    focused
+                                                        ? props?.activeTintColor ?? '#ff5a00'
+                                                        : props?.inactiveTintColor
+                                                        ? props?.inactiveTintColor
+                                                        : settings?.navTheme == 'dark'
+                                                        ? 'white'
+                                                        : 'black'
+                                                }
+                                                size={20}
+                                            />
+                                        );
+                                    }
+                                }}
+                                label={({ color }) => (
+                                    <Text style={{ color, fontSize: 15 }} fontWeight={'$semibold'}>
+                                        {data.name.split('.').pop() === 'Home' ? 'Home' : data.name.split('.').pop()}
+                                    </Text>
+                                )}
+                                focused={
+                                    //  props.state.routes.findIndex((e: any) => e.name === data.name) === props.state.index
+                                    settings?.layout == 'side'
+                                        ? props.state.routes.findIndex((e: any) => e.name === data.name) ===
+                                          props.state.index
+                                        : data.name === currentRoute?.name
+                                }
+                                activeTintColor={props?.activeTintColor ?? '#ff5a00'}
+                                inactiveTintColor={
+                                    props?.inactiveTintColor
+                                        ? props?.inactiveTintColor
+                                        : settings?.navTheme == 'dark'
+                                        ? 'white'
+                                        : 'black'
+                                }
+                                onPress={() =>
+                                    navigation.navigate(data.name, { orgName: platform.orgName })
+                                }
+                            />
+                        );
+                    })}
+                </>
+                {props.logout && user && user.accessToken && (
+                    <DrawerItem
+                        label={({ color }) => (
+                            <Text style={{ color, fontSize: 18 }} fontWeight={'$semibold'}>
+                                Logout
+                            </Text>
+                        )}
+                        icon={({ focused }) => (
+                            <Ionicons
+                                name={'log-out'}
+                                size={20}
+                                color={
+                                    focused
+                                        ? props?.activeTintColor ?? '#ff5a00'
+                                        : props?.inactiveTintColor
+                                        ? props?.inactiveTintColor
+                                        : settings?.navTheme == 'dark'
+                                        ? 'white'
+                                        : 'black'
+                                }
+                            />
+                        )}
+                        activeTintColor={props?.activeTintColor ?? '#ff5a00'}
+                        inactiveTintColor={
+                            props?.inactiveTintColor
+                                ? props?.inactiveTintColor
+                                : settings?.navTheme == 'dark'
+                                ? 'white'
+                                : 'black'
+                        }
+                        //onPress={() => navigation.navigate('MainStack.Logout', { redirect: props.redirect })}
+                        onPress={async () => {
+                            try {
+                                dispatch(logoutAndRedirect());
+                                dispatch(resetReduxState());
+                                toast.show({
+                                    placement: 'top',
+                                    render: ({ id }) => {
+                                        const toastId = 'toast-' + id;
+                                        return (
+                                            <Toast nativeID={toastId} action="attention" variant="solid">
+                                                <VStack space="xs">
+                                                    <ToastTitle>Logging out</ToastTitle>
+                                                    {/* <ToastDescription></ToastDescription> */}
+                                                </VStack>
+                                            </Toast>
+                                        );
+                                    },
+                                });
+                                props?.navigation?.closeDrawer();
+                            } catch (error) {
+                                console.error('Error signing out', error);
+                            }
+                        }}
+                    />
+                )}
+            </Box>
+        </Box>
+    );
+};

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

@@ -0,0 +1,195 @@
+import React, { useState, useCallback } from 'react';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, ButtonIcon, SafeAreaView } from '@gluestack-ui/themed';
+import { getHeaderTitle } from '@react-navigation/elements';
+import { Ionicons } from '@expo/vector-icons';
+import { SettingDrawer } from './SettingDrawer';
+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,
+}: any)=>{
+    const 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 onSettingChange = useCallback(
+        (config: any) =>
+            dispatch({
+                type: CHANGE_SETTINGS_ACTION,
+                payload: config,
+            }),
+        [dispatch],
+    );
+
+    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') && !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' ? (
+                    <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}
+                    </HStack>
+                ) : (
+                    <Button bg={'transparent'} mr={'$2'}></Button>
+                )}
+            </HStack>
+            
+        </Box>
+        </SafeAreaView>
+    );
+});
+
+// export const Header = ({
+//     navigation,
+//     route,
+//     options,
+//     back,
+//     showToggle = null,
+//     theme = 'light',
+//     right = null,
+//     rightComponent,
+// }: any) => {
+//     const 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 onSettingChange = useCallback(
+//         (config: any) =>
+//             dispatch({
+//                 type: CHANGE_SETTINGS_ACTION,
+//                 payload: config,
+//             }),
+//         [dispatch],
+//     );
+
+//     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') && !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' ? (
+//                     <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}
+//                     </HStack>
+//                 ) : (
+//                     <Button bg={'transparent'} mr={'$2'}></Button>
+//                 )}
+//             </HStack>
+            
+//         </Box>
+//         </SafeAreaView>
+//     );
+// };

package/src/components/Layout/components/Sample.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {  Box, Text } from '@gluestack-ui/themed';
+
+export const Sample = () => {
+    return (
+        <Box>
+            <Text>Sample</Text>
+        </Box>
+    );
+};