@codeleap/mobile 1.4.0 → 1.4.1

package/src/components/Modal/styles.ts

@@ -1,118 +1,133 @@
-import {
-  ButtonComposition,
-  createDefaultVariantFactory,
-  includePresets,
-  ModalComposition,
-  ModalStyles,
-  assignTextStyle,
-} from '@codeleap/common'
-
-export const backgroundTransition = {
-  duration: 200,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
-
-export const modalTransition = {
-  duration: 150,
-  ease: 'easeOut',
-  useNativeDriver: false,
-}
-
-export type MobileModalParts =
-  | 'wrapper'
-  | 'overlay'
-  | 'innerWrapper'
-  | 'innerWrapperScroll'
-  | 'box'
-  | 'footer'
-  | 'body'
-  | 'header'
-  | 'touchableBackdrop'
-  | 'box:pose'
-  | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`;
-
-export type MobileModalComposition =
-  | MobileModalParts
-  | `${MobileModalParts}:visible`;
-
-const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
-
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })),
-)
-
-const defaultModalStyles = ModalStyles
-
-export const MobileModalStyles = {
-  ...defaultModalStyles,
-  ...presets,
-  default: createModalStyle((Theme) => {
-    const fullSize = {
-      ...Theme.presets.whole,
-      position: 'absolute',
-      width: Theme?.values?.width,
-      height: Theme?.values?.height,
-    }
-
-    return {
-      wrapper: {
-        zIndex: 1,
-
-        ...fullSize,
-      },
-
-      overlay: {
-        opacity: 0,
-
-        backgroundColor: Theme.colors.black,
-        ...fullSize,
-      },
-      'overlay:visible': {
-        opacity: 0.5,
-      },
-      innerWrapper: {},
-      innerWrapperScroll: {
-        display: 'flex',
-        alignItems: 'center',
-        ...Theme.presets.justifyCenter,
-        minHeight: Theme.values.height,
-      },
-      box: {
-        width: '80%',
-        backgroundColor: Theme.colors.background,
-        borderRadius: Theme.borderRadius.medium,
-        ...Theme.spacing.padding(2),
-      },
-      touchableBackdrop: {
-        ...fullSize,
-      },
-      'box:pose': {
-        opacity: 0,
-        scale: 0.8,
-        transition: modalTransition,
-      },
-      'box:pose:visible': {
-        opacity: 1,
-        scale: 1,
-        transition: modalTransition,
-      },
-      header: {
-        flexDirection: 'row',
-        ...Theme.presets.justifySpaceBetween,
-        ...Theme.presets.alignCenter,
-      },
-      closeButtonWrapper: {
-        alignSelf: 'center',
-        ...Theme.spacing.marginLeft('auto'),
-      },
-      title: {
-        ...Theme.presets.textCenter,
-        ...assignTextStyle('h3')(Theme).text,
-        ...Theme.spacing.paddingBottom(1),
-        flex: 1,
-      },
-    }
-  }),
-  popup: createModalStyle((Theme) => ({})),
-}
+import {
+  ButtonComposition,
+  createDefaultVariantFactory,
+  includePresets,
+  ModalComposition,
+  ModalStyles,
+  assignTextStyle,
+} from '@codeleap/common'
+
+export const backgroundTransition = {
+  duration: 200,
+  ease: 'easeOut',
+  useNativeDriver: false,
+}
+
+export const modalTransition = {
+  duration: 150,
+  ease: 'easeOut',
+  useNativeDriver: false,
+}
+
+export type MobileModalParts =
+  | 'wrapper'
+  | 'overlay'
+  | 'innerWrapper'
+  | 'innerWrapperScroll'
+  | 'box'
+  | 'footer'
+  | 'body'
+  | 'header'
+  | 'touchableBackdrop'
+  | 'box:pose'
+  | 'title'
+  | `closeButton${Capitalize<ButtonComposition>}`
+
+export type MobileModalComposition =
+  | MobileModalParts
+  | `${MobileModalParts}:visible`
+
+const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
+
+const presets = includePresets((style) => createModalStyle(() => ({ body: style })),
+)
+
+const defaultModalStyles = ModalStyles
+
+export const MobileModalStyles = {
+  ...defaultModalStyles,
+  ...presets,
+  default: createModalStyle((Theme) => {
+    const fullSize = {
+      ...Theme.presets.whole,
+      position: 'absolute',
+      width: Theme?.values?.width,
+      height: Theme?.values?.height,
+    }
+
+    return {
+      wrapper: {
+        zIndex: 1,
+
+        ...fullSize,
+      },
+
+      overlay: {
+        opacity: 0,
+
+        backgroundColor: Theme.colors.black,
+        ...fullSize,
+      },
+      'overlay:visible': {
+        opacity: 0.5,
+      },
+      innerWrapper: {},
+      innerWrapperScroll: {
+        display: 'flex',
+        alignItems: 'center',
+        ...Theme.presets.justifyCenter,
+        minHeight: Theme.values.height,
+      },
+      box: {
+        width: '80%',
+        backgroundColor: Theme.colors.background,
+        borderRadius: Theme.borderRadius.medium,
+        ...Theme.spacing.padding(2),
+      },
+      touchableBackdrop: {
+        ...fullSize,
+      },
+      'box:pose': {
+        opacity: 0,
+        scale: 0.8,
+        transition: modalTransition,
+      },
+      'box:pose:visible': {
+        opacity: 1,
+        scale: 1,
+        transition: modalTransition,
+      },
+      header: {
+        flexDirection: 'row',
+        ...Theme.presets.justifySpaceBetween,
+        ...Theme.presets.alignCenter,
+      },
+      closeButtonWrapper: {
+        alignSelf: 'center',
+        ...Theme.spacing.marginLeft('auto'),
+      },
+      title: {
+        ...Theme.presets.textCenter,
+        ...assignTextStyle('h3')(Theme).text,
+        ...Theme.spacing.paddingBottom(1),
+        flex: 1,
+      },
+    }
+  }),
+  popup: createModalStyle((theme) => ({})),
+  fullscreen: createModalStyle((theme) => ({
+    overlay: {
+      backgroundColor: theme.colors.background,
+    },
+    'overlay:visible': {
+      opacity: 1,
+    },
+    box: {
+      flex: 1,
+      borderRadius: 0,
+      width: theme.values.width,
+      height: theme.values.height,
+      ...theme.presets.center,
+    },
+  })),
+}

package/src/components/Navigation/Navigation.tsx

@@ -1,51 +1,58 @@
-// @ts-nocheck
-import * as React from 'react'
-import { 
-  TypeGuards, 
-} from '@codeleap/common'
-import { Icon } from '../Icon'
-import { NavigationProps, NavigatorType, PropTypes, TNavigators } from './types'
-import { Navigators } from './constants'
-
-
-export const Navigation = <T extends NavigatorType>({type, scenes,  ...props}: NavigationProps<T>) => {
-  const NavigationComponent = Navigators[type] as TNavigators[T]
-
-
-  return <NavigationComponent.Navigator {...(props as any)}>
-    {
-      Object.entries(scenes).map(([name, content], idx) => {
-        const isFunction = TypeGuards.isFunction(content)
- 
-        let screenProps = {
-          name,  
-        } as PropTypes[T]['Screen']
-        
-        if (isFunction){
-          screenProps.component = content
-        } else {
-          screenProps.component = content?.component?.default || content?.component  || content?.default
-          const nameParts = name.split('.')
-
-          screenProps = {
-            ...screenProps,
-            options: (optionProps) => ({
-              title: nameParts[nameParts.length - 1] || name.replace('.', ''),
-              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>, 
-              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps)  : content.options), 
-            }),
-          }
-        }
-
-        return (
-          // @ts-ignore
-          <NavigationComponent.Screen 
-            key={idx}
-            {...screenProps}
-                
-          />
-        )
-      })
-    }
-  </NavigationComponent.Navigator>
-}
+// @ts-nocheck
+import * as React from 'react'
+import {
+  TypeGuards,
+} from '@codeleap/common'
+import { Icon } from '../Icon'
+import { NavigationProps, NavigatorType, PropTypes, TNavigators } from './types'
+import { Navigators } from './constants'
+
+export const Navigation = <T extends NavigatorType>({ type, scenes, ...props }: NavigationProps<T>) => {
+  const NavigationComponent = Navigators[type] as TNavigators[T]
+
+  const defaultProps = {}
+  if (type === 'Tab') {
+    defaultProps.screenOptions = { headerShown: false }
+  }
+  // console.log('render Navigation', { type, scenes, props, defaultProps })
+
+  return <NavigationComponent.Navigator {...(props as any)} {...defaultProps}>
+    {
+      Object.entries(scenes).map(([name, content], idx) => {
+        const isFunction = TypeGuards.isFunction(content)
+
+        let screenProps = {
+          name,
+        } as PropTypes[T]['Screen']
+
+        if (isFunction) {
+          screenProps.component = content
+          // console.log('Render NavigationScreen', { scenes, screenProps, content, isFunction }, 'PACKAGES')
+        } else {
+          screenProps.component = content?.component?.default || content?.component || content?.default
+          const nameParts = name.split('.')
+          const title = content?.title || nameParts[nameParts.length - 1] || name.replace('.', '')
+
+          screenProps = {
+            ...screenProps,
+            options: (optionProps) => ({
+              title,
+              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>,
+              tabBarIconFocused: content?.iconFocused ? (style) => <Icon name={content?.iconFocused} style={style}/> : null,
+              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps) : content.options),
+            }),
+          }
+          // console.log('Render NavigationScreen loop', { scenes, screenProps, content, title, isFunction, props }, 'PACKAGES')
+        }
+
+        return (
+          // @ts-ignore
+          <NavigationComponent.Screen
+            key={idx}
+            {...screenProps}
+          />
+        )
+      })
+    }
+  </NavigationComponent.Navigator>
+}

package/src/components/Navigation/constants.ts

@@ -1,8 +1,8 @@
-// @ts-nocheck
-import { createBottomTabNavigator, createDrawerNavigator, createStackNavigator } from '../../modules/reactNavigation'
-
-export const Navigators = {
-  Drawer: createDrawerNavigator(),
-  Stack: createStackNavigator(),
-  Tab: createBottomTabNavigator(),
-}
+// @ts-nocheck
+import { createBottomTabNavigator, createDrawerNavigator, createStackNavigator } from '../../modules/reactNavigation'
+
+export const Navigators = {
+  Drawer: createDrawerNavigator(),
+  Stack: createStackNavigator(),
+  Tab: createBottomTabNavigator(),
+}

package/src/components/Navigation/index.tsx

@@ -1,3 +1,3 @@
-export * from './Navigation'
-export * from './types' 
-export * from './utils' 
+export * from './Navigation'
+export * from './types'
+export * from './utils'

package/src/components/Navigation/types.ts

@@ -1,37 +1,35 @@
-import { IconPlaceholder } from '@codeleap/common'
-import { Navigators } from './constants'
-
-
-export type TNavigators = typeof Navigators
-export type NavigatorType = keyof TNavigators
-
-export type PropTypes = {
-    [P in NavigatorType] : {
-        Screen: Omit<React.ComponentPropsWithRef<TNavigators[P]['Screen']>, 'children'|'name'>
-        Navigator: Omit<React.ComponentPropsWithRef<TNavigators[P]['Navigator']>, 'children'|'name'>
-        Group: Omit<React.ComponentPropsWithRef<TNavigators[P]['Group']>, 'children'|'name'>
-    }
-}
-export type SceneComponent<K extends NavigatorType> = PropTypes[K]['Screen']['component']
-export type SceneOptions<K extends NavigatorType> = 
-    { icon?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']  
-export type Scene<K extends NavigatorType> =  SceneComponent<K>  | SceneOptions<K>
-
-export type Scenes<K extends NavigatorType> = {
-    [x:string] : Scene<K>
-}
-
-export type SceneProps = any
-
-export type NavigationProps<T extends NavigatorType> = {
-    type: T
-    scenes: Scenes<T>
-} & PropTypes[T]['Navigator']
-
-
-// export type NavigationStructure  = {
-//     [module:string] : {
-//         scenes: Scenes,
-
-//     }
-// }
+import { IconPlaceholder } from '@codeleap/common'
+import { Navigators } from './constants'
+
+export type TNavigators = typeof Navigators
+export type NavigatorType = keyof TNavigators
+
+export type PropTypes = {
+    [P in NavigatorType] : {
+        Screen: Omit<React.ComponentPropsWithRef<TNavigators[P]['Screen']>, 'children'|'name'>
+        Navigator: Omit<React.ComponentPropsWithRef<TNavigators[P]['Navigator']>, 'children'|'name'>
+        Group: Omit<React.ComponentPropsWithRef<TNavigators[P]['Group']>, 'children'|'name'>
+    }
+}
+export type SceneComponent<K extends NavigatorType> = PropTypes[K]['Screen']['component']
+export type SceneOptions<K extends NavigatorType> =
+    { icon?: IconPlaceholder; default?:SceneComponent<K> } & PropTypes[K]['Screen']
+export type Scene<K extends NavigatorType> = SceneComponent<K> | SceneOptions<K>
+
+export type Scenes<K extends NavigatorType> = {
+    [x:string] : Scene<K>
+}
+
+export type SceneProps = any
+
+export type NavigationProps<T extends NavigatorType> = {
+    type: T
+    scenes: Scenes<T>
+} & PropTypes[T]['Navigator']
+
+// export type NavigationStructure  = {
+//     [module:string] : {
+//         scenes: Scenes,
+
+//     }
+// }

package/src/components/Navigation/utils.tsx

@@ -1,54 +1,59 @@
-import React  from 'react'
-import { Navigation } from './Navigation'
-
-export function createAppNavigation(Scenes:any ){
-  const AllScenes = Object.entries<any>(Scenes).reduce((allScenes, [moduleName, content]) =>  {
-     
-    const subScenes = []
-      
-    for (const [name, sceneContent] of Object.entries(content.scenes)){
-          
-      subScenes.push(
-        [`${moduleName}.${name}`, sceneContent], 
-      )
-    }
-      
-    return [
-      ...allScenes,
-      ...subScenes,
-    ]
-  }, [])
-      
-  const AppScenes = Object.fromEntries(AllScenes)
-      
-  const SCENES_RESULT = Object.fromEntries(
-    Object.entries<any>(Scenes)
-      .map(([S, { _ig_scenes, exclude, type, navigationProps,  ...otherProps }]) => {
-        let filterScenes = null
-      
-        if (exclude){
-          filterScenes = Object.fromEntries(
-            AllScenes.filter(([path]) => !exclude.some(param => path.startsWith(param))),
-          )
-        } 
-  
-        const Component = () => <Navigation 
-          type={type || 'Stack'} 
-          scenes={filterScenes || AppScenes} 
-          screenOptions={{
-            headerShown: false,
-            ...navigationProps?.screenOptions,
-          }}
-          {...navigationProps}
-        />
-        
-        return [S, {
-          ...otherProps,
-          component: Component,
-        }]
-      }),
-  )
-
-  return SCENES_RESULT
-}
-
+import React from 'react'
+import { Navigation } from './Navigation'
+
+export function createAppNavigation(Scenes:any) {
+
+  console.log('Creating app navigation', { Scenes }, 'PACKAGES')
+
+  const AllScenes = Object.entries<any>(Scenes).reduce((allScenes, [moduleName, content]) => {
+
+    const subScenes = []
+
+    for (const [name, sceneContent] of Object.entries(content.scenes)) {
+      subScenes.push(
+        [`${moduleName}.${name}`, sceneContent],
+      )
+    }
+
+    return [
+      ...allScenes,
+      ...subScenes,
+    ]
+  }, [])
+
+  const AppScenes = Object.fromEntries(AllScenes)
+
+  const SCENES_RESULT = Object.fromEntries(
+    Object.entries<any>(Scenes)
+      .map(([S, { _ig_scenes, exclude, type, navigationProps, ...otherProps }]) => {
+        let filterScenes = null
+
+        if (exclude) {
+          filterScenes = Object.fromEntries(
+            AllScenes.filter(([path]) => !exclude.some(param => path.startsWith(param))),
+          )
+        }
+
+        const Component = () => <Navigation
+          type={type || 'Stack'}
+          scenes={filterScenes || AppScenes}
+          screenOptions={{
+            headerShown: false,
+            ...navigationProps?.screenOptions,
+          }}
+          {...navigationProps}
+        />
+        // console.log('SCENES_RESULT create', { _ig_scenes, exclude, type, navigationProps, otherProps })
+
+        return [S, {
+          ...otherProps,
+          component: Component,
+        }]
+      }),
+  )
+
+  // console.log('SCENES_RESULT', SCENES_RESULT)
+
+  return SCENES_RESULT
+}
+