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

package/src/containers/layout/BasicLayout.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Ionicons } from '@expo/vector-icons';
+import { BasicLayout, Settings } from '../../components';
+import { useHistory } from 'react-router-native';
+import { useSelector } from 'react-redux';
+import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
+
+export interface ReduxState {
+    settings: Settings;
+}
+
+const Layout: React.FC<any & ReduxState & { routeParams: any }> = (props) => {
+    const user = useSelector((state: any) => state?.user);
+    const { settings } = props;
+    const history = useHistory();
+
+    const logout = () => {
+        history.push('/logout');
+    };
+    return (
+        <BasicLayout
+            {...props}
+            {...settings}
+            showSettings={true}
+            currentRoute={props.route.routes.find((route) => {
+                if (route.path.split('/').pop() === props.location.pathname.split('/').pop()) {
+                    return route;
+                } else if (
+                    route.path.split('/')[route.path.split('/').length - 2] ===
+                    props.location.pathname.split('/')[props.location.pathname.split('/').length - 2]
+                ) {
+                    return route;
+                }
+            })}
+            rightContentRender={(rightProps) => {
+                return (
+                    <Ionicons
+                        color={rightProps.navTheme === 'dark' ? 'white' : 'black'}
+                        name="exit-outline"
+                        onPress={() => logout()}
+                    />
+                );
+            }}
+        />
+    );
+};
+
+export default connect(
+    ({ settings, router }: any) => ({
+        settings,
+        location: router.location,
+    }),
+    (dispatch) => ({
+        onSettingChange: (data: any) =>
+            dispatch({
+                type: CHANGE_SETTINGS_ACTION,
+                payload: data,
+            }),
+    }),
+)(Layout);

package/src/containers/layout/DrawerBottomNavigationConfig.tsx

@@ -0,0 +1,85 @@
+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';
+import { Drawer, Header,BottomTabBar, Sample } from '../../components';
+import { Ionicons,MaterialIcons,FontAwesome,FontAwesome5 ,AntDesign} from '@expo/vector-icons';
+import { ProLayout } from './ProLayout';
+
+export const appDrawerBottomNavigationConfig = {
+    ['/']: {
+        exact: false,
+        container: createStackNavigator(),
+        name: 'MainStack',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer',
+            screenOptions: {
+                headerShown: false,
+            },
+        },
+    },
+    ['//main_drawer']: {
+        exact: false,
+        container: createDrawerNavigator(),
+        name: 'MainDrawer',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
+            drawerContent: (props: any) => (
+                <Drawer
+                {...props}
+                title={'ClockBook'}
+                titleColor={'black'}
+                logout={true}
+                redirect={'MainStack.Login'}
+                />
+                ),
+                screenOptions:(options:any) =>{
+                    
+                    return{
+                        headerShown:false,
+                        drawerIcon: 'grid',
+                    }
+                }
+            },
+        },
+        ['//main_drawer/mainbottomtab']: {
+            container: createBottomTabNavigator(),
+            exact: false,
+            name: 'MainBottomTab',
+            props: {
+                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
+                tabBar: (props: any) => <BottomTabBar {...props} />,
+                screenOptions: ({ route }: any) => {
+                    return {
+                        headerShown: false,
+                        title:'Home',
+                        headerTitle:'Home',
+                        tabBarActiveTintColor: '#ff5a60',
+                        tabBarInactiveTintColor: 'black',
+                    };
+                },
+            },
+        },
+        // ['//o']: {
+        //     exact: false,
+        //     name: 'Home',
+        //     props: {
+        //         initialParams: { orgName: null,title:'Home',priority:1 },
+        //         component: ProLayout,
+        //         priority:1,
+        //         options: { 
+        //             headerShown: true,
+        //             header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+        //             title: 'Home',
+        //             headerTitle:  'Home',
+        //             priority: 1,
+        //             tabBarActiveTintColor: '#ff5a60',
+        //             tabBarInactiveTintColor: 'black',
+        //             tabBarIcon: ({ color }: { color: any }) => <MaterialIcons name="home" size={24} color={color} />,
+        //             tabBarLabel: 'Home',
+        //          },
+        //     },
+        // },
+    };
+    

package/src/containers/layout/DrawerConfig.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Feature } from '@common-stack/client-react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Drawer, Header, Sample } from '../../components';
+import { ProLayout } from './ProLayout';
+
+export const appDrawerConfig = {
+    ['/']: {
+        exact: false,
+        container: createStackNavigator(),
+        name: 'MainStack',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer',
+            screenOptions: {
+                headerShown: false,
+            },
+        },
+    },
+    ['//main_drawer']: {
+        exact: false,
+        container: createDrawerNavigator(),
+        name: 'MainDrawer',
+        props: {
+            initialRouteName: 'MainStack.MainDrawer.Home',
+            drawerContent: (props: any) => (
+                <Drawer
+                    {...props}
+                    title={'ClockBook'}
+                    titleColor={'black'}
+                    logout={true}
+                    redirect={'MainStack.Login'}
+                />
+            ),
+            screenOptions:(options:any) =>{
+                    
+                return{
+                    headerShown:false,
+                    drawerIcon: 'grid',
+                }
+            }
+        },
+    },
+    // ['//main_drawer/home']: {
+    //     exact: false,
+    //     name: 'Home',
+    //     auth: true,
+    //     props: {
+    //         initialParams: { orgName: null },
+    //         component: ProLayout,
+    //         options: {
+    //             headerShown: true,
+    //             title: 'Home',
+    //             header: (props: any) => <Header showToggle={true} right={true} {...props} />,
+    //             drawerIcon: 'grid',
+    //         },
+    //     },
+    // },
+};

package/src/containers/layout/Lifecycle.tsx

@@ -0,0 +1,23 @@
+import React, { ReactElement } from 'react';
+import {
+  LifecyclePhase,
+} from '@workbench-stack/core';
+import { LifecycleCommonComponent } from '@adminide-stack/platform-client';
+
+export type WithFalse<T> = T | false;
+
+export interface LifecycleProps {
+  setPhaseReady?: boolean;
+  setPhase?: LifecyclePhase;
+  renderWhenPhase?: LifecyclePhase;
+  loadingRenderer: ({ loading }: {
+    loading: boolean;
+  }) => ReactElement;
+  children?: ReactElement
+}
+
+export const Lifecycle = ({ children, ...rest }: LifecycleProps) => {
+  return <LifecycleCommonComponent {...rest} >
+    {children}
+  </LifecycleCommonComponent>
+};

package/src/containers/layout/ProLayout.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Box, Spinner } from '@gluestack-ui/themed';
+import { NavigationContainerComponent, ApplicationErrorHandler, ErrorBoundary } from '../../components';
+import { PluginArea } from '@common-stack/client-react';
+import routeConfigKeyReplace from '../../utils/routeConfigKeyReplace';
+import { useLayoutSetting } from '../../hooks/useLayoutSetting';
+let AppFeatures: any;
+let AppLayout: any;
+
+const ProLayout: React.FC<any> = (props) => {
+    const [appRoutes, setAppRoutes] = React.useState<any>([]);
+    const { pathKey, appLayout } = useLayoutSetting(props);
+    AppLayout = appLayout;
+    const {appFeatures} = routeConfigKeyReplace(pathKey, props?.features,appLayout);
+    AppFeatures = appFeatures;
+
+    React.useEffect(() => {
+        if (appLayout) {
+            let routes = AppFeatures ? AppFeatures?.getRoutes2('/', 'MainStack') || [] : null;
+            setAppRoutes(routes);
+        }
+    }, [appLayout]);
+
+    //const appRoutes = AppFeatures ? AppFeatures?.getRoutes2('/', 'MainStack') || [] : null;
+
+    const loadingComponent = () => <Box flex={1}>{<Spinner />}</Box>;
+
+    let plugins = AppFeatures?.getComponentFillPlugins() ?? props.features;
+    let configuredRoutes = AppFeatures?.getConfiguredRoutes2('/') ?? props?.features?.getConfiguredRoutes2('/');
+    if (!appRoutes) return loadingComponent();
+    return (
+        <ErrorBoundary>
+            <NavigationContainerComponent configurableRoutes={configuredRoutes} independent={true}>
+                {appRoutes}
+                <PluginArea />
+                <ApplicationErrorHandler plugins={plugins} />
+            </NavigationContainerComponent>
+        </ErrorBoundary>
+    );
+};
+
+export { ProLayout, AppFeatures, AppLayout };

package/src/containers/layout/module.ts

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Feature } from '@common-stack/client-react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { ProLayout, AppFeatures, AppLayout } from './ProLayout';
+
+export { ProLayout, AppFeatures, AppLayout };
+
+const layoutConfig = {
+    ['/']: {
+        exact: false,
+        container: createStackNavigator(),
+        name: 'MainStack',
+        props: {
+            initialRouteName: 'MainStack.MainBottomTab',
+            screenOptions: {
+                headerShown: false,
+            },
+        },
+    },
+};
+
+export default new Feature({
+    routeConfig: layoutConfig,
+});

package/src/hooks/use-after-interactions.ts

@@ -0,0 +1,35 @@
+import React, { useState, useRef } from 'react';
+import { InteractionManager } from 'react-native';
+import { TransitioningView } from 'react-native-reanimated';
+import { useFocusEffect } from '@react-navigation/native';
+
+export const useAfterInteractions = () => {
+    const [interactionsComplete, setInteractionsComplete] = useState(false);
+
+    const subscriptionRef = useRef(null);
+
+    const transitionRef = useRef<TransitioningView>(null);
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+            subscriptionRef.current = InteractionManager.runAfterInteractions(() => {
+                transitionRef.current?.animateNextTransition();
+                setInteractionsComplete(true);
+                subscriptionRef.current = null;
+            });
+
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+                setInteractionsComplete(false);
+                subscriptionRef.current?.cancel();
+            };
+        }, []),
+    );
+
+    return {
+        interactionsComplete,
+        transitionRef,
+    };
+};

package/src/hooks/useIsReady.ts

@@ -0,0 +1,31 @@
+import { useFocusEffect } from '@react-navigation/native';
+import React from 'react';
+
+const useIsReady = (stack: boolean = true) => {
+    const [isReady, setIsReady] = React.useState(false);
+
+    useFocusEffect(
+        React.useCallback(() => {
+            // Do something when the screen is focused
+      
+            let timer: any;
+            if (!isReady) {
+                timer = setTimeout(() => {
+                    setIsReady(true);
+                }, 200);
+            }
+
+            return () => {
+                // Do something when the screen is unfocused
+                // Useful for cleanup functions
+                clearTimeout(timer);
+                // unsubscribeFocus();
+                // unsubscribeTransitionEnd && unsubscribeTransitionEnd();
+            };
+        }, []),
+    );
+
+    return isReady;
+};
+
+export default useIsReady;

package/src/hooks/useLayoutSetting/index.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
+import {
+    appDrawerFeature,
+    appBottomTabFeature,
+    appDrawerBottomTabFeature,
+    appBottomTabDrawerFeature,
+    appHostBottomTabFeature,
+} from '../../components/Layout/compute';
+import routeConfigKeyReplace from '../../utils/routeConfigKeyReplace';
+
+const layoutSettings: any =
+    process.APP_ENV && process.APP_ENV.LAYOUT_SETTINGS ? JSON.parse(process.APP_ENV.LAYOUT_SETTINGS) : null;
+
+export interface LayoutSettingProps {
+    drawerConfig?: any;
+    appFeatures?: any;
+    tabBarConfig?:any;
+}
+
+export function useLayoutSetting(props = null as LayoutSettingProps) {
+    const dispatch = useDispatch();
+    const [settings, setAppSettings] = React.useState<any>();
+    const defaultSettings = useSelector<any>((state) => state.settings) as any;
+    const [appLayout, setAppLayout] = React.useState(appDrawerFeature(props?.drawerConfig ?? null));
+    const [pathKey, setPathKey] = React.useState('//main_drawer/');
+    const [intialRouteName, setInitialRouteName] = React.useState('MainStack.Layout');
+    const [appLayoutFeatures, setAppLayoutFeatures] = React.useState<any>(null);
+
+    React.useEffect(() => {
+        if (layoutSettings) {
+            const config: any = {
+                ...settings,
+                ...layoutSettings,
+            };
+            setDefalutSettings(config);
+            setAppSettings(config);
+        } else setAppSettings(defaultSettings);
+    }, []);
+
+    React.useEffect(() => {
+        if (defaultSettings) {
+            setAppSettings(defaultSettings);
+        }
+    }, [defaultSettings]);
+
+    React.useEffect(() => {
+        if (settings) {
+            let AppLayout =
+                settings?.layout == 'side'
+                    ? appDrawerFeature(props)
+                    : settings?.layout == 'bottom'
+                    ? appBottomTabFeature(props)
+                    : settings?.layout == 'host-bottom'
+                    ? appHostBottomTabFeature(props)
+                    : appDrawerBottomTabFeature(props);
+            setAppLayout(AppLayout);
+
+            let layoutTypeKey =
+                settings?.layout == 'side'
+                    ? '//main_drawer/'
+                    : settings?.layout == 'bottom'
+                    ? '//bottom_tab/'
+                    : settings?.layout == 'host-bottom'
+                    ? '//host_tab/'
+                    : '//main_drawer/bottom_tab/';
+
+            setPathKey(layoutTypeKey);
+
+            let initialRouteName =
+                settings?.layout == 'bottom'
+                    ? 'MainStack.Layout'
+                    : settings?.layout == 'host-bottom'
+                    ? 'MainStack.Layout'
+                    : 'MainStack.Layout';
+
+            setInitialRouteName(initialRouteName);
+            if (props?.appFeatures) {
+                const { appFeatures } = routeConfigKeyReplace(
+                    layoutTypeKey,
+                    props?.appFeatures,
+                    AppLayout,
+                    initialRouteName,
+                );
+                setAppLayoutFeatures(appFeatures);
+            }
+        }
+    }, [settings, props?.appFeatures]);
+
+    const setDefalutSettings = (config: any) => {
+        dispatch({
+            type: CHANGE_SETTINGS_ACTION,
+            payload: config,
+        });
+    };
+
+    return { appLayout, pathKey, intialRouteName, appLayoutFeatures };
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { Feature } from '@common-stack/client-react';
+import { applicationErrors, errorReduxLink } from '@admin-layout/client';
+import { settingsReducer } from './redux/settings';
+import { useAfterInteractions } from './hooks/use-after-interactions';
+import useIsReady from './hooks/useIsReady';
+import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
+//changed
+import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
+import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
+
+//...........................No change....///
+export * from '@gluestack-ui/themed';
+export * from '@gluestack-ui/config';
+export * from '@gluestack-style/react';
+export * from './containers/layout/Lifecycle';
+//............................No change....///
+
+//changed
+export * from './components';
+
+
+
+export {
+    useLayoutSetting,
+    LayoutSettingProps,
+    routeConfigKeyReplace,
+    LayoutFeature,
+    ProLayout,
+    AppFeatures,
+    AppLayout,
+    useAfterInteractions,
+    useIsReady,
+};
+
+export default new Feature({
+    reducer: { settings: settingsReducer, applicationErrors },
+    clientStateParams: {
+        preLinkFuncs: [errorReduxLink],
+    },
+});

package/src/interfaces/index.ts

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

package/src/interfaces/settings.ts

@@ -0,0 +1,5 @@
+import { ProSettings } from '@admin-layout/client';
+
+export type DefaultSettings = Partial<ProSettings> & {
+    language?: string;
+};

package/src/redux/settings.ts

@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable no-case-declarations */
+import { CHANGE_LANGUAGE, CHANGE_SETTINGS_ACTION } from "@admin-layout/client";
+import { config } from "../config";
+import { DefaultSettings } from "../interfaces";
+
+const settingsReducer = (
+  state = config.LAYOUT_SETTINGS,
+  { type, payload = {} }: { type: string; payload: DefaultSettings }
+) => {
+    switch (type) {
+        case CHANGE_SETTINGS_ACTION:
+            return {
+                ...state,
+                ...payload
+            };
+        case CHANGE_LANGUAGE:
+            return {
+                ...state,
+                language: payload,
+            };
+
+        default:
+            return state;
+    }
+};
+
+export { settingsReducer };

package/src/utils/ThemeColor.ts

@@ -0,0 +1,9 @@
+export const COLOR = {
+    WHITE: 'white',
+    BLACK: 'black',
+    GREY: 'grey',
+    LIGHT_GREY: '#b1b1b1',
+    GREYISH_BLACK: '#1f1f1f',
+};
+
+export const THEMECOLOR = ['#1890ff', '#f5222d', '#fa541c', '#faad14', '#13c2c2', '#52c41a', '#2f54eb', '#722ed1'];

package/src/utils/__snapshots__/routeConfigKeyReplace.test.ts.snap

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`route config key replace getSortedNavigations with routeConfigKeyReplace  1`] = `
+[
+  {
+    "_pathPrefix": "",
+    "children": [
+      {
+        "_pathPrefix": "/",
+        "children": [
+          {
+            "_pathPrefix": "/",
+            "exact": true,
+            "name": "Account",
+            "path": "/:orgName/bottom_tab/account",
+            "position": "MIDDLE",
+            "props": {
+              "component": [Function],
+              "initialParams": {
+                "menu_position": "bottom",
+                "options": "{"headerShown":true,"tabBarLabel":"Account","headerTitle":"Account"}",
+                "priority": 0,
+              },
+              "options": {
+                "headerShown": true,
+                "headerTitle": "Account",
+                "tabBarLabel": "Account",
+              },
+              "priority": 3,
+            },
+            "routeParams": [
+              "orgName",
+            ],
+          },
+          {
+            "_pathPrefix": "/",
+            "exact": true,
+            "name": "Home",
+            "path": "/:orgName/bottom_tab/home",
+            "position": "MIDDLE",
+            "props": {
+              "component": [Function],
+              "initialParams": {
+                "menu_position": "bottom",
+                "options": "{"headerShown":true,"tabBarLabel":"Home","headerTitle":"Home"}",
+                "orgName": "test",
+                "priority": 0,
+              },
+              "options": {
+                "headerShown": true,
+                "headerTitle": "Home",
+                "tabBarLabel": "Home",
+              },
+              "priority": 1,
+            },
+            "routeParams": [
+              "orgName",
+            ],
+          },
+          {
+            "_pathPrefix": "/",
+            "exact": false,
+            "name": "About",
+            "path": "/:orgName/bottom_tab/home/:about",
+            "position": "MIDDLE",
+            "props": {
+              "component": [Function],
+              "initialParams": {
+                "menu_position": "bottom",
+                "options": "{"headerShown":true,"tabBarLabel":"About","headerTitle":"About"}",
+                "priority": 0,
+              },
+              "options": {
+                "headerShown": true,
+                "headerTitle": "About",
+                "tabBarLabel": "About",
+              },
+              "priority": 2,
+            },
+            "routeParams": [
+              "orgName",
+            ],
+          },
+        ],
+        "container": {
+          "Group": [Function],
+          "Navigator": [Function],
+          "Screen": [Function],
+        },
+        "exact": false,
+        "name": "MainBottomTab",
+        "path": "/:orgName/bottom_tab",
+        "position": "MIDDLE",
+        "props": {
+          "initialRouteName": "MainStack.MainBottomTab.Home",
+          "screenOptions": [Function],
+        },
+      },
+    ],
+    "container": {
+      "Group": [Function],
+      "Navigator": [Function],
+      "Screen": [Function],
+    },
+    "exact": false,
+    "name": "MainStack",
+    "path": "/",
+    "position": "MIDDLE",
+    "props": {
+      "initialRouteName": "MainStack.MainBottomTab",
+      "screenOptions": {
+        "headerShown": false,
+      },
+    },
+  },
+]
+`;