@codeleap/mobile 4.3.9 → 5.0.0

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']
 

package/src/components/InputBase/types.ts

@@ -1,6 +1,7 @@
 import { PropsOf, StylesOf } from '@codeleap/types'
 import { InputBaseComposition } from './styles'
 import { ActionIcon } from '../ActionIcon'
+import { View } from 'react-native'
 
 type ActionIconProps = PropsOf<typeof ActionIcon>
 
@@ -25,4 +26,5 @@ export type InputBaseProps = React.PropsWithChildren<{
   labelAsRow?: boolean
   hideErrorMessage?: boolean
   hasValue?: boolean
+  ref?: React.Ref<View>
 }>

package/src/components/InputBase/useInputBase.ts

@@ -0,0 +1,60 @@
+import { useRef } from 'react'
+import { View, TextInput, StatusBar } from 'react-native'
+import { useWrappingScrollable } from '../../modules/scroll'
+import { Field, IFieldRef, fields, useField } from '@codeleap/form'
+import { AnyRecord } from '@codeleap/types'
+
+export function useInputBase<V,  T extends Field<V, any, any, unknown> = Field<V, any, any, unknown>>(
+  field: T,
+  defaultField: (options: AnyRecord) => T = fields.text as () => T,
+  customState: [V, (value: V) => void] | [] = [],
+  params: Partial<IFieldRef<V>> = {}, 
+  deps: any[] = []
+) {
+  const hasState = customState?.length === 2
+
+  const wrapperRef = useRef<View>()
+
+  const innerInputRef = useRef<TextInput>(null)
+
+  const scrollable = useWrappingScrollable()
+
+  const fieldHandle = useField<V, T>(field as T, [
+    {
+      blur() {
+        innerInputRef.current.blur()
+      },
+      focus() {
+        innerInputRef.current.focus()
+      },
+      getValue() {
+        return innerInputRef.current.state as V
+      },
+      scrollIntoView() {
+        return field.measurePosition(wrapperRef).then((measureResult) => {
+          field.scrollTo(scrollable, measureResult)
+        })
+      },
+      ...params,
+    },
+    deps
+  ] as unknown as Parameters<T['use']>, () => defaultField(hasState ? {
+    state: {
+      get: () => customState[0],
+      set: (val: V) => customState[1](val),
+      value: customState[0],
+      listen: () => {},
+    },
+    validate: () => ({ isValid: true })
+  } : {}))
+
+  const validation = fieldHandle.validation
+
+  return {
+    fieldHandle,
+    validation,
+    wrapperRef,
+    innerInputRef,
+    scrollable,
+  }
+}

package/src/components/InputBase/useInputBasePartialStyles.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+import { TextStyle, ViewStyle } from 'react-native'
+
+export function useInputBasePartialStyles<C extends string, S extends Record<string, boolean>>(
+  styles: Record<C, ViewStyle>,
+  styleKeys: Array<C | [C, boolean]>,
+  states: S,
+) {
+  return useMemo(() => {
+    return styleKeys.reduce((acc, value) => {
+      const [key, overrideWithDefault] = Array.isArray(value) ? value : [value, true]
+
+      const result = Object.entries(states).reduce((acc, [state, is]) => {
+        if (!is) return acc
+
+        const style = styles?.[`${key}:${state}` as C]
+
+        if (!style) return acc
+
+        return {
+          ...acc,
+          ...styles[`${key}:${state}` as C]
+        }
+      }, {})
+
+      if (overrideWithDefault && !!styles?.[key]) {
+        acc[key] = {
+          ...styles[key],
+          ...result,
+        }
+      } else {
+        acc[key] = result
+      }
+
+      return acc
+    }, {} as Record<C, ViewStyle & TextStyle>)
+  }, [states])
+}

package/src/components/InputBase/utils.ts

@@ -10,27 +10,27 @@ type InputBaseKey = keyof InputBaseProps
 
 type BaseProps = Omit<InputBaseProps, 'style'>
 
+const varList:InputBaseKey[] = [
+  'label',
+  'style',
+  'error',
+  'innerWrapper',
+  'leftIcon',
+  'rightIcon',
+  'description',
+  'wrapper',
+  'children',
+  'innerWrapperProps',
+  'wrapperProps',
+  'disabled',
+  'hideErrorMessage',
+  'style',
+]
+
 export function selectInputBaseProps<T extends BaseProps>(props: T): {
   inputBaseProps: BaseProps
   others: OmitDiff<T, T>
 } {
-  const varList:InputBaseKey[] = [
-    'label',
-    'style',
-    'error',
-    'innerWrapper',
-    'leftIcon',
-    'rightIcon',
-    'description',
-    'wrapper',
-    'children',
-    'innerWrapperProps',
-    'wrapperProps',
-    'disabled',
-    'hideErrorMessage',
-    'style',
-  ]
-
   const copy = { ...props }
 
   const result = varList.reduce((acc, key) => {

package/src/components/List/index.tsx

@@ -22,7 +22,6 @@ export const List = forwardRef<FlatList, FlatListProps>((flatListProps, ref) =>
   const {
     style,
     onRefresh,
-    component,
     refreshing,
     placeholder,
     refreshControlProps,

package/src/components/Modal/index.tsx

@@ -3,7 +3,7 @@ import { View } from '../View'
 import { Scroll } from '../Scroll'
 import { TypeGuards } from '@codeleap/types'
 import { Backdrop } from '../Backdrop'
-import { useAnimatedVariantStyles, useBackButton } from '../../utils/hooks'
+import { useBackButton } from '../../utils/hooks'
 import { Text } from '../Text'
 import { Touchable } from '../Touchable'
 import { ActionIcon } from '../ActionIcon'
@@ -12,7 +12,7 @@ import { ModalHeaderProps, ModalProps } from './types'
 import { AnyRecord, AppIcon, useNestedStylesByKey, IJSX, StyledComponentProps, useTheme, AppTheme, Theme } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
-import { SlideInDown, SlideOutDown } from 'react-native-reanimated'
+import { FadeIn, FadeOut } from 'react-native-reanimated'
 
 export * from './styles'
 export * from './types'
@@ -91,17 +91,6 @@ export const Modal = (modalProps: ModalProps) => {
 
   const buttonStyles = useNestedStylesByKey('closeButton', styles)
 
-  const boxAnimationStyles = useAnimatedVariantStyles({
-    updater: (states) => {
-      'worklet'
-      return visible ? states['box:visible'] : states['box:hidden']
-    },
-    animatedProperties: ['box:hidden', 'box:visible'],
-    variantStyles: styles,
-    transition: styles['box:transition'],
-    dependencies: [visible],
-  })
-
   const ScrollComponent = scroll ? Scroll : View
   const scrollStyle = scroll ? styles?.scroll : styles?.innerWrapper
 
@@ -212,8 +201,8 @@ Modal.defaultProps = {
   dismissOnBackdrop: true,
   scroll: true,
   closeOnHardwareBackPress: true,
-  boxEntering: SlideInDown.build(),
-  boxExiting: SlideOutDown.build(),
+  boxEntering: FadeIn.duration(100).build(),
+  boxExiting: FadeOut.duration(100).build(),
 } as Partial<ModalProps>
 
 MobileStyleRegistry.registerComponent(Modal)

package/src/components/NumberIncrement/index.tsx

@@ -1,24 +1,22 @@
-import React, { useState, useRef } from 'react'
+import React from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { useValidate } from '@codeleap/form'
-import { forwardRef, useImperativeHandle } from 'react'
+import { forwardRef } from 'react'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
 import { MaskedTextInput } from '../../modules/textInputMask'
-import { TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { TextInput as NativeTextInput } from 'react-native'
 import { Touchable } from '../Touchable'
-import { useActionValidate } from './utils'
 import { NumberIncrementProps } from './types'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
 import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import CurrencyInput from 'react-native-currency-input'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { useNumberIncrement } from './useNumberIncrement'
 
 export * from './styles'
 export * from './types'
 
-const MAX_VALID_DIGITS = 1000000000000000 // maximum number of digits that the input supports to perform operations
-
 const defaultParseValue = (_value: string) => {
   const value = _value?.length > 0 ? _value : '0'
 
@@ -28,27 +26,24 @@ const defaultParseValue = (_value: string) => {
 }
 
 export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>((props, inputRef) => {
+  const allProps = {
+    ...NumberIncrement.defaultProps,
+    ...props,
+  }
+
   const {
     inputBaseProps,
     others,
-  } = selectInputBaseProps({
-    ...NumberIncrement.defaultProps,
-    ...props,
-  })
+  } = selectInputBaseProps(allProps)
 
   const {
     style,
-    value,
     disabled,
-    onChangeText,
     onChangeMask,
-    max,
-    min,
     step,
     editable,
-    validate,
     onPress,
-    _error,
+    forceError,
     masking,
     separator,
     prefix,
@@ -61,18 +56,30 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     mask,
     actionDebounce,
     precision,
+    field,
     ...textInputProps
   } = others
 
-  const [isFocused, setIsFocused] = useState(false)
-
-  const innerInputRef = useRef<NativeTextInput>(null)
-
-  const actionValidation = useActionValidate(validate)
-  const validation = useValidate(value, validate)
+  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
-  const hasError = !validation.isValid || _error || !actionValidation?.isValid
-  const errorMessage = validation.message || _error || actionValidation?.message
+  const {
+    fieldHandle,
+    validation,
+    min,
+    max,
+    innerInputRef,
+    wrapperRef,
+    isFocused,
+    hasValue,
+    hasError,
+    incrementDisabled,
+    decrementDisabled,
+    handleChangeInput,
+    handleChange,
+    handleMaskChange,
+    handleBlur,
+    handleFocus,
+  } = useNumberIncrement(allProps)
 
   const isFormatted = TypeGuards.isFunction(formatter)
 
@@ -84,130 +91,16 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
 
   const InputElement: any = isMasked ? MaskedTextInput : isCurrency ? CurrencyInput : NativeTextInput
 
-  const hasValue = TypeGuards.isString(value) ? value.length > 0 : !TypeGuards.isNil(value)
-
-  // @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 incrementDisabled = React.useMemo(() => {
-    if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
-      return true
+  const partialStyles = useInputBasePartialStyles(
+    styles,
+    [['input', false], 'placeholder', 'selection'],
+    {
+      disabled,
+      error: !!hasError,
+      focus: isFocused,
+      typed: hasValue,
     }
-    return false
-  }, [value])
-
-  const decrementDisabled = React.useMemo(() => {
-    if (TypeGuards.isNumber(min) && (Number(value) <= min)) {
-      return true
-    }
-    return false
-  }, [value])
-
-  const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
-
-  const inputTextStyle = React.useMemo(() => ([
-    styles.input,
-    isFocused && styles['input:focus'],
-    hasError && styles['input:error'],
-    disabled && styles['input:disabled'],
-    hasValue && styles['input:typed'],
-  ]), [disabled, isFocused, hasError])
-
-  const placeholderTextColor = [
-    [disabled, styles['placeholder:disabled']],
-    [hasError, styles['placeholder:error']],
-    [isFocused, styles['placeholder:focus']],
-    [hasValue, styles['placeholder:typed']],
-    [true, styles.placeholder],
-    // @ts-expect-error
-  ].find(([x]) => x)?.[1]?.color
-
-  const selectionColor = [
-    [disabled, styles['selection:disabled']],
-    [!validation.isValid, styles['selection:error']],
-    [isFocused, styles['selection:focus']],
-    [hasValue, styles['selection:typed']],
-    [true, styles.selection],
-    // @ts-expect-error
-  ].find(([x]) => x)?.[1]?.color
-
-  const onChange = (newValue: number) => {
-    actionValidation.onAction(newValue)
-    // @ts-ignore
-    if (onChangeText) onChangeText?.(newValue)
-  }
-
-  const actionTimeoutRef = useRef(null)
-
-  const clearActionTimeoutRef = React.useCallback(() => {
-    if (actionTimeoutRef.current !== null) {
-      clearTimeout(actionTimeoutRef.current)
-      actionTimeoutRef.current = null
-    }
-  }, [actionTimeoutRef.current])
-
-  const handleChange = React.useCallback((action: 'increment' | 'decrement') => {
-    if (actionPressAutoFocus) setIsFocused(true)
-    clearActionTimeoutRef()
-
-    if (action === 'increment' && !incrementDisabled) {
-      const newValue = Number(value) + step
-      onChange(newValue)
-    } else if (action === 'decrement' && !decrementDisabled) {
-      const newValue = Number(value) - step
-      onChange(newValue)
-    }
-
-    if (actionPressAutoFocus) {
-      actionTimeoutRef.current = setTimeout(() => {
-        setIsFocused(false)
-      }, timeoutActionFocus)
-    }
-  }, [value])
-
-  const handleBlur = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
-      onChange(max)
-    } else if (TypeGuards.isNumber(min) && (Number(value) <= min) || TypeGuards.isNil(value) || String(value)?.length <= 0) {
-      onChange(min)
-    }
-
-    validation?.onInputBlurred()
-    setIsFocused(false)
-    props?.onBlur?.(e)
-  }, [validation?.onInputBlurred, props?.onBlur, value])
-
-  const handleFocus = React.useCallback((e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    validation?.onInputFocused()
-    clearActionTimeoutRef()
-    if (editable) setIsFocused(true)
-    if (e) props?.onFocus?.(e)
-  }, [validation?.onInputFocused, props?.onFocus])
-
-  const handleChangeInput: NativeTextInputProps['onChangeText'] = (text) => {
-    const value = parseValue(text)
-
-    if (value >= MAX_VALID_DIGITS) {
-      onChange(MAX_VALID_DIGITS)
-      return MAX_VALID_DIGITS
-    }
-
-    onChange(value)
-    return value
-  }
-
-  const handleMaskChange = (masked: string, unmasked: any) => {
-    handleChangeInput?.(masked)
-    if (onChangeMask) onChangeMask(masked, unmasked)
-  }
+  )
 
   const maskingExtraProps = isMasked ? {
     type: TypeGuards.isNil(mask) ? 'money' : 'custom',
@@ -230,9 +123,9 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   } : {}
 
   const currencyExtraProps = isCurrency ? {
-    value,
+    value: fieldHandle?.value,
     onChangeText: null,
-    onChangeValue: onChange,
+    onChangeValue: fieldHandle.setValue,
     prefix: prefix,
     separator: separator ?? '.',
     suffix: suffix,
@@ -243,7 +136,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   } : {}
 
   const onPressInnerWrapper = () => {
-    handleFocus()
+    handleFocus(null)
     if (editable) innerInputRef.current?.focus?.()
     if (onPress) onPress?.()
   }
@@ -251,7 +144,8 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   return (
     <InputBase
       {...inputBaseProps}
-      error={hasError ? errorMessage : null}
+      ref={wrapperRef}
+      error={hasError ? validation.message || forceError : null}
       style={styles}
       rightIcon={TypeGuards.isComponentOrElement(inputBaseProps.rightIcon) ? inputBaseProps.rightIcon : {
         name: 'plus' as AppIcon,
@@ -284,22 +178,22 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
           textAlignVertical='center'
           allowFontScaling={false}
           editable={!disabled}
-          placeholderTextColor={placeholderTextColor}
-          value={isFormatted ? formatter(value) : String(value)}
-          selectionColor={selectionColor}
+          placeholderTextColor={partialStyles?.placeholder?.color}
+          value={isFormatted ? formatter(fieldHandle?.value ?? min) : String(fieldHandle?.value ?? min)}
+          selectionColor={partialStyles?.selection?.color}
           onChangeText={handleChangeInput}
           {...textInputProps}
           onBlur={handleBlur}
           onFocus={handleFocus}
-          style={inputTextStyle}
+          style={[styles.input, partialStyles.input]}
           ref={innerInputRef}
           {...maskingExtraProps}
           {...currencyExtraProps}
         />
       ) : (
         <Text
-          text={isFormatted ? formatter(value) : String(value)}
-          style={inputTextStyle}
+          text={isFormatted ? formatter(fieldHandle?.value) : String(fieldHandle?.value)}
+          style={[styles.input, partialStyles.input]}
         />
       )}
     </InputBase>
@@ -315,8 +209,6 @@ NumberIncrement.withVariantTypes = <S extends AnyRecord>(styles: S) => {
 }
 
 NumberIncrement.defaultProps = {
-  max: MAX_VALID_DIGITS,
-  min: 0,
   step: 1,
   editable: true,
   separator: null,

package/src/components/NumberIncrement/types.ts

@@ -1,25 +1,24 @@
 import { AnyFunction } from '@codeleap/types'
-import { yup, FormTypes } from '@codeleap/form'
 import { NumberIncrementComposition } from './styles'
 import { TextInputMaskProps } from '../../modules/textInputMask'
 import { TextInputProps as RNTextInputProps } from 'react-native'
 import { InputBaseProps } from '../InputBase'
 import { StyledProp } from '@codeleap/styles'
+import { TextInputProps } from '../TextInput'
+import { NumberField } from '@codeleap/form'
 
-type Masking = FormTypes.TextField['masking']
+type Masking = TextInputProps['masking']
 type MaskOptions = Masking['options']
 
 export type NumberIncrementProps =
   Omit<InputBaseProps, 'style'|'value'> &
   Omit<RNTextInputProps, 'style'|'value'> &
   {
-    value: number | string
-    validate?: FormTypes.ValidatorWithoutForm<string> | yup.SchemaOf<string>
     max?: number
     min?: number
     step?: number
     editable?: boolean
-    _error?: string
+    forceError?: string
     placeholder?: string
     onChangeMask?: TextInputMaskProps['onChangeText']
     masking?: Exclude<Masking, 'mask' | 'format'>
@@ -36,4 +35,7 @@ export type NumberIncrementProps =
     actionDebounce?: number | null
     onPress?: AnyFunction
     style?: StyledProp<NumberIncrementComposition>
+    field?: NumberField<any>
+    value?: number
+    onValueChange?: (value: number) => void
   }