@admin-layout/gluestack-ui-mobile 12.2.4-alpha.0 → 12.2.4-alpha.12

package/src/components/ErrorBounday.tsx

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

package/src/components/Fallback.tsx

@@ -1,65 +1,61 @@
 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 { 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'
+import { SafeAreaView, Text, View } from 'react-native';
+import { useDispatch } from 'react-redux';
 
-type Props = { error: Error }
+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 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'
-  }
-})
+    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/components/BasicLayout.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 import { Route } from 'react-router-native';
-import {  Box, StatusBar, Divider,  SafeAreaView } from '@gluestack-ui/themed';
+import { Box, StatusBar, Divider, SafeAreaView } from '@gluestack-ui/themed';
 import { Header } from './Header';
 import { Drawer } from './Drawer';
 import { RouterTypes } from '../typings';
@@ -16,7 +16,7 @@ type MergerSettingsType<T> = Partial<T> & {
 
 const BasicLayout: React.FC<any & { routeParams: any }> = (props) => {
     const { route, rightContentRender, onSettingChange, settings, routeParams, showSettings, currentRoute } = props;
-    const drawerRef = useRef();
+    const drawerRef = useRef<any | null>(null);
     const [settingToggle, setSettingToggle] = useState(false);
 
     return (
@@ -63,8 +63,4 @@ const BasicLayout: React.FC<any & { routeParams: any }> = (props) => {
     );
 };
 
-BasicLayout.defaultProps = {
-    ...defaultSettings,
-};
-
 export default BasicLayout;

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import {Box,Pressable,Center,Text, SafeAreaView} from '@gluestack-ui/themed';
+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,...props }: any) => {
-    const tabBarProps = props?.customTabBarProps??{};
+export const BottomTabBar = ({ state, descriptors, navigation, ...props }: any) => {
+    const tabBarProps = props?.customTabBarProps ?? {};
     const settings = useSelector<any>((state) => state.settings) as any;
     //const currentRoute: any = useRoute();
     const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
@@ -23,118 +23,117 @@ export const BottomTabBar = ({ state, descriptors, navigation,...props }: any) =
                 (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 onPress = React.useCallback((route, navigation, isFocused) => {
+        if (route?.route) {
+            const event = navigation.emit({
+                type: 'tabPress',
+                target: route.route.key,
+                canPreventDefault: true,
+            });
 
-        const onLongPress = React.useCallback((route, navigation, isFocused) => {
-            if (route?.route) {
-                navigation.emit({
-                    type: 'tabLongPress',
-                    target: route.route.key,
+            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'}
-            py={"$4"}
-            {...tabBarProps}
-        >
-            {appRoutes.map((route: any, index: any) => {
-                const options = route.options;
-                const label =
-                    options.tabBarLabel !== undefined
-                        ? options.tabBarLabel
-                        : options.title !== undefined
+            <Box
+                flexDirection="row"
+                width="100%"
+                alignSelf="center"
+                bg={'$white'}
+                borderTopWidth={'$1'}
+                borderTopColor={'#d3d3d3'}
+                py={'$4'}
+                {...tabBarProps}
+            >
+                {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 isFocused = state.index === route.index;
 
-                // const onPress = () => {
-                //     const event = navigation.emit({
-                //         type: 'tabPress',
-                //         target: route.route.key,
-                //         canPreventDefault: true,
-                //     });
+                    // 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,
-                //         });
-                //     }
-                // };
+                    //     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,
-                //     });
-                // };
+                    // 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}
+                    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>
+                                <Text
+                                    color={isFocused ? options.tabBarActiveTintColor : options.tabBarInactiveTintColor}
+                                    style={{ fontSize: 12 }}
+                                >
+                                    {label}
+                                </Text>
+                            </Center>
+                        </Pressable>
+                    );
+                })}
+            </Box>
         </SafeAreaView>
     );
 };
 
-export default BottomTabBar;
+export default BottomTabBar;

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

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

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

@@ -2,8 +2,7 @@ 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 { Link, useNavigate } from 'react-router-native';
 import { config } from '../../../config';
 import { MenuDataItem } from '../typings';
 import { COLOR } from '../../../utils/ThemeColor';
@@ -18,7 +17,7 @@ export interface SideBarProps {
 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 navigate = useNavigate();
 
     const toggle = () => {
         if (isToggle) {
@@ -32,8 +31,8 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
 
     const isMenuExist = menuData.length > 0;
 
-    const openMenuItem = (menu) => {
-        history.push({ pathname: menu.path, state: menu.name });
+    const openMenuItem = (menu: any) => {
+        navigate(menu.path, { state: menu.name });
         drawerRef.current.closeDrawer();
     };
 
@@ -42,19 +41,16 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
             {!!isMenuExist && (
                 <FlatList
                     data={menuData}
-                    renderItem={({ item }:any) => {
+                    renderItem={({ item }: any) => {
                         const keys = item?.key.split('.');
-                        const arrowIcon:any = icon || 'chevron-down-outline';
+                        const arrowIcon: any = icon || 'chevron-down-outline';
                         return item?.routes ? (
-                            <Box p={"$3"}>
+                            <Box p={'$3'}>
                                 <TouchableOpacity onPress={() => toggle()}>
                                     <HStack>
-                                        <Ionicons
-                                            color={isToggle ? '#fff' : '#a1a1a1'}
-                                            name="document-outline"
-                                        />
+                                        <Ionicons color={isToggle ? '#fff' : '#a1a1a1'} name="document-outline" />
                                         <Text style={{ color: isToggle ? '#fff' : '#a1a1a1' }}>{item.name}</Text>
-                                        <Ionicons  name={arrowIcon} />
+                                        <Ionicons name={arrowIcon} />
                                     </HStack>
                                 </TouchableOpacity>
                                 {isToggle
@@ -69,7 +65,7 @@ const SideBar: React.FC<SideBarProps> = ({ menuData, matchUrl, navTheme, drawerR
                             </Box>
                         ) : (
                             keys[0] != 'Main' && keys[0] == 'sidebar' && (
-                                <Box key={item.key} p={"$3"}>
+                                <Box key={item.key} p={'$3'}>
                                     <TouchableOpacity style={{ marginBottom: 10 }} onPress={() => openMenuItem(item)}>
                                         <HStack>
                                             <Ionicons

package/src/components/NavigationComponent.tsx

@@ -102,7 +102,9 @@ export const NavigationContainerComponent = ({
     independent,
     linking,
 }: INavigationContainerComponentProps): ReactElement => {
-    const routeNameRef = useRef() as MutableRefObject<INavigationContainerRef | undefined>;
+    const routeNameRef = useRef<INavigationContainerRef | undefined>(undefined) as MutableRefObject<
+        INavigationContainerRef | undefined
+    >;
     const dispatch = useDispatch();
     const platformState = useSelector((state) => (state as any).platform);
     const { setLocationChange } = useLocationChange();

package/src/components/ToastAlert.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
 
-import {
-    Toast,
-    VStack,
-    ToastTitle,
-    ToastDescription,
-    Pressable,
-    Icon,
-    CloseIcon,
-} from '@gluestack-ui/themed';
+import { Toast, VStack, ToastTitle, ToastDescription, Pressable, Icon, CloseIcon } from '@gluestack-ui/themed';
 
 interface IToast {
     id: string;
@@ -17,7 +9,7 @@ interface IToast {
     description?: string;
     isClosable?: boolean;
     toast?: any;
-    variant?:any
+    variant?: any;
 }
 
 // variants:
@@ -25,7 +17,15 @@ interface IToast {
 // solid,
 // outline
 
-export const ToastAlert = ({ id, status = 'info', title='', description = '',variant='solid', isClosable, toast=null }: IToast) => {
+export const ToastAlert = ({
+    id,
+    status = 'info',
+    title = '',
+    description = '',
+    variant = 'solid',
+    isClosable,
+    toast = null,
+}: IToast) => {
     const toastId = 'toast-' + id;
     const actionType = status || 'info';
     return (

package/src/components/UnAuthenticatedComponent.tsx

@@ -1,38 +1,28 @@
 import React from 'react';
-import {
-    Box,
-    Button,
-    Heading,
-    Text,
-    HStack,
-    Pressable,
-    Divider,
-    ButtonText,
-    SafeAreaView,
-} from '@gluestack-ui/themed';
+import { Box, Button, Heading, Text, HStack, Pressable, Divider, ButtonText, SafeAreaView } from '@gluestack-ui/themed';
 import { useNavigation } from '@react-navigation/native';
 import { Ionicons } from '@expo/vector-icons';
 import { Linking } from 'react-native';
 
- const UnAuthenticatedComponent = () => {
+const UnAuthenticatedComponent = () => {
     const navigation = useNavigation<any>();
     return (
         <SafeAreaView flex={1}>
-        <Box flex={1} borderTopWidth={'$1'} borderTopColor={'$trueGray200'}>
-            {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
-            <Box flex={1} p={'$6'} bg="$white" justifyContent={'center'}>
-                <Heading mt={'$2'}>Login</Heading>
-                <Text fontSize="$md" mt={'$2'}>
-                    Log in to continue.
-                </Text>
-                <Button bg={'$blue500'} size="lg" my={'$3'} onPress={() => navigation.navigate('MainStack.Login')}>
-                    <ButtonText color="$white">Login</ButtonText>
-                </Button>
-                <Divider my={'$3'} />
+            <Box flex={1} borderTopWidth={'$1'} borderTopColor={'$trueGray200'}>
+                {/* <Box h={'$1'} bg={Colors.primaryBgColor} /> */}
+                <Box flex={1} p={'$6'} bg="$white" justifyContent={'center'}>
+                    <Heading mt={'$2'}>Login</Heading>
+                    <Text fontSize="$md" mt={'$2'}>
+                        Log in to continue.
+                    </Text>
+                    <Button bg={'$blue500'} size="lg" my={'$3'} onPress={() => navigation.navigate('MainStack.Login')}>
+                        <ButtonText color="$white">Login</ButtonText>
+                    </Button>
+                    <Divider my={'$3'} />
+                </Box>
             </Box>
-        </Box>
-    </SafeAreaView>
+        </SafeAreaView>
     );
 };
 
-export default UnAuthenticatedComponent;
+export default UnAuthenticatedComponent;

package/src/containers/layout/BasicLayout.tsx

@@ -2,7 +2,7 @@ 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 { useNavigate } from 'react-router-native';
 import { useSelector } from 'react-redux';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 
@@ -13,10 +13,10 @@ export interface ReduxState {
 const Layout: React.FC<any & ReduxState & { routeParams: any }> = (props) => {
     const user = useSelector((state: any) => state?.user);
     const { settings } = props;
-    const history = useHistory();
+    const navigate = useNavigate();
 
     const logout = () => {
-        history.push('/logout');
+        navigate('/logout');
     };
     return (
         <BasicLayout

package/src/containers/layout/ProLayout.tsx

@@ -11,7 +11,7 @@ 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);
+    const { appFeatures } = routeConfigKeyReplace(pathKey, props?.features, appLayout);
     AppFeatures = appFeatures;
 
     React.useEffect(() => {