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

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { Box, Pressable, HStack, VStack, Text } from '@gluestack-ui/themed';
+
+const LayoutButton = ({ color, onSettingChange, settings, bottom, mode, bottomOnly, bottomDrawer }: any) => {
+    return (
+        <Pressable
+            backgroundColor={'#f0f2f5'}
+            width={50}
+            height={50}
+            borderRadius={'$sm'}
+            mr={'$4'}
+            onPress={() => {
+                if (mode === 'style') {
+                    let { navTheme, ...rest } = settings;
+                    if (color === 'white') {
+                        navTheme = 'light';
+                        const newSettings = {
+                            ...rest,
+                            navTheme,
+                        };
+                        onSettingChange(newSettings);
+                    } else {
+                        navTheme = 'dark';
+                        const newSettings = {
+                            ...rest,
+                            navTheme,
+                        };
+                        onSettingChange(newSettings);
+                    }
+                } else {
+                    let { layout, ...rest } = settings;
+                    if (bottom) {
+                        layout = 'mixSide';
+                        const newSettings = {
+                            ...rest,
+                            layout,
+                        };
+                        onSettingChange(newSettings);
+                    } else if (bottomOnly) {
+                        layout = 'bottom';
+                        const newSettings = {
+                            ...rest,
+                            layout,
+                        };
+                        onSettingChange(newSettings);
+                    } else if (bottomDrawer) {
+                        layout = 'bottomDrawer';
+                        const newSettings = {
+                            ...rest,
+                            layout,
+                        };
+                        onSettingChange(newSettings);
+                    } else {
+                        layout = 'side';
+                        const newSettings = {
+                            ...rest,
+                            layout,
+                        };
+                        onSettingChange(newSettings);
+                    }
+                }
+            }}
+        >
+            <HStack>
+                <Box
+                    backgroundColor={color}
+                    height={bottomOnly ? '$0' : 50}
+                    width={'28%'}
+                    borderTopLeftRadius={'$sm'}
+                    borderBottomLeftRadius={'$sm'}
+                />
+                <VStack justifyContent={'space-between'}>
+                    <Box height={15} width={36} backgroundColor={'$white'} 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={15}
+                                width={36}
+                                backgroundColor={'$black'}
+                                borderBottomRightRadius={'$sm'}
+                            />
+                            <Text></Text>
+                        </>
+                    ) : null}
+                </VStack>
+            </HStack>
+        </Pressable>
+    );
+};
+
+export default LayoutButton;

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import {Box, Text, HStack} 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) => {
+    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'}
+                />
+
+                <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>
+    );
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Pressable, Box } from '@gluestack-ui/themed';
+
+const ThemeColorButton = ({ color, onSettingChange, settings }: any) => {
+    return (
+        <Pressable
+            backgroundColor={color}
+            height={'$4'}
+            width={'$4'}
+            borderRadius={'$sm'}
+            onPress={() => {
+                let { primaryColor, ...rest } = settings;
+                primaryColor = color;
+                const newSettings = {
+                    ...rest,
+                    primaryColor,
+                };
+                onSettingChange(newSettings);
+            }}
+        >
+            <Box />
+        </Pressable>
+    );
+};
+
+export default ThemeColorButton;

package/src/components/Layout/components/SettingDrawer/index.ts

@@ -0,0 +1 @@
+export * from './SettingDrawer';

package/src/components/Layout/components/SideBar.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { HStack, Icon, Text, Box, StatusBar, Divider, Button, FlatList, SafeAreaView } from '@gluestack-ui/themed';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { Link } from 'react-router-native';
+import { useHistory } from 'react-router-native';
+import { config } from '../../../config';
+import { MenuDataItem } from '../typings';
+import { COLOR } from '../../../utils/ThemeColor';
+
+export interface SideBarProps {
+    menuData: MenuDataItem[];
+    matchUrl: string;
+    navTheme: string;
+    drawerRef: any;
+}
+
+const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerRef }) => {
+    const [icon, setIcon] = useState('chevron-down-outline');
+    const [isToggle, setToggle] = useState(false);
+    const history = useHistory();
+
+    const toggle = () => {
+        if (isToggle) {
+            setIcon('chevron-down-outline');
+            setToggle(false);
+        } else {
+            setIcon('chevron-up-outline');
+            setToggle(true);
+        }
+    };
+
+    const isMenuExist = menuData.length > 0;
+
+    const openMenuItem = (menu) => {
+        history.push({ pathname: menu.path, state: menu.name });
+        drawerRef.current.closeDrawer();
+    };
+
+    return (
+        <Box flex={1} style={{ backgroundColor: navTheme === 'dark' ? COLOR.GREYISH_BLACK : COLOR.WHITE }}>
+            {!!isMenuExist && (
+                <FlatList
+                    data={menuData}
+                    renderItem={({ item }:any) => {
+                        const keys = item?.key.split('.');
+                        const arrowIcon:any = icon || 'chevron-down-outline';
+                        return item?.routes ? (
+                            <Box p={"$3"}>
+                                <TouchableOpacity onPress={() => toggle()}>
+                                    <HStack>
+                                        <Ionicons
+                                            color={isToggle ? '#fff' : '#a1a1a1'}
+                                            name="document-outline"
+                                        />
+                                        <Text style={{ color: isToggle ? '#fff' : '#a1a1a1' }}>{item.name}</Text>
+                                        <Ionicons  name={arrowIcon} />
+                                    </HStack>
+                                </TouchableOpacity>
+                                {isToggle
+                                    ? item.routes.map((subMenu: any) => (
+                                          <Box key={subMenu.key}>
+                                              <Link to={subMenu.path} underlayColor="#f0f4f7">
+                                                  <Text style={{ color: '#a1a1a1' }}>{subMenu.name}</Text>
+                                              </Link>
+                                          </Box>
+                                      ))
+                                    : null}
+                            </Box>
+                        ) : (
+                            keys[0] != 'Main' && keys[0] == 'sidebar' && (
+                                <Box key={item.key} p={"$3"}>
+                                    <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => openMenuItem(item)}>
+                                        <HStack>
+                                            <Ionicons
+                                                size={20}
+                                                color={navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK}
+                                                name={item.icon}
+                                            />
+                                            <Text
+                                                style={{
+                                                    color: navTheme === 'dark' ? COLOR.LIGHT_GREY : COLOR.BLACK,
+                                                    marginLeft: 10,
+                                                }}
+                                            >
+                                                {item.name}
+                                            </Text>
+                                        </HStack>
+                                    </TouchableOpacity>
+                                    <Divider />
+                                </Box>
+                            )
+                        );
+                    }}
+                />
+            )}
+        </Box>
+    );
+};
+
+const styles = StyleSheet.create({
+    header: {
+        marginLeft: 20,
+        marginTop: 10,
+        marginBottom: 10,
+    },
+});
+
+export default SideBar;

package/src/components/Layout/components/defaultSettings.ts

@@ -0,0 +1,19 @@
+import { RenderSetting, ContentWidth, PureSettings, ProSettings } from '@admin-layout/client';
+
+export { ContentWidth, PureSettings, RenderSetting, ProSettings };
+
+const defaultSettings: ProSettings = {
+    navTheme: 'dark',
+    layout: 'side',
+    contentWidth: 'Fluid',
+    fixedHeader: false,
+    fixSiderbar: false,
+    menu: {
+        locale: false,
+    },
+    headerHeight: 48,
+    title: 'CDMBase LLC',
+    iconfontUrl: '',
+    primaryColor: '#1890ff',
+};
+export default defaultSettings;

package/src/components/Layout/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Drawer';
+export * from './BottomTabBar';
+export * from './Header';
+export * from './Sample';

package/src/components/Layout/components/util.ts

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { generatePath } from 'react-router';
+
+export const generateMenuPath = (path, params) => {
+    try {
+        const generatedPath = generatePath(path, params);
+        return generatedPath;
+    } catch (err) {
+        console.log('--fillParams.path', path);
+        console.log('--fillParams.params', params);
+        console.log('generatePath is errored due to missing orgId');
+    }
+    return null;
+};

package/src/components/Layout/compute.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Feature } from '@common-stack/client-react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+
+const drawerConfig = (props=null as  any) => {
+    return {
+    ['//main_drawer']: {
+        exact: false,
+        container: createDrawerNavigator(),
+        name: 'MainDrawer',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer.Home',
+            screenOptions: (options: any) => {
+                return {
+                    headerShown: true,
+                    drawerIcon: 'grid',
+                };
+            },
+        },
+    },
+}};
+
+const bottomTabConfig = {
+    ['//bottom_tab']: {
+        container: createBottomTabNavigator(),
+        exact: false,
+        name: 'MainBottomTab',
+        props: {
+            initialRouteName: 'MainStack.MainBottomTab.Home',
+            screenOptions: ({ route }: any) => {
+                return {
+                    headerShown: false,
+                    title: 'Home',
+                    headerTitle: 'Home',
+                    tabBarActiveTintColor: '#4c87f9',
+                    tabBarInactiveTintColor: 'black',
+                };
+            },
+        },
+    },
+};
+
+const hostBottomTabConfig =  {
+    ['//host_tab']: {
+        container: createBottomTabNavigator(),
+        exact: false,
+        name: 'HostTab',
+        props: {
+            initialRouteName: 'MainStack.HostTab.Booking',
+        },
+    },
+};
+
+const drawerBottomTabConfig = (props=null as  any)=> {
+    return {
+    ['//main_drawer']: {
+        exact: false,
+        container: createDrawerNavigator(),
+        name: 'MainDrawer',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
+            screenOptions: (options: any) => {
+                return {
+                    headerShown: false,
+                    drawerIcon: 'grid',
+                };
+            },
+        },
+    },
+    ['//main_drawer/bottom_tab']: {
+        container: createBottomTabNavigator(),
+        exact: false,
+        name: 'MainBottomTab',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
+            screenOptions: ({ route }: any) => {
+                return {
+                    headerShown: true,
+                    title: 'Home',
+                    headerTitle: 'Home',
+                    tabBarActiveTintColor: '#ff5a60',
+                    tabBarInactiveTintColor: 'black',
+                };
+            },
+        },
+    },
+}};
+
+const bottomTabDrawerConfig =  {
+    ['//bottom_tab']: {
+        container: createBottomTabNavigator(),
+        exact: false,
+        name: 'MainBottomTab',
+        props: {
+            initialRouteName: 'MainStack.MainBottomTab.Home',
+            screenOptions: ({ route }: any) => {
+                return {
+                    headerShown: false,
+                    title: 'Home',
+                    headerTitle: 'Home',
+                    tabBarActiveTintColor: '#ff5a60',
+                    tabBarInactiveTintColor: 'black',
+                };
+            },
+        },
+    },
+};
+
+export const appDrawerFeature = (props=null as  any) => new Feature({
+    routeConfig: drawerConfig(props) as any,
+});
+
+export const appDrawerBottomTabFeature = (props=null as  any) => new Feature({
+    routeConfig: drawerBottomTabConfig(props) as any,
+});
+
+export const appBottomTabFeature =  new Feature({
+    routeConfig: bottomTabConfig as any,
+});
+
+export const appHostBottomTabFeature = new Feature({
+    routeConfig: hostBottomTabConfig as any,
+});
+
+export const appBottomTabDrawerFeature =  new Feature({
+    routeConfig: bottomTabDrawerConfig as any,
+});