@codeleap/mobile 3.24.3 → 4.0.0

package/src/components/DatePickerModal/index.tsx

@@ -1,17 +1,19 @@
 import React, { useRef } from 'react'
-import { useState, useCodeleapContext, useDefaultComponentStyle, TypeGuards, useBooleanToggle, useNestedStylesByKey, useI18N } from '@codeleap/common'
-import { DatePickerModalPresets } from './styles'
+import { TypeGuards, useBooleanToggle, useI18N } from '@codeleap/common'
 import DatePicker from 'react-native-date-picker'
+import Modal from '../Modal'
 import { TextInput } from '../TextInput'
 import { ModalManager } from '../../utils'
 import { Button } from '../Button'
-import { StyleSheet } from 'react-native'
 import { DatePickerModalProps } from './types'
+import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
 export * from './types'
 
-const OuterInputComponent:DatePickerModalProps['outerInputComponent'] = (props) => {
+const OuterInputComponent: DatePickerModalProps['outerInputComponent'] = (props) => {
   const {
     debugName,
     toggle,
@@ -29,43 +31,42 @@ const OuterInputComponent:DatePickerModalProps['outerInputComponent'] = (props)
   />
 }
 
-const defaultFormatDate:DatePickerModalProps['formatDate'] = (date) => {
+const defaultFormatDate: DatePickerModalProps['formatDate'] = (date) => {
   if (!date) return null
   return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
 }
 
-const DefaultFooter:DatePickerModalProps['footerComponent'] = (props) => {
+const DefaultFooter: DatePickerModalProps['footerComponent'] = (props) => {
   const {
     debugName,
     commitDate,
     showDoneButton,
-    styles,
     confirm,
     confirmButtonProps = {},
     cancelButtonProps = {},
     toggle,
+    cancelStyles,
+    confirmStyles,
+    doneStyles,
   } = props
 
   if (commitDate == 'onConfirm') {
     return <>
       <Button
         debugName={`${debugName} cancel button`}
-        styles={styles.cancel}
-        variants={['flex']}
+        style={cancelStyles}
         text={`Cancel`}
         onPress={toggle}
         {...cancelButtonProps}
       />
       <Button
         debugName={`${debugName} confirm button`}
-        variants={['flex']}
-        styles={styles.confirm}
+        style={confirmStyles}
         text={`Confirm`}
         onPress={confirm}
         {...confirmButtonProps}
       />
     </>
-
   }
 
   if (!showDoneButton) return null
@@ -74,28 +75,13 @@ const DefaultFooter:DatePickerModalProps['footerComponent'] = (props) => {
     debugName={`${debugName} done button`}
     onPress={confirm}
     text={'Done'}
-    styles={styles.done}
-
+    style={doneStyles}
   />
 }
 
-const defaultProps:Partial<DatePickerModalProps> = {
-  outerInputComponent: OuterInputComponent,
-  formatDate: defaultFormatDate,
-  footerComponent: DefaultFooter,
-  mode: 'date',
-  commitDate: 'onConfirm',
-  showDoneButton: true,
-  isCustomModal: true,
-  toggleOnConfirm: true,
-}
-
 export const DatePickerModal = (props: DatePickerModalProps) => {
-
-  const { currentTheme } = useCodeleapContext()
-
   const allProps = {
-    ...defaultProps,
+    ...DatePickerModal.defaultProps,
     ...props,
   }
 
@@ -110,10 +96,8 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     debugName,
     cancelButtonProps = {},
     confirmButtonProps = {},
-    outerInputComponent,
+    outerInputComponent: OuterInput,
     footer,
-    variants = [],
-    styles = {},
     datePickerProps,
     mode,
     label,
@@ -124,37 +108,25 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     minimumDate,
     maximumDate,
     initialDate,
-    footerComponent,
+    footerComponent: Footer,
     toggleOnConfirm,
     onConfirm: _onConfirm,
     ...modalProps
   } = allProps
 
-  const variantStyles = useDefaultComponentStyle<'u:DatePickerModal', typeof DatePickerModalPresets>('u:DatePickerModal', {
-    variants,
-    styles,
-    rootElement: 'inputWrapper',
-    transform: StyleSheet.flatten,
-  })
+  const styles = useStylesFor(DatePickerModal.styleRegistryName, style)
 
   const [visible, toggle] = !TypeGuards.isNil(_visible) && !!_toggle ? [_visible, _toggle] : useBooleanToggle(false)
   const [value, setValue] = [_value, onValueChange]
-  //const [value, setValue] = _value && onValueChange ? [_value, onValueChange] : useState(_value ?? new Date())
 
   const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment
 
-  const OuterInput = outerInputComponent
-  const Footer = footerComponent
-
-  const inputStyle = useNestedStylesByKey('input', variantStyles)
-  const doneStyle = useNestedStylesByKey('doneButton', variantStyles)
-  const cancelStyle = useNestedStylesByKey('cancelButton', variantStyles)
-  const confirmStyle = useNestedStylesByKey('confirmButton', variantStyles)
+  const compositionStyles = useCompositionStyles(['input', 'doneButton', 'cancelButton', 'confirmButton'], styles)
 
   const formattedDate = value ? formatDate(value) : ''
   const { locale } = useI18N()
 
-  const tempDate = useRef<Date|null>(null)
+  const tempDate = useRef<Date | null>(null)
 
   const onConfirm = () => {
     if (commitDate == 'onConfirm' && !!tempDate.current) {
@@ -173,11 +145,9 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   const modalFooter = footer || <Footer
     {...allProps}
     confirm={onConfirm}
-    styles={{
-      done: doneStyle,
-      cancel: cancelStyle,
-      confirm: confirmStyle,
-    }}
+    doneStyles={compositionStyles?.doneButton}
+    cancelStyles={compositionStyles?.cancelButton}
+    confirmStyles={compositionStyles?.confirmButton}
     confirmButtonProps={confirmButtonProps}
     cancelButtonProps={cancelButtonProps}
     showDoneButton={showDoneButton}
@@ -195,7 +165,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     debugName: `${debugName} Modal`,
     visible: visible,
     toggle: toggle,
-    styles: variantStyles,
+    style: styles,
     footer: modalFooter,
     ...modalProps,
     id: null,
@@ -203,20 +173,18 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
 
   return (
     <>
-      {!hideInput && <OuterInput
+      {!hideInput ? <OuterInput
         {...allProps}
-        styles={inputStyle}
+        style={compositionStyles?.input}
         value={value}
         debugName={debugName}
         visible={visible}
         toggle={toggle}
         onValueChange={setValue}
         valueLabel={formattedDate}
-        style={style}
+      /> : null}
 
-      />}
-      {/* @ts-expect-error */}
-      <Wrapper {...wrapperProps} >
+      <Wrapper {...wrapperProps}>
         <DatePicker
           modal={!isCustomModal}
           open={visible}
@@ -231,21 +199,38 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
             tempDate.current = date
           }}
           locale={locale}
-          theme={currentTheme === 'dark' ? 'dark' : 'light' }
-          textColor={variantStyles?.picker?.color}
+          // @ts-expect-error
+          textColor={styles?.picker?.color}
+          theme='light'
           androidVariant='iosClone'
           onConfirm={setValue}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           {...datePickerProps}
           mode={mode}
-
         />
       </Wrapper>
-
     </>
   )
+}
 
+DatePickerModal.styleRegistryName = 'DatePickerModal'
+DatePickerModal.elements = [...Modal.elements, 'input', 'picker', 'doneButton', 'confirmButton', 'cancelButton']
+DatePickerModal.rootElement = 'inputWrapper'
+
+DatePickerModal.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return DatePickerModal as (props: StyledComponentProps<DatePickerModalProps, typeof styles>) => IJSX
 }
 
-DatePickerModal.defaultProps = defaultProps
+DatePickerModal.defaultProps = {
+  outerInputComponent: OuterInputComponent,
+  formatDate: defaultFormatDate,
+  footerComponent: DefaultFooter,
+  mode: 'date',
+  commitDate: 'onConfirm',
+  showDoneButton: true,
+  isCustomModal: true,
+  toggleOnConfirm: true,
+} as Partial<DatePickerModalProps>
+
+MobileStyleRegistry.registerComponent(DatePickerModal)

package/src/components/DatePickerModal/styles.ts

@@ -1,15 +1,14 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ButtonComposition } from '../Button'
 import { ModalComposition } from '../Modal'
 import { TextInputComposition } from '../TextInput'
 
-export type DatePickerModalComposition =
-    ModalComposition | 
-    `input${Capitalize<TextInputComposition>}` | 
-    `picker` | 
-    `doneButton${Capitalize<ButtonComposition>}` | 
-    `confirmButton${Capitalize<ButtonComposition>}` | 
-    `cancelButton${Capitalize<ButtonComposition>}`
+export type DatePickerModalButtonCompositions =
+  `doneButton${Capitalize<ButtonComposition>}` |
+  `confirmButton${Capitalize<ButtonComposition>}` |
+  `cancelButton${Capitalize<ButtonComposition>}`
 
-const createDatePickerModalStyle = createDefaultVariantFactory<DatePickerModalComposition>()
-export const DatePickerModalPresets = includePresets((styles) => createDatePickerModalStyle(() => ({ inputWrapper: styles })))
+export type DatePickerModalComposition =
+  ModalComposition |
+  `input${Capitalize<TextInputComposition>}` |
+  `picker` |
+  DatePickerModalButtonCompositions

package/src/components/DatePickerModal/types.ts

@@ -1,64 +1,46 @@
 import React from 'react'
-import { ComponentVariants, StylesOf, FormTypes, AnyFunction } from '@codeleap/common'
-import { DatePickerModalComposition, DatePickerModalPresets } from './styles'
+import { FormTypes, StylesOf } from '@codeleap/common'
+import { DatePickerModalButtonCompositions, DatePickerModalComposition } from './styles'
 import { DatePickerProps } from 'react-native-date-picker'
-import { TextInputComposition } from '../TextInput'
-import { ButtonComposition, ButtonProps } from '../Button'
+import { ButtonProps } from '../Button'
 import { ModalProps } from '../Modal'
+import { StyledProp } from '@codeleap/styles'
 
-export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
-    valueLabel: FormTypes.Label
-    styles?: StylesOf<TextInputComposition>
+export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent'> & {
+  valueLabel: FormTypes.Label
 }
 
-type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'styles'> & {
+type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'style'> & {
   valueLabel: FormTypes.Label
-  styles?: Record<
-    'confirm' | 'cancel' | 'done',
-    StylesOf<ButtonComposition>
-  >
   confirm: () => void
+  cancelStyles: StylesOf<DatePickerModalButtonCompositions>
+  confirmStyles: StylesOf<DatePickerModalButtonCompositions>
+  doneStyles: StylesOf<DatePickerModalButtonCompositions>
 }
 
-export type DatePickerModalProps = Omit<ModalProps, 'styles' | 'variants' | 'ref'> & {
-  hideInput?: boolean
-  debugName: string
-
-  value: Date
-
-  label?: FormTypes.Label
-
-  placeholder?: FormTypes.Label
-
-  onValueChange: (date: Date) => void
-
-  styles?: StylesOf<DatePickerModalComposition>
-
-  isCustomModal?: boolean
-  mode?: DatePickerProps['mode']
-
-  cancelButtonProps?: Partial<ButtonProps>
-  confirmButtonProps?: Partial<ButtonProps>
-
-  datePickerProps?: Partial<DatePickerProps>
-
-  outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
-
-  formatDate?: (date: Date) => FormTypes.Label
-
-  commitDate?: 'onConfirm' | 'onChange'
-
-  showDoneButton?: boolean
-
-  footerComponent?: React.ComponentType<DatePickerModalFooterProps>
-
-  minimumDate?: DatePickerProps['minimumDate']
-
-  maximumDate?: DatePickerProps['maximumDate']
-
-  initialDate?: Date
-
-  toggleOnConfirm?: boolean
-
-  onConfirm?: (value: Date) => void
-} & ComponentVariants<typeof DatePickerModalPresets>
+export type DatePickerModalProps =
+  Omit<ModalProps, 'style' | 'ref'> &
+  {
+    hideInput?: boolean
+    debugName: string
+    value: Date
+    label?: FormTypes.Label
+    placeholder?: FormTypes.Label
+    onValueChange: (date: Date) => void
+    isCustomModal?: boolean
+    mode?: DatePickerProps['mode']
+    cancelButtonProps?: Partial<ButtonProps>
+    confirmButtonProps?: Partial<ButtonProps>
+    datePickerProps?: Partial<DatePickerProps>
+    outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
+    formatDate?: (date: Date) => FormTypes.Label
+    commitDate?: 'onConfirm' | 'onChange'
+    showDoneButton?: boolean
+    footerComponent?: React.ComponentType<DatePickerModalFooterProps>
+    initialDate?: Date
+    minimumDate?: DatePickerProps['minimumDate']
+    maximumDate?: DatePickerProps['maximumDate']
+    toggleOnConfirm?: boolean
+    onConfirm?: (value: Date) => void
+    style?: StyledProp<DatePickerModalComposition>
+  }

package/src/components/EmptyPlaceholder/index.tsx

@@ -1,88 +1,53 @@
-import React, { useMemo } from 'react'
+import React from 'react'
 import { Icon } from '../Icon'
 import { View } from '../View'
 import { Text } from '../Text'
-import { ActivityIndicator, ActivityIndicatorComposition } from '../ActivityIndicator'
-import {
-  ComponentVariants,
-
-  getNestedStylesByKey,
-  IconPlaceholder,
-  useDefaultComponentStyle,
-} from '@codeleap/common'
-
-import {
-  EmptyPlaceholderComposition,
-  EmptyPlaceholderPresets,
-} from './styles'
-
-import { StyleSheet } from 'react-native'
-import { StylesOf } from '../../types'
-import { Image, ImageProps } from '../Image'
+import { ActivityIndicator } from '../ActivityIndicator'
+import { Image } from '../Image'
+import { EmptyPlaceholderProps } from './types'
+import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps } from '@codeleap/styles'
+import { MobileStyleRegistry } from '../../Registry'
+import { useStylesFor } from '../../hooks'
 
 export * from './styles'
+export * from './types'
 
-export type EmptyPlaceholderProps = {
-  itemName?: string
-
-  title?: React.ReactElement | string
-  description?: React.ReactElement | string
-  image?: ImageProps['source']
-  icon?: IconPlaceholder
-
-  loading?: boolean
-
-  styles?: StylesOf<EmptyPlaceholderComposition>
-  variants?: ComponentVariants<typeof EmptyPlaceholderPresets>['variants']
-
-  renderEmpty?: (props: {
-    emptyText:string | React.ReactElement
-    emptyIconName?: IconPlaceholder
-    styles: StylesOf<EmptyPlaceholderComposition> & {activityIndicatorStyles: StylesOf<ActivityIndicatorComposition>}
-  }) => React.ReactElement
-}
-
-export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPlaceholderProps) => {
+export const EmptyPlaceholder = (props: EmptyPlaceholderProps) => {
   const {
     itemName,
     title,
     loading,
     description,
     image,
-    styles = {},
-    variants = [],
     icon = null,
     renderEmpty,
-  } = props
+    style,
+  } = {
+    ...EmptyPlaceholder.defaultProps,
+    ...props,
+  }
+
   const emptyText = title || (itemName && `No ${itemName} found.`) || 'No items.'
 
-  const componentStyles = useDefaultComponentStyle<'u:EmptyPlaceholder', typeof EmptyPlaceholderPresets>('u:EmptyPlaceholder', {
-    variants,
-    transform: StyleSheet.flatten,
-    styles,
-  })
+  const styles = useStylesFor(EmptyPlaceholder.styleRegistryName, style)
 
-  const activityIndicatorStyles = useMemo(() => getNestedStylesByKey('loader', componentStyles)
-    , [componentStyles])
+  const activityIndicatorStyles = useNestedStylesByKey('loader', styles)
 
   if (loading) {
     return (
-      <View style={[componentStyles.wrapper, componentStyles['wrapper:loading']]} >
-        <ActivityIndicator styles={activityIndicatorStyles}/>
+      <View style={[styles.wrapper, styles['wrapper:loading']]} >
+        <ActivityIndicator style={activityIndicatorStyles} />
       </View>
     )
   }
 
   if (renderEmpty) {
     return (
-      <View style={componentStyles.wrapper}>
+      <View style={styles.wrapper}>
         {renderEmpty({
           emptyText,
-          emptyIconName: icon as IconPlaceholder,
-          styles: {
-            ...componentStyles,
-            activityIndicatorStyles,
-          },
+          emptyIconName: icon as AppIcon,
+          style: styles,
         })}
       </View>
     )
@@ -91,21 +56,33 @@ export const EmptyPlaceholder:React.FC<EmptyPlaceholderProps> = (props: EmptyPla
   let _image = null
 
   if (icon) {
-    _image = <Icon name={icon} style={componentStyles.icon}/>
+    _image = <Icon name={icon as AppIcon} style={styles.icon} />
   } else if (image) {
-    _image = <Image source={image} style={[componentStyles.image]}/>
+    _image = <Image source={image} style={styles.image} />
   }
 
   return (
-    <View style={componentStyles.wrapper}>
+    <View style={styles.wrapper}>
       {React.isValidElement(_image) ? (
-        <View style={componentStyles.imageWrapper}>
+        <View style={styles.imageWrapper}>
           {_image}
         </View>
       ) : null}
 
-      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={componentStyles.title}/> }
-      {React.isValidElement(description) ? description : <Text text={description} style={componentStyles.description}/> }
+      {React.isValidElement(emptyText) ? emptyText : <Text text={emptyText} style={styles.title} />}
+      {React.isValidElement(description) ? description : <Text text={description} style={styles.description} />}
     </View>
   )
 }
+
+EmptyPlaceholder.styleRegistryName = 'EmptyPlaceholder'
+EmptyPlaceholder.elements = ['wrapper', 'loader', 'title', 'description', 'image', 'icon']
+EmptyPlaceholder.rootElement = 'wrapper'
+
+EmptyPlaceholder.withVariantTypes = <S extends AnyRecord>(styles: S) => {
+  return EmptyPlaceholder as (props: StyledComponentProps<EmptyPlaceholderProps, typeof styles>) => IJSX
+}
+
+EmptyPlaceholder.defaultProps = {} as Partial<EmptyPlaceholderProps>
+
+MobileStyleRegistry.registerComponent(EmptyPlaceholder)

package/src/components/EmptyPlaceholder/styles.ts

@@ -1,4 +1,3 @@
-import { createDefaultVariantFactory, includePresets } from '@codeleap/common'
 import { ActivityIndicatorComposition } from '../ActivityIndicator'
 
 export type EmptyPlaceholderComposition =
@@ -10,7 +9,3 @@ export type EmptyPlaceholderComposition =
   | 'image'
   | 'imageWrapper'
   | 'icon'
-
-const createEmptyPlaceholderStyle = createDefaultVariantFactory<EmptyPlaceholderComposition>()
-
-export const EmptyPlaceholderPresets = includePresets((styles) => createEmptyPlaceholderStyle(() => ({ wrapper: styles })))

package/src/components/EmptyPlaceholder/types.ts

@@ -0,0 +1,21 @@
+import { AppIcon, StyledProp } from '@codeleap/styles'
+import { ReactElement } from 'react'
+import { ImageProps } from '../Image'
+import { EmptyPlaceholderComposition } from './styles'
+
+type RenderEmpty = (props: {
+  emptyText: string | ReactElement
+  emptyIconName?: AppIcon
+  style?: StyledProp<EmptyPlaceholderComposition>
+}) => ReactElement
+
+export type EmptyPlaceholderProps = {
+  itemName?: string
+  title?: ReactElement | string
+  description?: ReactElement | string
+  image?: ImageProps['source']
+  icon?: AppIcon
+  loading?: boolean
+  style?: StyledProp<EmptyPlaceholderComposition>
+  renderEmpty?: RenderEmpty
+}

package/src/components/FileInput/index.tsx

@@ -1,50 +1,20 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import {
-  parseFilePathData,
-  useCodeleapContext,
-  MobileFile,
-  AnyRef,
-  FormTypes,
-} from '@codeleap/common'
+import { parseFilePathData, MobileFile } from '@codeleap/common'
 import { OSAlert } from '../../utils'
 import ImageCropPicker, { ImageOrVideo, Options } from 'react-native-image-crop-picker'
-import DocumentPicker, { DocumentPickerOptions } from 'react-native-document-picker'
-export * from './styles'
+import DocumentPicker from 'react-native-document-picker'
+import { FileInputImageSource, FileInputProps, FileInputRef, FileResult } from './types'
 
-export const useSomething = useImperativeHandle
-
-type FileInputImageSource = 'camera' | 'library' | 'fs'
-
-type FileResult = FormTypes.AnyFile
-
-export type FileInputRef = {
-  openFilePicker: (string?: FileInputImageSource) => Promise<FileResult[]>
-}
-export type FileInputProps = {
-  mode: 'hidden' | 'button'
-  onFileSelect?: (files: FileResult[]) => void
-  options?: DocumentPickerOptions<any>
-
-  ref?: AnyRef<FileInputRef>
-
-  type?: 'image' | 'anyFile'
-  alertProps?: Parameters<typeof OSAlert.ask>[0]
-  pickerOptions?: Partial<Options>
-  required?: boolean
-  onOpenCamera?: (resolve: (() => void)) => Promise<void>
-  onOpenFileSystem?: (resolve: (() => void)) => Promise<void>
-  onOpenGallery?: (resolve: (() => void)) => Promise<void>
-  onError?: (error: any) => void
-}
+export * from './types'
 
 const pickerDefaults = {
   cropping: true,
 }
 
 function parsePickerData(data: ImageOrVideo): FileResult {
-
   const filePathData = parseFilePathData(data.path)
-  const d: MobileFile = {
+
+  const file: MobileFile = {
     ...data,
     name: filePathData.name,
     size: data.size,
@@ -54,32 +24,25 @@ function parsePickerData(data: ImageOrVideo): FileResult {
   }
 
   return {
-    file: d,
+    file,
     preview: data.path,
   }
 }
 
-const _FileInput = forwardRef<
-  FileInputRef,
-  FileInputProps
->((fileInputProps, ref) => {
+const _FileInput = forwardRef<FileInputRef, FileInputProps>((fileInputProps, ref) => {
   const {
-
     onFileSelect,
-
     options,
     type = 'image',
     alertProps,
-
     pickerOptions,
-
     onOpenCamera = null,
     onOpenGallery = null,
     onOpenFileSystem = null,
     onError,
   } = fileInputProps
+
   const resolveWithFile = useRef<(file: FileResult[]) => any>()
-  const { logger } = useCodeleapContext()
 
   const handleResolve = (files: Array<FileResult>) => {
     if (resolveWithFile.current) {
@@ -105,10 +68,7 @@ const _FileInput = forwardRef<
   }
 
   function handleError(err) {
-
-    logger.warn('File Input Error', err, 'FILE INPUT')
     onError?.(err)
-
   }
 
   const mergedOptions = {
@@ -125,6 +85,7 @@ const _FileInput = forwardRef<
     }
     handleResolve?.(imageArray.map(parsePickerData))
   }
+
   const onPress = (open?: FileInputImageSource, options?: Options) => {
     if (open == 'fs') {
       openFileSystem()
@@ -133,6 +94,7 @@ const _FileInput = forwardRef<
       ImageCropPicker[call]({ ...mergedOptions, ...(options || {}) }).then(handlePickerResolution)
     }
   }
+
   const openFilePicker = async (imageSource = null) => {
     if (type === 'image') {
       if (imageSource === 'camera') {