@codeleap/mobile 5.0.8 → 5.0.9

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

@@ -47,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, 
@@ -91,7 +92,7 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
     },
     ...masking,
   } : {
-    onChangeText: fieldHandle.setValue
+    onChangeText: onInputValueChange,
   }
 
   const buttonModeProps = isPressable ? {
@@ -104,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: [
@@ -134,8 +135,8 @@ export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inp
       textAlignVertical={multiline ? 'top' : undefined}
       multiline={multiline}
       {...textInputProps}
-      value={fieldHandle?.value}
-      onChangeText={fieldHandle?.setValue}
+      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,
   }
 }