@codeleap/mobile 1.9.26 → 1.9.29

package/src/components/EmptyPlaceholder.tsx

@@ -0,0 +1,53 @@
+import React, { useMemo } from 'react'
+import { Icon } from './Icon'
+import { View } from './View'
+import { Text } from './Text'
+import { ActivityIndicator } from './ActivityIndicator'
+import {
+  ComponentVariants,
+  EmptyPlaceholderComposition,
+  EmptyPlaceholderStyles,
+  getNestedStylesByKey,
+  IconPlaceholder,
+  useDefaultComponentStyle,
+} from '@codeleap/common'
+import { StyleSheet } from 'react-native'
+import { StylesOf } from '../types/utility'
+
+export type EmptyPlaceholderProps = {
+  itemName?: string
+  title?: string
+  loading?: boolean
+  styles?: StylesOf<EmptyPlaceholderComposition>
+  variants?: ComponentVariants<typeof EmptyPlaceholderStyles>['variants']
+  emptyIconName?: IconPlaceholder
+}
+
+export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
+  const { itemName, title, loading, styles = {}, variants = [], emptyIconName = 'search' } = props
+  const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
+
+  const componentStyles = useDefaultComponentStyle('EmptyPlaceholder', {
+    variants,
+    transform: StyleSheet.flatten,
+    styles,
+  })
+
+  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
+    , [componentStyles])
+
+  if (loading) {
+    return (
+      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
+        <ActivityIndicator styles={activityIndicatorStyles}/>
+      </View>
+    )
+  }
+
+  return (
+    <View style={componentStyles.wrapper}>
+      <Icon name={emptyIconName as IconPlaceholder} style={componentStyles.icon}/>
+      <Text text={emptyText} style={componentStyles.text}/>
+    </View>
+  )
+}

package/src/components/FileInput.tsx

@@ -112,11 +112,11 @@ export const FileInput = forwardRef<
     if (warn) {
       // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
       logger.warn(err)
-      console.warn(err)
+
     } else {
       // NOTE yeah, it should not be both of course but just logger.* isn't showing for some reason
       logger.error(err)
-      console.warn(err)
+
       if (onError) {
         onError(err)
       } else {

package/src/components/Gap.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useCodeleapContext } from '@codeleap/common'
+import { View, ViewProps } from './View'
+
+type GapProps = ViewProps & {
+    value: number
+
+    defaultProps?: any
+}
+
+export const Gap:React.FC<GapProps> = ({ children, value, defaultProps = {}, ...props }) => {
+  const { Theme } = useCodeleapContext()
+  const horizontal = props.variants?.includes('row')
+  return (
+    <View {...props}>
+      {
+        React.Children.toArray(children).map((Element, idx, childArr) => {
+          if (React.isValidElement(Element)) {
+            const props = { ...Element.props, ...defaultProps }
+
+            let spacingFunction = horizontal ? 'marginHorizontal' : 'marginVertical'
+            switch (idx) {
+              case 0:
+                spacingFunction = horizontal ? 'marginRight' : 'marginBottom'
+                break
+              case childArr.length - 1:
+                spacingFunction = horizontal ? 'marginLeft' : 'marginTop'
+                break
+              default:
+                break
+            }
+            props.style = [props.style, Theme.spacing[spacingFunction](value / 2)]
+            return React.cloneElement(Element, props)
+          }
+          return Element
+        })
+      }
+    </View>
+  )
+}

package/src/components/Image.tsx

@@ -11,6 +11,7 @@ import {
   Image as NativeImage,
   ImageStyle,
   StyleProp,
+  StyleSheet,
   TextStyle,
   ViewStyle,
 } from 'react-native'
@@ -35,14 +36,14 @@ export const ImageComponent: React.FC<ImageProps> = (props) => {
 
   const variantStyles = useDefaultComponentStyle('Image', { variants })
 
-  const styles = [variantStyles.wrapper, style]
+  const styles = StyleSheet.flatten([variantStyles.wrapper, style])
 
   if (fast) {
     return (
       <FastImage
         style={styles}
         // @ts-ignore
-        tintColor={style?.tintColor}
+        tintColor={styles?.tintColor}
         resizeMode={FastImage.resizeMode[resizeMode || 'contain']}
         {...imageProps}
       />

package/src/components/List.tsx

@@ -6,6 +6,7 @@ import {
   useDefaultComponentStyle,
   usePrevious,
   useCodeleapContext,
+  TypeGuards,
 } from '@codeleap/common'
 import {
 
@@ -13,18 +14,36 @@ import {
   // @ts-ignore
 } from 'react-native-keyboard-aware-scroll-view'
 
-import { RefreshControl, FlatList } from 'react-native'
+import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from './View'
-
-type RNFlatListProps<T = any> = FlatList<T>['props']
-export type FlatListProps<T = any> = RNFlatListProps<T> &
+import { EmptyPlaceholder, EmptyPlaceholderProps } from './EmptyPlaceholder'
+import { ActivityIndicator } from './ActivityIndicator'
+import { Text } from './Text'
+export type DataboundFlatListPropsTypes = 'data' | 'renderItem' | 'keyExtractor' | 'getItemLayout'
+
+export type ReplaceFlatlistProps<P, T> = Omit<P, DataboundFlatListPropsTypes> & {
+  data: T[]
+  keyExtractor?: (item: T, index: number) => string
+  renderItem: (data: ListRenderItemInfo<T>) => React.ReactElement
+  onRefresh?: () => void
+  getItemLayout?: ((
+    data:T,
+    index: number,
+) => { length: number; offset: number; index: number })
+}
+
+export type FlatListProps<
+  T = any[],
+  Data = T extends Array<infer D> ? D : never
+> =RNFlatListProps<Data> &
   ViewProps & {
-    onRefresh?: () => void
     refreshTimeout?: number
     changeData?: any
     separators?: boolean
     refreshing?: boolean
+    placeholder?: EmptyPlaceholderProps
     keyboardAware?: boolean
+
   }
 
 const KeyboardAwareFlatList =
@@ -42,6 +61,7 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
       style,
       refreshTimeout = 3000,
       changeData,
+      placeholder,
       keyboardAware = true,
       ...props
     } = flatListProps
@@ -102,10 +122,34 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
             <RefreshControl refreshing={refreshingDisplay} onRefresh={onRefresh} />
           )
         }
+        ListEmptyComponent={<EmptyPlaceholder {...placeholder}/>}
         {...props}
       />
     )
   },
 )
 
-export const List = ListCP as (<T = any>(props: FlatListProps<T>) => JSX.Element)
+export type PaginationIndicatorProps = {
+  isFetching?: boolean
+  hasMore?: boolean
+  noMoreItemsText: React.ReactChild
+  activityIndicator?: JSX.Element
+}
+
+export const PaginationIndicator = ({ hasMore, isFetching, noMoreItemsText, activityIndicator }: PaginationIndicatorProps) => {
+  if (isFetching) {
+    return activityIndicator || <ActivityIndicator variants={['center', 'marginVertical:3']}/>
+  }
+  if (!hasMore) {
+    if (TypeGuards.isString(noMoreItemsText) || TypeGuards.isNumber(noMoreItemsText)) {
+      return <Text variants={['h4', 'marginVertical:3', 'textCenter', 'fullWidth']} text={noMoreItemsText.toString()}/>
+    }
+    return noMoreItemsText
+  }
+  return null
+}
+
+export type ListComponentType = <T extends any[] = any[]>(props: FlatListProps<T>) => React.ReactElement
+
+export const List = ListCP as ListComponentType
+

package/src/components/Modal/index.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
-import { View, ViewProps, AnimatedView } from '../View'
+import { View, ViewProps } from '../View'
 import { Button, ButtonProps } from '../Button'
 import { Scroll } from '../Scroll'
 import {
-  capitalize,
   ComponentVariants,
+  getNestedStylesByKey,
   IconPlaceholder,
   onUpdate,
+  TypeGuards,
   useDefaultComponentStyle,
-  useCodeleapContext,
 } from '@codeleap/common'
 import {
   MobileModalComposition,
@@ -18,9 +18,10 @@ import {
 import { StyleSheet } from 'react-native'
 import { StylesOf } from '../../types/utility'
 
-import { Touchable } from '../Touchable'
+import { useDynamicAnimation } from 'moti'
+import { Backdrop } from '../Backdrop'
+import { useStaticAnimationStyles } from '../../utils/hooks'
 import { Text } from '../Text'
-import { Animated } from '../Animated'
 
 export * from './styles'
 
@@ -34,10 +35,11 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   closable?: boolean
   footer?: React.ReactNode
   title?: React.ReactNode
-  debugName?: string
+  debugName: string
   closeIconName?: IconPlaceholder
   visible: boolean
   toggle?: () => void
+  zIndex?: number
   scroll?: boolean
   keyboardAware?: boolean
 }
@@ -58,10 +60,11 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     debugName,
     scroll = true,
     keyboardAware = true,
+    zIndex = null,
     ...props
   } = modalProps
 
-  const variantStyles = useDefaultComponentStyle('Modal', {
+  const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
     styles,
@@ -71,60 +74,46 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     const s = [
       variantStyles[key],
       styles[key],
-      visible ? variantStyles[key + ':visible'] : {},
-      visible ? styles[key + ':visible'] : {},
     ]
 
-    return s
+    return StyleSheet.flatten(s)
   }
+  const buttonStyles = React.useMemo(() => getNestedStylesByKey('closeButton', variantStyles), [variantStyles])
 
-  const buttonStyles = React.useMemo(() => {
-    const buttonEntries = {}
+  const boxAnimationStates = useStaticAnimationStyles(variantStyles, ['box:hidden', 'box:visible'])
 
-    for (const [key, style] of Object.entries(variantStyles)) {
-      if (key.startsWith('closeButton')) {
-        buttonEntries[capitalize(key.replace('closeButton', ''), true)] = style
-      }
-    }
-    return buttonEntries
-  }, [variantStyles])
-
-  const boxAnimation = {
-    hidden: {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible: {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    },
-  }
+  const boxAnimation = useDynamicAnimation(() => {
+    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  })
 
+  onUpdate(() => {
+    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
+  }, [visible])
+  const wrapperStyle = getStyles('wrapper')
   return (
-    <View
-      style={getStyles('wrapper')}
-      pointerEvents={visible ? 'auto' : 'none'}
-    >
-      <AnimatedView style={getStyles('overlay')} transition={'opacity'} />
+    <View style={[wrapperStyle, { zIndex: TypeGuards.isNumber(zIndex) ? zIndex : wrapperStyle?.zIndex }]} pointerEvents={visible ? 'auto' : 'none'}>
+
       <Scroll
         style={getStyles('innerWrapper')}
         contentContainerStyle={getStyles('innerWrapperScroll')}
         scrollEnabled={scroll}
         keyboardAware={keyboardAware}
       >
-        {dismissOnBackdrop && (
-          <Touchable
-            debugName={`${debugName} modal backdrop`}
-            activeOpacity={1}
-            onPress={() => toggle()}
-            style={getStyles('touchableBackdrop')}
-          />
-        )}
-        <Animated
-          component='View'
-          config={boxAnimation}
-          pose={visible ? 'visible' : 'hidden'}
+        <Backdrop visible={visible} debugName={`Modal ${debugName} backdrop`} styles={{
+          'wrapper:hidden': variantStyles['backdrop:hidden'],
+          'wrapper:visible': variantStyles['backdrop:visible'],
+          wrapper: variantStyles.backdrop,
+        }} onPress={(dismissOnBackdrop && closable) ? toggle : (() => {})}
+        wrapperProps={{
+          transition: { ...variantStyles['backdrop:transition'] },
+        }}
+        />
+        <View
+          animated
+          state={boxAnimation}
           style={getStyles('box')}
+          transition={{ ...variantStyles['box:transition'] }}
+          {...props}
         >
           {(title || showClose) && (
             <View style={getStyles('header')}>
@@ -134,7 +123,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
                 title
               )}
 
-              {showClose && closable && (
+              {(showClose && closable) && (
                 <Button
                   debugName={`${debugName} modal close button`}
                   icon={closeIconName as IconPlaceholder}
@@ -152,9 +141,10 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
               {typeof footer === 'string' ? <Text text={footer} /> : footer}
             </View>
           )}
-        </Animated>
+        </View>
       </Scroll>
     </View>
+
   )
 }
 

package/src/components/Modal/styles.ts

@@ -1,58 +1,40 @@
 import {
+  assignTextStyle,
   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 AnimatableParts = 'box' | 'backdrop'
 
 export type MobileModalParts =
+  | AnimatableParts
   | 'wrapper'
-  | 'overlay'
   | 'innerWrapper'
   | 'innerWrapperScroll'
-  | 'box'
-  | 'footer'
   | 'body'
+  | 'footer'
   | 'header'
-  | 'touchableBackdrop'
-  | 'box:pose'
   | 'title'
   | `closeButton${Capitalize<ButtonComposition>}`
 
 export type MobileModalComposition =
   | MobileModalParts
-  | `${MobileModalParts}:visible`
+  | `${AnimatableParts}:visible`
+  | `${AnimatableParts}:hidden`
+  | `${AnimatableParts}:transition`
 
 const createModalStyle = createDefaultVariantFactory<MobileModalComposition>()
 
-const presets = includePresets((style) => createModalStyle(() => ({ body: style })),
-)
-
-const defaultModalStyles = ModalStyles
+const presets = includePresets((style) => createModalStyle(() => ({ body: style })))
 
 export const MobileModalStyles = {
-  ...defaultModalStyles,
+
   ...presets,
   default: createModalStyle((Theme) => {
     const fullSize = {
       ...Theme.presets.whole,
       position: 'absolute',
-      width: Theme?.values?.width,
-      height: Theme?.values?.height,
     }
 
     return {
@@ -61,16 +43,34 @@ export const MobileModalStyles = {
 
         ...fullSize,
       },
-
-      overlay: {
-        opacity: 0,
+      'box:transition': {
+        scale: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+        opacity: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      'backdrop:transition': {
+        opacity: {
+          duration: Theme.values.transitions.modal.duration,
+          type: 'timing',
+        },
+      },
+      backdrop: {
 
         backgroundColor: Theme.colors.black,
         ...fullSize,
       },
-      'overlay:visible': {
+
+      'backdrop:visible': {
         opacity: 0.5,
       },
+      'backdrop:hidden': {
+        opacity: 0,
+      },
       innerWrapper: {},
       innerWrapperScroll: {
         display: 'flex',
@@ -84,18 +84,15 @@ export const MobileModalStyles = {
         borderRadius: Theme.borderRadius.medium,
         ...Theme.spacing.padding(2),
       },
-      touchableBackdrop: {
-        ...fullSize,
-      },
-      'box:pose': {
+
+      'box:hidden': {
         opacity: 0,
         scale: 0.8,
-        transition: modalTransition,
+
       },
-      'box:pose:visible': {
+      'box:visible': {
         opacity: 1,
         scale: 1,
-        transition: modalTransition,
       },
       header: {
         flexDirection: 'row',
@@ -114,7 +111,7 @@ export const MobileModalStyles = {
       },
     }
   }),
-  popup: createModalStyle((theme) => ({})),
+  popup: createModalStyle(() => ({})),
   fullscreen: createModalStyle((theme) => ({
     overlay: {
       backgroundColor: theme.colors.background,

package/src/components/NewPager/index.tsx

@@ -43,9 +43,9 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
     returnEarly = true,
     renderPageWrapper,
     pageWrapperProps = {},
-
+    children,
   } = pagerProps
-  let { children } = pagerProps
+
   let variantStyles = useDefaultComponentStyle<'u:Pager', typeof NewMobilePagerStyles>(
     'u:Pager',
     {
@@ -58,7 +58,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
 
   const lastPage = nChildren - 1
 
-  children = Array.isArray(children) ? children : [children]
+  const childArr = React.Children.toArray(children)
 
   const WrapperComponent = renderPageWrapper || View
 
@@ -68,7 +68,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
   return (
     <View style={[variantStyles.wrapper, style]} >
       {
-        children.map((child:NewPagerProps['children'][number], index) => {
+        childArr.map((child:NewPagerProps['children'][number], index) => {
           const isActive = index === page
           const isLast = index === lastPage
           const isFirst = index === 0
@@ -96,9 +96,7 @@ export const NewPager:React.FC<NewPagerProps> = (pagerProps) => {
             index,
             page,
           }
-          console.log({
-            child,
-          })
+
           const content = typeof child === 'function' ? child(pageProps) : child
 
           const wrapperProps = {

package/src/components/Overlay.tsx

@@ -2,6 +2,7 @@ import * as React from 'react'
 import {
   ComponentVariants,
   IconPlaceholder,
+  onUpdate,
   OverlayComposition,
   OverlayStyles,
   useDefaultComponentStyle,
@@ -13,7 +14,8 @@ import { Button } from './Button'
 import { View } from './View'
 import { StylesOf } from '../types/utility'
 import { StyleSheet, ViewProps } from 'react-native'
-import { AnimatedTouchable } from './Touchable'
+import { AnimatedTouchable, Touchable } from './Touchable'
+import { useAnimationState } from 'moti'
 
 export type OverlayProps = ViewProps & {
   title?: ReactNode
@@ -43,21 +45,28 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
     variants: variants as any,
   }) as StylesOf<OverlayComposition>
 
-  const touchableStyle = [
+  const animation = useAnimationState({
+    visible: variantStyles['wrapper:visible'],
+    hidden: styles['wrapper:visible'],
+  })
+
+  onUpdate(() => {
+    animation.transitionTo(visible ? 'visible' : 'hidden')
+  }, [visible])
+
+  const viewStyles = [
     variantStyles.wrapper,
     styles.wrapper,
-    visible && variantStyles['wrapper:visible'],
-    visible && styles['wrapper:visible'],
   ]
 
   return (
-    <AnimatedTouchable
-      // @ts-ignore
-      transition={'opacity'}
-      style={touchableStyle}
-      {...props}
-    >
-      <View>
+    <View animated state={animation} style={viewStyles}>
+      <Touchable
+
+        feedbackVariant='none'
+        variants={['whole', 'full', 'absolute']}
+        {...props}
+      >
         {(title || showClose) && (
           <View style={variantStyles.header}>
             <InputLabel style={variantStyles.title} label={title} />
@@ -71,7 +80,7 @@ export const Overlay: React.FC<OverlayProps> = (overlayProps) => {
             )}
           </View>
         )}
-      </View>
-    </AnimatedTouchable>
+      </Touchable>
+    </View>
   )
 }