@codeleap/mobile 5.0.7 → 5.0.9

package/src/components/NumberIncrement/index.tsx

@@ -12,7 +12,7 @@ import { MobileStyleRegistry } from '../../Registry'
 import { useStylesFor } from '../../hooks'
 import CurrencyInput from 'react-native-currency-input'
 import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
-import { useNumberIncrement } from './useNumberIncrement'
+import { MAX_VALID_DIGITS, useNumberIncrement } from './useNumberIncrement'
 
 export * from './styles'
 export * from './types'
@@ -63,7 +63,6 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
   const {
-    fieldHandle,
     validation,
     min,
     max,
@@ -79,6 +78,8 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     handleMaskChange,
     handleBlur,
     handleFocus,
+    inputValue,
+    onInputValueChange,
   } = useNumberIncrement(allProps)
 
   const isFormatted = TypeGuards.isFunction(formatter)
@@ -123,9 +124,9 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
   } : {}
 
   const currencyExtraProps = isCurrency ? {
-    value: fieldHandle?.value,
+    value: inputValue,
     onChangeText: null,
-    onChangeValue: fieldHandle.setValue,
+    onChangeValue: onInputValueChange,
     prefix: prefix,
     separator: separator ?? '.',
     suffix: suffix,
@@ -145,7 +146,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
     <InputBase
       {...inputBaseProps}
       ref={wrapperRef}
-      error={hasError ? validation.message || forceError : null}
+      error={hasError ? validation?.message || forceError : null}
       style={styles}
       rightIcon={TypeGuards.isComponentOrElement(inputBaseProps.rightIcon) ? inputBaseProps.rightIcon : {
         name: 'plus' as AppIcon,
@@ -179,10 +180,10 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
           allowFontScaling={false}
           editable={!disabled}
           placeholderTextColor={partialStyles?.placeholder?.color}
-          value={isFormatted ? formatter(fieldHandle?.value ?? min) : String(fieldHandle?.value ?? min)}
           selectionColor={partialStyles?.selection?.color}
-          onChangeText={handleChangeInput}
           {...textInputProps}
+          onChangeText={handleChangeInput}
+          value={isFormatted ? formatter(inputValue ?? min) : String(inputValue ?? min)}
           onBlur={handleBlur}
           onFocus={handleFocus}
           style={[styles.input, partialStyles.input]}
@@ -192,7 +193,7 @@ export const NumberIncrement = forwardRef<NativeTextInput, NumberIncrementProps>
         />
       ) : (
         <Text
-          text={isFormatted ? formatter(fieldHandle?.value) : String(fieldHandle?.value)}
+          text={isFormatted ? formatter(inputValue) : String(inputValue)}
           style={[styles.input, partialStyles.input]}
         />
       )}
@@ -220,6 +221,8 @@ NumberIncrement.defaultProps = {
   timeoutActionFocus: 300,
   actionPressAutoFocus: true,
   actionDebounce: null,
+  min: 0,
+  max: MAX_VALID_DIGITS
 } as Partial<NumberIncrementProps>
 
 MobileStyleRegistry.registerComponent(NumberIncrement)

package/src/components/NumberIncrement/useNumberIncrement.ts

@@ -32,12 +32,24 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     validation,
     innerInputRef,
     wrapperRef,
+    inputValue,
+    onInputValueChange,
   } = useInputBase(
     field as Field<number, any, any>,
     fields.number as () => Field<number, any, any>,
-    [value, onValueChange]
+    { value, onValueChange }
   )
 
+  const incrementDisabled = useMemo(() => {
+    const maxLimit = TypeGuards.isNumber(max) && (Number(inputValue) >= max)
+    return maxLimit
+  }, [inputValue])
+
+  const decrementDisabled = useMemo(() => {
+    const minLimit = TypeGuards.isNumber(min) && (Number(inputValue) <= min)
+    return minLimit
+  }, [inputValue])
+
   const actionTimeoutRef = useRef(null)
 
   const clearActionTimeoutRef = useCallback(() => {
@@ -52,11 +64,11 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     clearActionTimeoutRef()
 
     if (action === 'increment' && !incrementDisabled) {
-      const newValue = Number(fieldHandle?.value) + step
-      fieldHandle.setValue(newValue)
+      const newValue = Number(inputValue) + step
+      onInputValueChange(newValue)
     } else if (action === 'decrement' && !decrementDisabled) {
-      const newValue = Number(fieldHandle?.value) - step
-      fieldHandle.setValue(newValue)
+      const newValue = Number(inputValue) - step
+      onInputValueChange(newValue)
     }
 
     if (actionPressAutoFocus) {
@@ -64,10 +76,10 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
         setIsFocused(false)
       }, timeoutActionFocus)
     }
-  }, [fieldHandle?.value])
+  }, [inputValue, incrementDisabled, decrementDisabled])
 
   const checkValue = useCallback((newValue: number = null, withLimits = true) => {
-    const value = newValue ?? fieldHandle?.value
+    const value = newValue ?? inputValue
 
     if (withLimits) {
       if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
@@ -82,19 +94,19 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     }
 
     if (value >= MAX_VALID_DIGITS) {
-      fieldHandle.setValue(MAX_VALID_DIGITS)
+      onInputValueChange(MAX_VALID_DIGITS)
       return MAX_VALID_DIGITS
     }
 
     return value
-  }, [])
+  }, [inputValue])
 
   const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    fieldHandle.setValue(checkValue())
-    validation.onInputBlurred()
+    onInputValueChange(checkValue())
+    validation?.onInputBlurred?.()
     setIsFocused(false)
     onBlur?.(e)
-  }, [validation.onInputBlurred, onBlur])
+  }, [validation?.onInputBlurred, onBlur, checkValue])
 
   const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     clearActionTimeoutRef()
@@ -105,31 +117,21 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
   const handleChangeInput = useCallback((text: string) => {
     const value = checkValue(parseValue(text), false)
 
-    fieldHandle.setValue(value)
+    onInputValueChange(value)
 
     return value
-  }, [])
+  }, [checkValue])
 
   const handleMaskChange = useCallback((masked, unmasked) => {
     handleChangeInput?.(masked)
     if (onChangeMask) onChangeMask(masked, unmasked)
-  }, [onChangeMask])
-
-  const incrementDisabled = useMemo(() => {
-    const maxLimit = TypeGuards.isNumber(max) && (Number(fieldHandle?.value) >= max)
-    return maxLimit
-  }, [fieldHandle?.value])
-
-  const decrementDisabled = useMemo(() => {
-    const minLimit = TypeGuards.isNumber(min) && (Number(fieldHandle?.value) <= min)
-    return minLimit
-  }, [fieldHandle?.value])
+  }, [onChangeMask, handleChangeInput])
 
-  const hasValue = TypeGuards.isString(fieldHandle?.value)
-    ? (fieldHandle?.value as string).length > 0
-    : !TypeGuards.isNil(fieldHandle?.value)
+  const hasValue = TypeGuards.isString(inputValue)
+    ? (inputValue as string).length > 0
+    : !TypeGuards.isNil(inputValue)
 
-  const hasError = validation.showError || forceError
+  const hasError = validation?.showError || forceError
 
   return {
     isFocused,
@@ -148,5 +150,7 @@ export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
     decrementDisabled,
     min,
     max,
+    inputValue,
+    onInputValueChange,
   }
 }

package/src/components/PlacesAutocomplete/index.tsx

@@ -99,10 +99,6 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
     <View style={styles.wrapper} {...rest}>
       <TextInput
         style={compositionStyles.input}
-        onChangeText={(value) => {
-          setIsTyping(true)
-          handleChangeAddress(value)
-        }}
         onBlur={() => {
           setIsFocused(false)
         }}
@@ -111,6 +107,10 @@ export const PlacesAutocomplete = (props: PlacesAutocompleteProps) => {
         }}
         {...textInputProps}
         value={hasCustomValue ? textInputProps?.value : address}
+        onValueChange={(value) => {
+          setIsTyping(true)
+          handleChangeAddress(value)
+        }}
         rightIcon={rightIcon}
       />
       {isTyping ? (

package/src/components/RadioInput/index.tsx

@@ -96,18 +96,19 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
   const styles = useStylesFor(RadioGroup.styleRegistryName, style)
 
   const {
-    fieldHandle,
     wrapperRef,
+    inputValue,
+    onInputValueChange,
   } = useInputBase(
     field as SelectableField<T, any>,
     fields.selectable as () => SelectableField<T, any>,
-    [value, onValueChange]
+    { value, onValueChange }
   )
 
   // @ts-expect-error icss type
   const _radioOnRight = radioOnRight ?? styles?.__props?.radioOnRight
 
-  const hasValue = !TypeGuards.isNil(fieldHandle?.value)
+  const hasValue = !TypeGuards.isNil(inputValue)
 
   return <InputBase
     {...inputBaseProps}
@@ -124,8 +125,8 @@ export const RadioGroup = <T extends string | number>(props: RadioGroupProps<T>)
         key={idx}
         disabled={disabled}
         styles={styles}
-        selected={fieldHandle?.value === item.value}
-        onSelect={() => fieldHandle.setValue(item.value)}
+        selected={inputValue === item.value}
+        onSelect={() => onInputValueChange(item.value)}
         separator={idx < options?.length - 1}
         reverseOrder={_radioOnRight}
       />

package/src/components/SearchInput/index.tsx

@@ -68,7 +68,7 @@ export const SearchInput: ForwardRefComponentWithDefaultProps<SearchInputProps,
   return (
     <TextInput
       value={search}
-      onChangeText={(value) => {
+      onValueChange={(value) => {
         onTypingChange?.(true)
         handleChangeSearch(value)
       }}

package/src/components/Select/index.tsx

@@ -117,17 +117,22 @@ export const Select = <T extends string | number = string, Multi extends boolean
     outerInputComponent,
     disabled,
     field,
-    value: _value,
-    onValueChange: _onValueChange,
+    value,
+    onValueChange,
     onSelect,
     ...modalProps
   } = allProps
 
-  const { fieldHandle } = useInputBase(field, fields.selectable as () => SelectableField<T, any>, [_value, _onValueChange])
-
-  const value = fieldHandle.value
+  const { 
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(
+    field,
+    fields.selectable as () => SelectableField<T, any>,
+    { value, onValueChange }
+  )
 
-  const isValueArray = TypeGuards.isArray(value) && multiple
+  const isValueArray = TypeGuards.isArray(inputValue) && multiple
 
   const {
     loading,
@@ -138,7 +143,7 @@ export const Select = <T extends string | number = string, Multi extends boolean
     load,
     onChangeSearch,
   } = useSearch({
-    value,
+    value: inputValue,
     multiple,
     options,
     filterItems,
@@ -186,25 +191,25 @@ export const Select = <T extends string | number = string, Multi extends boolean
     let removedIndex = null
 
     if (multiple && isValueArray) {
-      if (value.includes(selectedValue)) {
-        removedIndex = value.findIndex(v => v === selectedValue)
+      if (inputValue.includes(selectedValue)) {
+        removedIndex = inputValue.findIndex(v => v === selectedValue)
 
-        newValue = value.filter((v, i) => i !== removedIndex)
+        newValue = inputValue.filter((v, i) => i !== removedIndex)
       } else {
-        if (TypeGuards.isNumber(limit) && value.length >= limit) {
+        if (TypeGuards.isNumber(limit) && inputValue.length >= limit) {
           return
         }
 
         newOption = currentOptions.find(o => o.value === selectedValue)
 
-        newValue = [...value, selectedValue]
+        newValue = [...inputValue, selectedValue]
       }
     } else {
       newValue = selectedValue
       newOption = currentOptions.find(o => o.value === selectedValue)
     }
 
-    fieldHandle.setValue(newValue)
+    onInputValueChange(newValue)
 
     onSelect?.(newValue)
 
@@ -224,15 +229,15 @@ export const Select = <T extends string | number = string, Multi extends boolean
     if (closeOnSelect) {
       close?.()
     }
-  }, [isValueArray, (isValueArray ? value : [value]), limit, multiple, labelOptions, currentOptions])
+  }, [isValueArray, (isValueArray ? inputValue : [inputValue]), limit, multiple, labelOptions, currentOptions])
 
   const renderListItem = useCallback(({ item, index }) => {
     let selected = false
 
     if (multiple && isValueArray) {
-      selected = value?.includes(item.value)
+      selected = inputValue?.includes(item.value)
     } else {
-      selected = value === item.value
+      selected = inputValue === item.value
     }
 
     return (
@@ -251,20 +256,19 @@ export const Select = <T extends string | number = string, Multi extends boolean
         {...itemProps}
       />
     )
-  }, [value, select, multiple])
+  }, [inputValue, select, multiple])
 
-  const isEmpty = TypeGuards.isNil(value)
+  const isEmpty = TypeGuards.isNil(inputValue)
   const showClearIcon = !isEmpty && clearable
 
   const inputIcon = showClearIcon ? clearIconName : arrowIconName
 
   const onPressInputIcon = () => {
     if (showClearIcon) {
-      fieldHandle.setValue(null)
+      onInputValueChange(null)
     } else {
       close?.()
     }
-
   }
 
   const searchHeader = searchable ? <SearchInput

package/src/components/Slider/index.tsx

@@ -64,18 +64,19 @@ export const Slider = (props: SliderProps) => {
   } = others
 
   const {
-    fieldHandle,
     wrapperRef,
-  } = useInputBase(field, fields.number, [value, onValueChange])
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(field, fields.number, { value, onValueChange })
 
-  const [_value, _setValue] = updateImmediately ? [fieldHandle?.value, fieldHandle.setValue] : React.useState<number | Array<number>>(0)
+  const [_value, _setValue] = updateImmediately ? [inputValue, onInputValueChange] : React.useState<number | Array<number>>(0)
 
   onUpdate(() => {
     if (updateImmediately) return
-    if (fieldHandle?.value !== _value) {
-      _setValue(fieldHandle?.value)
+    if (inputValue !== _value) {
+      _setValue(inputValue)
     }
-  }, [fieldHandle?.value])
+  }, [inputValue])
 
   const styles = useStylesFor(Slider.styleRegistryName, style)
 
@@ -106,7 +107,7 @@ export const Slider = (props: SliderProps) => {
         <View style={styles.labelRow}>
           {label ? (
             <Touchable
-              onPress={() => labelClickable ? fieldHandle.setValue(sliderProps?.minimumValue || minimumValue) : null}
+              onPress={() => labelClickable ? onInputValueChange(sliderProps?.minimumValue || minimumValue) : null}
               style={styles.labelBtn}
               debugName='slider title'
             >
@@ -115,7 +116,7 @@ export const Slider = (props: SliderProps) => {
           ) : null}
           {description ? (
             <Touchable
-              onPress={() => labelClickable ? fieldHandle.setValue(sliderProps?.maximumValue || maximumValue) : null}
+              onPress={() => labelClickable ? onInputValueChange(sliderProps?.maximumValue || maximumValue) : null}
               style={styles?.descriptionBtn}
               debugName='slider description'
             >
@@ -137,7 +138,7 @@ export const Slider = (props: SliderProps) => {
         maximumValue={maximumValue}
         onSlidingComplete={() => {
           if (updateImmediately) return
-          fieldHandle.setValue(_value)
+          onInputValueChange(_value)
         }}
         disabled={disabled}
         {...sliderProps}
@@ -163,7 +164,7 @@ export const Slider = (props: SliderProps) => {
                     index={idx}
                     style={style}
                     key={idx}
-                    onPress={() => trackMarksClickable ? fieldHandle.setValue(trackMarksProp[idx]) : null}
+                    onPress={() => trackMarksClickable ? onInputValueChange(trackMarksProp[idx]) : null}
                   />
                 }
 
@@ -175,7 +176,7 @@ export const Slider = (props: SliderProps) => {
                   content={content}
                   style={style}
                   key={idx}
-                  onPress={() => trackMarksClickable ? fieldHandle.setValue(trackMarksProp[idx]) : null}
+                  onPress={() => trackMarksClickable ? onInputValueChange(trackMarksProp[idx]) : null}
                 />
               })
             }

package/src/components/Switch/index.tsx

@@ -38,10 +38,11 @@ export const Switch = (props: SwitchProps) => {
   const styles = useStylesFor(Switch.styleRegistryName, style)
 
   const {
-    fieldHandle,
     validation,
     wrapperRef,
-  } = useInputBase<boolean>(field, fields.boolean, [value, onValueChange])
+    inputValue,
+    onInputValueChange,
+  } = useInputBase<boolean>(field, fields.boolean, { value, onValueChange })
 
   const trackAnimation = useAnimatedVariantStyles({
     variantStyles: styles,
@@ -51,16 +52,16 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = fieldHandle?.value ? styles['track:disabled-on'] : styles['track:disabled-off']
+        disabledStyle = inputValue ? styles['track:disabled-on'] : styles['track:disabled-off']
       }
-      const style = fieldHandle?.value ? styles['track:on'] : styles['track:off']
+      const style = inputValue ? styles['track:on'] : styles['track:off']
 
       return {
         ...style,
         ...disabledStyle,
       }
     },
-    dependencies: [fieldHandle?.value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   const thumbAnimation = useAnimatedVariantStyles({
@@ -71,34 +72,32 @@ export const Switch = (props: SwitchProps) => {
       'worklet'
       let disabledStyle = {}
       if (disabled) {
-        disabledStyle = fieldHandle?.value ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
+        disabledStyle = inputValue ? styles['thumb:disabled-on'] : styles['thumb:disabled-off']
       }
-      const style = fieldHandle?.value ? styles['thumb:on'] : styles['thumb:off']
+      const style = inputValue ? styles['thumb:on'] : styles['thumb:off']
       return {
         ...style,
         ...disabledStyle,
       }
 
     },
-    dependencies: [fieldHandle?.value, disabled],
+    dependencies: [inputValue, disabled],
   })
 
   // @ts-expect-error
   const _switchOnLeft = switchOnLeft ?? styles?.__props?.switchOnLeft
 
-  const hasError = validation.showError || forceError
+  const hasError = validation?.showError || forceError
 
   return <InputBase
     {...inputBaseProps}
     ref={wrapperRef}
     debugName={debugName}
     wrapper={Touchable}
-    error={hasError ? validation.message || forceError : null}
+    error={hasError ? validation?.message || forceError : null}
     style={styles}
     wrapperProps={{
-      onPress: () => {
-        fieldHandle.setValue(!fieldHandle?.value)
-      },
+      onPress: () => onInputValueChange(!inputValue),
       disabled,
       rippleDisabled: true,
     }}

package/src/components/TextInput/index.tsx

@@ -40,7 +40,6 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     autoAdjustSelection,
     selectionStart,
     forceError,
-    onChangeText,
     multiline,
     ...textInputProps
   } = others
@@ -48,8 +47,9 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
   const styles = useStylesFor(TextInput.styleRegistryName, style)
 
   const {
-    fieldHandle,
     validation,
+    inputValue,
+    onInputValueChange,
     innerInputRef,
     wrapperRef,
     isFocused, 
@@ -92,7 +92,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     },
     ...masking,
   } : {
-    onChangeText: fieldHandle.setValue
+    onChangeText: onInputValueChange,
   }
 
   const buttonModeProps = isPressable ? {
@@ -105,7 +105,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     ref={wrapperRef}
     innerWrapper={isPressable ? Touchable : undefined}
     debugName={debugName}
-    error={hasError ? validation.message || forceError : null}
+    error={hasError ? validation?.message || forceError : null}
     style={{
       ...styles,
       innerWrapper: [
@@ -130,12 +130,13 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       {...buttonModeProps}
       selection={autoAdjustSelection ? currentSelection : undefined}
       placeholderTextColor={partialStyles?.placeholder?.color}
-      value={fieldHandle?.value}
       selectionColor={partialStyles?.selection?.color}
       secureTextEntry={secure && secureTextEntry}
       textAlignVertical={multiline ? 'top' : undefined}
       multiline={multiline}
       {...textInputProps}
+      value={inputValue}
+      onChangeText={onInputValueChange}
       onBlur={handleBlur}
       onFocus={handleFocus}
       style={[

package/src/components/TextInput/useTextInput.ts

@@ -33,7 +33,9 @@ export function useTextInput(props: Partial<TextInputProps>) {
     validation,
     innerInputRef,
     wrapperRef,
-  } = useInputBase<string>(field, fields.text, [value, onValueChange], {
+    onInputValueChange,
+    inputValue,
+  } = useInputBase<string>(field, fields.text, { value, onValueChange }, {
     revealValue() {
       setSecureTextEntry(false)
     },
@@ -46,11 +48,11 @@ export function useTextInput(props: Partial<TextInputProps>) {
   }, [setSecureTextEntry]) 
 
   const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    validation.onInputBlurred()
+    validation?.onInputBlurred?.()
     setIsFocused(false)
     if (autoAdjustSelection) setCurrentSelection({ start: selectionStart })
     onBlur?.(e)
-  }, [validation.onInputBlurred, onBlur])
+  }, [validation?.onInputBlurred, onBlur])
 
   const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
     setIsFocused(true)
@@ -59,15 +61,15 @@ export function useTextInput(props: Partial<TextInputProps>) {
   }, [onFocus])
 
   const handleMaskChange = useCallback((masked, unmasked) => {
-    fieldHandle.setValue(masking?.saveFormatted ? masked : masked)
+    onInputValueChange(masking?.saveFormatted ? masked : masked)
     if (onChangeMask) onChangeMask(masked, unmasked)
   }, [masking?.saveFormatted, onChangeMask])
 
-  const hasMultipleLines = multiline && fieldHandle?.value?.includes('\n')
+  const hasMultipleLines = multiline && inputValue?.includes('\n')
 
-  const hasValue = fieldHandle?.value?.length > 0
+  const hasValue = inputValue?.length > 0
 
-  const hasError = validation.showError || forceError
+  const hasError = validation?.showError || forceError
 
   return {
     isFocused,
@@ -84,5 +86,7 @@ export function useTextInput(props: Partial<TextInputProps>) {
     hasMultipleLines,
     hasValue,
     hasError,
+    inputValue,
+    onInputValueChange,
   }
 }

package/src/deprecated/index.ts

@@ -0,0 +1 @@
+export * as Permissions from './permissions'