@admin-layout/gluestack-ui-mobile 9.0.4-alpha.54 → 9.0.4-alpha.62

package/src/components/Layout/components/Header.tsx

@@ -7,101 +7,103 @@ import { useDispatch } from 'react-redux';
 import { CHANGE_SETTINGS_ACTION } from '@admin-layout/client';
 import { useSelector } from 'react-redux';
 
+export const Header = React.memo(
+    ({
+        navigation,
+        route,
+        options,
+        back,
+        showToggle = null,
+        theme = 'light',
+        right = null,
+        rightComponent,
+        isMixedLayout = null,
+        ...rest
+    }: any) => {
+        const title = rest?.title || getHeaderTitle(options, route.name);
 
-export const Header = React.memo(({
-    navigation,
-    route,
-    options,
-    back,
-    showToggle = null,
-    theme = 'light',
-    right = null,
-    rightComponent,
-    isMixedLayout=null,
-    ...rest
-}: any)=>{
-    const title = rest?.title || getHeaderTitle(options, route.name);
+        const matches: any = title.match(/\b(\w)/g);
+        const acronym: any = matches.join('').substring(0, 2); // JSON
+        const [settingToggle, setSettingToggle] = useState(false);
+        const settings = useSelector<any>((state) => state.settings) as any;
+        const dispatch = useDispatch();
 
-    const matches: any = title.match(/\b(\w)/g);
-    const acronym: any = matches.join('').substring(0, 2); // JSON
-    const [settingToggle, setSettingToggle] = useState(false);
-    const settings = useSelector<any>((state) => state.settings) as any;
-    const dispatch = useDispatch();
+        const onSettingChange = useCallback(
+            (config: any) =>
+                dispatch({
+                    type: CHANGE_SETTINGS_ACTION,
+                    payload: config,
+                }),
+            [dispatch],
+        );
 
-    const onSettingChange = useCallback(
-        (config: any) =>
-            dispatch({
-                type: CHANGE_SETTINGS_ACTION,
-                payload: config,
-            }),
-        [dispatch],
-    );
-
-    return (
-        <SafeAreaView>
-        <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />   
-        <Box bg={theme === 'light' ? '$white' : '$black'}>
-            <HStack
-                bg={theme === 'light' ? '$white' : '$black'}
-                px="$1"
-                py="$3"
-                // justifyContent={
-                //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
-                // }
-                justifyContent={
-                    (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&!isMixedLayout && !right
-                        ? 'center'
-                        : 'space-between'
-                }
-                alignItems="center"
-                borderBottomWidth={'$1'}
-                borderBottomColor={'#d3d3d3'}
-                w="100%"
-               
-            >
-                {back ? (
-                    <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
-                        <Ionicons name={'arrow-back'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                    </Button>
-                ) : (showToggle && settings?.layout !== 'bottom') || (showToggle && settings?.layout !== 'host-bottom') ? (
-                    <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
-                        <Ionicons name={'menu'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                    </Button>
-                ) : (
-                    <></>
-                )}
-                <Text
-                    px={'$2'}
-                    color={theme === 'light' ? '$black' : '$white'}
-                    style={{ fontSize: 20 }}
-                    fontWeight="$bold"
-                >
-                    {title}
-                </Text>
-                {!!settingToggle ? (
-                    <SettingDrawer
-                        onSettingChange={(settings: any) => {
-                            onSettingChange(settings);
-                            setSettingToggle(false);
-                        }}
-                    />
-                ) : null}
-                {right ? (
-                    <HStack alignItems={'center'}>
-                        <Button size="xs" bg={'transparent'} onPress={() => setSettingToggle(!settingToggle)}>
-                            <Ionicons name={'cog'} color={theme === 'light' ? 'black' : 'white'} size={20} />
-                        </Button>
-                        {rightComponent ? <Box>{rightComponent}</Box> : null}
+        return (
+            <SafeAreaView bg={'$white'}>
+                <StatusBar barStyle={theme === 'light' ? 'dark-content' : 'light-content'} />
+                <Box bg={theme === 'light' ? '$white' : '$black'}>
+                    <HStack
+                        bg={theme === 'light' ? '$white' : '$black'}
+                        px="$1"
+                        py="$3"
+                        // justifyContent={
+                        //     settings?.layout === 'bottom' || settings?.layout === 'host-bottom' ? 'center' : 'space-between'
+                        // }
+                        justifyContent={
+                            (settings?.layout === 'bottom' || settings?.layout === 'host-bottom') &&
+                            !isMixedLayout &&
+                            !right
+                                ? 'center'
+                                : 'space-between'
+                        }
+                        alignItems="center"
+                        borderBottomWidth={'$1'}
+                        borderBottomColor={'#d3d3d3'}
+                        w="100%"
+                    >
+                        {back ? (
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
+                                <Ionicons name={'arrow-back'} color={theme === 'light' ? 'black' : 'white'} size={20} />
+                            </Button>
+                        ) : (showToggle && settings?.layout !== 'bottom') ||
+                          (showToggle && settings?.layout !== 'host-bottom') ? (
+                            <Button size="xs" bg={'transparent'} onPress={() => navigation.toggleDrawer()}>
+                                <Ionicons name={'menu'} color={theme === 'light' ? 'black' : 'white'} size={20} />
+                            </Button>
+                        ) : (
+                            <></>
+                        )}
+                        <Text
+                            px={'$2'}
+                            color={theme === 'light' ? '$black' : '$white'}
+                            style={{ fontSize: 20 }}
+                            fontWeight="$bold"
+                        >
+                            {title}
+                        </Text>
+                        {!!settingToggle ? (
+                            <SettingDrawer
+                                onSettingChange={(settings: any) => {
+                                    onSettingChange(settings);
+                                    setSettingToggle(false);
+                                }}
+                            />
+                        ) : null}
+                        {right ? (
+                            <HStack alignItems={'center'}>
+                                <Button size="xs" bg={'transparent'} onPress={() => setSettingToggle(!settingToggle)}>
+                                    <Ionicons name={'cog'} color={theme === 'light' ? 'black' : 'white'} size={20} />
+                                </Button>
+                                {rightComponent ? <Box>{rightComponent}</Box> : null}
+                            </HStack>
+                        ) : (
+                            <Button bg={'transparent'} mr={'$2'}></Button>
+                        )}
                     </HStack>
-                ) : (
-                    <Button bg={'transparent'} mr={'$2'}></Button>
-                )}
-            </HStack>
-            
-        </Box>
-        </SafeAreaView>
-    );
-});
+                </Box>
+            </SafeAreaView>
+        );
+    },
+);
 
 export default Header;
 
@@ -134,7 +136,7 @@ export default Header;
 
 //     return (
 //         <SafeAreaView>
-//         <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />   
+//         <StatusBar  barStyle={theme === 'light' ? 'dark-content':'light-content'} />
 //         <Box bg={theme === 'light' ? '$white' : '$black'}>
 //             <HStack
 //                 bg={theme === 'light' ? '$white' : '$black'}
@@ -152,7 +154,7 @@ export default Header;
 //                 borderBottomWidth={'$1'}
 //                 borderBottomColor={'#d3d3d3'}
 //                 w="100%"
-               
+
 //             >
 //                 {back ? (
 //                     <Button size="xs" bg={'transparent'} onPress={() => navigation.goBack()}>
@@ -192,7 +194,7 @@ export default Header;
 //                     <Button bg={'transparent'} mr={'$2'}></Button>
 //                 )}
 //             </HStack>
-            
+
 //         </Box>
 //         </SafeAreaView>
 //     );

package/src/components/WithPermission.tsx

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { Spinner, Box, Text, Heading } from '@gluestack-ui/themed';
 import { IPermissionType, IPreDefinedPermissions } from '@adminide-stack/core';
 import { get } from 'lodash-es';
-import { usePermissionAutoFetch } from './usePermissionAutoFetch';
-import { isUserAuthenticated } from '@adminide-stack/user-auth0-client';
+import { usePermissionAutoFetch } from '@adminide-stack/platform-client';
 
 export enum WithPermissionBehaviour {
     hide,

package/src/components/usePermissionAutoFetch.tsx

@@ -1,38 +1,26 @@
-import React from 'react';
-import { IResourceAuthority, IConfigFragmentName } from '@adminide-stack/core';
-import { useGetTeamContextQuery } from '@adminide-stack/platform-client';
-import { generateOrgUri } from '@adminide-stack/core/lib/utils/generate-uri.js';
-import { useSelector } from 'react-redux';
-import { navigationRef } from '@common-stack/client-react';
+import {
+    IResourceAuthority,
+    IConfigFragmentName,
+    useGetContextDataQuery,
+    generateUserUri,
+    IContext,
+} from '@adminide-stack/core';
 import { useSetting } from './useSetting';
 
 interface userPermissionAutoFetchProps {
     configKey?: string;
 }
 export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
-    const [orgName, setOrgName] = React.useState<any>(null);
-    const [orgUri, setOrgUri] = React.useState<any>(null);
-    const platformState = useSelector((state) => (state as any).platform);
-    const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
-    const { data, loading } = useGetTeamContextQuery();
-    const teamData = React.useMemo(() => data?.getTeamContext, [data]);
-    React.useEffect(() => {
-        if (currentRoute?.params?.orgName || platformState?.orgName) {
-            const org = currentRoute?.params?.orgName || platformState?.orgName;
-            if (org !== orgName) {
-                setOrgName(org);
-            }
-        }
-        if (orgName) {
-            const orgUri = generateOrgUri(orgName, IConfigFragmentName.Settings);
-            setOrgUri(orgUri);
-        }
-    }, [currentRoute, platformState, orgName]);
+    const { data, loading } = useGetContextDataQuery();
+    const { teamUri, orgUri, userId } = (data?.getContextData as IContext) || {};
+
+    // Determine resource based on teamUri, orgUri, or fallback to userId
+    let resource = teamUri || orgUri || (userId ? generateUserUri({ _id: userId }) : generateUserUri({ _id: 'guest' }));
 
     const { loading: settingLoading, ...remaining } = useSetting({
         configKey: options?.configKey || '',
         overrides: {
-            resource: teamData?.teamUri ?? orgUri,
+            resource: resource,
         },
         options: {
             forceExist: false,
@@ -40,5 +28,51 @@ export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) =
             fragment: IConfigFragmentName.Roles,
         },
     });
+
     return { ...remaining, loading: loading || settingLoading };
 };
+
+// import React from 'react';
+// import { IResourceAuthority, IConfigFragmentName } from '@adminide-stack/core';
+// import { useGetTeamContextQuery } from '@adminide-stack/platform-client';
+// import { generateOrgUri } from '@adminide-stack/core/lib/utils/generate-uri.js';
+// import { useSelector } from 'react-redux';
+// import { navigationRef } from '@common-stack/client-react';
+// import { useSetting } from './useSetting';
+
+// interface userPermissionAutoFetchProps {
+//     configKey?: string;
+// }
+// export const usePermissionAutoFetch = (options?: userPermissionAutoFetchProps) => {
+//     const [orgName, setOrgName] = React.useState<any>(null);
+//     const [orgUri, setOrgUri] = React.useState<any>(null);
+//     const platformState = useSelector((state) => (state as any).platform);
+//     const currentRoute: any = navigationRef.isReady() ? navigationRef?.getCurrentRoute() : null;
+//     const { data, loading } = useGetTeamContextQuery();
+//     const teamData = React.useMemo(() => data?.getTeamContext, [data]);
+//     React.useEffect(() => {
+//         if (currentRoute?.params?.orgName || platformState?.orgName) {
+//             const org = currentRoute?.params?.orgName || platformState?.orgName;
+//             if (org !== orgName) {
+//                 setOrgName(org);
+//             }
+//         }
+//         if (orgName) {
+//             const orgUri = generateOrgUri(orgName, IConfigFragmentName.Settings);
+//             setOrgUri(orgUri);
+//         }
+//     }, [currentRoute, platformState, orgName]);
+
+//     const { loading: settingLoading, ...remaining } = useSetting({
+//         configKey: options?.configKey || '',
+//         overrides: {
+//             resource: teamData?.teamUri ?? orgUri,
+//         },
+//         options: {
+//             forceExist: false,
+//             authority: IResourceAuthority.Defaultpermissions,
+//             fragment: IConfigFragmentName.Roles,
+//         },
+//     });
+//     return { ...remaining, loading: loading || settingLoading };
+// };

package/src/components/with-interactions-lifecycle-managed.tsx

@@ -80,19 +80,21 @@ export function withInteractionsManaged(component: any, interationTime?: number,
         <>
             {Platform.OS === 'ios' ? (
                 <>
-                    {permissionKeys ? (
+                    <>{component}</>
+                    {/* {permissionKeys ? (
                         <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                     ) : (
                         <>{component}</>
-                    )}
+                    )} */}
                 </>
             ) : (
                 <IntractionComponent interationTime={interationTime}>
-                    {permissionKeys ? (
+                    <>{component}</>
+                    {/* {permissionKeys ? (
                         <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                     ) : (
                         <>{component}</>
-                    )}
+                    )} */}
                 </IntractionComponent>
             )}
         </>
@@ -104,19 +106,21 @@ export function withLifeCycleInteractionsManaged(component: any, interationTime?
         <>
             {Platform.OS === 'ios' ? (
                 <LifecycleComponent>
-                    {permissionKeys ? (
+                    <>{component}</>
+                    {/* {permissionKeys ? (
                         <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                     ) : (
                         <>{component}</>
-                    )}
+                    )} */}
                 </LifecycleComponent>
             ) : (
                 <IntractionWithLifeCycleComponent interationTime={interationTime}>
-                    {permissionKeys ? (
+                    <>{component}</>
+                    {/* {permissionKeys ? (
                         <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
                     ) : (
                         <>{component}</>
-                    )}
+                    )} */}
                 </IntractionWithLifeCycleComponent>
             )}
         </>
@@ -126,11 +130,12 @@ export function withLifeCycleInteractionsManaged(component: any, interationTime?
 export function withLifeCycleManaged(component: any, permissionKeys = null) {
     return (
         <LifecycleComponent>
-            {permissionKeys ? (
+            <>{component}</>
+            {/* {permissionKeys ? (
                 <WithPermissionContainer permissionKeys={permissionKeys}>{component}</WithPermissionContainer>
             ) : (
                 <>{component}</>
-            )}
+            )} */}
         </LifecycleComponent>
     );
 }

package/src/utils/generateMobileNavigations.ts

@@ -88,11 +88,11 @@ export class GenerateMobileNavigations {
         this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
         this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
         this.#modules = config?.modules ?? [];
-        this.#initialRouteName = config?.initialRouteName ?? '';
-        this.#unauthenticatedComponentPath = config?.unauthenticatedComponentPath ?? '';
-        this.#customTabBarPath = config?.customTabBarPath ?? '';
-        this.#customDrawerPath = config?.customDrawerPath ?? '';
-        this.#customHeaderPath = config?.customHeaderPath ?? '';
+        this.#initialRouteName = config?.mobileConfig?.initialRouteName ?? '';
+        this.#unauthenticatedComponentPath = config?.mobileConfig?.unauthenticatedComponentPath ?? '';
+        this.#customTabBarPath = config?.mobileConfig?.customTabBarPath ?? '';
+        this.#customDrawerPath = config?.mobileConfig?.customDrawerPath ?? '';
+        this.#customHeaderPath = config?.mobileConfig?.customHeaderPath ?? '';
         this.#i18Options = config?.i18n ?? {};
     }
 
@@ -709,7 +709,11 @@ export class GenerateMobileNavigations {
              >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                        authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props} 
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                          />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -880,7 +884,11 @@ export class GenerateMobileNavigations {
                 >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                            authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
-                           component={<Component${moduleNumber} {...props}   />}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                           component={<Component${moduleNumber} {...props}
+                             permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                             extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                              />}
                            ${
                                pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                    ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -1143,7 +1151,11 @@ export class GenerateMobileNavigations {
         >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
                        authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
-                       component={<Component${moduleNumber} {...props}   />}
+                       extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       component={<Component${moduleNumber} {...props}
+                           permissions={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
+                           extraPermissions={${JSON.stringify(pkgRouteConfig?.extraPermissions) ?? null}}
+                       />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
                                ? `unauthenticatedComponent={<${customUnauthenticatedComponentName}/>}`
@@ -1410,6 +1422,7 @@ export class GenerateMobileNavigations {
         const isShowTabs = layoutType === 'mixSide' || layoutType === 'bottom' ? true : false;
         const isShowDefalutHeader = layoutType === 'mixSide' ? true : false;
         const defaultHeaderProps = {
+            ...(layoutSettings || {}),
             showToggle: layoutSettings?.topLeftToggle || false,
             right: layoutSettings?.topRightSettingToggle || false,
         };
@@ -1461,7 +1474,11 @@ export class GenerateMobileNavigations {
                                  : ''
                          }
                          }})}
-                       ${customDrawerPath ? 'drawerContent={(props) => <CustomDrawerContent {...props} />}' : ''}
+                       ${
+                           customDrawerPath
+                               ? 'drawerContent={(props) => <CustomDrawerContent {...props} {...defaultHeaderProps || {}} />}'
+                               : ''
+                       }
                        >
                       {settings?.layout == 'host-bottom' ? hostDrawerNavigations({ Drawer }) : drawerNavigations({ Drawer })}
                      </Drawer.Navigator>