@codeleap/mobile 2.4.7 → 3.1.1

package/src/components/TextInput/index.tsx

@@ -2,320 +2,298 @@ import * as React from 'react'
 import {
   ComponentVariants,
   FormTypes,
-  getNestedStylesByKey,
-  IconPlaceholder,
-
+  PropsOf,
   TypeGuards,
-
-  useBooleanToggle,
   useDefaultComponentStyle,
   useValidate,
+  yup,
+  useState,
+  useBooleanToggle,
+  IconPlaceholder,
 } from '@codeleap/common'
-import { ComponentPropsWithoutRef, forwardRef, useImperativeHandle, useRef, useState } from 'react'
-import { Text, TextProps } from '../Text'
-import { View, ViewProps } from '../View'
-import { StylesOf } from '../../types'
-import { NativeSyntheticEvent, StyleSheet, TextInput as NativeTextInput, TextInputChangeEventData } from 'react-native'
-import { Touchable, TouchableProps } from '../Touchable'
+import { forwardRef, useImperativeHandle } from 'react'
+import { ComponentWithDefaultProps, StylesOf } from '../../types'
+import { StyleSheet, TextInput as NativeTextInput, TextInputProps as NativeTextInputProps, NativeSyntheticEvent, TextInputFocusEventData } from 'react-native'
+import { InputBase, InputBaseProps, selectInputBaseProps } from '../InputBase'
+import { TextInputComposition, TextInputPresets } from './styles'
+import { Touchable } from '../Touchable'
 import { MaskedTextInput, TextInputMaskProps } from '../../modules/textInputMask'
-import { InputLabel } from '../InputLabel'
 
 export * from './styles'
 
-import {
-  InputIconComposition,
-  TextInputComposition,
-  TextInputStyles,
-} from './styles'
-import { ActionIcon, ActionIconParts, ActionIconProps } from '../ActionIcon'
-
-type NativeProps = ComponentPropsWithoutRef<typeof NativeTextInput>
-
-type SubtitleProps = {
-  errorProps: TextProps
-  styles: Record<'wrapper'|'error'|'subtitle', any>
-}
-
 export type TextInputProps =
-  Partial<TextInputMaskProps> &
-  ComponentVariants<typeof TextInputStyles> &
-  Omit<NativeProps, 'value'> &
+  Omit<InputBaseProps, 'styles' | 'variants'> &
+  NativeTextInputProps &
   {
-    multiline?: boolean
-    onChangeText?: (text: string) => void
-    disabled?: boolean
-    edited?: boolean
-    type?: string
-    label?: React.ReactNode
-    debugName: string
-    leftIcon?: Partial<ActionIconProps>
-    rightIcon?: Partial<ActionIconProps>
     styles?: StylesOf<TextInputComposition>
-    validate?: FormTypes.ValidatorFunctionWithoutForm | string
-    value?: string
     password?: boolean
+    validate?: FormTypes.ValidatorFunctionWithoutForm | yup.SchemaOf<string>
+    debugName: string
     visibilityToggle?: boolean
-    touchableWrapper?: boolean
-    subtitle?: string | ((props: SubtitleProps) => React.ReactElement)
-    onPress?: () => void
     masking?: FormTypes.TextField['masking']
-    innerWrapperProps?: ViewProps
-    wrapperProps?: TouchableProps
+    variants?: ComponentVariants<typeof TextInputPresets>['variants']
     onChangeMask?: TextInputMaskProps['onChangeText']
-    required?:boolean
-  }
+    visibleIcon?: IconPlaceholder
+    hiddenIcon?: IconPlaceholder
+    _error?: string
+  } & Pick<PropsOf<typeof Touchable>, 'onPress'>
+
+const defaultProps:Partial<TextInputProps> = {
+  hiddenIcon: 'input-visiblity:hidden' as IconPlaceholder,
+  visibleIcon: 'input-visiblity:visible' as IconPlaceholder,
+}
+
+export const TextInput = forwardRef<NativeTextInput, TextInputProps>((props, inputRef) => {
+
+  const innerInputRef = React.useRef<NativeTextInput>(null)
+
+  const [isFocused, setIsFocused] = useState(false)
+
+  const {
+    inputBaseProps,
+    others,
+  } = selectInputBaseProps({
+    ...TextInput.defaultProps,
+    ...props,
+  })
 
-export const TextInput = forwardRef<NativeTextInput, TextInputProps>((rawprops, inputRef) => {
   const {
-    onChange,
-    value,
-    onChangeText,
-    disabled,
-    edited,
-    onFocus,
-    onBlur,
     variants,
-    label,
-    wrapperProps,
-    leftIcon,
-    rightIcon,
     styles,
+    value,
     validate,
-    password,
-    visibilityToggle,
-    innerWrapperProps,
+    debugName,
+    visibilityToggle = false,
     masking,
-    subtitle = '',
+    password,
     onChangeMask,
-    debugName,
-    required = false,
-    ...props
-  } = rawprops
+    onPress,
+    visibleIcon,
+    hiddenIcon,
+    _error = null,
+    ...textInputProps
+  } = others
+
+  const [secureTextEntry, toggleSecureTextEntry] = useBooleanToggle(true)
+
+  const isMasked = !!masking
 
-  const [isFocused, setFocus] = useState(false)
-  const [editedState, setEdited] = useState(edited)
+  const InputElement = isMasked ? MaskedTextInput : NativeTextInput
 
-  const input = useRef<any>(null)
-  const maskInputRef = useRef<any>(null)
-  const [textIsVisible, setTextVisible] = useBooleanToggle(false)
-  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputStyles>('u:TextInput', {
+  const variantStyles = useDefaultComponentStyle<'u:TextInput', typeof TextInputPresets>('u:TextInput', {
     variants,
     styles,
     transform: StyleSheet.flatten,
   })
-  const InputElement = masking ? MaskedTextInput : NativeTextInput
-
-  const handleBlur: TextInputProps['onBlur'] = (e) => {
-    if (!editedState && value) setEdited(true)
-    setFocus(false)
-
-    if (onBlur) {
-      onBlur(e)
-    }
-  }
-
-  const handleFocus: TextInputProps['onFocus'] = (e) => {
-    setFocus(true)
-    if (onFocus) {
-      onFocus(e)
-    }
-  }
-  const handleMaskChange = (masked, unmasked) => {
-
-    if (onChangeText) onChangeText(masking?.saveFormatted ? masked : masked)
-    if (onChangeMask) onChangeMask(masked, unmasked)
-  }
-  const handleChange = (event: NativeSyntheticEvent<TextInputChangeEventData>) => {
-    const text = event.nativeEvent.text
-
-    if (onChange) onChange(event)
-    if (onChangeText) onChangeText(text)
-  }
 
+  // @ts-expect-error - React's ref type system is weird
   useImperativeHandle(inputRef, () => {
     return {
-      ...input.current,
+      ...innerInputRef.current,
       focus: () => {
-        input.current?.focus?.()
+        innerInputRef.current?.focus?.()
       },
       isTextInput: true,
     }
+  }, [!!innerInputRef?.current?.focus])
 
-  }, [!!masking, !!input?.current?.focus])
+  const isPressable = TypeGuards.isFunction(onPress)
 
-  const { showError, error } = useValidate(value, validate)
+  const validation = useValidate(value, validate)
 
-  const commonIconStyles = getNestedStylesByKey('icon', variantStyles)
+  const handleBlur = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    validation.onInputBlurred()
+    setIsFocused(false)
+    props.onBlur?.(e)
+  }, [validation.onInputBlurred, props.onBlur])
 
-  const leftIconStyles = getNestedStylesByKey('leftIcon', variantStyles)
+  const handleFocus = React.useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    validation.onInputFocused()
+    setIsFocused(true)
+    props.onFocus?.(e)
+  }, [validation.onInputFocused, props.onFocus])
 
-  const rightIconStyles = getNestedStylesByKey('rightIcon', variantStyles)
+  const handleMaskChange = (masked, unmasked) => {
 
-  function getStyles(key: TextInputComposition) {
-    const requestedStyles = [
-      variantStyles[key],
-      isFocused ? variantStyles[key + ':focus'] : {},
-      showError ? variantStyles[key + ':error'] : {},
-    ]
-    return StyleSheet.flatten(requestedStyles)
+    if (textInputProps.onChangeText) textInputProps.onChangeText(masking?.saveFormatted ? masked : masked)
+    if (onChangeMask) onChangeMask(masked, unmasked)
   }
 
-  function handlePress() {
-    if (props.onPress) {
-      props.onPress()
-    } else {
-      input.current?.focus?.()
-    }
-  }
+  const isMultiline = textInputProps.multiline
+  const isDisabled = !!inputBaseProps.disabled
+
+  const placeholderTextColor = [
+    [isDisabled, variantStyles['placeholder:disabled']],
+    [!validation.isValid, variantStyles['placeholder:error']],
+    [isFocused, variantStyles['placeholder:focus']],
+    [true, variantStyles.placeholder],
+  ].find(([x]) => x)?.[1]?.color
+
+  const selectionColor = [
+    [isDisabled, variantStyles['selection:disabled']],
+    [!validation.isValid, variantStyles['selection:error']],
+    [isFocused, variantStyles['selection:focus']],
+    [true, variantStyles.selection],
+  ].find(([x]) => x)?.[1]?.color
 
   const visibilityToggleProps = visibilityToggle ? {
-    onPress: () => setTextVisible(),
-    icon: (textIsVisible ? 'input-visiblity:visible' : 'input-visiblity:hidden') as IconPlaceholder,
+    onPress: toggleSecureTextEntry,
+    icon: (secureTextEntry ? hiddenIcon : visibleIcon) as IconPlaceholder,
     debugName: `${debugName} toggle visibility`,
-  } : {}
+  } : null
 
-  const subtitleStyles = {
-    error: getStyles('error'),
-    wrapper: getStyles('subtitleWrapper'),
-    subtitle: getStyles('subtitle'),
+  const rightIcon = inputBaseProps?.rightIcon ?? visibilityToggleProps
 
-  }
-  const errorProps = { text: error.message, style: subtitleStyles.error }
+  const maskingExtraProps = isMasked ? {
+    onChangeText: handleMaskChange,
+    ref: null,
 
-  const subtitleContent = TypeGuards.isFunction(subtitle) ? subtitle({ styles: subtitleStyles, errorProps }) : <View style={subtitleStyles.wrapper}>
-    <FormError {...errorProps}/>
-    {TypeGuards.isString(subtitle) ? <Text text={subtitle} style={subtitleStyles.subtitle}/> : (subtitle || null)}
-  </View>
-  return (
-    <Touchable
-      style={getStyles('wrapper')}
-      debugName={debugName}
-      onPress={handlePress}
-      noFeedback
-      android_ripple={null}
-      {...wrapperProps}
-    >
-      <InputLabel
-        label={label}
-        styles={{
-          wrapper: getStyles('labelWrapper'),
-          asterisk: getStyles('labelAsterisk'),
-          text: getStyles('labelText'),
-        }}
-        required={required}
-      />
-      <View style={getStyles('innerWrapper')} {...innerWrapperProps}>
-        <InputIcon
-          isFocused={isFocused}
-          showError={showError}
-          styles={leftIconStyles}
-          commonStyles={commonIconStyles}
-          debugName={`${debugName} left icon`}
-          onPress={() => {
-            input?.current?.focus?.()
-          }}
-          noFeedback={!leftIcon?.onPress}
-          {...leftIcon}
-        />
-        {/* @ts-ignore */}
-        <InputElement
-
-          secureTextEntry={password && !textIsVisible}
-          onChange={(e) => masking ? onChange?.(e) : handleChange(e)}
-          value={value}
-          editable={disabled}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          placeholderTextColor={StyleSheet.flatten(getStyles('placeholder'))?.color}
-          selectionColor={StyleSheet.flatten(getStyles('selection'))?.color}
-          includeRawValueInChangeText={true}
-          {...props}
-          {...masking}
-          {...(!!masking ? {
-            onChangeText: handleMaskChange,
-            ref: maskInputRef,
-            refInput: (inputRef) => {
-              // console.log(inputRef)
-              if (!!inputRef) {
-                input.current = inputRef
-
-              }
-            },
-            ...masking,
-          } : {
-            ref: input,
-          })}
-          style={getStyles('textField')}
-        />
-        <InputIcon
-          isFocused={isFocused}
-          showError={showError}
-          styles={rightIconStyles}
-          commonStyles={commonIconStyles}
-          debugName={`${debugName} right icon`}
-          onPress={() => {}}
-          noFeedback={!rightIcon?.onPress}
-          {...rightIcon}
-          {...visibilityToggleProps}
-        />
-
-      </View>
-      {subtitleContent}
-    </Touchable>
-  )
+    refInput: (inputRef) => {
+      // console.log(inputRef)
+      if (!!inputRef) {
+        innerInputRef.current = inputRef
+
+      }
+    },
+    ...masking,
+  } : {}
+
+  const buttonModeProps = isPressable ? {
+    // pointerEvents: 'none',
+    editable: false,
+    caretHidden: true,
+  } : {}
+
+  const hasMultipleLines = isMultiline && value?.includes('\n')
+  return <InputBase
+    {...inputBaseProps}
+    innerWrapper={isPressable ? Touchable : undefined}
+    debugName={debugName}
+    error={(validation.isValid && !_error) ? null : _error || validation.message}
+    styles={{
+      ...variantStyles,
+      innerWrapper: [
+        variantStyles.innerWrapper,
+        isMultiline && variantStyles['innerWrapper:multiline'],
+        hasMultipleLines && variantStyles['innerWrapper:hasMultipleLines'],
+      ],
+    }}
+    innerWrapperProps={{
+      ...(inputBaseProps.innerWrapperProps || {}),
+      onPress,
+      debugName,
+    }}
+    rightIcon={rightIcon}
+    focused={isFocused}
+  >
+    <InputElement
+
+      allowFontScaling={false}
+      editable={!isPressable && !isDisabled}
+      {...buttonModeProps}
+      placeholderTextColor={placeholderTextColor}
+      value={value}
+      selectionColor={selectionColor}
+      secureTextEntry={password && secureTextEntry}
+      {...textInputProps}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
+      style={[
+        variantStyles.input,
+        isMultiline && variantStyles['input:multiline'],
+        isFocused && variantStyles['input:focused'],
+        !validation.isValid && variantStyles['input:error'],
+        isDisabled && variantStyles['input:disabled'],
+        hasMultipleLines && variantStyles['input:hasMultipleLines'],
+      ]}
+      ref={innerInputRef}
+      pointerEvents={isPressable ? 'none' : undefined}
+      textAlignVertical={isMultiline ? 'top' : undefined}
+      {...maskingExtraProps}
+    />
+  </InputBase>
 })
 
-export const FormError:React.FC<TextProps> = ({ text, ...props }) => {
-  let message = text
-  if (TypeGuards.isNumber(message)) {
-    message = message.toString()
-  }
-  if (typeof message === 'undefined') {
-    message = ''
+export type SearchInputProps = {
+  onTypingChange: (isTyping: boolean) => void
+  onSearchChange: (search: string) => void
+  onClear?: () => void
+  debugName: string
+  debounce?: number
+  clearIcon?: IconPlaceholder
+  searchIcon?: IconPlaceholder
+  placeholder: string
+} & Partial<TextInputProps>
+
+export const SearchInput: ComponentWithDefaultProps<SearchInputProps> = (props) => {
+  const {
+    debugName,
+    onClear,
+    onSearchChange,
+    onTypingChange,
+    clearIcon,
+    searchIcon,
+    debounce,
+    placeholder,
+    ...others
+  } = {
+    ...SearchInput.defaultProps,
+    ...props,
   }
 
-  if (TypeGuards.isString(message)) {
-    const text = message ? `${message.charAt(0).toUpperCase() + message.slice(1)}` : ' '
-    return <Text text={text} {...props} />
-  }
-  return <>
-    {text}
-  </>
-}
+  const [search, setSearch] = useState('')
+
+  const setSearchTimeout = React.useRef<NodeJS.Timeout|null>(null)
+
+  const handleChangeSearch = (value: string) => {
+    setSearch(value)
+
+    if (TypeGuards.isNil(debounce)) {
+      onSearchChange?.(value)
+    } else {
+      if (setSearchTimeout.current) {
+        clearTimeout(setSearchTimeout.current)
+      }
+
+      setSearchTimeout.current = setTimeout(() => {
+
+        onSearchChange(value)
+        onTypingChange?.(false)
+      }, debounce ?? 0)
+    }
 
-type InputIconProps = {
-  styles: StylesOf<InputIconComposition>
-  commonStyles: StylesOf<InputIconComposition>
-  isFocused: boolean
-  showError: boolean
-} & Omit<ActionIconProps, 'styles'>
-
-export const InputIcon:React.FC<InputIconProps> = ({ styles, commonStyles, isFocused, showError, ...props }) => {
-  if (!props.icon) return null
-
-  function getStyles(k: ActionIconParts | '') {
-    let key = k
-    if (key === 'icon') key = ''
-    const requestedStyles = [
-      commonStyles[key],
-      isFocused ? commonStyles[key + ':focus'] : {},
-      showError ? commonStyles[key + ':error'] : {},
-      styles[key],
-      isFocused ? styles[key + ':focus'] : {},
-      showError ? styles[key + ':error'] : {},
-    ]
-
-    return StyleSheet.flatten(requestedStyles)
   }
-  const iconStyles = {
-    icon: getStyles('icon'),
-    touchablePressable: getStyles('touchablePressable'),
-    touchableWrapper: getStyles('touchableWrapper'),
-    touchableFeedback: getStyles('touchableFeedback'),
+
+  const handleClear = () => {
+    setSearch('')
+    onSearchChange?.('')
+    onClear?.()
   }
 
-  return <ActionIcon
-    styles={iconStyles}
-    {...props}
-  />
+  return (
+    <TextInput
+      value={search}
+      onChangeText={(value) => {
+        onTypingChange?.(true)
+        handleChangeSearch(value)
+      }}
+      placeholder={placeholder}
+      debugName={`Search ${debugName}`}
+      rightIcon={!!search.trim() && {
+        name: clearIcon,
+        onPress: handleClear,
+      }}
+      leftIcon={{
+        name: searchIcon,
+      }}
+      {...others}
+    />
+  )
+}
+
+TextInput.defaultProps = defaultProps
+SearchInput.defaultProps = {
+  debounce: null,
+  clearIcon: 'x' as IconPlaceholder,
+  searchIcon: 'search' as IconPlaceholder,
 }