@codeleap/web 5.4.4 → 5.5.0

package/src/components/NumberIncrement/index.tsx

@@ -1,33 +1,32 @@
-import * as React from 'react'
+import React from 'react'
 import { TypeGuards } from '@codeleap/types'
-import { onUpdate, useState, useRef } from '@codeleap/hooks'
-import { useValidate } from '@codeleap/deprecated'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { Text } from '../Text'
-import { PatternFormat, NumericFormat, NumericFormatProps as NFProps, NumberFormatBase } from 'react-number-format'
+import { PatternFormat, NumericFormat, NumberFormatBase } from 'react-number-format'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { NumberIncrementProps } from './types'
 import { AnyRecord, AppIcon, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { useNumberIncrement } from './useNumberIncrement'
 
 export * from './types'
 export * from './styles'
 
 export const NumberIncrement = (props: NumberIncrementProps) => {
+  const allProps = {
+    ...NumberIncrement.defaultProps,
+    ...props
+  }
+
   const {
     inputBaseProps,
-    others: numberIncrementProps,
-  } = selectInputBaseProps({ ...NumberIncrement.defaultProps, ...props })
+    others,
+  } = selectInputBaseProps(allProps)
 
   const {
     style,
-    value,
     disabled,
-    onValueChange,
-    onChangeText,
-    max,
-    min,
-    step,
     editable,
     hasSeparator,
     format,
@@ -35,129 +34,36 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
     suffix,
     separator,
     prefix,
-    validate,
-    _error,
     formatter,
     placeholder,
-  } = numberIncrementProps
+  } = others
 
   const styles = useStylesFor(NumberIncrement.styleRegistryName, style)
 
-  const [isFocused, setIsFocused] = useState(false)
-
-  const innerWrapperRef = useRef(null)
-  const innerInputRef = useRef<HTMLInputElement>(null)
-
-  const validation = useValidate(value, validate)
-
-  const hasError = !validation.isValid || _error
-  const errorMessage = validation.message || _error
-
-  const incrementDisabled = React.useMemo(() => {
-    if (TypeGuards.isNumber(max) && (Number(value) >= max)) {
-      return true
-    }
-    return false
-  }, [value])
-
-  const decrementDisabled = React.useMemo(() => {
-    if (TypeGuards.isNumber(min) && (Number(value) <= min)) {
-      return true
-    }
-    return false
-  }, [value])
-
-  const onChange = (newValue: number) => {
-    if (onValueChange) onValueChange?.(newValue)
-    if (onChangeText) onChangeText?.(newValue)
-  }
-
-  const handleChange = React.useCallback((action: 'increment' | 'decrement') => {
-    validation?.onInputFocused()
-
-    if (action === 'increment' && !incrementDisabled) {
-      const newValue = Number(value) + step
-      onChange(newValue)
-      return
-    } else if (action === 'decrement' && !decrementDisabled) {
-      const newValue = Number(value) - step
-      onChange(newValue)
-      return
-    }
-
-    validation?.onInputBlurred()
-  }, [validation?.onInputBlurred, validation?.onInputFocused, value])
-
-  const inputTextStyle = React.useMemo(() => {
-    return [
-      styles.input,
-      isFocused ? styles['input:focus'] : null,
-      hasError ? styles['input:error'] : null,
-      disabled ? styles['input:disabled'] : null,
-    ].filter(Boolean)
-  }, [disabled, isFocused, hasError])
-
-  const placeholderStyles = [
-    styles.placeholder,
-    isFocused ? styles['placeholder:focus'] : null,
-    hasError ? styles['placeholder:error'] : null,
-    disabled ? styles['placeholder:disabled'] : null,
-  ].filter(Boolean)
-
-  const handleBlur = React.useCallback(() => {
-    if (TypeGuards.isNumber(max) && (value >= max)) {
-      onChange(max)
-      return
-    } else if (TypeGuards.isNumber(min) && (value <= min) || !value) {
-      onChange(min)
-      return
-    }
-
-    validation?.onInputBlurred()
-  }, [validation?.onInputBlurred, value])
-
-  const handleFocus = React.useCallback(() => {
-    validation?.onInputFocused()
-    setIsFocused(true)
-  }, [validation?.onInputFocused])
-
-  onUpdate(() => {
-    function handleKeyboardEvent(event: KeyboardEvent) {
-      if (!isFocused) return
-
-      if (event.keyCode === 39 || event.key === 'ArrowRight') {
-        handleChange('increment')
-      } else if (event.keyCode === 37 || event.key === 'ArrowLeft') {
-        handleChange('decrement')
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyboardEvent)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyboardEvent)
-    }
-  }, [handleChange, isFocused])
-
-  onUpdate(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (innerWrapperRef.current && !innerWrapperRef.current.contains(event.target)) {
-        setIsFocused(false)
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside)
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-    }
-  }, [innerWrapperRef])
-
-  const handleChangeInput: NFProps['onValueChange'] = (values) => {
-    const { floatValue } = values
-
-    onChange(Number(floatValue))
-  }
+  const {
+    isFocused,
+    hasError,
+    hasValue,
+    errorMessage,
+    incrementDisabled,
+    decrementDisabled,
+    innerInputRef,
+    innerWrapperRef,
+    wrapperRef,
+    handleBlur,
+    handleFocus,
+    handleChange,
+    handleChangeInput,
+    onPressInnerWrapper,
+    inputValue,
+  } = useNumberIncrement(allProps)
+
+  const partialStyles = useInputBasePartialStyles(styles, ['input', 'placeholder'], {
+    disabled,
+    error: hasError,
+    focus: isFocused,
+    typed: hasValue,
+  })
 
   const InputFormat = TypeGuards.isString(format) || TypeGuards.isString(mask)
     ? PatternFormat
@@ -170,6 +76,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
   return (
     <InputBase
       {...inputBaseProps}
+      ref={wrapperRef}
       error={hasError ? errorMessage : null}
       style={{
         ...styles,
@@ -196,10 +103,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
       focused={isFocused}
       innerWrapperProps={{
         ...(inputBaseProps.innerWrapperProps || {}),
-        onClick: () => {
-          setIsFocused(true)
-          innerInputRef.current?.focus?.()
-        },
+        onClick: onPressInnerWrapper,
       }}
       innerWrapperRef={innerWrapperRef}
     >
@@ -207,13 +111,12 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
         <Input
           displayType='input'
           css={[
-            // @ts-expect-error
-            ...inputTextStyle,
-            // @ts-expect-error
+            // @ts-ignore
+            partialStyles?.input,
+            // @ts-ignore
             {
-              '&::placeholder': placeholderStyles,
+              '&::placeholder': partialStyles?.placeholder,
             },
-            // @ts-expect-error
             {
               '&:focus': [
                 {
@@ -228,7 +131,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
           onValueChange={handleChangeInput}
           onBlur={handleBlur}
           onFocus={handleFocus}
-          value={value}
+          value={inputValue}
           thousandSeparator={separator}
           thousandsGroupStyle={hasSeparator || TypeGuards.isString(separator) ? 'thousand' : 'none'}
           suffix={suffix}
@@ -238,7 +141,7 @@ export const NumberIncrement = (props: NumberIncrementProps) => {
           placeholder={placeholder}
           getInputRef={innerInputRef}
         />
-      ) : <Text text={String(value)} style={inputTextStyle} />}
+      ) : <Text text={String(inputValue)} style={partialStyles?.input} />}
     </InputBase>
   )
 }

package/src/components/NumberIncrement/types.ts

@@ -1,17 +1,13 @@
-import { yup, FormTypes } from '@codeleap/deprecated'
 import { NumberIncrementComposition } from './styles'
 import { InputBaseProps } from '../InputBase'
 import { PatternFormatProps as PFProps, NumericFormatProps as NFProps } from 'react-number-format'
 import { FormatInputValueFunction } from 'react-number-format/types/types'
 import { StyledProp } from '@codeleap/styles'
+import { NumberField } from '@codeleap/form'
 
 export type NumberIncrementProps =
   Pick<InputBaseProps, 'debugName' | 'disabled' | 'label'> &
   {
-    value: number
-    onValueChange: (value: number) => void
-    onChangeText?: (value: number) => void
-    validate?: FormTypes.ValidatorWithoutForm<string> | yup.Schema<string>
     style?: StyledProp<NumberIncrementComposition>
     max?: number
     min?: number
@@ -23,7 +19,10 @@ export type NumberIncrementProps =
     format?: PFProps['format']
     mask?: PFProps['mask']
     hasSeparator?: boolean
-    _error?: string
+    forceError?: string
     formatter?: FormatInputValueFunction
     placeholder?: string
+    field?: NumberField<any>
+    value?: number
+    onValueChange?: (value: number) => void
   }

package/src/components/NumberIncrement/useNumberIncrement.ts

@@ -0,0 +1,149 @@
+import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react'
+import { NumberIncrementProps } from './types'
+import { useInputBase } from '../InputBase/useInputBase'
+import { Field, fields } from '@codeleap/form'
+import { TypeGuards } from '@codeleap/types'
+import { NumericFormatProps as NFProps } from 'react-number-format'
+
+export function useNumberIncrement(props: Partial<NumberIncrementProps>) {
+  const {
+    value,
+    onValueChange,
+    field,
+    min,
+    max,
+    forceError,
+    step,
+  } = props
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const {
+    fieldHandle,
+    validation,
+    innerInputRef,
+    wrapperRef,
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(
+    field as Field<number, any, any>,
+    fields.number as () => Field<number, any, any>,
+    { value, onValueChange }
+  )
+
+  const innerWrapperRef = useRef(null)
+
+  const hasValue = TypeGuards.isString(inputValue)
+    ? (inputValue as string)?.length > 0
+    : !TypeGuards.isNil(inputValue)
+
+  const hasError = validation?.showError || !!forceError
+
+  const errorMessage = validation?.message || forceError
+
+  const incrementDisabled = useMemo(() => {
+    if (TypeGuards.isNumber(max) && (Number(inputValue) >= max)) {
+      return true
+    }
+    return false
+  }, [inputValue])
+
+  const decrementDisabled = useMemo(() => {
+    if (TypeGuards.isNumber(min) && (Number(inputValue) <= min)) {
+      return true
+    }
+    return false
+  }, [inputValue])
+
+  const handleChange = useCallback((action: 'increment' | 'decrement') => {
+    if (action === 'increment' && !incrementDisabled) {
+      const newValue = Number(inputValue || min) + step
+      onInputValueChange(newValue)
+      return
+    } else if (action === 'decrement' && !decrementDisabled) {
+      const newValue = Number(inputValue || min) - step
+      onInputValueChange(newValue)
+      return
+    }
+
+    validation?.onInputBlurred?.()
+  }, [validation?.onInputBlurred, inputValue])
+
+  const handleBlur = useCallback(() => {
+    if (TypeGuards.isNumber(max) && (inputValue >= max)) {
+      onInputValueChange(max)
+      return
+    } else if (TypeGuards.isNumber(min) && (inputValue <= min) || !inputValue) {
+      onInputValueChange(min)
+      return
+    }
+
+    validation?.onInputBlurred?.()
+  }, [validation?.onInputBlurred, inputValue])
+
+  const handleFocus = useCallback(() => {
+    setIsFocused(true)
+  }, [])
+
+  useEffect(() => {
+    function handleKeyboardEvent(event: KeyboardEvent) {
+      if (!isFocused) return
+
+      if (event.keyCode === 39 || event.key === 'ArrowRight') {
+        handleChange('increment')
+      } else if (event.keyCode === 37 || event.key === 'ArrowLeft') {
+        handleChange('decrement')
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyboardEvent)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyboardEvent)
+    }
+  }, [handleChange, isFocused])
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (innerWrapperRef.current && !innerWrapperRef.current.contains(event.target)) {
+        setIsFocused(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [innerWrapperRef])
+
+  const handleChangeInput: NFProps['onValueChange'] = (values) => {
+    const { floatValue } = values
+
+    onInputValueChange(Number(floatValue))
+  }
+
+  const onPressInnerWrapper = () => {
+    setIsFocused(true)
+    innerInputRef.current?.focus?.()
+  }
+
+  return {
+    hasValue,
+    hasError,
+    errorMessage,
+    inputValue: inputValue || min,
+    isFocused,
+    incrementDisabled,
+    decrementDisabled,
+    innerInputRef,
+    innerWrapperRef,
+    handleBlur,
+    handleFocus,
+    handleChange,
+    handleChangeInput,
+    onPressInnerWrapper,
+    fieldHandle,
+    wrapperRef,
+  }
+}

package/src/components/RadioInput/index.tsx

@@ -5,10 +5,12 @@ import { TypeGuards } from '@codeleap/types'
 import { View } from '../View'
 import { InputBase, selectInputBaseProps } from '../InputBase'
 import { RadioOptionProps, RadioInputProps } from './types'
-import { AnyRecord, IJSX, mergeStyles, StyledComponentProps } from '@codeleap/styles'
+import { AnyRecord, IJSX, StyledComponentProps } from '@codeleap/styles'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
-import { RadioInputComposition } from './styles'
+import { useInputBasePartialStyles } from '../InputBase/useInputBasePartialStyles'
+import { useInputBase } from '../InputBase/useInputBase'
+import { SelectableField, fields } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -26,29 +28,29 @@ const Option = <T extends string | number>(props: RadioOptionProps<T>) => {
 
   const isDisabled = disabled || item?.disabled
 
-  const getStyle = (key: RadioInputComposition) => {
-    let style = null
-
-    if (isDisabled && selected) style = styles[`${key}:selectedDisabled`]
-    else if (isDisabled) style = styles[`${key}:disabled`]
-    else if (selected) style = styles[`${key}:selected`]
-
-    return mergeStyles([styles[key], style])
-  }
+  const partialStyles = useInputBasePartialStyles(
+    styles,
+    ['optionLabel', 'optionWrapper', 'optionIndicator', 'optionIndicatorInner'],
+    {
+      selectedDisabled: isDisabled && selected,
+      disabled: isDisabled,
+      selected,
+    }
+  )
 
   return (
     <React.Fragment>
       <Touchable
         debugName={`${debugName} option ${item.value}`}
-        style={getStyle('optionWrapper')}
+        style={partialStyles.optionWrapper}
         onPress={onSelect}
         disabled={isDisabled}
       >
-        <View style={getStyle('optionIndicator')}>
-          <View style={getStyle('optionIndicatorInner')} />
+        <View style={partialStyles.optionIndicator}>
+          <View style={partialStyles.optionIndicatorInner} />
         </View>
 
-        {TypeGuards.isString(item.label) ? <Text style={getStyle('optionLabel')} text={item.label} /> : item.label}
+        {TypeGuards.isString(item.label) ? <Text style={partialStyles.optionLabel} text={item.label} /> : item.label}
       </Touchable>
 
       {separator ? <View style={styles.optionSeparator} /> : null}
@@ -66,6 +68,7 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
   })
 
   const {
+    field,
     options,
     value,
     onValueChange,
@@ -76,9 +79,21 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
 
   const styles = useStylesFor(RadioInput.styleRegistryName, style)
 
+  const {
+    wrapperRef,
+    inputValue,
+    onInputValueChange,
+  } = useInputBase(
+    // @ts-ignore
+    field as SelectableField<T, any>,
+    fields.selectable as () => SelectableField<T, any>,
+    { value, onValueChange }
+  )
+
   return (
     <InputBase
       {...inputBaseProps}
+      ref={wrapperRef}
       disabled={disabled}
       style={styles}
       debugName={debugName}
@@ -90,8 +105,8 @@ export const RadioInput = <T extends string | number>(props: RadioInputProps<T>)
           key={idx}
           disabled={disabled}
           styles={styles}
-          selected={value === item?.value}
-          onSelect={() => onValueChange(item?.value)}
+          selected={inputValue === item.value}
+          onSelect={() => onInputValueChange(item.value)}
           separator={idx < options?.length - 1}
         />
       ))}

package/src/components/RadioInput/types.ts

@@ -1,29 +1,30 @@
-import { StylesOf } from '@codeleap/types'
-import { FormTypes } from '@codeleap/deprecated'
+import { Option } from '@codeleap/types'
 import { InputBaseProps } from '../InputBase'
 import { ReactNode } from 'react'
-import { StyledProp } from '@codeleap/styles'
+import { ICSS, StyledProp } from '@codeleap/styles'
 import { RadioInputComposition } from './styles'
+import { SelectableField } from '@codeleap/form'
 
-type WrapperProps = InputBaseProps
-
-type RadioOption<T> = FormTypes.Options<T>[number] & {
+type RadioOption<T extends string | number> = Option<T> & {
   disabled?: boolean
 }
 
-export type RadioInputProps<T extends string|number> = Omit<WrapperProps, 'style'> & {
-  options: RadioOption<T>[]
-  value: T
-  onValueChange(value: T): void
-  label: ReactNode
-  style?: StyledProp<RadioInputComposition>
-}
+export type RadioInputProps<T extends string | number> =
+  Omit<InputBaseProps, 'style'> &
+  {
+    options: RadioOption<T>[]
+    label: ReactNode
+    style?: StyledProp<RadioInputComposition>
+    field?: SelectableField<T, any>
+    value?: T
+    onValueChange?: (value: T) => void
+  }
 
-export type RadioOptionProps<T extends string|number> = {
+export type RadioOptionProps<T extends string | number> = {
   item: RadioOption<T>
   selected: boolean
   onSelect(): void
-  styles?: StylesOf<RadioInputComposition>
+  styles?: Record<RadioInputComposition, ICSS>
   debugName?: string
   disabled?: boolean
   separator?: boolean

package/src/components/SearchInput/index.tsx

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

package/src/components/Select/index.tsx

@@ -1,7 +1,6 @@
 import React, { useRef, forwardRef, useImperativeHandle } from 'react'
 import { useState, onUpdate, useEffect } from '@codeleap/hooks'
-import { TypeGuards } from '@codeleap/types'
-import { FormTypes, useValidate } from '@codeleap/deprecated'
+import { Option, TypeGuards } from '@codeleap/types'
 import _Select, { components, MenuListProps, MenuProps, MultiValueProps, NoticeProps } from 'react-select'
 import Async from 'react-select/async'
 import { useSelectStyles } from './styles'
@@ -14,6 +13,7 @@ import { ActivityIndicator } from '../ActivityIndicator'
 import { Icon } from '../Icon'
 import { WebStyleRegistry } from '../../lib/WebStyleRegistry'
 import { AnyRecord, AppIcon, ICSS, IJSX, StyledComponentProps, StyledComponentWithProps } from '@codeleap/styles'
+import { useValidate } from '@codeleap/form'
 
 export * from './styles'
 export * from './types'
@@ -165,9 +165,6 @@ const defaultFormatPlaceholderNoItems = (props: PlaceholderProps & { text: strin
 export const Select = forwardRef<HTMLInputElement, SelectProps>(
   <T extends string | number = string, Multi extends boolean = false>
   (props: SelectProps<T, Multi>, inputRef: React.ForwardedRef<HTMLInputElement>) => {
-
-    type Option = FormTypes.Option<T>
-
     const {
       inputBaseProps,
       others: selectProps,
@@ -244,13 +241,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
 
     const isFocused = _isFocused || focused
 
-    // @ts-ignore
     const validation = useValidate(value, validate)
 
     const isDisabled = !!inputBaseProps.disabled
 
-    const hasError = !validation.isValid || _error
-    const errorMessage = validation.message || _error
+    const hasError = validation?.showError || _error
+    const errorMessage = validation?.message || _error
 
     const {
       reactSelectStyles,
@@ -301,7 +297,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
       }
     }
 
-    const handleChange = (opt: Multi extends true ? Option[] : Option) => {
+    const handleChange = (opt: Multi extends true ? Option<T>[] : Option<T>) => {
       if (TypeGuards.isArray(opt)) {
         // @ts-ignore
         if (TypeGuards.isNumber(limit) && opt?.length > limit && opt?.length > selectedOption?.length) {
@@ -326,10 +322,9 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>(
     }, [validation?.onInputBlurred, props?.onBlur])
 
     const handleFocus: SelectProps['onFocus'] = React.useCallback((e) => {
-      validation?.onInputFocused()
       setIsFocused(true)
       props?.onFocus?.(e)
-    }, [validation?.onInputFocused, props?.onFocus])
+    }, [props?.onFocus])
 
     const SelectComponent = !!loadOptions ? Async : _Select
 

package/src/components/Select/styles.ts

@@ -1,4 +1,3 @@
-import { FormTypes } from '@codeleap/deprecated'
 import { capitalize } from '@codeleap/utils'
 import { ICSS, useNestedStylesByKey } from '@codeleap/styles'
 import { CSSObjectWithLabel, GroupBase, StylesConfig } from 'react-select'
@@ -6,6 +5,7 @@ import { ButtonParts as _ButtonParts } from '../Button'
 import { InputBaseParts } from '../InputBase'
 import { SelectProps, UseSelectStylesProps } from './types'
 import { useStylesFor } from '../../lib/hooks/useStylesFor'
+import { Option } from '@codeleap/types'
 
 type ButtonParts = _ButtonParts
 
@@ -130,7 +130,7 @@ export function useSelectStyles<T, Multi extends boolean>(props: UseSelectStyles
     }
   }
 
-  const reactSelectStyles: StylesConfig<FormTypes.Option<T>, Multi, GroupBase<FormTypes.Option<T>>> = {
+  const reactSelectStyles: StylesConfig<Option<T>, Multi, GroupBase<Option<T>>> = {
     container: (baseStyles) => stylesKey('inputContainer', baseStyles),
     control: () => stylesKey('inputContainer'),
     menuPortal: (baseStyles) => stylesKey('listPortal', parseMenuPortalStyles(baseStyles)),