import React , { useEffect , useState } from 'react' ; import { Input , InputGroup , InputRightElement , Spinner , } from '@chakra-ui/react' ; import { useField } from '@formiz/core' ; import { FormGroup } from '../FormGroup' ; export const FieldInput = ( props ) => { const { errorMessage , id , isValid , isSubmitted , isValidating , resetKey , setValue , value , otherProps , } = useField ( props ) ; const { required , name } = props ; const { children , label , type , placeholder , helper , ... rest } = otherProps ; const [ isTouched , setIsTouched ] = useState ( false ) ; const showError = ! isValid && ( isTouched || isSubmitted ) ; useEffect ( ( ) => { setIsTouched ( false ) ; } , [ resetKey ] ) ; const formGroupProps = { errorMessage , helper , id , isRequired : ! ! required , label , showError , name , ... rest , } ; return ( < FormGroup { ... formGroupProps } > < InputGroup > < Input type = { type || 'text' } id = { id } value = { value ?? '' } onChange = { ( e ) => setValue ( e . target . value ) } onBlur = { ( ) => setIsTouched ( true ) } aria - invalid = { showError } aria - describedby = { ! isValid ? `${ id }-error` : undefined } placeholder = { placeholder } / > { ( isTouched || isSubmitted ) && isValidating && ( < InputRightElement > < Spinner size = "sm" flex = "none" / > < /InputRightElement>)} < /InputGroup> { children } < /FormGroup>); } ;