import React , { InputHTMLAttributes , useEffect , useRef , useState , useCallback , } from 'react' ; import { IconBaseProps } from 'react-icons' ; import { useField } from '@unform/core' ; import { FiAlertCircle } from 'react-icons/fi' ; import { Container , Error } from './styles' ; interface InputProps extends InputHTMLAttributes < HTMLInputElement > { name : string ; containerStyle ? : object ; icon ? : React . ComponentType < IconBaseProps > ; } const Input = ( { name , containerStyle = { } , icon : Icon , ... rest } ) => { const inputRef = useRef < HTMLInputElement > ( null ) ; const [ isFocused , setIsFocused ] = useState ( false ) ; const [ isFilled , setIsFilled ] = useState ( false ) ; const { fieldName , defaultValue , error , registerField } = useField ( name ) ; const handleInputFocus = useCallback ( ( ) => { setIsFocused ( true ) ; } , [ ] ) ; const handleInputBlur = useCallback ( ( ) => { setIsFocused ( false ) ; setIsFilled ( ! ! inputRef . current ?. value ) ; } , [ ] ) ; useEffect ( ( ) => { registerField ( { name : fieldName , ref : inputRef . current , path : 'value' , } ) ; } , [ fieldName , registerField ] ) ; return ( < Container style = { containerStyle } isErrored = { ! ! error } isFocused = { isFocused } isFilled = { isFilled } data - testid = "input-container" > { Icon && < Icon size = { 20 } />} < input onFocus = { handleInputFocus } onBlur = { handleInputBlur } defaultValue = { defaultValue } ref = { inputRef } { ... rest } /> { error && ( < Error title = { error } > { ' ' } < FiAlertCircle color = "#c53030" size = { 20 } / > { ' ' } < /Error>)} < /Container>); } ; export default Input ;