import React , { useRef , useEffect } from 'react' ; import { OptionTypeBase , Props as SelectProps } from 'react-select' ; import { useField } from '@unform/core' ; import { Container , Select } from './styles' ; interface Props extends SelectProps < OptionTypeBase > { name : string ; label ? : string ; note ? : string ; } const AsyncSelect = ( { name , label , note , ... rest } ) => { const selectRef = useRef ( null ) ; const { fieldName , defaultValue , registerField , error } = useField ( name ) ; useEffect ( ( ) => { registerField ( { name : fieldName , ref : selectRef . current , getValue : ( ref ) => { if ( rest . isMulti ) { if ( ! ref . state . value ) { return [ ] ; } return ref . state . value . map ( ( option ) => option . value ) ; } if ( ! ref . state . value ) { return '' ; } return ref . state . value . value ; } , } ) ; } , [ fieldName , registerField , rest . isMulti ] ) ; return ( < Container > { label && < label htmlFor = { fieldName } > { label } < /label>} { note && < small > { note } < /small>} < Select defaultValue = { defaultValue } ref = { selectRef } classNamePrefix = "react-select" { ... rest } theme = { undefined } / > { error && < span > { error } < /span>} < /Container>); } ; export default AsyncSelect ;