@idealyst/navigation 1.0.61 → 1.0.62

package/src/layouts/DefaultTabLayout.web.tsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import { View, Text, Button, Icon } from '@idealyst/components'
+import { TabLayoutProps } from '../routing/types'
+
+export interface DefaultTabLayoutProps extends TabLayoutProps {
+    currentRoute: React.ComponentType
+    onNavigate: (path: string) => void
+    currentPath: string
+}
+
+/**
+ * Default Tab Layout Component for Web
+ * Provides a simple tab navigation interface using @idealyst/components
+ */
+export const DefaultTabLayout: React.FC<DefaultTabLayoutProps> = ({
+    options,
+    routes,
+    currentRoute: CurrentRoute,
+    onNavigate,
+    currentPath
+}) => {
+    return (
+        <View style={{ height: '100vh', flexDirection: 'column' }}>
+            {/* Header */}
+            {options?.headerTitle && (
+                <View style={{ 
+                    padding: 16, 
+                    borderBottomWidth: 1, 
+                    borderBottomColor: '#e0e0e0',
+                    backgroundColor: '#f8f9fa'
+                }}>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+                        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1 }}>
+                            {options.headerLeft && React.createElement(options.headerLeft as any)}
+                            
+                            {typeof options.headerTitle === 'string' ? (
+                                <Text size="large" weight="bold" style={{ marginLeft: options.headerLeft ? 12 : 0 }}>
+                                    {options.headerTitle}
+                                </Text>
+                            ) : (
+                                React.createElement(options.headerTitle as any)
+                            )}
+                        </View>
+                        
+                        {options.headerRight && React.createElement(options.headerRight as any)}
+                    </View>
+                </View>
+            )}
+            
+            {/* Tab Navigation */}
+            <View style={{ 
+                padding: 12, 
+                borderBottomWidth: 1, 
+                borderBottomColor: '#e0e0e0',
+                backgroundColor: '#ffffff'
+            }}>
+                <View style={{ flexDirection: 'row', gap: 8 }}>
+                    {routes.map((route) => {
+                        if (route.type !== 'screen') return null
+                        
+                        const isActive = currentPath === (route.path === '/' ? '/' : `/${route.path.replace(/^\//, '')}`)
+                        const screenRoute = route as any
+                        const label = screenRoute.options?.tabBarLabel || screenRoute.options?.title || (route.path === '/' ? 'Home' : route.path)
+                        const icon = screenRoute.options?.tabBarIcon
+                        
+                        return (
+                            <Button
+                                key={route.path}
+                                variant={isActive ? 'contained' : 'outlined'}
+                                intent={isActive ? 'primary' : undefined}
+                                size="small"
+                                onPress={() => onNavigate(route.path)}
+                                style={{ 
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap: 6
+                                }}
+                            >
+                                {icon && typeof icon === 'string' && (
+                                    <Icon 
+                                        name={icon as any} 
+                                        size="sm" 
+                                        color={isActive ? 'white' : 'primary'} 
+                                    />
+                                )}
+                                <Text 
+                                    size="small" 
+                                    color={isActive ? 'white' : 'primary'}
+                                    weight={isActive ? 'semibold' : 'medium'}
+                                >
+                                    {label}
+                                </Text>
+                            </Button>
+                        )
+                    })}
+                </View>
+            </View>
+            
+            {/* Content Area */}
+            <View style={{ flex: 1, padding: 20 }}>
+                <CurrentRoute />
+            </View>
+        </View>
+    )
+}

package/src/layouts/index.ts

@@ -1,2 +1,5 @@
 export * from './GeneralLayout';
-export * from './TabBarLayout'; 
+export * from './TabBarLayout';
+export { DefaultTabLayout } from './DefaultTabLayout'
+export { DefaultStackLayout } from './DefaultStackLayout'
+export type { TabLayoutProps, StackLayoutProps, TabLayoutComponent, StackLayoutComponent } from '../routing/types' 

package/src/routing/router.native.tsx

@@ -1,192 +1,53 @@
-import React from "react";
+import { NavigatorParam, RouteParam } from './types'
 
+import { TypedNavigator } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { createDrawerNavigator } from "@react-navigation/drawer";
-
-import { RouteParam, ScreenOptions } from "./types"
-import { TypedNavigator } from "@react-navigation/native";
-import { Icon } from '@idealyst/components';
 
-export const buildRouter = (routeParam: RouteParam, path: string = '') => {
-    return () => buildNativeRouter(routeParam, path)
+/**
+ * Build the Mobile navigator using React Navigation
+ * @param params 
+ * @param parentPath 
+ * @returns 
+ */
+export const buildNavigator = (params: NavigatorParam, parentPath = '') => {
+    const NavigatorType = getNavigatorType(params);
+    return () => (
+        <NavigatorType.Navigator>
+            {params.routes.map((child) => buildScreen(child, NavigatorType))}
+        </NavigatorType.Navigator>
+    )
 }
 
 /**
- * Convert ScreenOptions to React Navigation screen options
+ * Get Navigator Type
+ * @param params 
+ * @returns 
  */
-const convertScreenOptions = (screenOptions?: ScreenOptions) => {
-    if (!screenOptions) return {};
-
-    const options: any = {};
-
-    if (screenOptions.title) {
-        options.title = screenOptions.title;
-        // Set default headerTitle to title, but allow headerTitle to override
-        if (!screenOptions.headerTitle) {
-            options.headerTitle = screenOptions.title;
-        }
-    }
-
-    if (screenOptions.tabBarLabel) {
-        options.tabBarLabel = screenOptions.tabBarLabel;
-    }
-
-    if (screenOptions.tabBarIcon) {
-        if (typeof screenOptions.tabBarIcon === 'string') {
-            options.tabBarIcon = ({ focused }: { focused: boolean; color: string; size: number }) => (
-                <Icon 
-                    name={screenOptions.tabBarIcon as any} 
-                    color={focused ? 'primary' : 'secondary'} 
-                />
-            );
-        } else if (typeof screenOptions.tabBarIcon === 'function') {
-            options.tabBarIcon = screenOptions.tabBarIcon
-        } else {
-            options.tabBarIcon = screenOptions.tabBarIcon;
-        }
-    }
-
-    if (screenOptions.tabBarBadge !== undefined) {
-        options.tabBarBadge = screenOptions.tabBarBadge;
-    }
-
-    if (screenOptions.tabBarVisible !== undefined) {
-        options.tabBarStyle = screenOptions.tabBarVisible ? {} : { display: 'none' };
-    }
-
-    // headerTitle should override the default title in the header
-    if (screenOptions.headerTitle) {
-        options.headerTitle = screenOptions.headerTitle;
-    }
-
-    if (screenOptions.headerBackVisible !== undefined) {
-        options.headerBackVisible = screenOptions.headerBackVisible;
-    }
-
-    if (screenOptions.headerLeft) {
-        options.headerLeft = screenOptions.headerLeft;
-    }
-
-    if (screenOptions.headerRight) {
-        options.headerRight = screenOptions.headerRight;
-    }
-
-    if (screenOptions.platformOptions?.native) {
-        Object.assign(options, screenOptions.platformOptions.native);
-    }
-
-    return options;
-};
+const getNavigatorType = (params: NavigatorParam) => {
+    switch (params.layout) {
+        case 'stack':
+            return createNativeStackNavigator();
+        case 'tab':
+            return createBottomTabNavigator();
+    }
+    throw new Error(`Unsupported navigator type: ${params.layout}`);
+}
 
 /**
- * Create the router supporting React Navigation
- * @param routeParam 
- * @param path 
- * @param LastNavigator 
+ * Build Screen
+ * @param params 
+ * @param Navigator 
+ * @param parentPath 
  * @returns 
  */
-const buildNativeRouter = (routeParam: RouteParam, path: string = '', LastNavigator?: TypedNavigator<any>): React.ReactElement => {
-    const nextPath = (routeParam.path ? path + routeParam.path : path) || '';
-    const type = routeParam.layout?.type;
-    const screenOptions = convertScreenOptions(routeParam.screenOptions);
+const buildScreen = (params: RouteParam, Navigator: TypedNavigator, parentPath = '') => {
+    return (
+        <Navigator.Screen
+            name={params.path}
+            component={params.type === 'screen' ? params.component : buildNavigator(params, parentPath + params.path)}
+            options={params.options}
+        />
+    )
+}
 
-    function buildComponent() {
-        switch (type) {
-            case 'stack':
-                const Stack = createNativeStackNavigator();
-                return (
-                    <Stack.Navigator
-                        screenOptions={{
-                            // Disable screen optimization to ensure theme updates
-                            freezeOnBlur: false,
-                        }}
-                    >
-                        <Stack.Screen 
-                            name={nextPath} 
-                            component={routeParam.component} 
-                            options={screenOptions}
-                        />
-                        {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Stack))}
-                    </Stack.Navigator>
-                )
-            case 'tab':
-                const Tab = createBottomTabNavigator();
-                return (
-                    <Tab.Navigator
-                        screenOptions={{
-                            // Disable screen optimization to ensure theme updates
-                            lazy: false,
-                            freezeOnBlur: false,
-                        }}
-                    >
-                        <Tab.Screen 
-                            name={nextPath} 
-                            component={routeParam.component}
-                            options={screenOptions}
-                        />
-                        {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Tab))}
-                    </Tab.Navigator>
-                )
-            case 'drawer':
-                const Drawer = createDrawerNavigator();
-                return (
-                    <Drawer.Navigator
-                        screenOptions={{
-                            // Disable screen optimization to ensure theme updates
-                            lazy: false,
-                            freezeOnBlur: false,
-                        }}
-                    >
-                        <Drawer.Screen 
-                            name={nextPath} 
-                            component={routeParam.component}
-                            options={screenOptions}
-                        />
-                        {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, Drawer))}
-                    </Drawer.Navigator>
-                )
-            case 'modal':
-                if (!LastNavigator) {
-                    throw new Error('LastNavigator is required for modal layout');
-                }
-                return (
-                    <>
-                        <LastNavigator.Screen 
-                            options={{ headerShown: false, presentation: 'modal', ...screenOptions }} 
-                            name={nextPath} 
-                            component={routeParam.component} 
-                        />
-                        {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
-                    </>
-                )
-            case undefined:
-                if (!LastNavigator) {
-                    throw new Error('LastNavigator is required for undefined layout - ' + routeParam.path);
-                }
-                return (
-                    <>
-                        <LastNavigator.Screen 
-                            name={nextPath} 
-                            component={routeParam.component}
-                            options={screenOptions}
-                        />
-                        {routeParam.routes?.map((route) => buildNativeRouter(route, nextPath, LastNavigator))}
-                    </>
-                )
-            default:
-                throw new Error(`Unknown layout type: ${type}`);
-        }    
-    }
-    const Component = buildComponent();
-    if (LastNavigator) {
-        return (
-            <LastNavigator.Screen 
-                name={nextPath} 
-                component={() => Component}
-                options={screenOptions}
-            />
-        );
-    }
-    return Component;
-}