@codeleap/mobile 2.2.1 → 2.2.4

package/src/components/AutoComplete/index.tsx

@@ -4,6 +4,7 @@ import { ComponentVariants,
   getNestedStylesByKey,
   IconPlaceholder,
   onUpdate,
+  PropsOf,
   ReactStateProps,
   TypeGuards,
   useDebounce,
@@ -21,7 +22,9 @@ import { StyleSheet } from 'react-native'
 import { Text } from '../Text'
 import { Button } from '../Button'
 
-export type AutoCompleteHeaderProps = ReactStateProps<'search', string> & {
+export type AutoCompleteHeaderProps = ReactStateProps<'search', string> &
+  Omit<PropsOf<typeof View>, 'style'|'styles'|'variants'>
+& {
     label: FormTypes.Label
     searchInputProps?: Partial<TextInputProps>
     styles: ModalHeaderProps['styles'] & { searchInput?: TextInputProps['styles']; titleWrapper?:ViewProps['style']}
@@ -31,9 +34,9 @@ export type AutoCompleteHeaderProps = ReactStateProps<'search', string> & {
   }
 
 export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
-  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps } = props
+  const { search, setSearch, icon = 'search', debugName, label, styles, toggle, searchInputProps, ...viewProps } = props
 
-  return <View style={[styles.wrapper]}>
+  return <View style={[styles.wrapper]} {...viewProps}>
     <View style={styles.titleWrapper}>
       <Text style={styles.title} text={label}/>
       <Button
@@ -42,7 +45,7 @@ export const AutoCompleteHeader:React.FC<AutoCompleteHeaderProps> = (props) => {
         onPress={toggle} variants={['icon']}
         styles={styles.closeButton}/>
     </View>
-    <TextInput leftIcon={{
+    <TextInput subtitle={() => null} leftIcon={{
       icon: icon as IconPlaceholder,
     }} debugName={`AutoComplete ${debugName} search input`} value={search} onChangeText={setSearch} styles={styles.searchInput} {...searchInputProps}/>
   </View>
@@ -77,6 +80,7 @@ export const AutoComplete = <T extends string|number = string>(props: AutoComple
   const [search, setSearch] = useState('')
   const [debouncedSearch, resetDebounce] = useDebounce(search, debounce)
   const [filteredOptions, setFilteredOptions] = useState(options)
+
   const [loading, setLoading] = useState(false)
   const variantStyles = useDefaultComponentStyle<'u:AutoComplete', typeof AutoCompleteStyles>('u:AutoComplete', {
     variants,
@@ -123,7 +127,6 @@ export const AutoComplete = <T extends string|number = string>(props: AutoComple
       resetDebounce()
     }
   }, [debouncedSearch, caseSensitive, options.length, filterFn])
-
   return <Select
     styles={variantStyles}
     options={ loading ? [] : filteredOptions}
@@ -141,9 +144,11 @@ export const AutoComplete = <T extends string|number = string>(props: AutoComple
           searchInput: searchInputStyles,
           titleWrapper: variantStyles.titleWrapper,
         }}
+
         {...headerProps}
       />
     }
+
     {...selectProps}
     listProps={{
       ...selectProps?.listProps,

package/src/components/AutoComplete/styles.ts

@@ -15,15 +15,11 @@ export const AutoCompleteStyles = {
       ...defaultStyle,
       header: {
         ...theme.spacing.paddingHorizontal(2),
+        ...theme.spacing.paddingTop(1),
         ...theme.presets.column,
         ...theme.presets.alignStart,
       },
-      box: {
-        maxHeight: theme.values.window.height * 0.85,
-      },
-      listContent: {
-        ...theme.presets.safeAreaBottom(0, true),
-      },
+
       searchInputWrapper: {
         ...theme.presets.fullWidth,
         ...theme.spacing.marginTop(2),

package/src/components/Drawer/index.tsx

@@ -24,9 +24,8 @@ export const Drawer:React.FC<DrawerProps> = (props) => {
     scrollProps={{
       ...scrollProps,
       keyboardAware: {
-        adapt: 'height',
-        baseStyleProp: 'style',
 
+        enabled: false,
         ...scrollProps?.keyboardAware,
       },
     }}

package/src/components/Drawer/styles.ts

@@ -13,15 +13,20 @@ export const DrawerStyles = {
       ...defaultStyle,
       box: {
         width: '100%',
-        maxHeight: theme.values.window.height * 0.99,
+        paddingBottom: 0,
+        paddingTop: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        maxHeight: '100%',
 
       },
       innerWrapper: {
         ...theme.presets.justifyEnd,
+
       },
 
       'box:hidden': {
-        translateY: theme.values.window.height,
+        translateY: theme.values.height,
         opacity: 1,
         scale: 1,
       },

package/src/components/Icon/index.tsx

@@ -6,6 +6,8 @@ import {
   useCodeleapContext,
   arePropsEqual,
   IconPlaceholder,
+  onMount,
+  onUpdate,
 } from '@codeleap/common'
 import { StyleSheet } from 'react-native'
 import { View } from '../View'
@@ -27,7 +29,7 @@ export type IconProps = {
 export const IconComponent: React.FC<IconProps> = ({ name, style, variants, renderEmptySpace, ...otherProps }) => {
   const { Theme, logger } = useCodeleapContext()
 
-  const variantStyles = useDefaultComponentStyle('Icon', {
+  const variantStyles = useDefaultComponentStyle<'u:Icon', typeof IconStyles>('u:Icon', {
     variants,
     transform: StyleSheet.flatten,
     styles: {
@@ -35,19 +37,23 @@ export const IconComponent: React.FC<IconProps> = ({ name, style, variants, rend
     },
     rootElement: 'icon',
   })
+  const Component = Theme?.icons?.[name]
+  onUpdate(() => {
+    if (!Component && !!name) {
+      logger.warn(
+        `Icon: No icon found in theme for name "${name}".`,
+        { props: { style, name, variants, variantStyles }},
+        'Component',
+      )
+    }
+  }, [name])
 
   if (!name) {
     return renderEmptySpace ? <View style={variantStyles.icon}/> : null
   }
 
-  const Component = Theme?.icons?.[name]
-
   if (!Component) {
-    logger.warn(
-      `Icon: No icon found in theme for name "${name}".`,
-      { props: { style, name, variants, variantStyles }},
-      'Component',
-    )
+
     return null
   }
   return <Component {...otherProps} style={variantStyles.icon} />

package/src/components/Icon/styles.ts

@@ -13,6 +13,11 @@ export const IconStyles = {
       color: theme.colors.icon,
     },
   })),
+  originalColor: createIconStyle(theme => ({
+    icon: {
+      color: 'auto',
+    },
+  })),
   white: createIconStyle((theme) => ({
     icon: {
       color: theme.colors.white,

package/src/components/Modal/index.tsx

@@ -24,6 +24,7 @@ import { Backdrop } from '../Backdrop'
 import { useBackButton, useStaticAnimationStyles } from '../../utils/hooks'
 import { Text, TextProps } from '../Text'
 import { Touchable } from '../Touchable'
+import { GetKeyboardAwarePropsOptions } from '../../utils'
 
 export * from './styles'
 
@@ -46,6 +47,7 @@ export type ModalProps = Omit<ViewProps, 'variants' | 'styles'> & {
   header?: React.ReactElement
   closeOnHardwareBackPress?: boolean
   renderHeader?: (props: ModalHeaderProps) => React.ReactElement
+  keyboardAware?: GetKeyboardAwarePropsOptions
   scrollProps?: PropsOf<typeof Scroll>
 }
 
@@ -129,6 +131,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
     boxAnimation.animateTo(visible ? boxAnimationStates['box:visible'] : boxAnimationStates['box:hidden'])
   }, [visible])
   const wrapperStyle = getStyles('wrapper')
+
   const ScrollComponent = scroll ? Scroll : View
   const scrollStyle = scroll ? getStyles('scroll') : getStyles('innerWrapper')
 
@@ -167,11 +170,20 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
       <ScrollComponent
         style={scrollStyle}
         contentContainerStyle={getStyles('scrollContent')}
-        {...scrollProps}
+        keyboardAware= {{
+          adapt: 'marginBottom',
+          baseStyleProp: 'style',
+          animated: true,
+          enabled: visible,
+          enableOnAndroid: true,
+        }}
+        animated
+        { ...scrollProps}
       >
         {dismissOnBackdrop &&
           <Touchable
             onPress={ closable ? toggle : (() => {})}
+            debounce={400}
             debugName={'Modal backdrop touchable'}
             style={variantStyles.backdropTouchable}
             android_ripple={null}
@@ -183,6 +195,7 @@ export const Modal: React.FC<ModalProps> = (modalProps) => {
           state={boxAnimation}
           style={getStyles('box')}
           transition={{ ...variantStyles['box:transition'] }}
+
           {...props}
         >
 

package/src/components/Modal/styles.ts

@@ -38,8 +38,9 @@ export const ModalStyles = {
     const fullSize = {
       ...theme.presets.whole,
       position: 'absolute',
-      width: '100%',
-      height: '100%',
+      width: theme.values.width,
+      height: theme.values.height,
+      maxHeight: theme.values.height,
     }
 
     return {
@@ -49,6 +50,8 @@ export const ModalStyles = {
         width: theme.values.width,
         ...theme.presets.whole,
         position: 'absolute',
+        ...theme.presets.safeAreaTop(),
+        paddingBottom: theme.values.bottomNavHeight,
       },
       'box:transition': {
         scale: {
@@ -83,16 +86,20 @@ export const ModalStyles = {
       innerWrapper: {
         ...theme.presets.alignCenter,
         ...theme.presets.justifyCenter,
-        ...theme.presets.fullHeight,
-        ...theme.presets.fullWidth,
+        width: theme.values.width,
+        flex: 1,
       },
       scroll: {
-        ...fullSize,
+        width: theme.values.width,
+        height: theme.values.window.height,
+        maxHeight: theme.values.window.height,
       },
       scrollContent: {
         ...theme.presets.alignCenter,
         ...theme.presets.justifyCenter,
-        ...theme.presets.full,
+        ...theme.spacing.paddingVertical(2),
+        ...theme.presets.fullWidth,
+        flex: 1,
       },
       box: {
         width: '80%',

package/src/components/MultiSelect/index.tsx

@@ -119,7 +119,9 @@ export const MultiSelect = <T extends string|number = string>(selectProps:MultiS
       )
     }
 
-    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+    <ModalManager.Drawer scroll={false} title={label} keyboardAware={{
+      enabled: false,
+    }} {...drawerProps} styles={variantStyles}>
       <List<MultiSelectProps<any>['options']>
         data={options}
         style={variantStyles.list}

package/src/components/Scroll/index.tsx

@@ -13,6 +13,7 @@ import { KeyboardAwareScrollViewTypes } from '../../modules'
 import { StylesOf } from '../../types'
 import { ScrollComposition, ScrollStyles } from './styles'
 import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
+import { ScrollView as MotiScrollView } from 'moti'
 // import { KeyboardAwareScrollView } from '../../utils'
 
 type KeyboardAwareScrollViewProps = KeyboardAwareScrollViewTypes.KeyboardAwareScrollViewProps
@@ -42,6 +43,7 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
       contentContainerStyle,
       keyboardAware,
       debugName = '',
+      animated = true,
       ...props
     } = scrollProps
     const hasRefresh = !!props.onRefresh
@@ -103,16 +105,19 @@ export const Scroll = forwardRef<ScrollView, ScrollProps>(
     const rootProps = keyboard.getKeyboardAwareProps(_scrollProps, {
       adapt: 'marginBottom',
       baseStyleProp: 'style',
+      animated,
       ...keyboardAware,
 
     })
+    const Component = animated ? MotiScrollView : ScrollView
 
     return (
-      <ScrollView
+      <Component
         {...rootProps}
+
       >
         {children}
-      </ScrollView>
+      </Component>
     )
   },
 )

package/src/components/Select/index.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput'
 import { Touchable } from '../Touchable'
 import { SelectStyles } from './styles'
 import { CustomSelectProps } from './types'
-import { ModalManager, useKeyboardAwareView } from '../../utils'
+import { ModalManager } from '../../utils'
 import { Icon } from '../Icon'
 
 export const SelectItem = ({ item, icon = null, isSelected, styles, onPress }) => {
@@ -104,15 +104,6 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
 
   }
 
-  const baseListProps = {
-    data: options,
-    style: variantStyles.list,
-    contentContainerStyle: variantStyles.listContent,
-    keyExtractor: (i) => i.value,
-    renderItem: renderListItem,
-    ...listProps,
-  }
-
   return <>
     {
       !hideInput && (
@@ -141,9 +132,31 @@ export const Select = <T extends string|number = string>(selectProps:CustomSelec
       )
     }
 
-    <ModalManager.Drawer scroll={false} title={label} {...drawerProps} styles={variantStyles}>
+    <ModalManager.Drawer
+      scroll={false}
+      title={label}
+      {...drawerProps}
+      keyboardAware={{
+        baseStyleProp: 'style',
+        adapt: 'paddingBottom',
+        enabled: true,
+        enableOnAndroid: true,
+      }}
+      styles={variantStyles}
+    >
       <List<CustomSelectProps<any>['options']>
-        {...baseListProps}
+        data={options}
+        style={variantStyles.list}
+        contentContainerStyle={variantStyles.listContent}
+        keyExtractor={(i) => i.value}
+        renderItem={renderListItem}
+        keyboardAware={{
+          baseStyleProp: 'style',
+          adapt: 'maxHeight',
+          enabled: true,
+          enableOnAndroid: true,
+        }}
+        {...listProps}
       />
     </ModalManager.Drawer>
 

package/src/components/Select/styles.ts

@@ -18,6 +18,7 @@ export const SelectStyles = {
   ...DrawerStyles,
   default: createSelectStyle((theme) => {
     const defaultStyle = DrawerStyles.default(theme)
+
     return {
       ...defaultStyle,
       box: {
@@ -49,12 +50,12 @@ export const SelectStyles = {
       list: {
         height: 'auto',
 
-        maxHeight: theme.values.window.height * 0.7,
-        // ...theme.presets.safeAreaBottom(),
-      },
-      listContent: {
-        paddingBottom: theme.values.bottomNavHeight + theme.spacing.value(1),
+        maxHeight: theme.values.window.height * 0.75,
+
       },
+      // listContent: {
+      //   paddingBottom: theme.values.safeAreaTop,
+      // },
 
     }
   }),

package/src/components/TextInput/index.tsx

@@ -84,7 +84,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     password,
     visibilityToggle,
     innerWrapperProps,
-    masking = null,
+    masking,
     subtitle = '',
     onChangeMask,
     debugName,
@@ -96,6 +96,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
   const [editedState, setEdited] = useState(edited)
 
   const input = useRef<any>(null)
+  const maskInputRef = useRef<any>(null)
   const [textIsVisible, setTextVisible] = useBooleanToggle(false)
   const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputStyles>('u:TextInput', {
     variants,
@@ -120,7 +121,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     }
   }
   const handleMaskChange = (masked, unmasked) => {
-    if (onChangeText) onChangeText((typeof masking === 'object' && masking?.saveFormatted) ? masked : unmasked)
+
+    if (onChangeText) onChangeText(masking?.saveFormatted ? masked : masked)
     if (onChangeMask) onChangeMask(masked, unmasked)
   }
   const handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
@@ -130,9 +132,16 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     if (onChangeText) onChangeText(text)
   }
 
-  useImperativeHandle(inputRef, () => ({ ...input.current, focus: () => {
-    input.current?.focus?.()
-  }, isTextInput: true }))
+  useImperativeHandle(inputRef, () => {
+    return {
+      ...input.current,
+      focus: () => {
+        input.current?.focus?.()
+      },
+      isTextInput: true,
+    }
+
+  }, [!!masking, !!input?.current?.focus])
 
   const { showError, error } = useValidate(value, validate)
 
@@ -177,7 +186,6 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
     <FormError {...errorProps}/>
     {TypeGuards.isString(subtitle) ? <Text text={subtitle} style={subtitleStyles.subtitle}/> : (subtitle || null)}
   </View>
-
   return (
     <Touchable
       style={getStyles('wrapper')}
@@ -209,7 +217,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
         />
         {/* @ts-ignore */}
         <InputElement
-          ref={input}
+
           secureTextEntry={password && !textIsVisible}
           onChange={(e) => masking ? onChange?.(e) : handleChange(e)}
           value={value}
@@ -220,9 +228,21 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops,
           selectionColor={StyleSheet.flatten(getStyles('selection'))?.color}
           includeRawValueInChangeText={true}
           {...props}
-          {...(masking ? { onChangeText: handleMaskChange, type: masking?.type, refInput: (inputRef) => {
-            input.current = inputRef
-          } } : {})}
+          {...masking}
+          {...(!!masking ? {
+            onChangeText: handleMaskChange,
+            ref: maskInputRef,
+            refInput: (inputRef) => {
+              // console.log(inputRef)
+              if (!!inputRef) {
+                input.current = inputRef
+
+              }
+            },
+            ...masking,
+          } : {
+            ref: input,
+          })}
           style={getStyles('textField')}
         />
         <InputIcon

package/src/components/Touchable/index.tsx

@@ -7,6 +7,7 @@ import {
 
   useCodeleapContext,
   AnyFunction,
+  TypeGuards,
 } from '@codeleap/common'
 import { Pressable, StyleSheet, View as RNView } from 'react-native'
 
@@ -27,42 +28,11 @@ export type TouchableProps = Omit<
   debugComponent?: string
   onPress?: AnyFunction
   noFeedback?: boolean
+  debounce?: number
   styles?: StylesOf<TouchableComposition>
 } & BaseViewProps
 export * from './styles'
 
-const defaultWrapperStyles = {
-  paddingTop: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  paddingBottom: 0,
-  overflow: 'hidden',
-  alignItems: 'stretch',
-}
-
-const defaultPressableStyles = {
-  marginTop: 0,
-  marginLeft: 0,
-  marginRight: 0,
-  marginBottom: 0,
-
-}
-
-const ripplePressableStyles = {
-  // position: 'absolute',
-  // top: 0,
-  // left: 0,
-  // right: 0,
-  // bottom: 0,
-  // width: '100%',
-  // minWidth: '100%',
-  // maxWidth: '100%',
-  // height: '100%',
-  // minHeight: '100%',
-  // maxHeight: '100%',
-  // flex: 1,
-}
-
 export const Touchable: React.FC<TouchableProps> = forwardRef<
   RNView,
   TouchableProps
@@ -74,11 +44,12 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
     style,
     debugName,
     debugComponent,
+    debounce = null,
     noFeedback = false,
     styles,
     ...props
   } = touchableProps
-
+  const [pressed, setPressed] = React.useState(false)
   const variantStyles = useDefaultComponentStyle<'u:Touchable', typeof TouchableStyles>('u:Touchable', {
     variants,
     transform: StyleSheet.flatten,
@@ -95,13 +66,25 @@ export const Touchable: React.FC<TouchableProps> = forwardRef<
       }, 'User Interaction')
       return
     }
+    const _onPress = () => {
+      logger.log(
+        `<${debugComponent || 'Touchable'}/>  pressed`,
+        debugName || variants,
+        'User interaction',
+      )
+      onPress && onPress()
+    }
+    if (TypeGuards.isNumber(debounce)) {
+      if (pressed) {
+        return
+      }
+      setPressed(true)
+      _onPress()
+      setTimeout(() => setPressed(false), debounce)
+    } else {
+      _onPress()
+    }
 
-    logger.log(
-      `<${debugComponent || 'Touchable'}/>  pressed`,
-      debugName || variants,
-      'User interaction',
-    )
-    onPress && onPress()
   }
 
   const _styles = StyleSheet.flatten([variantStyles.wrapper, style])

package/src/components/View/index.tsx

@@ -10,6 +10,7 @@ import {
 } from '@codeleap/common'
 import { View as NativeView } from 'react-native'
 import { MotiView, MotiProps } from 'moti'
+import { GetKeyboardAwarePropsOptions, useKeyboardAwareView } from '../../utils'
 
 export * from './styles'
 
@@ -18,6 +19,7 @@ export type ViewProps = ComponentPropsWithoutRef<typeof NativeView> &
     ref?: any
     component?: any
     animated?: boolean
+    keyboardAware?: GetKeyboardAwarePropsOptions
   } & BaseViewProps
 
 export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeView, ViewProps & Partial<MotiProps>>((viewProps, ref) => {
@@ -26,7 +28,7 @@ export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeV
     variants = [],
     children,
     style,
-
+    keyboardAware,
     component,
     animated = false,
     ...props
@@ -37,9 +39,21 @@ export const View: React.FC<ViewProps & Partial<MotiProps>> = forwardRef<NativeV
     variants,
   })
   const Component = animated ? MotiView : (component || NativeView)
+  const keyboard = useKeyboardAwareView()
+  const _props = keyboard.getKeyboardAwareProps(
+    {
+      style: [variantStyles.wrapper, style], ref: ref, ...props,
+    },
+    {
+      adapt: 'paddingBottom',
+      baseStyleProp: 'style',
 
+      enabled: false,
+      ...keyboardAware,
+    },
+  )
   return (
-    <Component style={[variantStyles.wrapper, style]} ref={ref} {...props}>
+    <Component {..._props}>
       {children}
     </Component>
   )

package/src/types/utility.ts

@@ -1,3 +1,9 @@
 import { StyleProp } from 'react-native'
+import { EasingFunction } from 'react-native-animatable'
 
 export type StylesOf<C extends string> = Partial<Record<C, StyleProp<any>>>
+export type TransitionConfig = {
+    easing?: EasingFunction
+    type?: 'timing' | 'spring'
+    duration?: number
+  }