import React from 'react' ; import Select , { Props as SelectProps } from './../Select' ; import { Box , LabelInput } from 'design' ; import { useRule } from 'shared/components/Validation' ; export default function FieldSelect ( { label , value , options , onChange , placeholder , maxMenuHeight , isClearable , isMulti , menuPosition , rule = defaultRule , isSearchable = false , isSimpleValue = false , autoFocus = false , isDisabled = false , ... styles } ) { const { valid , message } = useRule ( rule ( value ) ) ; const hasError = Boolean ( ! valid ) ; const labelText = hasError ? message : label ; return ( < Box mb = "4" { ... styles } > { label && < LabelInput hasError = { hasError } > { labelText } < /LabelInput>} < Select menuPosition = { menuPosition } hasError = { hasError } isSimpleValue = { isSimpleValue } isSearchable = { isSearchable } isClearable = { isClearable } value = { value } onChange = { onChange } options = { options } maxMenuHeight = { maxMenuHeight } placeholder = { placeholder } isMulti = { isMulti } autoFocus = { autoFocus } isDisabled = { isDisabled } / > < /Box>); } const defaultRule = ( ) => ( ) => ( { valid : true } ) ; type Props = SelectProps & { autoFocus ? : boolean ; label ? : string ; rule ? : ( options : unknown ) => ( ) => unknown ; [ key ] : any ; } ;