@codeleap/mobile 4.3.9 → 5.0.0

package/src/components/SortablePhotos/useSortablePhotos.ts

@@ -1,7 +1,7 @@
 import { CreateOSAlert } from '@codeleap/modals'
 import { useEffect, useMemo, useState } from '@codeleap/hooks'
 import { FileInputImageSource, useFileInput } from '../FileInput'
-import { SortablePhoto, SortablePhotosProps } from './types'
+import { SortablePhoto, SortablePhotosProps, WithId } from './types'
 
 const SortableAlert = CreateOSAlert()
 
@@ -22,9 +22,9 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
 
   const input = useFileInput()
 
-  const [data, setData] = useState<T[]>([])
+  const [data, setData] = useState<WithId<T>[]>([])
 
-  const onChange = (photos: T[]) => {
+  const onChange = (photos: WithId<T>[]) => {
     const { newPhotos, sortedPhotos } = sortPhotos(photos)
 
     setData(sortedPhotos)
@@ -37,14 +37,14 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
       const length = Math.abs(numPhotos - currentLength)
       const fillPhotos = Array(length).fill({ filename: null, file: null }) as T[]
 
-      const newPhotos = currentPhotos.concat(fillPhotos)
+      const newPhotos = currentPhotos.concat(fillPhotos).map((photo, idx) => ({ ...photo, key: idx + '-photo' }))
 
       setData(newPhotos)
-      onChangePhotos(currentPhotos)
+      onChangePhotos(assignOrder(currentPhotos))
     }
   }, [loading])
 
-  const { emptyIndexes, numberPhotosMissing } = useMemo(() => {
+  const { emptyIndexes, numberPhotosMissing, enabledDragDrop } = useMemo(() => {
     const copyPhotos = [...data]
 
     const emptyIndexes = copyPhotos.reduce((indexes, photo, index) => {
@@ -56,28 +56,32 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
 
     const numberPhotosMissing = emptyIndexes?.length
 
+    const enabledDragDrop = numberPhotosMissing < numPhotos - 1
+
     return {
       emptyIndexes,
       numberPhotosMissing,
+      enabledDragDrop,
     }
   }, [JSON.stringify(data)])
 
-  const sortPhotos = (_unorderedPhotos: T[]) => {
+  const assignOrder = (photos: WithId<T>[] | T[]) => {
+    return photos.map((photo, idx) => ({ ...photo, order: idx }))
+  }
+
+  const sortPhotos = (_unorderedPhotos: WithId<T>[]) => {
     const unorderedPhotos = [..._unorderedPhotos]
 
-    const [newPhotos, emptyPhotos] = unorderedPhotos.reduce(
-      ([newPhotos, emptyPhotos], photo) => {
-        !!photo?.filename ? newPhotos.push(photo) : emptyPhotos.push(photo)
-        return [newPhotos, emptyPhotos]
-      },
-      [[], []] as [T[], T[]]
-    )
+    const newPhotos = unorderedPhotos.filter(photo => !!photo?.filename)
 
-    const sortedPhotos: T[] = newPhotos.concat(emptyPhotos)
+    const sortedPhotos = unorderedPhotos.map((photo, index) => ({ 
+      ...(newPhotos[index] ?? { file: null, filename: null } as T),
+      key: photo?.key 
+    }))
 
     return {
       sortedPhotos,
-      newPhotos,
+      newPhotos: assignOrder(newPhotos),
     }
   }
 
@@ -111,7 +115,7 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
           ...newPhotos[order],
           filename,
           file: uri,
-        } as T
+        } as WithId<T>
       }
     } else {
       const file = files?.[0]
@@ -122,7 +126,7 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
         ...newPhotos[order],
         filename,
         file: uri,
-      } as T
+      } as WithId<T>
     }
 
     onChange(newPhotos)
@@ -135,12 +139,12 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
       ...newPhotos[order],
       filename: null,
       file: null,
-    } as T
+    } as WithId<T>
 
     onChange(newPhotos)
   }
 
-  const handlePressPhoto = (currentData: T[], photo: T, order: number) => {
+  const handlePressPhoto = (photo: T, order: number) => {
     SortableAlert.custom({
       title: modalTitle,
       body: modalBody,
@@ -150,13 +154,14 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
         !!photo?.filename && { text: modalDeleteText, onPress: () => handleDeletePhoto(photo, order) },
       ],
       // @ts-expect-error
+      closable: true,
       isRow: false,
     })
 
-    onPressPhoto?.(currentData, photo, order)
+    onPressPhoto?.(data, photo, order)
   }
 
-  const onChangePhotosOrder = (newData: T[]) => {
+  const onChangePhotosOrder = (newData: WithId<T>[]) => {
     onChange(newData)
   }
 
@@ -170,5 +175,6 @@ export const useSortablePhotos = <T extends SortablePhoto>(props: SortablePhotos
     onChangePhotosOrder,
     emptyIndexes,
     data,
+    enabledDragDrop,
   }
 }

package/src/components/Switch/index.tsx

@@ -7,6 +7,8 @@ import { SwitchProps } from './types'
 import { AnyRecord, 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'
@@ -24,15 +26,23 @@ export const Switch = (props: SwitchProps) => {
 
   const {
     style,
-    value,
     disabled,
     debugName,
-    onValueChange,
     switchOnLeft,
+    field,
+    forceError,
+    value,
+    onValueChange,
   } = others
 
   const styles = useStylesFor(Switch.styleRegistryName, style)
 
+  const {
+    fieldHandle,
+    validation,
+    wrapperRef,
+  } = useInputBase<boolean>(field, fields.boolean, [value, onValueChange])
+
   const trackAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
     animatedProperties: ['track:off', 'track:disabled', 'track:on', 'track:disabled-on', 'track:disabled-off'],
@@ -41,16 +51,16 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['track:disabled-on'] : styles['track:disabled-off']
+        disabledStyle = fieldHandle?.value ? styles['track:disabled-on'] : styles['track:disabled-off']
       }
-      const style = value ? styles['track:on'] : styles['track:off']
+      const style = fieldHandle?.value ? styles['track:on'] : styles['track:off']
 
       return {
         ...style,
         ...disabledStyle,
       }
     },
-    dependencies: [value, disabled],
+    dependencies: [fieldHandle?.value, disabled],
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
@@ -61,29 +71,33 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
+        disabledStyle = fieldHandle?.value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
       }
-      const style = value ? styles['thumb:on'] : styles['thumb:off']
+      const style = fieldHandle?.value ? styles['thumb:on'] : styles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
       }
 
     },
-    dependencies: [value, disabled],
+    dependencies: [fieldHandle?.value, disabled],
   })
 
   // @ts-expect-error
   const _switchOnLeft = switchOnLeft ?? styles?.__props?.switchOnLeft
 
+  const hasError = validation.showError || forceError
+
   return <InputBase
     {...inputBaseProps}
+    ref={wrapperRef}
     debugName={debugName}
     wrapper={Touchable}
+    error={hasError ? validation.message || forceError : null}
     style={styles}
     wrapperProps={{
       onPress: () => {
-        onValueChange(!value)
+        fieldHandle.setValue(!fieldHandle?.value)
       },
       disabled,
       rippleDisabled: true,

package/src/components/Switch/types.ts

@@ -1,12 +1,15 @@
 import { StyledProp } from '@codeleap/styles'
 import { InputBaseProps } from '../InputBase'
 import { SwitchComposition } from './styles'
+import { BooleanField } from '@codeleap/form'
 
 export type SwitchProps =
   Omit<InputBaseProps, 'style'> &
   {
-    value: boolean
-    onValueChange: (value: boolean) => void
+    field?: BooleanField<any>
     style?: StyledProp<SwitchComposition>
     switchOnLeft?: boolean
+    forceError?: boolean
+    value?: boolean
+    onValueChange?: (value: boolean) => void
   }

package/src/components/TextInput/index.tsx

@@ -1,9 +1,7 @@
-import React, { useState } from 'react'
-import { useValidate } from '@codeleap/form'
-import { useBooleanToggle } from '@codeleap/hooks'
+import React from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { forwardRef, useImperativeHandle } from 'react'
-import { TextInput as NativeTextInput, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { forwardRef } from 'react'
+import { TextInput as NativeTextInput } from 'react-native'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Touchable } from '../Touchable'
 import { MaskedTextInput } from '../../modules/textInputMask'
@@ -11,31 +9,29 @@ import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProp
 import { TextInputProps } from './types'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
+import { useTextInput } from './useTextInput'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
 
 export * from './styles'
 export * from './types'
 
 export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
-  const innerInputRef = React.useRef<NativeTextInput>(null)
-
-  const [isFocused, setIsFocused] = useState(false)
-  const [currentSelection, setCurrentSelection] = useState({ start: 0 })
+  const allProps = {
+    ...TextInput.defaultProps,
+    ...props,
+  }
 
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...TextInput.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(allProps)
 
   const {
-    value,
-    validate,
     debugName,
     visibilityToggle,
     masking,
-    password,
+    secure,
+    field,
     onChangeMask,
     onPress,
     visibleIcon,
@@ -43,70 +39,42 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     style,
     autoAdjustSelection,
     selectionStart,
-    _error = null,
+    forceError,
+    onChangeText,
+    multiline,
     ...textInputProps
   } = others
 
-  const [secureTextEntry, toggleSecureTextEntry] = useBooleanToggle(true)
-
-  const isMasked = !!masking
-
-  const InputElement = isMasked ? MaskedTextInput : NativeTextInput
-
   const styles = useStylesFor(TextInput.styleRegistryName, style)
 
-  // @ts-expect-error - React's ref type system is weird
-  useImperativeHandle(inputRef, () => {
-    return {
-      ...innerInputRef.current,
-      focus: () => {
-        innerInputRef.current?.focus?.()
-      },
-      isTextInput: true,
-    }
-  }, [!!innerInputRef?.current?.focus])
+  const {
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+    isFocused, 
+    secureTextEntry,
+    currentSelection,
+    hasMultipleLines,
+    hasValue,
+    hasError,
+    toggleSecureTextEntry,
+    handleMaskChange,
+    handleBlur,
+    handleFocus,
+  } = useTextInput(allProps)
+  
+  const InputElement = masking ? MaskedTextInput : NativeTextInput
 
   const isPressable = TypeGuards.isFunction(onPress)
 
-  const validation = useValidate(value, validate)
-
-  const handleBlur = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    validation.onInputBlurred()
-    setIsFocused(false)
-    if (autoAdjustSelection) setCurrentSelection({ start: selectionStart })
-    props.onBlur?.(e)
-  }, [validation.onInputBlurred, props.onBlur])
-
-  const handleFocus = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    validation.onInputFocused()
-    setIsFocused(true)
-    if (autoAdjustSelection) setCurrentSelection(null)
-    props.onFocus?.(e)
-  }, [validation.onInputFocused, props.onFocus])
-
-  const handleMaskChange = (masked, unmasked) => {
-    if (textInputProps.onChangeText) textInputProps.onChangeText(masking?.saveFormatted ? masked : masked)
-    if (onChangeMask) onChangeMask(masked, unmasked)
-  }
-
-  const isMultiline = textInputProps.multiline
   const isDisabled = !!inputBaseProps.disabled
 
-  const placeholderTextColor = [
-    [isDisabled, styles['placeholder:disabled']],
-    [!validation.isValid, styles['placeholder:error']],
-    [isFocused, styles['placeholder:focus']],
-    [true, styles?.placeholder],
-    // @ts-expect-error
-  ].find(([x]) => x)?.[1]?.color
-
-  const selectionColor = [
-    [isDisabled, styles['selection:disabled']],
-    [!validation.isValid, styles['selection:error']],
-    [isFocused, styles['selection:focus']],
-    [true, styles?.selection],
-    // @ts-expect-error
-  ].find(([x]) => x)?.[1]?.color
+  const partialStyles = useInputBasePartialStyles(styles, ['placeholder', 'selection'], {
+    disabled: isDisabled,
+    error: !!hasError,
+    focus: isFocused,
+  })
 
   const visibilityToggleProps = visibilityToggle ? {
     onPress: toggleSecureTextEntry,
@@ -116,36 +84,33 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
 
   const rightIcon = inputBaseProps?.rightIcon ?? visibilityToggleProps
 
-  const maskingExtraProps = isMasked ? {
+  const maskingExtraProps = masking ? {
     onChangeText: handleMaskChange,
     ref: null,
     refInput: (inputRef) => {
-      if (!!inputRef) {
-        innerInputRef.current = inputRef
-      }
+      if (!!inputRef) innerInputRef.current = inputRef
     },
     ...masking,
-  } : {}
+  } : {
+    onChangeText: fieldHandle.setValue
+  }
 
   const buttonModeProps = isPressable ? {
     editable: false,
     caretHidden: true,
   } : {}
 
-  const hasMultipleLines = isMultiline && value?.includes('\n')
-
-  const hasValue = value?.length > 0
-
   return <InputBase
     {...inputBaseProps}
+    ref={wrapperRef}
     innerWrapper={isPressable ? Touchable : undefined}
     debugName={debugName}
-    error={(validation.isValid && !_error) ? null : _error || validation.message}
+    error={hasError ? validation.message || forceError : null}
     style={{
       ...styles,
       innerWrapper: [
         styles?.innerWrapper,
-        isMultiline && styles['innerWrapper:multiline'],
+        multiline && styles['innerWrapper:multiline'],
         hasMultipleLines && styles['innerWrapper:hasMultipleLines'],
       ],
     }}
@@ -164,23 +129,23 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       editable={!isPressable && !isDisabled}
       {...buttonModeProps}
       selection={autoAdjustSelection ? currentSelection : undefined}
-      placeholderTextColor={placeholderTextColor}
-      value={value}
-      selectionColor={selectionColor}
-      secureTextEntry={password && secureTextEntry}
-      textAlignVertical={isMultiline ? 'top' : undefined}
+      placeholderTextColor={partialStyles?.placeholder?.color}
+      value={fieldHandle?.value}
+      selectionColor={partialStyles?.selection?.color}
+      secureTextEntry={secure && secureTextEntry}
+      textAlignVertical={multiline ? 'top' : undefined}
+      multiline={multiline}
       {...textInputProps}
       onBlur={handleBlur}
       onFocus={handleFocus}
       style={[
         styles?.input,
-        isMultiline && styles['input:multiline'],
+        multiline && styles['input:multiline'],
         isFocused && styles['input:focused'],
-        !validation.isValid && styles['input:error'],
+        hasError && styles['input:error'],
         isDisabled && styles['input:disabled'],
         hasMultipleLines && styles['input:hasMultipleLines'],
         hasValue && styles['input:typed'],
-
       ]}
       ref={innerInputRef}
       pointerEvents={isPressable ? 'none' : undefined}
@@ -203,6 +168,7 @@ TextInput.defaultProps = {
   visibilityToggle: false,
   autoAdjustSelection: false,
   selectionStart: 0,
+  secure: false,
 } as Partial<TextInputProps>
 
 MobileStyleRegistry.registerComponent(TextInput)

package/src/components/TextInput/types.ts

@@ -1,27 +1,29 @@
 import { InputBaseProps } from '../InputBase'
 import { TextInputProps as RNTextInputProps, TextInput as RNTextInput } from 'react-native'
 import { AnyFunction } from '@codeleap/types'
-import { FormTypes, yup } from '@codeleap/form'
 import { AppIcon, StyledProp } from '@codeleap/styles'
 import { TextInputMaskProps } from '../../modules/textInputMask'
 import { TextInputComposition } from './styles'
+import { Field } from '@codeleap/form'
 
 export type TextInputProps =
-  Omit<InputBaseProps, 'style'> &
+  Omit<InputBaseProps, 'style' | 'ref'> &
   Omit<RNTextInputProps, 'style'> &
   {
-    password?: boolean
-    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
+    secure?: boolean
     debugName: string
     autoAdjustSelection?: boolean
     selectionStart?: number
     visibilityToggle?: boolean
-    masking?: FormTypes.TextField['masking']
     onChangeMask?: TextInputMaskProps['onChangeText']
+    masking?: TextInputMaskProps['masking']
     visibleIcon?: AppIcon
     hiddenIcon?: AppIcon
-    _error?: string
+    forceError?: string
     onPress?: AnyFunction
     style?: StyledProp<TextInputComposition>
     ref?: React.Ref<RNTextInput>
-  }
+    field?: Field<string, any, any>
+    value?: string
+    onValueChange?: (value: string) => void
+  }

package/src/components/TextInput/useTextInput.ts

@@ -0,0 +1,88 @@
+import { useCallback, useState } from 'react'
+import { TextInputProps } from './types'
+import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native/types'
+import { useInputBase } from '../InputBase/useInputBase'
+import { fields } from '@codeleap/form'
+
+export function useTextInput(props: Partial<TextInputProps>) {
+  const { 
+    onFocus, 
+    onBlur, 
+    secure, 
+    field, 
+    autoAdjustSelection, 
+    selectionStart,
+    masking,
+    onChangeMask,
+    multiline,
+    forceError,
+    value,
+    onValueChange,
+  } = props
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const [currentSelection, setCurrentSelection] = useState({ start: 0 })
+
+  const [secureTextEntry, setSecureTextEntry] = useState(secure)
+
+  const toggleSecureTextEntry = () => setSecureTextEntry(s => !s)
+
+  const {
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+  } = useInputBase<string>(field, fields.text, [value, onValueChange], {
+    revealValue() {
+      setSecureTextEntry(false)
+    },
+    hideValue() {
+      setSecureTextEntry(true)
+    },
+    toggleValueVisibility() {
+      toggleSecureTextEntry()
+    },
+  }, [setSecureTextEntry]) 
+
+  const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    validation.onInputBlurred()
+    setIsFocused(false)
+    if (autoAdjustSelection) setCurrentSelection({ start: selectionStart })
+    onBlur?.(e)
+  }, [validation.onInputBlurred, onBlur])
+
+  const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    setIsFocused(true)
+    if (autoAdjustSelection) setCurrentSelection(null)
+    onFocus?.(e)
+  }, [onFocus])
+
+  const handleMaskChange = useCallback((masked, unmasked) => {
+    fieldHandle.setValue(masking?.saveFormatted ? masked : masked)
+    if (onChangeMask) onChangeMask(masked, unmasked)
+  }, [masking?.saveFormatted, onChangeMask])
+
+  const hasMultipleLines = multiline && fieldHandle?.value?.includes('\n')
+
+  const hasValue = fieldHandle?.value?.length > 0
+
+  const hasError = validation.showError || forceError
+
+  return {
+    isFocused,
+    currentSelection,
+    secureTextEntry,
+    handleBlur,
+    handleFocus,
+    handleMaskChange,
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+    toggleSecureTextEntry,
+    hasMultipleLines,
+    hasValue,
+    hasError,
+  }
+}

package/src/components/Touchable/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { onMount } from '@codeleap/hooks'
+import { onMount, useComponentTestId } from '@codeleap/hooks'
 import { useGlobalContext } from '@codeleap/hooks'
 import { Pressable, StyleSheet, View as RNView, Insets, Platform } from 'react-native'
 import { View } from '../View'
@@ -51,6 +51,8 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
 
   const { logger } = useGlobalContext()
 
+  const testId = useComponentTestId(Touchable, touchableProps, ['style', 'children', 'debounce'])
+
   const press = () => {
     if (!onPress) return
 
@@ -187,6 +189,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
       {!disableRipple ? (
         <PressableRipple
           onPress={press}
+          testID={testId}
           {...props}
           style={[pressableStyle, styles?.pressable]}
           rippleFades={false}
@@ -207,6 +210,7 @@ export const Touchable = forwardRef<RNView, TouchableProps>((touchableProps, ref
             getFeedbackStyle(pressed),
             styles?.pressable,
           ])}
+          testID={testId}
           {...props}
           ref={ref}
         >