@admin-layout/gluestack-ui-mobile 9.0.4-alpha.28 → 9.0.4-alpha.39

package/src/utils/generateMobileNavigations.ts

@@ -76,13 +76,15 @@ export class GenerateMobileNavigations {
     #customDrawerPath: string;
     #customHeaderPath: string;
     #i18Options: any;
+    #iconsRepository: string;
 
     constructor({ configFilePath }: IGenerateMobileNavigationsProps) {
         this.#configFilePath = configFilePath;
         const config = this.#readConfigFile(configFilePath);
         this.#configFileData = config;
         // this.#layoutSettings = process.env.LAYOUT_SETTINGS ? JSON.parse(process.env.LAYOUT_SETTINGS) : null;
-        this.#appPath = config?.appPath ?? 'app';
+        this.#appPath = config?.commonPaths?.appPath ?? 'app';
+        this.#iconsRepository = config?.iconsRepository ?? '';
         this.#mobileStackPath = config?.mobileStackPath ?? 'mobile-stack-react';
         this.#appDirPath = path.join(path.dirname(configFilePath), this.#appPath);
         this.#modules = config?.modules ?? [];
@@ -706,6 +708,7 @@ export class GenerateMobileNavigations {
                 }}}}
              >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
                        component={<Component${moduleNumber} {...props}   />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -788,6 +791,7 @@ export class GenerateMobileNavigations {
 
         importStatements += `import * as React from 'react';\n`;
         importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -833,11 +837,35 @@ export class GenerateMobileNavigations {
                   initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
                   options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `drawerIcon: ({ color, size }) => <${pkgRouteConfig?.icon?.name} name="${
-                          pkgRouteConfig?.icon?.props?.name ?? 'home'
-                      }" size={${pkgRouteConfig?.icon?.props?.size ?? `size`}} color={${
-                          pkgRouteConfig?.icon?.props?.color ?? 'color'
-                      }} />,`
+                    ? `drawerIcon: ({ focused }) => { 
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                      {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     />)},`
                     : ''
             }
                   ${
@@ -851,6 +879,7 @@ export class GenerateMobileNavigations {
                   }}}}
                 >{(props) => <AuthWrapper 
                            auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                           authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
                            component={<Component${moduleNumber} {...props}   />}
                            ${
                                pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -878,10 +907,10 @@ export class GenerateMobileNavigations {
                            }
                             />}</Drawer.Screen>`;
         }
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // if (icons && icons?.length) {
+        //     const uniqueIcons = [...new Set(icons.split(','))].join(',');
+        //     importStatements += `import Icons from '@expo/vector-icons';\n`;
+        // }
 
         if (customHeaderPaths && customHeaderPaths?.length) {
             const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
@@ -1014,6 +1043,7 @@ export class GenerateMobileNavigations {
 
         importStatements += `import * as React from 'react';\n`;
         importStatements += `import AuthWrapper from '@admin-layout/gluestack-ui-mobile/lib/components/AuthWrapper.js';\n`;
+        importStatements += `import DynamicIcons from '@app/selectiveIcons';\n`;
 
         if (unauthenticatedComponentPath)
             importStatements += `import UnauthenticatedComponent from '${unauthenticatedComponentPath}';\n`;
@@ -1060,7 +1090,6 @@ export class GenerateMobileNavigations {
                       }
                     : { headerShown: mixLayout ? false : true },
             );
-
             importStatements += `import Component${moduleNumber} from '${pkgRouteConfig.componentPath}';\n`;
             moduleContent += `<Tab.Screen
           key="${pkgRouteConfig.key}"
@@ -1069,11 +1098,36 @@ export class GenerateMobileNavigations {
           initialParams={${JSON.stringify(pkgRouteConfig?.props?.initialParams || {})}}
           options={{...${options},...{${
                 pkgRouteConfig?.icon && Object.keys(pkgRouteConfig.icon)?.length && pkgRouteConfig?.icon?.name
-                    ? `tabBarIcon: ({ color }) => <${pkgRouteConfig?.icon?.name} name="${
-                          pkgRouteConfig?.icon?.props?.name ?? 'home'
-                      }" size={${pkgRouteConfig?.icon?.props?.size ?? 24}} color={${
-                          pkgRouteConfig?.icon?.props?.color ?? 'color'
-                      }} />`
+                    ? `tabBarIcon: ({ focused }) => { 
+                     const SelectedIcon = DynamicIcons('${pkgRouteConfig?.icon?.name}');
+                     return (<SelectedIcon 
+                     {...{
+                        ...${JSON.stringify({ ...(pkgRouteConfig?.icon?.props || {}) })},
+                        ...{
+                          color:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        },
+                          stroke:focused ? ${
+                              JSON.stringify(
+                                  pkgRouteConfig?.icon?.props?.color ??
+                                      pkgRouteConfig?.props?.options?.tabBarActiveTintColor,
+                              ) ?? 'black'
+                          }
+                                        :${
+                                            JSON.stringify(pkgRouteConfig?.props?.options?.tabBarInactiveTintColor) ??
+                                            'grey'
+                                        }
+                        }
+                     }}
+                     
+                     />)}`
                     : ''
             }
            ${
@@ -1088,6 +1142,7 @@ export class GenerateMobileNavigations {
            }}}
         >{(props) => <AuthWrapper 
                        auth={${pkgRouteConfig?.props?.initialParams?.auth ?? false}}
+                       authority={${JSON.stringify(pkgRouteConfig?.authority) ?? null}}
                        component={<Component${moduleNumber} {...props}   />}
                        ${
                            pkgRouteConfig?.unauthenticatedComponent && customUnauthenticatedComponentPath
@@ -1117,10 +1172,10 @@ export class GenerateMobileNavigations {
         </Tab.Screen>`;
         }
 
-        if (icons && icons?.length) {
-            const uniqueIcons = [...new Set(icons.split(','))].join(',');
-            importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
-        }
+        // if (icons && icons?.length) {
+        //     const uniqueIcons = [...new Set(icons.split(','))].join(',');
+        //     importStatements += `import { ${uniqueIcons} } from '@expo/vector-icons';\n`;
+        // }
 
         if (customHeaderPaths && customHeaderPaths?.length) {
             const uniqueHeaderNames = [...new Set(customHeaderNames.split(','))]?.filter((str) => str?.length);
@@ -1577,6 +1632,105 @@ export class GenerateMobileNavigations {
         }
     }
 
+    async #generateSelectiveIconsFile({ appDirPath, modules }) {
+        const mainRoutes = path.join(appDirPath, `/${mainRoutesFileName}`);
+        const modulesRouteConfig = await this.#getModulesRouteConfig({ modules: modules });
+        const mainRouteConfig = await this.#readJsonFile(mainRoutes);
+        const allRoutes = [...[mainRouteConfig ?? []], ...(modulesRouteConfig ?? [])];
+        let iconNames = [];
+        allRoutes?.flat(1)?.forEach((route) => {
+            const key = Object.keys(route)[0];
+            const value = route[key];
+            if (value?.icon && typeof value.icon === 'object') {
+                if (typeof value.icon.name === 'string') {
+                    if (!iconNames.includes(value.icon.name)) iconNames.push(value.icon.name);
+                }
+            } else if (value?.icon && typeof value.icon === 'string') {
+                if (!iconNames.includes(value.icon)) iconNames.push(value.icon);
+            }
+
+            if (value?.extraIcons && Array.isArray(value.extraIcons) && value?.extraIcons?.length > 0) {
+                value?.extraIcons?.map((icon) => {
+                    if (typeof icon === 'string') {
+                        if (!iconNames.includes(icon)) iconNames.push(icon);
+                    } else {
+                        console.warn(`Invalid icon type: ${typeof icon}`);
+                    }
+                });
+            } else if (value?.extraIcons && typeof value.extraIcons === 'string') {
+                if (!iconNames.includes(value.extraIcons)) iconNames.push(value.extraIcons);
+            }
+        });
+
+        const iconsRepository = this.#iconsRepository;
+        const expoIcons = [
+            'AntDesign',
+            'Entypo',
+            'EvilIcons',
+            'Feather',
+            'FontAwesome',
+            'FontAwesome5',
+            'Fontisto',
+            'Foundation',
+            'Ionicons',
+            'MaterialCommunityIcons',
+            'MaterialIcons',
+            'Octicons',
+            'SimpleLineIcons',
+            'Zocial',
+        ];
+
+        let content = `
+        function __variableDynamicIcon(icon) {
+        switch (icon) {
+      `;
+        iconNames.forEach((name) => {
+            let prefix, iconName;
+            if (name.includes('.')) {
+                [prefix, iconName] = name.split('.');
+            }
+            if (prefix && iconsRepository[prefix]) {
+                const importPath = iconsRepository[prefix].replace(
+                    '{iconName}',
+                    prefix === 'expo' ? iconName : iconName + '.native',
+                );
+                // prefix = prefix.charAt(0).toUpperCase() + prefix.slice(1).toLowerCase();
+                content += `
+                    case '${prefix + '.' + iconName}':
+                        return require('${importPath}')?.default;
+                    `;
+            } else {
+                content += `
+                    case '${name}':
+                        return ${
+                            expoIcons.includes(name)
+                                ? `require('@expo/vector-icons/${name}.js')?.default`
+                                : `require('@expo/vector-icons/FontAwesome.js')?.default;`
+                        };
+                    `;
+            }
+        });
+
+        content += `
+        default:
+          console.warn('Sorry, the icon named "', icon, '" could not be found in "@react-icon/all-files" and "@app/icons". Please check again.');
+          return require('@expo/vector-icons/FontAwesome.js')?.default;
+        }
+        }
+        export default function(icon) {
+        return __variableDynamicIcon(icon);
+        }
+      `;
+        const rootPath = process.cwd();
+        const fileName = `selectiveIcons.js`;
+        const newFilePath = path.join(rootPath, 'app', fileName);
+        // Ensure the directory exists
+        if (!fs.existsSync(path.dirname(newFilePath))) {
+            fs.mkdirSync(path.dirname(newFilePath), { recursive: true });
+        }
+        fs.writeFileSync(newFilePath, content, 'utf8');
+    }
+
     async #setLayoutAndGenerateNavigation() {
         const appDirPath = this.#appDirPath;
         const modules = this.#modules;
@@ -1592,6 +1746,7 @@ export class GenerateMobileNavigations {
         const layoutType = layoutSettings?.layout || 'bottom';
         try {
             await this.#generateAppRoutesJson();
+            await this.#generateSelectiveIconsFile({ appDirPath, modules });
             await this.#generateMainRoutes({
                 appDirPath,
                 i18Options,