@codeleap/mobile 1.4.0 → 1.5.0

package/src/components/List.tsx

@@ -16,17 +16,17 @@ import { View, ViewProps } from './View'
 
 export type FlatListProps = KeyboardAwareFlatListProps<any> &
   ViewProps & {
-    onRefresh?: () => void;
-    refreshTimeout?: number;
-    changeData?: any;
-    separators?: boolean;
-  };
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+  }
 
 const KeyboardAwareFlatList =
   KBDView as unknown as React.ForwardRefExoticComponent<
     ViewProps & {
-      refreshControl?: JSX.Element;
-      ref?: FlatList;
+      refreshControl?: JSX.Element
+      ref?: FlatList
     }
   >
 

package/src/components/Modal/index.tsx

@@ -25,21 +25,21 @@ import { Animated } from '../Animated'
 export * from './styles'
 
 export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
-  variants?: ComponentVariants<typeof MobileModalStyles>['variants'];
-  styles?: StylesOf<MobileModalComposition>;
-  dismissOnBackdrop?: boolean;
-  buttonProps?: ButtonProps;
-  accessible?: boolean;
-  showClose?: boolean;
-  closable?: boolean;
-  footer?: React.ReactNode;
-  title?: React.ReactNode;
-  debugName?: string;
-  closeIconName?: IconPlaceholder;
-  visible: boolean;
-  toggle?: () => void;
-  scroll?: boolean;
-};
+  variants?: ComponentVariants<typeof MobileModalStyles>['variants']
+  styles?: StylesOf<MobileModalComposition>
+  dismissOnBackdrop?: boolean
+  buttonProps?: ButtonProps
+  accessible?: boolean
+  showClose?: boolean
+  closable?: boolean
+  footer?: React.ReactNode
+  title?: React.ReactNode
+  debugName?: string
+  closeIconName?: IconPlaceholder
+  visible: boolean
+  toggle?: () => void
+  scroll?: boolean
+}
 
 export const Modal: React.FC<ModalProps> = (modalProps) => {
   const {

package/src/components/Modal/styles.ts

@@ -31,11 +31,11 @@ export type MobileModalParts =
   | 'touchableBackdrop'
   | 'box:pose'
   | 'title'
-  | `closeButton${Capitalize<ButtonComposition>}`;
+  | `closeButton${Capitalize<ButtonComposition>}`
 
 export type MobileModalComposition =
   | MobileModalParts
-  | `${MobileModalParts}:visible`;
+  | `${MobileModalParts}:visible`
 
 const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
 
@@ -114,5 +114,20 @@ export const MobileModalStyles = {
       },
     }
   }),
-  popup: createModalStyle((Theme) => ({})),
+  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,48 +1,55 @@
 // @ts-nocheck
 import * as React from 'react'
-import { 
-  TypeGuards, 
+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>) => {
+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)}>
+  return <NavigationComponent.Navigator {...(props as any)} {...defaultProps}>
     {
       Object.entries(scenes).map(([name, content], idx) => {
         const isFunction = TypeGuards.isFunction(content)
- 
+
         let screenProps = {
-          name,  
+          name,
         } as PropTypes[T]['Screen']
-        
-        if (isFunction){
+
+        if (isFunction) {
           screenProps.component = content
+          // console.log('Render NavigationScreen', { scenes, screenProps, content, isFunction }, 'PACKAGES')
         } else {
-          screenProps.component = content?.component?.default || content?.component  || content?.default
+          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: nameParts[nameParts.length - 1] || name.replace('.', ''),
-              tabBarIcon: (style) => <Icon name={content?.icon} style={style}/>, 
-              ...(TypeGuards.isFunction(content.options) ? content.options(optionProps)  : content.options), 
+              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 
+          <NavigationComponent.Screen
             key={idx}
             {...screenProps}
-                
           />
         )
       })

package/src/components/Navigation/index.tsx

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

package/src/components/Navigation/types.ts

@@ -1,7 +1,6 @@
 import { IconPlaceholder } from '@codeleap/common'
 import { Navigators } from './constants'
 
-
 export type TNavigators = typeof Navigators
 export type NavigatorType = keyof TNavigators
 
@@ -13,9 +12,9 @@ export type PropTypes = {
     }
 }
 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 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>
@@ -28,7 +27,6 @@ export type NavigationProps<T extends NavigatorType> = {
     scenes: Scenes<T>
 } & PropTypes[T]['Navigator']
 
-
 // export type NavigationStructure  = {
 //     [module:string] : {
 //         scenes: Scenes,

package/src/components/Navigation/utils.tsx

@@ -1,47 +1,50 @@
-import React  from 'react'
+import React from 'react'
 import { Navigation } from './Navigation'
 
-export function createAppNavigation(Scenes:any ){
-  const AllScenes = Object.entries<any>(Scenes).reduce((allScenes, [moduleName, content]) =>  {
-     
+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)){
-          
+
+    for (const [name, sceneContent] of Object.entries(content.scenes)) {
       subScenes.push(
-        [`${moduleName}.${name}`, sceneContent], 
+        [`${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 }]) => {
+      .map(([S, { _ig_scenes, exclude, type, navigationProps, ...otherProps }]) => {
         let filterScenes = null
-      
-        if (exclude){
+
+        if (exclude) {
           filterScenes = Object.fromEntries(
             AllScenes.filter(([path]) => !exclude.some(param => path.startsWith(param))),
           )
-        } 
-  
-        const Component = () => <Navigation 
-          type={type || 'Stack'} 
-          scenes={filterScenes || AppScenes} 
+        }
+
+        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,
@@ -49,6 +52,8 @@ export function createAppNavigation(Scenes:any ){
       }),
   )
 
+  // console.log('SCENES_RESULT', SCENES_RESULT)
+
   return SCENES_RESULT
 }
 

package/src/components/Overlay.tsx

@@ -16,14 +16,14 @@ import { StyleSheet, ViewProps } from 'react-native'
 import { AnimatedTouchable } from './Touchable'
 
 export type OverlayProps = ViewProps & {
-  title?: ReactNode;
-  visible?: boolean;
-  showClose?: boolean;
-  variants?: ComponentVariants<typeof OverlayStyles>;
-  styles?: StylesOf<OverlayComposition>;
-  style?: any;
-  onPress?: () => void;
-} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>;
+  title?: ReactNode
+  visible?: boolean
+  showClose?: boolean
+  variants?: ComponentVariants<typeof OverlayStyles>
+  styles?: StylesOf<OverlayComposition>
+  style?: any
+  onPress?: () => void
+} & React.ComponentPropsWithoutRef<typeof AnimatedTouchable>
 
 export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
   const {
@@ -66,6 +66,7 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
                 variants={['icon']}
                 icon={'close' as IconPlaceholder}
                 style={variantStyles.closeButton}
+                debugName={'Close icon'}
               />
             )}
           </View>

package/src/components/Pager/index.tsx

@@ -23,20 +23,19 @@ import { MobilePagerStyles, PagerComposition } from './styles'
 export * from './styles'
 
 export type PagerProps = {
-  variants?: ComponentVariants<typeof MobilePagerStyles>['variants'];
-  styles?: StylesOf<PagerComposition>;
-  page?: number;
-  loop?: boolean;
-  debug?: boolean;
-  onPageChange?: (page: number) => void;
-};
+  variants?: ComponentVariants<typeof MobilePagerStyles>['variants']
+  styles?: StylesOf<PagerComposition>
+  page?: number
+  loop?: boolean
+  debug?: boolean
+  onPageChange?: (page: number) => void
+}
 
 export type PagerRef = {
-  forward(by?: number): void;
-  back(by?: number): void;
-  to(index?: number): void;
-};
-
+  forward(by?: number): void
+  back(by?: number): void
+  to(index?: number): void
+}
 
 export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
   const {
@@ -107,7 +106,7 @@ export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
       setPage(propPage)
     }
   }, [propPage])
-  
+
   useImperativeHandle(ref, () => pagerRef.current)
 
   const pagePoses = useMemo(() => {
@@ -138,9 +137,9 @@ export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
           variants={['absolute']}
           style={{ bottom: 0, left: 0, right: 0 }}
         >
-          <Button text='previous' onPress={pagerRef.current.back} />
+          <Button text='previous' debugName='Previous Pager' onPress={pagerRef.current.back} />
           <Text text={page.toString()} />
-          <Button text='next' onPress={pagerRef.current.forward} />
+          <Button text='next' debugName='Next Pager' onPress={pagerRef.current.forward} />
         </View>
       )}
     </View>
@@ -148,12 +147,12 @@ export const Pager = forwardRef<PagerRef, PagerProps>((pagerProps, ref) => {
   )
 })
 type PageProps = PagerProps & {
-  idx: number;
-  lastPage: number;
-  page: number;
-  pagePoses: any;
-  style: any;
-};
+  idx: number
+  lastPage: number
+  page: number
+  pagePoses: any
+  style: any
+}
 const Page: React.FC<PageProps> = (pageProps) => {
   const {
     children: child,

package/src/components/Pager/styles.ts

@@ -9,7 +9,7 @@ export type PagerComposition =
   | 'page:pose:previous'
   | 'page:pose:next'
   | 'page:pose:current'
-  | 'wrapper';
+  | 'wrapper'
 
 const createPagerStyle = createDefaultVariantFactory<PagerComposition>()
 

package/src/components/RadioInput/index.tsx

@@ -15,9 +15,9 @@ import { MobileRadioInputStyles, MobileRadioInputComposition } from './styles'
 export * from './styles'
 
 type RadioItem<T extends unknown = any> = {
-  value: T;
-  label: ReactNode;
-};
+  value: T
+  label: ReactNode
+}
 
 const getRadioStyle = (props) => useDefaultComponentStyle('RadioInput', props)
 
@@ -25,20 +25,20 @@ export type RadioButtonProps = Omit<
   ComponentPropsWithoutRef<typeof Touchable>,
   'style'
 > & {
-  item: RadioItem;
-  select: () => void;
-  style: StylesOf<MobileRadioInputComposition>;
-  checked: boolean;
-  defaultValue?: number;
-};
+  item: RadioItem
+  select: () => void
+  style: StylesOf<MobileRadioInputComposition>
+  checked: boolean
+  defaultValue?: number
+}
 
 export type RadioGroupProps<T> = {
-  options: RadioItem<T>[];
-  value: T;
-  onValueChange(value: T): void;
-  label: ReactNode;
-  styles?: StylesOf<MobileRadioInputComposition>;
-} & ComponentVariants<typeof MobileRadioInputStyles>;
+  options: RadioItem<T>[]
+  value: T
+  onValueChange(value: T): void
+  label: ReactNode
+  styles?: StylesOf<MobileRadioInputComposition>
+} & ComponentVariants<typeof MobileRadioInputStyles>
 
 export const RadioButton: React.FC<RadioButtonProps> = ({
   item,
@@ -48,7 +48,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
   ...props
 }) => {
   return (
-    <Touchable onPress={select} style={style.itemWrapper}>
+    <Touchable onPress={select} style={style.itemWrapper} debugName={'Change radioButton value'}>
       <View style={[style.button, checked && style['button:checked']]}>
         <View
           style={[style.buttonMark, checked && style['buttonMark:checked']]}
@@ -87,6 +87,7 @@ export const RadioGroup = <T extends unknown>(
       <View style={radioStyle.listWrapper}>
         {options?.map((item, idx) => (
           <RadioButton
+            debugName={'RadioButton'}
             item={item}
             key={idx}
             style={radioStyle}

package/src/components/RadioInput/styles.ts

@@ -2,14 +2,14 @@ import {
   createDefaultVariantFactory,
   RadioInputStyles,
 } from '@codeleap/common'
-type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark';
+type RadioParts = 'button' | 'itemWrapper' | 'text' | 'buttonMark'
 
-type RadioGroupParts = 'label' | 'wrapper' | 'list';
+type RadioGroupParts = 'label' | 'wrapper' | 'list'
 
 export type MobileRadioInputComposition =
   | `${RadioParts}:checked`
   | RadioParts
-  | RadioGroupParts;
+  | RadioGroupParts
 
 const createRadioStyle =
   createDefaultVariantFactory<MobileRadioInputComposition>()

package/src/components/Scroll.tsx

@@ -16,18 +16,18 @@ import { ViewProps } from './View'
 
 export type ScrollProps = KeyboardAwareScrollViewProps &
   ViewProps & {
-    onRefresh?: () => void;
-    refreshTimeout?: number;
-    changeData?: any;
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
     styles?: ViewStyle
-  };
+  }
 
 const KeyboardAwareScrollView =
   KBDView as unknown as React.ForwardRefExoticComponent<
     ViewProps & {
-      refreshControl?: JSX.Element;
-      ref?: ScrollView;
-     
+      refreshControl?: JSX.Element
+      ref?: ScrollView
+
     } & ScrollViewProps
   >
 

package/src/components/Sections.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import { forwardRef, useState } from 'react'
+import {
+  deepEqual,
+  onUpdate,
+  useDefaultComponentStyle,
+  usePrevious,
+  useCodeleapContext,
+} from '@codeleap/common'
+import {
+  KeyboardAwareSectionListProps,
+  KeyboardAwareSectionList as KBDView,
+} from 'react-native-keyboard-aware-scroll-view'
+import { RefreshControl, SectionList } from 'react-native'
+import { View, ViewProps } from './View'
+
+export type SectionListProps = KeyboardAwareSectionListProps<any> &
+  ViewProps & {
+    onRefresh?: () => void
+    refreshTimeout?: number
+    changeData?: any
+    separators?: boolean
+  }
+
+const KeyboardAwareSectionList =
+  KBDView as unknown as React.ForwardRefExoticComponent<
+    ViewProps & {
+      refreshControl?: JSX.Element
+      ref?: SectionList
+    }
+  >
+
+export const Sections = forwardRef<SectionList, SectionListProps>(
+  (flatListProps, ref) => {
+    const {
+      variants = [],
+      style,
+      refreshTimeout = 3000,
+      changeData,
+      ...props
+    } = flatListProps
+    const hasRefresh = !!props.onRefresh
+    const [refreshing, setRefreshing] = useState(false)
+
+    const timer = React.useRef(null)
+    const previousData = usePrevious(changeData)
+
+    const onRefresh = () => {
+      if (timer.current) {
+        clearTimeout(timer.current)
+      }
+
+      setRefreshing(true)
+
+      props.onRefresh()
+
+      timer.current = setTimeout(() => {
+        setRefreshing(false)
+      }, refreshTimeout)
+    }
+    onUpdate(() => {
+      if (refreshing && !deepEqual(previousData, changeData)) {
+        setRefreshing(false)
+        if (timer.current) {
+          clearTimeout(timer.current)
+        }
+      }
+    }, [refreshing, changeData])
+    const { Theme } = useCodeleapContext()
+
+    const variantStyles = useDefaultComponentStyle('View', {
+      variants,
+    })
+
+    const renderSeparator = () => {
+      return (
+        <View variants={['separator']}></View>
+      )
+    }
+
+    const separatorProp = props.separators
+    const isEmpty = !props.data || !props.data.length
+    const separator = !isEmpty && separatorProp == true && renderSeparator
+
+    return (
+      <KeyboardAwareSectionList
+        style={[Theme.presets.full, style]}
+        contentContainerStyle={[variantStyles.wrapper]}
+        ref={ref as unknown as SectionList}
+        ItemSeparatorComponent={separator}
+        {...props}
+        refreshControl={
+          hasRefresh && (
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          )
+        }
+      />
+    )
+  },
+)