@codeleap/mobile 1.9.24 → 1.9.27

package/src/components/Navigation/Navigation.tsx

@@ -1,58 +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]
-
-  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>
-}
+// @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,35 +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']
-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']
+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,59 +1,59 @@
-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
-}
-
+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
+}
+

package/src/components/NewPager/index.tsx

@@ -0,0 +1,123 @@
+import {
+  ComponentVariants,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import React, {
+  ReactNode,
+} from 'react'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../../types/utility'
+import { View } from '../View'
+import { NewMobilePagerStyles, NewPagerComposition } from './styles'
+export * from './styles'
+
+type PageProps = {
+  isLast: boolean
+  isFirst: boolean
+  isActive: boolean
+  isNext: boolean
+  page: number
+  index: number
+  isPrevious: boolean
+}
+
+export type NewPagerProps = {
+  variants?: ComponentVariants<typeof NewMobilePagerStyles>['variants']
+  styles?: StylesOf<NewPagerComposition>
+  children?: (((pageData: PageProps) => ReactNode) | ReactNode)[]
+  page?: number
+  style?: any
+  setPage?: (page: number) => void
+  returnEarly?: boolean
+  renderPageWrapper?:React.FC<PageProps>
+  pageWrapperProps?: any
+}
+
+export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
+  const {
+
+    styles,
+    variants,
+    page,
+    style = {},
+    returnEarly = true,
+    renderPageWrapper,
+    pageWrapperProps = {},
+
+  } = pagerProps
+  let { children } = pagerProps
+  let variantStyles = useDefaultComponentStyle<'u:Pager', typeof NewMobilePagerStyles>(
+    'u:Pager',
+    {
+      styles,
+      transform: StyleSheet.flatten,
+      variants,
+    },
+  )
+  const nChildren = React.Children.count(children)
+
+  const lastPage = nChildren - 1
+
+  children = Array.isArray(children) ? children : [children]
+
+  const WrapperComponent = renderPageWrapper || View
+
+  // Reamimated seems to glitch if this is not done
+  variantStyles = JSON.parse(JSON.stringify(variantStyles))
+
+  return (
+    <View style={[variantStyles.wrapper, style]} >
+      {
+        children.map((child:NewPagerProps['children'][number], index) => {
+          const isActive = index === page
+          const isLast = index === lastPage
+          const isFirst = index === 0
+          const isNext = index === page + 1
+          const isPrevious = index === page - 1
+          const shouldRender = isActive || isNext || isPrevious
+
+          if (!shouldRender && returnEarly) return null
+          let pos = 0
+
+          if (isActive) {
+            pos = 1
+          } else if (index > page) {
+            pos = 2
+          } else {
+            pos = 0
+          }
+
+          const pageProps = {
+            isLast,
+            isActive,
+            isFirst,
+            isNext,
+            isPrevious,
+            index,
+            page,
+          }
+          console.log({
+            child,
+          })
+          const content = typeof child === 'function' ? child(pageProps) : child
+
+          const wrapperProps = {
+            key: index,
+            style: variantStyles.page,
+            animated: true,
+            transition: variantStyles['page:transition'],
+            animate: [variantStyles['page:previous'], variantStyles['page:current'], variantStyles['page:next']][pos],
+            ...pageWrapperProps,
+          }
+
+          return (
+            <WrapperComponent {...wrapperProps}>
+              {content}
+            </WrapperComponent>
+          )
+
+        })
+      }
+    </View>
+  )
+}

package/src/components/NewPager/styles.ts

@@ -0,0 +1,76 @@
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { Easing } from 'react-native'
+
+export type NewPagerComposition =
+  | 'page'
+  | 'page:transition'
+  | 'page:previous'
+  | 'page:next'
+  | 'page:current'
+  | 'wrapper'
+
+const createPagerStyle = createDefaultVariantFactory<NewPagerComposition>()
+
+const presets = includePresets((style) => createPagerStyle(() => ({ wrapper: style })),
+)
+export const defaultPagerTransition = {
+  type: 'timing',
+  duration: 300,
+  easing: Easing.linear,
+}
+
+export function pagerAnimation(height, width, translate = 'X', transition = defaultPagerTransition) {
+  const translateProp = `translate${translate}`
+
+  const translateVal = translate === 'X' ? width : height
+
+  return {
+    wrapper: {
+      height,
+      width,
+      overflow: 'hidden',
+    },
+    'page:transition': {
+      [translateProp]: transition,
+    },
+    'page:next': {
+      [translateProp]: translateVal,
+
+    },
+    'page:current': {
+      [translateProp]: 0,
+    },
+    'page:previous': {
+      [translateProp]: -translateVal,
+    },
+  }
+}
+
+export const NewMobilePagerStyles = {
+  ...presets,
+  default: createPagerStyle((theme) => ({
+    page: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0,
+    },
+  })),
+  horizontal: createPagerStyle((Theme) => {
+
+    const width = Theme.values.width
+    const height = Theme.values.height * 0.8
+    return pagerAnimation(height, width, 'X')
+  }),
+  vertical: createPagerStyle((Theme) => {
+    const height = Theme.values.height * 0.8
+    const width = Theme.values.width
+    return pagerAnimation(height, width, 'Y')
+  }),
+}