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

package/src/__tests__/prolayout-layout-feature.test.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ProLayout } from '../containers/layout/ProLayout';
+import { Feature, IRouteData, getNavigation, getSortedNavigations } from '@common-stack/client-react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { createDrawerNavigator } from '@react-navigation/drawer';
+const MyComponent = () => {
+    const routerConfig = {
+        ['/']: {
+            exact: false,
+            container: createStackNavigator(),
+            name: 'MainStack',
+            props: {
+                initialRouteName: 'MainStack.MainDrawer',
+                screenOptions: {
+                    headerShown: false,
+                },
+            },
+        },
+        ['//maindrawer']: {
+            container: createDrawerNavigator(),
+            exact: false,
+            name: 'MainDrawer',
+            props: {
+                initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
+                screenOptions: {
+                    headerShown: false,
+                    tabBarLabel: 'About',
+                    // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
+                },
+            },
+        },
+        ['//maindrawer/bottom_tab']: {
+            container: createBottomTabNavigator(),
+            exact: false,
+            name: 'MainBottomTab',
+            props: {
+                initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
+                screenOptions: {
+                    headerShown: false,
+                    tabBarLabel: 'About',
+                    // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
+                },
+            },
+        },
+        ['//maindrawer/bottom_tab/home']: {
+            name: 'Home',
+            props: {
+                priority: 1,
+                initialParams: { orgName: 'test' },
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                    tabBarLabel: 'Home',
+                    headerTitle: 'Home',
+                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+                },
+            },
+        },
+        ['//maindrawer/bottom_tab/home/:about']: {
+            exact: false,
+            container: createStackNavigator(),
+            name: 'About',
+            props: {
+                initialRouteName: 'Hello',
+            },
+        },
+        ['//maindrawer/bottom_tab/home/:about/info']: {
+            name: 'Info',
+            props: {
+                priority: 2,
+                initialParams: {},
+                component: MyComponent,
+                options: {
+                    headerTitle: 'Info',
+                },
+            },
+        },
+        ['//maindrawer/bottom_tab/account']: {
+            name: 'Account',
+            props: {
+                priority: 3,
+                initialParams: {},
+                component: MyComponent,
+                options: {
+                    headerShown: true,
+                    tabBarLabel: 'Account',
+                    headerTitle: 'Account',
+                    // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+                },
+            },
+        },
+    };
+
+    const feature = new Feature({ routeConfig: routerConfig });
+    return <ProLayout features={feature} />;
+};
+
+test('renders correctly', () => {
+    const tree = renderer.create(<MyComponent />).toJSON();
+    expect(tree).toMatchSnapshot();
+});
+
+// import { Feature, IRouteData, getNavigation, getSortedNavigations } from '@common-stack/client-react';
+// import { createStackNavigator } from '@react-navigation/stack';
+// import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+// import { createDrawerNavigator } from '@react-navigation/drawer';
+
+// const MyComponent = () => {};
+
+// describe('prolayout feature testing with basic routes', () => {
+//     const routerConfig: IRouteData = {
+//         ['/']: {
+//             exact: false,
+//             container: createStackNavigator(),
+//             name: 'MainStack',
+//             props: {
+//                 initialRouteName: 'MainStack.MainDrawer',
+//                 screenOptions: {
+//                     headerShown: false,
+//                 },
+//             },
+//         },
+//         ['//maindrawer']: {
+//             container: createDrawerNavigator(),
+//             exact: false,
+//             name: 'MainDrawer',
+//             props: {
+//                 initialRouteName: 'MainStack.MainDrawer.MainBottomTab',
+//                 screenOptions: {
+//                     headerShown: false,
+//                     tabBarLabel: 'About',
+//                     // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
+//                 },
+//             },
+//         },
+//         ['//maindrawer/bottom_tab']: {
+//             container: createBottomTabNavigator(),
+//             exact: false,
+//             name: 'MainBottomTab',
+//             props: {
+//                 initialRouteName: 'MainStack.MainDrawer.MainBottomTab.Home',
+//                 screenOptions: {
+//                     headerShown: false,
+//                     tabBarLabel: 'About',
+//                     // tabBarIcon: ({ color }) => <Ionicons name="person" size={24} color={color} />,
+//                 },
+//             },
+//         },
+//         ['//maindrawer/bottom_tab/home']: {
+//             name: 'Home',
+//             props: {
+//                 priority: 1,
+//                 initialParams: { orgName: 'test' },
+//                 component: MyComponent,
+//                 options: {
+//                     headerShown: true,
+//                     tabBarLabel: 'Home',
+//                     headerTitle: 'Home',
+//                     // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+//                 },
+//             },
+//         },
+//         ['//maindrawer/bottom_tab/home/:about']: {
+//             exact: false,
+//             container: createStackNavigator(),
+//             name: 'About',
+//             props: {
+//                 initialRouteName: 'Hello',
+//             },
+//         },
+//         ['//maindrawer/bottom_tab/home/:about/info']: {
+//             name: 'Info',
+//             props: {
+//                 priority: 2,
+//                 initialParams: {},
+//                 component: MyComponent,
+//                 options: {
+//                     headerTitle: 'Info',
+//                 },
+//             },
+//         },
+//         ['//maindrawer/bottom_tab/account']: {
+//             name: 'Account',
+//             props: {
+//                 priority: 3,
+//                 initialParams: {},
+//                 component: MyComponent,
+//                 options: {
+//                     headerShown: true,
+//                     tabBarLabel: 'Account',
+//                     headerTitle: 'Account',
+//                     // tabBarIcon: ({ color }) => <Ionicons name="home" size={24} color={color} />,
+//                 },
+//             },
+//         },
+//     };
+
+//     it('get prolayout getSortedNavigations', () => {
+//         const feature = new Feature({ routeConfig: routerConfig });
+//         const Render = feature.getRoutes2('/', 'MainStack');
+//         const Nav = getSortedNavigations('/', routerConfig);
+//         console.log('Nav1', JSON.stringify(Nav));
+//         expect(Render).toMatchSnapshot();
+//     });
+// });

package/src/components/ApplicationErrorFillWrapper.tsx

@@ -0,0 +1,7 @@
+import { Fill } from '@common-stack/components-pro';
+import { APPLICATION_ERROR_SLOT_FILL } from '@admin-layout/client';
+import * as React from 'react';
+
+export const ApplicationErrorFillWrapper = (props) => {
+  return <Fill {...props} name={APPLICATION_ERROR_SLOT_FILL} />
+}

package/src/components/ApplicationErrorHandler.tsx

@@ -0,0 +1,30 @@
+import { ApplicationErrorHandlerCommon, APPLICATION_ERROR_SLOT_FILL } from '@admin-layout/client'
+import { Slot } from '@common-stack/components-pro'
+import Toast from 'react-native-toast-message';
+import * as React from 'react';
+
+const FallbackComponent = () => {
+  React.useLayoutEffect(() => {
+    Toast.show({
+      type: 'error',
+      text1: 'Something went wrong...'
+    });
+  }, [])
+
+  return null;
+}
+
+const RendererComponent = (props) => {
+  const { applicationErrors, backendError } = props;
+  return (
+    <>
+      {!!backendError && <FallbackComponent />}
+      {!!applicationErrors?.length && <Slot name={APPLICATION_ERROR_SLOT_FILL} fillProps={{ active: true, applicationErrors: applicationErrors }} />}
+    </>
+  )
+}
+
+export const ApplicationErrorHandler = (props) => {
+  const CommonHandler = ApplicationErrorHandlerCommon(FallbackComponent, Slot, RendererComponent);
+  return <CommonHandler {...props} />
+}

package/src/components/ErrorBounday.tsx

@@ -0,0 +1,31 @@
+import React, { ReactElement } from 'react';
+import { FallbackComponent } from './Fallback';
+import { logger } from '@cdm-logger/client';
+import { useDispatch } from 'react-redux'
+
+type IErrorBoundryState = { hasError: boolean, error: Error | null };
+type IErrorBoundryProps = {
+  children: ReactElement,
+};
+
+export class ErrorBoundary extends React.Component<IErrorBoundryProps, IErrorBoundryState> {
+  constructor(props: IErrorBoundryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error) {
+    logger.debug(error)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <FallbackComponent error={this.state.error as Error} />;
+    }
+    return this.props.children;
+  }
+}

package/src/components/Fallback.tsx

@@ -0,0 +1,65 @@
+import { navigationRef } from '@common-stack/client-react';
+import { Button,ButtonText } from '@gluestack-ui/themed'
+import * as React from 'react'
+import { StyleSheet } from 'react-native'
+
+import {
+  SafeAreaView,
+  Text,
+  View,
+} from 'react-native'
+import { useDispatch } from 'react-redux'
+
+type Props = { error: Error }
+
+export const FallbackComponent = (props: Props) => {
+  const dispatch = useDispatch()
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.content}>
+        <Text style={styles.title}>Oops!</Text>
+        <Text style={styles.subtitle}>{'There\'s an error'}</Text>
+        <Text style={styles.error}>{props?.error?.message}</Text>
+        <Button style={styles.button} onPress={() => navigationRef.navigate("MainStack.Layout.Home")}>
+          <ButtonText style={styles.buttonText}>Go to homepage</ButtonText>
+        </Button>
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles: any = StyleSheet.create({
+  container: {
+    backgroundColor: '#fafafa',
+    flex: 1,
+    justifyContent: 'center'
+  },
+  content: {
+    marginHorizontal: 16
+  },
+  title: {
+    fontSize: 48,
+    fontWeight: '300',
+    paddingBottom: 16,
+    color: '#000'
+  },
+  subtitle: {
+    fontSize: 32,
+    fontWeight: '800',
+    color: '#000'
+  },
+  error: {
+    paddingVertical: 16
+  },
+  button: {
+    backgroundColor: '#2196f3',
+    borderRadius: 50,
+    padding: 25,
+    height: 40
+  },
+  buttonText: {
+    color: '#fff',
+    fontWeight: '600',
+    textAlign: 'center'
+  }
+})

package/src/components/Layout/README.md

@@ -0,0 +1,11 @@
+
+
+
+To Convert `less` to `css`, use the following
+
+https://jsonformatter.org/less-to-css
+
+Add prefix
+---
+
+@ant-prefix: ant;

package/src/components/Layout/components/BasicLayout.tsx

@@ -0,0 +1,70 @@
+import React, { useRef, useState } from 'react';
+import { Route } from 'react-router-native';
+import {  Box, StatusBar, Divider,  SafeAreaView } from '@gluestack-ui/themed';
+import { Header } from './Header';
+import { Drawer } from './Drawer';
+import { RouterTypes } from '../typings';
+import defaultSettings from './defaultSettings';
+import { SettingDrawer } from './SettingDrawer';
+import { BottomTabBar } from './BottomTabBar';
+import { ProSettings } from './defaultSettings';
+
+type MergerSettingsType<T> = Partial<T> & {
+    primaryColor?: string;
+    colorWeak?: boolean;
+};
+
+const BasicLayout: React.FC<any & { routeParams: any }> = (props) => {
+    const { route, rightContentRender, onSettingChange, settings, routeParams, showSettings, currentRoute } = props;
+    const drawerRef = useRef();
+    const [settingToggle, setSettingToggle] = useState(false);
+
+    return (
+        <Box flex={1}>
+            <Header
+                layout={settings.layout}
+                setSettingToggle={setSettingToggle}
+                title={currentRoute.name}
+                drawerRef={drawerRef}
+                rightContentRender={rightContentRender}
+                settingToggle={settingToggle}
+                navTheme={settings.navTheme}
+                showSettings={showSettings}
+                route={currentRoute.key}
+                nextButton={currentRoute.nextButton}
+            />
+            <Divider />
+            {!!settings && settings.layout !== 'bottom' ? (
+                <Drawer
+                    navTheme={settings.navTheme}
+                    match={props.match}
+                    routeParams={routeParams}
+                    routes={route.routes}
+                    drawerRef={drawerRef}
+                />
+            ) : null}
+            {settings && settings.layout === 'bottom'
+                ? route.routes.map((route: any) => (
+                      <Route key={route.path} path={route.path} Component={route.component} />
+                  ))
+                : null}
+            {!!settingToggle ? (
+                <SettingDrawer
+                    onSettingChange={(settings) => {
+                        onSettingChange(settings);
+                        setSettingToggle(false);
+                    }}
+                />
+            ) : null}
+            {settings && (settings.layout === 'mixSide' || settings.layout === 'bottom') && (
+                <BottomTabBar navTheme={settings.navTheme} routes={route.routes} />
+            )}
+        </Box>
+    );
+};
+
+BasicLayout.defaultProps = {
+    ...defaultSettings,
+};
+
+export default BasicLayout;

package/src/components/Layout/components/BottomTabBar.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import {Box,Pressable,Center,Text, SafeAreaView} from '@gluestack-ui/themed';
+import { useSelector } from 'react-redux';
+import { useRoute } from '@react-navigation/native';
+import { navigationRef } from '@common-stack/client-react';
+
+export const BottomTabBar = ({ state, descriptors, navigation }: any) => {
+    const settings = useSelector<any>((state) => state.settings) as any;
+    //const currentRoute: any = useRoute();
+    const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+    const platformState = useSelector((state) => (state as any).platform);
+    let appRoutes: any = Object.keys(descriptors)
+        .map((k: any) => {
+            let route = { ...descriptors[k] };
+            route.index = state.routes.findIndex((x: any) => x.key === k);
+            return route;
+        })
+        .filter((r: any) => (settings?.layout == 'bottom' ? r : r?.route?.params?.menu_position == 'bottom'))
+        .sort(
+            (a: any, b: any) =>
+                (a.options.priority ? a.options.priority : a.options.title) -
+                (b.options.priority ? b.options.priority : b.options.title),
+        );
+
+        const onPress = React.useCallback((route, navigation, isFocused) => {
+            if (route?.route) {
+                const event = navigation.emit({
+                    type: 'tabPress',
+                    target: route.route.key,
+                    canPreventDefault: true,
+                });
+
+                if (!isFocused && !event.defaultPrevented) {
+                    // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                    navigation.navigate({
+                        name: route.route.name,
+                        merge: true,
+                        orgName: currentRoute?.params?.orgName || platformState?.orgName,
+                    });
+                }
+            }
+        }, []);
+
+        const onLongPress = React.useCallback((route, navigation, isFocused) => {
+            if (route?.route) {
+                navigation.emit({
+                    type: 'tabLongPress',
+                    target: route.route.key,
+                });
+            }
+        }, []);
+
+
+    return (
+        <SafeAreaView>
+        <Box
+            flexDirection="row"
+            width="100%"
+            alignSelf="center"
+            bg={'white'}
+            borderTopWidth={"$1"}
+            borderTopColor={'#d3d3d3'}
+        >
+            {appRoutes.map((route: any, index: any) => {
+                const options = route.options;
+                const label =
+                    options.tabBarLabel !== undefined
+                        ? options.tabBarLabel
+                        : options.title !== undefined
+                            ? options.title
+                            : route.route.name;
+
+                const isFocused = state.index === route.index;
+
+                // const onPress = () => {
+                //     const event = navigation.emit({
+                //         type: 'tabPress',
+                //         target: route.route.key,
+                //         canPreventDefault: true,
+                //     });
+
+                //     if (!isFocused && !event.defaultPrevented) {
+                //         // The `merge: true` option makes sure that the params inside the tab screen are preserved
+                //         navigation.navigate({
+                //             name: route.route.name,
+                //             merge: true,
+                //             orgName: currentRoute?.params?.orgName || platformState?.orgName,
+                //         });
+                //     }
+                // };
+
+                // const onLongPress = () => {
+                //     navigation.emit({
+                //         type: 'tabLongPress',
+                //         target: route.route.key,
+                //     });
+                // };
+
+                return (
+                    <Pressable
+                        key={index}
+                        opacity={isFocused ? "$100" : "$50"}
+                      //  pb="$8"
+                        pt={"$3"}
+                        flex={1}
+                        onPress={()=>onPress(route,navigation,isFocused)}
+                        onLongPress={()=>onLongPress(route,navigation,isFocused)}
+                        testID={options.tabBarTestID}
+                        accessibilityState={isFocused ? { selected: true } : {}}
+                        accessibilityLabel={options.tabBarAccessibilityLabel}
+                    >
+                        <Center>
+                            {options?.tabBarIcon
+                                ? options.tabBarIcon({
+                                    color: isFocused
+                                        ? options.tabBarActiveTintColor
+                                        : options.tabBarInactiveTintColor,
+                                    size: 24,
+                                })
+                                : null}
+
+                            <Text
+                                color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
+                                style={{fontSize:12}}
+                            >
+                                {label}
+                            </Text>
+                        </Center>
+                    </Pressable>
+                );
+            })}
+        </Box>
+        </SafeAreaView>
+    );
+};