import { useEffect , useRef , useState } from 'react' ; import * as S from 'components/Forms/Select/styles' ; import { useField } from '@unform/core' ; import ReactInputMask , { Props as InputProps } from 'react-input-mask' ; interface Props extends InputProps { name : string ; id : string ; placeholder : string ; label : string ; type : string ; autoFocus ? : boolean ; onKeyPress ? : any ; load ? : boolean ; setStateInSelect ? : string ; options : { value : string ; label : string ; } [ ] ; disabledField : boolean ; } export const Select = ( { name , id , placeholder , mask , onKeyPress , load , setStateInSelect , options , disabledField , ... rest } ) => { const [ showOption , setShowOption ] = useState ( false ) ; const [ valueOption , setValueOption ] = useState ( '' ) ; const [ listOption , setListOption ] = useState ( options ) ; const selectRef = useRef ( null ) ; const { fieldName , registerField , error , clearError } = useField ( name ) ; useEffect ( ( ) => { valueOption . length === 0 && setListOption ( options ) ; } , [ options , valueOption ] ) ; useEffect ( ( ) => { setStateInSelect && setValueOption ( setStateInSelect ) ; } , [ setStateInSelect ] ) ; useEffect ( ( ) => { registerField ( { name : fieldName , ref : selectRef . current , path : 'value' } ) ; } , [ fieldName , registerField ] ) ; const clearField = ( ) => { if ( error !== undefined ) clearError ( ) ; } ; const checkValueInOptions = ( ) => options . find ( el => el . value === valueOption ) ; const verifyValue = ( ) => { ! checkValueInOptions ( ) && setValueOption ( '' ) ; } ; const showDropdownOptions = ( ) => { checkValueInOptions ( ) && setListOption ( options ) ; setShowOption ( true ) ; } ; const hiddenDropdownOptions = ( ) => { setShowOption ( false ) ; setListOption ( options ) ; verifyValue ( ) ; } ; const selectOption = ( value ) => { setValueOption ( value ) ; setShowOption ( false ) ; clearField ( ) ; } ; const filterDataOptions = ( e ) => { const valueInput = e . toLowerCase ( ) . normalize ( 'NFD' ) . replace ( /[\u0300-\u036f]/g , '' ) ; const filteredOptions = options . filter ( el => { return ( el . value . toLowerCase ( ) . normalize ( 'NFD' ) . replace ( /[\u0300-\u036f]/g , '' ) . indexOf ( valueInput ) > - 1 ) ; } ) ; setListOption ( filteredOptions ) ; } ; const searchText = ( e ) => { setValueOption ( e . toUpperCase ( ) ) ; filterDataOptions ( e ) ; } ; const clearSelect = ( ) => { setValueOption ( '' ) ; setListOption ( options ) ; } ; const showOptionsAndFocus = ( ) => { setShowOption ( true ) ; setListOption ( options ) ; } ; return ( < > < S . ContainerInput > < S . WrapperInput error = { error } onMouseLeave = { ( ) => hiddenDropdownOptions ( ) } > { } < S . InputHidden type = "text" name = { name } / > < ReactInputMask disabled = { disabledField } autoComplete = "new-password" name = { name } id = { id } placeholder = { placeholder } { ... rest } ref = { selectRef } onInput = { clearField } mask = { mask } maskPlaceholder = { null } value = { valueOption } onClick = { ( ) => showDropdownOptions ( ) } onChange = { e => searchText ( e . target . value ) } / > < label htmlFor = { id } > { placeholder } < /label> < S . ContainerICons > < S . IconClose onClick = { ( ) => ! disabledField && clearSelect ( ) } showIcon = { ! ! valueOption } /> < S . IconArrowDown onClick = { ( ) => ! disabledField && showOptionsAndFocus ( ) } /> < /S.ContainerICons> < S . ContainerOptions show = { showOption } > { listOption !== undefined && listOption . map ( el => ( < S . Option key = { el . label } onClick = { ( ) => selectOption ( el . value ) } highlight = { valueOption . toUpperCase ( ) === el . value } > { el . label } < /S.Option>))} < S . NotFound show = { listOption ?. length === 0 } > Nenhum resultado encontrado ! < /S.NotFound> < /S.ContainerOptions> < /S.WrapperInput> < S . MsgError error = { error } > { error && error } < /S.MsgError> < /S.ContainerInput> < />); } ;