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

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/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/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(() => {

package/src/index.ts

@@ -5,7 +5,7 @@ import { settingsReducer } from './redux/settings';
 import { useAfterInteractions } from './hooks/use-after-interactions';
 import useIsReady from './hooks/useIsReady';
 import routeConfigKeyReplace from './utils/routeConfigKeyReplace';
-import {getReplacedRouteConfig} from './utils/getReplacedRouteConfig'
+import { getReplacedRouteConfig } from './utils/getReplacedRouteConfig';
 import LayoutFeature, { ProLayout, AppFeatures, AppLayout } from './containers/layout/module';
 import { useLayoutSetting, LayoutSettingProps } from './hooks/useLayoutSetting';
 import i18next from './config/i18next';
@@ -21,7 +21,6 @@ export * from '@gluestack-ui/config';
 export * from '@gluestack-style/react';
 //............................gluestack-ui....///
 
-
 export {
     useLayoutSetting,
     LayoutSettingProps,

package/src/utils/generateMobileNavigations.ts

@@ -400,7 +400,7 @@ export class GenerateMobileNavigations {
     `.replace(/,(\s*)$/, ''); // Removes trailing comma
 
             // Use Prettier to format the code
-            classStructure = prettier.format(classStructure, { parser: 'babel' });
+            classStructure = await prettier.format(classStructure, { parser: 'babel' });
 
             const appFeatures = importStatements + '\n' + classStructure;
 
@@ -550,7 +550,7 @@ export class GenerateMobileNavigations {
     `.replace(/,(\s*)$/, ''); // Removes trailing comma
 
             // Use Prettier to format the code
-            classStructure = prettier.format(classStructure, { parser: 'babel' });
+            classStructure = await prettier.format(classStructure, { parser: 'babel' });
 
             const appFeatures = importStatements + '\n' + classStructure;
 
@@ -620,7 +620,7 @@ export class GenerateMobileNavigations {
     `.replace(/,(\s*)$/, ''); // Removes trailing comma
 
             // Use Prettier to format the code
-            classStructure = prettier.format(classStructure, { parser: 'babel' });
+            classStructure = await prettier.format(classStructure, { parser: 'babel' });
 
             const appFeatures = importStatements + '\n' + classStructure;
 
@@ -807,7 +807,7 @@ export class GenerateMobileNavigations {
         }
         stackNavigator = importStatements + '\n' + moduleRender;
         let stackNavigation = stackNavigator;
-        stackNavigation = prettier.format(stackNavigation, { parser: 'babel' });
+        stackNavigation = await prettier.format(stackNavigation, { parser: 'babel' });
         const stackDirName = path.dirname(stackDirPath);
         try {
             const isDirCreated = await this.#makeDir(stackDirName);
@@ -987,7 +987,7 @@ export class GenerateMobileNavigations {
         moduleNavigation = importStatements + '\n' + moduleRender;
         const drawerNavigator = moduleNavigation;
         let drawerNavigation = drawerNavigator;
-        drawerNavigation = prettier.format(drawerNavigation, { parser: 'babel' });
+        drawerNavigation = await prettier.format(drawerNavigation, { parser: 'babel' });
         const drawerDirName = path.dirname(drawerDirPath);
         try {
             const isDirCreated = await this.#makeDir(drawerDirName);
@@ -1257,7 +1257,7 @@ export class GenerateMobileNavigations {
         moduleNavigation = importStatements + '\n' + moduleRender;
         const bottomTabNavigator = moduleNavigation;
         let bottomTabNavigation = bottomTabNavigator;
-        bottomTabNavigation = prettier.format(bottomTabNavigation, { parser: 'babel' });
+        bottomTabNavigation = await prettier.format(bottomTabNavigation, { parser: 'babel' });
         const bottomDirName = path.dirname(bottomDirPath);
         try {
             const isDirCreated = await this.#makeDir(bottomDirName);
@@ -1684,7 +1684,7 @@ export class GenerateMobileNavigations {
          export default AppNavigations;
      `;
         appNavigation = importStatements + '\n' + rootComponent + '\n' + appComponent;
-        appNavigation = prettier.format(appNavigation, { parser: 'babel' });
+        appNavigation = await prettier.format(appNavigation, { parser: 'babel' });
         try {
             await this.#writeFile(navigationDirPath, appNavigation);
         } catch (error) {