@codeleap/mobile 1.9.28 → 1.9.31

package/src/components/Backdrop.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import { ComponentVariants, onUpdate, PropsOf, useDefaultComponentStyle } from '@codeleap/common'
+import { useAnimationState, useDynamicAnimation } from 'moti'
+import { Touchable } from './Touchable'
+import { View } from './View'
+import {
+  createDefaultVariantFactory,
+  includePresets,
+} from '@codeleap/common'
+import { StylesOf } from '../types/utility'
+import { StyleSheet } from 'react-native'
+import { useStaticAnimationStyles } from '../utils/hooks'
+
+type BackdropComposition =
+ 'wrapper'|
+'touchable' |
+'wrapper:visible' |
+'wrapper:hidden'
+
+const createBackdropVariant = createDefaultVariantFactory<BackdropComposition>()
+
+const presets = includePresets((style) => createBackdropVariant(() => ({ wrapper: style })))
+
+export const BackdropStyles = {
+  ...presets,
+  default: createBackdropVariant((theme) => ({
+    wrapper: {
+      backgroundColor: theme.colors.black,
+      ...theme.presets.whole,
+      ...theme.presets.absolute,
+    },
+    'wrapper:visible': {
+      opacity: 0.5,
+    },
+    'wrapper:hidden': {
+
+      opacity: 0,
+    },
+    touchable: {
+      ...theme.presets.whole,
+      ...theme.presets.absolute,
+    },
+  })),
+}
+
+export type BackdropProps = PropsOf<typeof Touchable> & {
+    visible: boolean
+    wrapperProps?: PropsOf<typeof View>
+    variants?: ComponentVariants<typeof BackdropStyles>['variants']
+    styles?: StylesOf<BackdropComposition>
+}
+
+export const Backdrop = (backdropProps:BackdropProps) => {
+  const { variants = [], styles = {}, visible, children, wrapperProps = {}, ...props } = backdropProps
+
+  const variantStyles = useDefaultComponentStyle<'u:Backdrop', typeof BackdropStyles>('u:Backdrop', {
+    variants,
+    rootElement: 'wrapper',
+    styles,
+    transform: StyleSheet.flatten,
+  })
+
+  const animationStates = useStaticAnimationStyles(variantStyles, ['wrapper:hidden', 'wrapper:visible'])
+
+  const animation = useDynamicAnimation(() => {
+    return visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden']
+  })
+
+  onUpdate(() => {
+    animation.animateTo(visible ? animationStates['wrapper:visible'] : animationStates['wrapper:hidden'])
+  }, [visible, animationStates])
+
+  return <View pointerEvents={visible ? 'auto' : 'none' } animated style={variantStyles.wrapper} state={animation} {...wrapperProps}>
+    <Touchable feedbackVariant='none' style={variantStyles.touchable} {...props} />
+    {children}
+  </View>
+}

package/src/components/Button.tsx

@@ -6,6 +6,7 @@ import {
   ButtonComposition,
   ButtonParts,
   IconPlaceholder,
+  GetRefType,
 } from '@codeleap/common'
 import { forwardRef } from 'react'
 import { StylesOf } from '../types/utility'
@@ -13,7 +14,7 @@ import { Text } from './Text'
 import { Touchable, TouchableProps } from './Touchable'
 import { Icon } from './Icon'
 import { ActivityIndicator } from './ActivityIndicator'
-import { StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 type ChildProps = {
   styles: StylesOf<ButtonParts>
@@ -33,7 +34,7 @@ export type ButtonProps = Omit<TouchableProps, 'variants'> &
     children?: React.ReactNode | ((props: ChildProps) => React.ReactNode)
   }
 
-export const Button = forwardRef<TouchableOpacity, ButtonProps>((buttonProps, ref) => {
+export const Button = forwardRef<GetRefType<TouchableProps['ref']>, ButtonProps>((buttonProps, ref) => {
   const {
     variants = [],
     children,

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/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,13 +14,29 @@ import {
   // @ts-ignore
 } from 'react-native-keyboard-aware-scroll-view'
 
-import { RefreshControl, FlatList, FlatListProps as RNFlatListProps } from 'react-native'
+import { RefreshControl, FlatList, FlatListProps as RNFlatListProps, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from './View'
 import { EmptyPlaceholder, EmptyPlaceholderProps } from './EmptyPlaceholder'
-
-export type FlatListProps<T = any> = RNFlatListProps<T> &
+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
@@ -112,5 +129,27 @@ const ListCP = forwardRef<FlatList, FlatListProps>(
   },
 )
 
-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,11 +1,13 @@
 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,
 } from '@codeleap/common'
 import {
@@ -16,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'
 
@@ -32,7 +35,7 @@ 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
@@ -61,7 +64,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     ...props
   } = modalProps
 
-  const variantStyles = useDefaultComponentStyle('Modal', {
+  const variantStyles = useDefaultComponentStyle('u:Modal', {
     variants: variants as any,
     transform: StyleSheet.flatten,
     styles,
@@ -71,61 +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 = useDynamicAnimation(() => {
+    return visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden']
+  })
 
-  const boxAnimation = {
-    hidden: {
-      ...variantStyles['box:pose'],
-      ...styles['box:pose'],
-    },
-    visible: {
-      ...variantStyles['box:pose:visible'],
-      ...styles['box:pose:visible'],
-    },
-  }
-
-  const wrapperStyle = StyleSheet.flatten(getStyles('wrapper'))
+  onUpdate(() => {
+    boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
+  }, [visible])
+  const wrapperStyle = getStyles('wrapper')
   return (
-    <View
-      style={[wrapperStyle, { zIndex: typeof zIndex === 'number' ? zIndex : wrapperStyle?.zIndex }]}
-      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')}>
@@ -135,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}
@@ -153,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,51 +1,40 @@
 import {
+  assignTextStyle,
   ButtonComposition,
   createDefaultVariantFactory,
   includePresets,
-  ModalStyles,
-  assignTextStyle,
 } from '@codeleap/common'
 
-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 {
@@ -54,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',
@@ -77,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',

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>
   )
 }

package/src/components/Scroll.tsx

@@ -9,12 +9,14 @@ import {
 } from '@codeleap/common'
 
 import {
-  KeyboardAwareScrollViewProps,
   KeyboardAwareScrollView as KBDView,
   // @ts-ignore
 } from 'react-native-keyboard-aware-scroll-view'
 import { RefreshControl, ScrollView, ScrollViewProps, ViewStyle } from 'react-native'
 import { ViewProps } from './View'
+import { KeyboardAwareScrollViewTypes } from '../modules'
+
+type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
 
 export type ScrollProps = KeyboardAwareScrollViewProps &
   ViewProps & {