@codeleap/mobile 4.3.9 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "4.3.9",
+  "version": "5.0.1",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -9,57 +9,53 @@
     "directory": "packages/mobile"
   },
   "devDependencies": {
-    "@codeleap/types": "4.3.9",
-    "@codeleap/utils": "4.3.9",
-    "@codeleap/hooks": "4.3.9",
-    "@codeleap/form": "4.3.9",
-    "@codeleap/i18n": "4.3.9",
-    "@codeleap/query": "4.3.9",
-    "@codeleap/logger": "4.3.9",
-    "@codeleap/config": "4.3.9"
+    "@codeleap/types": "5.0.1",
+    "@codeleap/utils": "5.0.1",
+    "@codeleap/hooks": "5.0.1",
+    "@codeleap/form": "5.0.1",
+    "@codeleap/i18n": "5.0.1",
+    "@codeleap/query": "5.0.1",
+    "@codeleap/logger": "5.0.1",
+    "@codeleap/config": "5.0.1"
   },
   "scripts": {
     "build": "tsc --build",
     "lint": "eslint -c  .eslintrc.js --fix \"./src/**/*.{ts,tsx,js,jsx}\""
   },
   "peerDependencies": {
-    "@codeleap/types": "4.3.9",
-    "@codeleap/utils": "4.3.9",
-    "@codeleap/hooks": "4.3.9",
-    "@codeleap/form": "4.3.9",
-    "@codeleap/i18n": "4.3.9",
-    "@codeleap/query": "4.3.9",
-    "@codeleap/logger": "4.3.9",
-    "@codeleap/styles": "4.3.9",
+    "@codeleap/types": "5.0.1",
+    "@codeleap/utils": "5.0.1",
+    "@codeleap/hooks": "5.0.1",
+    "@codeleap/form": "5.0.1",
+    "@codeleap/i18n": "5.0.1",
+    "@codeleap/query": "5.0.1",
+    "@codeleap/logger": "5.0.1",
+    "@codeleap/styles": "5.0.1",
     "@d11/react-native-fast-image": "8.8.0",
-    "@react-native-firebase/messaging": "21.4.0",
-    "@react-navigation/bottom-tabs": "6.5.3",
-    "@react-navigation/drawer": "6.5.7",
-    "@react-navigation/native": "6.1.2",
-    "@react-navigation/native-stack": "6.9.8",
-    "@react-navigation/stack": "6.3.11",
-    "react": "18.1.0",
-    "react-native": "0.76.3",
-    "react-native-avoid-softinput": "6.0.2",
-    "react-native-calendars": "1.1293.0",
-    "react-native-date-picker": "4.2.13",
-    "react-native-device-info": "10.3.0",
-    "react-native-gesture-handler": "2.9.0",
-    "react-native-image-crop-picker": "github:Pauligrinder/react-native-image-crop-picker",
+    "@react-native-firebase/messaging": "21.7.2",
+    "@react-navigation/bottom-tabs": "7.2.0",
+    "@react-navigation/native": "7.0.14",
+    "@react-navigation/native-stack": "7.2.0",
+    "react": "18.2.0",
+    "react-native": "0.77.0",
+    "react-native-calendars": "1.1307.0",
+    "react-native-date-picker": "5.0.9",
+    "react-native-device-info": "14.0.4",
+    "react-native-gesture-handler": "2.22.1",
+    "react-native-image-crop-picker": "0.42.0",
     "react-native-image-viewing": "0.2.2",
-    "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "react-native-mmkv": "2.12.2",
+    "react-native-localize": "3.4.1",
+    "react-native-mmkv": "3.2.0",
     "react-native-super-grid": "4.6.1",
-    "typescript": "5.0.4"
+    "typescript": "5.5.2"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",
     "@miblanchard/react-native-slider": "2.3.1",
-    "date-fns": "2.29.3",
     "react-native-currency-input": "^1.1.1",
-    "react-native-drag-sort": "^2.4.4",
     "react-native-masked-text": "1.13.0",
     "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-sortables": "^1.1.1",
     "react-native-uuid": "2.0.1"
   }
 }

package/package.json.bak

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/mobile",
-  "version": "4.3.9",
+  "version": "5.0.1",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "repository": {
@@ -32,34 +32,30 @@
     "@codeleap/logger": "workspace:*",
     "@codeleap/styles": "workspace:*",
     "@d11/react-native-fast-image": "8.8.0",
-    "@react-native-firebase/messaging": "21.4.0",
-    "@react-navigation/bottom-tabs": "6.5.3",
-    "@react-navigation/drawer": "6.5.7",
-    "@react-navigation/native": "6.1.2",
-    "@react-navigation/native-stack": "6.9.8",
-    "@react-navigation/stack": "6.3.11",
-    "react": "18.1.0",
-    "react-native": "0.76.3",
-    "react-native-avoid-softinput": "6.0.2",
-    "react-native-calendars": "1.1293.0",
-    "react-native-date-picker": "4.2.13",
-    "react-native-device-info": "10.3.0",
-    "react-native-gesture-handler": "2.9.0",
-    "react-native-image-crop-picker": "github:Pauligrinder/react-native-image-crop-picker",
+    "@react-native-firebase/messaging": "21.7.2",
+    "@react-navigation/bottom-tabs": "7.2.0",
+    "@react-navigation/native": "7.0.14",
+    "@react-navigation/native-stack": "7.2.0",
+    "react": "18.2.0",
+    "react-native": "0.77.0",
+    "react-native-calendars": "1.1307.0",
+    "react-native-date-picker": "5.0.9",
+    "react-native-device-info": "14.0.4",
+    "react-native-gesture-handler": "2.22.1",
+    "react-native-image-crop-picker": "0.42.0",
     "react-native-image-viewing": "0.2.2",
-    "react-native-keyboard-aware-scroll-view": "0.9.5",
-    "react-native-mmkv": "2.12.2",
+    "react-native-localize": "3.4.1",
+    "react-native-mmkv": "3.2.0",
     "react-native-super-grid": "4.6.1",
-    "typescript": "5.0.4"
+    "typescript": "5.5.2"
   },
   "dependencies": {
     "@gorhom/portal": "1.0.14",
     "@miblanchard/react-native-slider": "2.3.1",
-    "date-fns": "2.29.3",
     "react-native-currency-input": "^1.1.1",
-    "react-native-drag-sort": "^2.4.4",
     "react-native-masked-text": "1.13.0",
     "react-native-reanimated-carousel": "^3.5.1",
+    "react-native-sortables": "^1.1.1",
     "react-native-uuid": "2.0.1"
   }
 }

package/src/components/Autocomplete/index.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react'
-import { TypeGuards } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
+import { Options, TypeGuards } from '@codeleap/types'
 import { onMount, useSearch } from '@codeleap/hooks'
 import { List } from '../List'
 import { SearchInput } from '../SearchInput'
@@ -14,7 +13,7 @@ import { useStylesFor } from '../../hooks'
 export * from './styles'
 export * from './types'
 
-const defaultFilterFunction = (search: string, options: FormTypes.Options<any>) => {
+const defaultFilterFunction = (search: string, options: Options<any>) => {
   return options.filter((option) => {
     if (TypeGuards.isString(option.label)) {
       return option.label.toLowerCase().includes(search.toLowerCase())

package/src/components/Autocomplete/types.ts

@@ -1,5 +1,4 @@
-import { PropsOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
+import { Option, Options, PropsOf } from '@codeleap/types'
 import { StylesOf } from '../../types/utility'
 import { GetKeyboardAwarePropsOptions } from '../../utils'
 import { Icon } from '../Icon'
@@ -15,7 +14,7 @@ export type AutocompleteRenderFNProps<T> = {
   style?: StylesOf<AutocompleteComposition>
   onPress: () => void
   isSelected?: boolean
-  item: FormTypes.Options<T>[number]
+  item: Option<T>
   touchableProps?: Partial<PropsOf<typeof Touchable>>
   textProps?: Partial<PropsOf<typeof Text>>
   iconProps?: Partial<PropsOf<typeof Icon>>
@@ -26,17 +25,17 @@ export type AutocompleteRenderFN<T> = (props: AutocompleteRenderFNProps<T>) => J
 export type AutocompleteValue<T, Multi extends boolean = false> = Multi extends true ? T[] : T
 
 export type ValueBoundAutocompleteProps<T, Multi extends boolean = false> = {
-  options?: FormTypes.Options<T>
-  defaultOptions?: FormTypes.Options<T>
-  loadOptions?: (search: string) => Promise<FormTypes.Options<T>>
+  options?: Options<T>
+  defaultOptions?: Options<T>
+  loadOptions?: (search: string) => Promise<Options<T>>
   value: AutocompleteValue<T, Multi>
   renderItem?: AutocompleteRenderFN<AutocompleteValue<T, Multi>>
   onValueChange: (value: AutocompleteValue<T, Multi>) => void
-  filterItems?: (search: string, items: FormTypes.Options<T>) => FormTypes.Options<T>
+  filterItems?: (search: string, items: Options<T>) => Options<T>
   onLoadOptionsError?: (error: any) => void
   multiple?: Multi
-  getLabel?: (forOption: Multi extends true ? FormTypes.Options<T> : FormTypes.Options<T>[number]) => FormTypes.Label
-  onItemPressed?: (item: FormTypes.Options<T>[number]) => any
+  getLabel?: (forOption: Multi extends true ? Options<T> : Options<T>[number]) => string
+  onItemPressed?: (item: Options<T>[number]) => any
 }
 
 export type ReplaceAutocompleteProps<Props, T, Multi extends boolean = false> = Omit<
@@ -49,7 +48,7 @@ export type AutocompleteProps<T = any, Multi extends boolean = false> =
   ValueBoundAutocompleteProps<T, Multi> &
   {
     placeholder?: string
-    label?: FormTypes.Label
+    label?: string
     closeOnSelect?: boolean
     style?: StyledProp<AutocompleteComposition>
     keyboardAware?: GetKeyboardAwarePropsOptions

package/src/components/Backdrop/index.tsx

@@ -34,7 +34,6 @@ export const Backdrop = (props: BackdropProps) => {
   return (
     <View.Animated
       pointerEvents={visible ? 'auto' : 'none'}
-
       entering={entering}
       exiting={exiting}
       {...wrapperProps}

package/src/components/Checkbox/index.tsx

@@ -8,6 +8,8 @@ import { CheckboxProps } from './types'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -25,16 +27,24 @@ export const Checkbox = (props: CheckboxProps) => {
 
   const {
     style,
-    value,
     disabled,
     debugName,
-    onValueChange,
     checkboxOnLeft,
     checkIcon,
+    field,
+    forceError,
+    value,
+    onValueChange,
   } = others
 
   const styles = useStylesFor(Checkbox.styleRegistryName, style)
 
+  const {
+    fieldHandle,
+    validation,
+    wrapperRef,
+  } = useInputBase<boolean>(field, fields.boolean, [value, onValueChange])
+
   const boxAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
     animatedProperties: ['box:unchecked', 'box:disabled', 'box:checked', 'box:disabled-checked', 'box:disabled-unchecked'],
@@ -43,9 +53,9 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
+        disabledStyle = fieldHandle?.value ? styles['box:disabled-checked'] : styles['box:disabled-unchecked']
       }
-      const style = value ? styles['box:checked'] : styles['box:unchecked']
+      const style = fieldHandle?.value ? styles['box:checked'] : styles['box:unchecked']
 
       return {
         ...style,
@@ -53,7 +63,7 @@ export const Checkbox = (props: CheckboxProps) => {
       }
 
     },
-    dependencies: [value, disabled],
+    dependencies: [fieldHandle?.value, disabled],
   })
 
   const checkmarkWrapperAnimation = useAnimatedVariantStyles({
@@ -64,29 +74,33 @@ export const Checkbox = (props: CheckboxProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
+        disabledStyle = fieldHandle?.value ? styles['checkmarkWrapper:disabled-checked'] : styles['checkmarkWrapper:disabled-unchecked']
       }
-      const style = value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
+      const style = fieldHandle?.value ? styles['checkmarkWrapper:checked'] : styles['checkmarkWrapper:unchecked']
       return {
         ...style,
         ...disabledStyle,
       }
 
     },
-    dependencies: [value, disabled],
+    dependencies: [fieldHandle?.value, disabled],
   })
 
   // @ts-expect-error
   const _checkboxOnLeft = checkboxOnLeft ?? styles.__props?.checkboxOnLeft
 
+  const hasError = validation.showError || forceError
+
   return <InputBase
     {...inputBaseProps}
+    ref={wrapperRef}
+    error={hasError ? validation.message || forceError : null}
     debugName={debugName}
     wrapper={Touchable}
     style={styles}
     wrapperProps={{
       onPress: () => {
-        onValueChange(!value)
+        fieldHandle.setValue(!fieldHandle?.value)
       },
       disabled,
       rippleDisabled: true,

package/src/components/Checkbox/types.ts

@@ -1,13 +1,16 @@
 import { AppIcon, StyledProp } from '@codeleap/styles'
 import { InputBaseProps } from '../InputBase'
 import { CheckboxComposition } from './styles'
+import { BooleanField } from '@codeleap/form'
 
 export type CheckboxProps =
   Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
   {
-    value: boolean
-    onValueChange: (value: boolean) => void
+    field?: BooleanField<any>
     style?: StyledProp<CheckboxComposition>
     checkboxOnLeft?: boolean
     checkIcon?: AppIcon
+    forceError?: boolean
+    value?: boolean
+    onValueChange?: (value: boolean) => void
   }

package/src/components/DatePickerModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useMemo, useRef } from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { useConditionalState } from '@codeleap/hooks'
 import { useI18N } from '@codeleap/i18n'
@@ -11,6 +11,8 @@ import { DatePickerModalProps } from './types'
 import { AnyRecord, IJSX, StyledComponentProps, useCompositionStyles } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { DateField, fields } from '@codeleap/form'
+import { useInputBase } from '../InputBase/useInputBase'
 
 export * from './styles'
 export * from './types'
@@ -33,8 +35,9 @@ const OuterInputComponent: DatePickerModalProps['outerInputComponent'] = (props)
   />
 }
 
-const defaultFormatDate: DatePickerModalProps['formatDate'] = (date) => {
-  if (!date) return null
+const defaultFormatDate: DatePickerModalProps['formatDate'] = (_date) => {
+  if (!_date) return null
+  const date = new Date(_date)
   return `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`
 }
 
@@ -88,18 +91,16 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   }
 
   const {
+    field,
     isCustomModal,
     hideInput,
     visible: _visible,
     toggle: _toggle,
-    value: _value,
-    onValueChange,
     formatDate,
     debugName,
     cancelButtonProps = {},
     confirmButtonProps = {},
     outerInputComponent: OuterInput,
-    footer,
     datePickerProps,
     mode,
     label,
@@ -109,10 +110,12 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     style,
     minimumDate,
     maximumDate,
-    initialDate,
+    initialDate = minimumDate,
     footerComponent: Footer,
     toggleOnConfirm,
     onConfirm: _onConfirm,
+    value: _value,
+    onValueChange: _onValueChange,
     ...modalProps
   } = allProps
 
@@ -120,7 +123,11 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
 
   const [visible, toggle] = useConditionalState(_visible, _toggle, { initialValue: false, isBooleanToggle: true })
 
-  const [value, setValue] = [_value, onValueChange]
+  const {
+    fieldHandle,
+  } = useInputBase(field, fields.date as () => DateField<any>, [_value, _onValueChange])
+
+  const [value, setValue] = [fieldHandle?.value, fieldHandle.setValue]
 
   const Wrapper = isCustomModal ? ModalManager.Modal : React.Fragment
 
@@ -129,7 +136,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
   const formattedDate = value ? formatDate(value) : ''
   const { locale } = useI18N()
 
-  const tempDate = useRef<Date | null>(null)
+  const tempDate = useRef<Date | null>(initialDate instanceof Date ? initialDate : new Date(initialDate))
 
   const onConfirm = () => {
     if (commitDate == 'onConfirm' && !!tempDate.current) {
@@ -145,7 +152,7 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     }
   }
 
-  const modalFooter = footer || <Footer
+  const modalFooter = <Footer
     {...allProps}
     confirm={onConfirm}
     doneStyles={compositionStyles?.doneButton}
@@ -154,11 +161,9 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     confirmButtonProps={confirmButtonProps}
     cancelButtonProps={cancelButtonProps}
     showDoneButton={showDoneButton}
-    value={value}
     debugName={debugName}
     visible={visible}
     toggle={toggle}
-    onValueChange={setValue}
     valueLabel={formattedDate}
   />
 
@@ -174,6 +179,11 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
     id: null,
   } : {}
 
+  const date = useMemo(() => {
+    const newValue = value ?? initialDate
+    return newValue instanceof Date ? newValue : new Date(newValue)
+  }, [value, initialDate])
+
   return (
     <>
       {!hideInput ? <OuterInput
@@ -192,14 +202,13 @@ export const DatePickerModal = (props: DatePickerModalProps) => {
           modal={!isCustomModal}
           open={visible}
           onCancel={toggle}
-          date={value ?? initialDate ?? new Date()}
-          onDateChange={(date) => {
+          date={date}
+          onDateChange={(currentDate) => {
+            tempDate.current = currentDate
+
             if (commitDate === 'onChange') {
-              setValue(date)
-              return
+              setValue(currentDate)
             }
-
-            tempDate.current = date
           }}
           locale={locale}
           // @ts-expect-error

package/src/components/DatePickerModal/types.ts

@@ -1,18 +1,20 @@
 import React from 'react'
 import { StylesOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
 import { DatePickerModalButtonCompositions, DatePickerModalComposition } from './styles'
 import { DatePickerProps } from 'react-native-date-picker'
 import { ButtonProps } from '../Button'
 import { ModalProps } from '../Modal'
 import { StyledProp } from '@codeleap/styles'
+import { DateField } from '@codeleap/form'
 
-export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent'> & {
-  valueLabel: FormTypes.Label
+export type DatePickerModalOuterInputProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'field'> & {
+  valueLabel: string
+  value: any
+  onValueChange: (date: any) => void
 }
 
 type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponent' | 'style'> & {
-  valueLabel: FormTypes.Label
+  valueLabel: string
   confirm: () => void
   cancelStyles: StylesOf<DatePickerModalButtonCompositions>
   confirmStyles: StylesOf<DatePickerModalButtonCompositions>
@@ -22,19 +24,18 @@ type DatePickerModalFooterProps = Omit<DatePickerModalProps, 'outerInputComponen
 export type DatePickerModalProps =
   Omit<ModalProps, 'style' | 'ref'> &
   {
+    field?: DateField<any>
     hideInput?: boolean
     debugName: string
-    value: Date
-    label?: FormTypes.Label
-    placeholder?: FormTypes.Label
-    onValueChange: (date: Date) => void
+    label?: string
+    placeholder?: string
     isCustomModal?: boolean
     mode?: DatePickerProps['mode']
     cancelButtonProps?: Partial<ButtonProps>
     confirmButtonProps?: Partial<ButtonProps>
     datePickerProps?: Partial<DatePickerProps>
     outerInputComponent?: React.ComponentType<DatePickerModalOuterInputProps>
-    formatDate?: (date: Date) => FormTypes.Label
+    formatDate?: (date: Date) => string
     commitDate?: 'onConfirm' | 'onChange'
     showDoneButton?: boolean
     footerComponent?: React.ComponentType<DatePickerModalFooterProps>
@@ -44,4 +45,6 @@ export type DatePickerModalProps =
     toggleOnConfirm?: boolean
     onConfirm?: (value: Date) => void
     style?: StyledProp<DatePickerModalComposition>
+    value?: Date
+    onValueChange?: (value: Date) => void
   }

package/src/components/FileInput/types.ts

@@ -1,12 +1,11 @@
-import { AnyRef } from '@codeleap/types'
-import { FormTypes } from '@codeleap/form'
+import { AnyRef, MobileInputFile } from '@codeleap/types'
 import { DocumentPickerOptions } from 'react-native-document-picker'
 import { Options } from 'react-native-image-crop-picker'
 import { OSAlert } from '../../utils'
 
 export type FileInputImageSource = 'camera' | 'library' | 'fs'
 
-export type FileResult = FormTypes.AnyFile
+export type FileResult = MobileInputFile | string | number
 
 export type FileInputRef = {
   openFilePicker: (source?: FileInputImageSource, options?: Partial<Options>) => Promise<FileResult[]>
@@ -15,7 +14,7 @@ export type FileInputRef = {
 export type FileInputProps = {
   mode: 'hidden' | 'button'
   onFileSelect?: (files: FileResult[]) => void
-  options?: DocumentPickerOptions<any>
+  options?: DocumentPickerOptions
   ref?: AnyRef<FileInputRef>
   type?: 'image' | 'anyFile'
   alertProps?: Parameters<typeof OSAlert.ask>[0]

package/src/components/Grid/index.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, forwardRef, ComponentType } from 'react'
-import { ListRenderItemInfo } from 'react-native'
+import { FlatList, ListRenderItemInfo } from 'react-native'
 import { View, ViewProps } from '../View'
 import { EmptyPlaceholder } from '../EmptyPlaceholder'
 import { RefreshControl } from '../RefreshControl'
 import { List, ListItem } from '../List'
-import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view'
+
 import { GridProps } from './types'
 import { AnyRecord, AppTheme, IJSX, StyledComponentProps, StyledComponentWithProps, Theme, useTheme } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
@@ -17,7 +17,7 @@ const RenderSeparator = (props: { separatorStyles: ViewProps['style'] }) => {
   return <View style={props.separatorStyles} />
 }
 
-export const Grid = forwardRef<KeyboardAwareFlatList, GridProps>((flatGridProps, ref) => {
+export const Grid = forwardRef<FlatList, GridProps>((flatGridProps, ref) => {
   const {
     style,
     onRefresh,

package/src/components/Image/types.ts

@@ -1,18 +1,15 @@
 import { LoadingOverlayProps } from '../LoadingOverlay'
-import FastImage, { Source } from '@d11/react-native-fast-image'
-import { ImageProps as RNImageProps } from 'react-native'
+import FastImage, { FastImageProps } from '@d11/react-native-fast-image'
 import { ImageComposition } from './styles'
 import { StyledProp } from '@codeleap/styles'
-import { FormTypes } from '@codeleap/form'
 
 export type ImageProps =
-  Omit<RNImageProps, 'source' | 'style'> &
+  Omit<FastImageProps, 'style' | 'resizeMode'> &
   {
     fast?: boolean
     style?: StyledProp<ImageComposition>
-    source: Source | FormTypes.AnyFile
     resizeMode?: keyof typeof FastImage.resizeMode
     spotlight?: string
     maintainAspectRatio?: boolean
     withLoadingOverlay?: boolean | ((props: LoadingOverlayProps) => JSX.Element)
-  }
+  }

package/src/components/InputBase/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { forwardRef } from 'react'
 import { TypeGuards } from '@codeleap/types'
 import { getRenderedComponent } from '@codeleap/utils'
 import { ActionIcon, ActionIconProps } from '../ActionIcon'
@@ -6,6 +6,9 @@ import { View } from '../View'
 import { useInputBaseStyles } from './styles'
 import { InputBaseProps } from './types'
 import { Text } from '../Text'
+import RNAnimated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { View as RNView } from 'react-native'
+import { StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 
 export * from './styles'
 export * from './utils'
@@ -22,7 +25,7 @@ const KeyPassthrough = (props: React.PropsWithChildren<any>) => {
   return <>{props.children}</>
 }
 
-export const InputBase = (props: InputBaseProps) => {
+export const InputBase = forwardRef<RNView, InputBaseProps>((props: InputBaseProps, ref) => {
   const {
     children,
     error = null,
@@ -82,24 +85,27 @@ export const InputBase = (props: InputBaseProps) => {
       {children}
       {_rightIcon}
     </InnerWrapperComponent>,
-    error: hideErrorMessage ? null : (
-      _error || <Text text={''} style={styles.errorStyle} />
-    ),
   }
 
   return <WrapperComponent
     {...otherProps}
     {...wrapperProps}
     style={styles.wrapperStyle}
+    ref={ref}
   >
     {
       order.map((key) => <KeyPassthrough key={key}>
         {parts[key]}
       </KeyPassthrough>)
-
     }
+
+    {hideErrorMessage || !error ? null : (
+      <RNAnimated.View exiting={FadeOut.duration(100)} entering={FadeIn.duration(200)}>
+        {_error}
+      </RNAnimated.View>
+    )}
   </WrapperComponent>
-}
+}) as StyledComponentWithProps<InputBaseProps>
 
 InputBase.elements = ['wrapper', 'innerWrapper', 'label', 'errorMessage', 'description', 'icon', 'leftIcon', 'rightIcon']