import * as React from 'react' ; import * as PropTypes from 'prop-types' ; import ConditionalWrap from 'conditional-wrap' ; import _omit from 'lodash/omit' ; import Group from '../Group' ; import Select , { LocalSelectProps , SelectProps , selectPropTypes , selectDefaultProps } from './Select' ; import FieldWrapper , { LocalFieldWrapperProps , fieldWrapperPropTypes , fieldWrapperDefaultProps } from '../FieldWrapper/FieldWrapper' ; import { Omit } from '../types' ; import { formikField , reduxFormField } from '../adaptors/fields' ; export type LocalSelectFieldProps = Omit < LocalFieldWrapperProps , 'children' > & LocalSelectProps & { /** Addon component to the input (before). Similar to the addon components in Input. */ addonBefore ? : React . ReactElement < any > ; /** Addon component to the input (after). Similar to the addon components in Input. */ addonAfter ? : React . ReactElement < any > ; /** If addonBefore or addonAfter exists, then the addons will render vertically. */ isVertical ? : boolean ; selectProps ? : Omit < LocalSelectProps , 'options' > ; } ; export type SelectFieldProps = LocalSelectFieldProps & SelectProps ; export type SelectFieldComponents = { Formik : React . FunctionComponent < SelectFieldProps > ; ReduxForm : React . FunctionComponent < SelectFieldProps > ; } ; export const SelectField = ( { a11yLabel , a11yId , addonBefore , addonAfter , autoComplete , autoFocus , className , description , defaultValue , disabled , hint , isLoading , isFullWidth , isOptional , isRequired , isVertical , label , name , onBlur , onChange , onFocus , options , placeholder , selectProps , selectRef , size , state , validationText , value , ... props } ) => ( < FieldWrapper a11yId = { a11yId } description = { description } hint = { hint } isOptional = { isOptional } isRequired = { isRequired } label = { label } state = { state } validationText = { validationText } { ... props } > { ( { elementProps } ) => ( < ConditionalWrap condition = { addonBefore || addonAfter } wrap = { ( children ) => < Group isVertical = { isVertical } > { children } < /Group>}> { addonBefore } < Select a11yId = { a11yId } a11yLabel = { a11yLabel } autoComplete = { autoComplete } autoFocus = { autoFocus } className = { className } defaultValue = { defaultValue } disabled = { disabled } isFullWidth = { isFullWidth } isLoading = { isLoading } isRequired = { isRequired } name = { name } options = { options } placeholder = { placeholder } selectProps = { selectProps } selectRef = { selectRef } size = { size } state = { state } value = { value } onBlur = { onBlur } onChange = { onChange } onFocus = { onFocus } { ... elementProps } /> { addonAfter } < /ConditionalWrap>)} < /FieldWrapper>); SelectField . Formik = formikField ( SelectField , { hasFieldWrapper : true } ) ; SelectField . ReduxForm = reduxFormField ( SelectField , { hasFieldWrapper : true } ) ; export const selectFieldPropTypes = { addonBefore : PropTypes . element , addonAfter : PropTypes . element , isVertical : PropTypes . bool , selectProps : PropTypes . shape ( selectPropTypes ) , ... _omit ( fieldWrapperPropTypes , 'children' ) , ... selectPropTypes } ; SelectField . propTypes = selectFieldPropTypes ; export const selectFieldDefaultProps = { addonBefore : undefined , addonAfter : undefined , isVertical : false , selectProps : { } , ... fieldWrapperDefaultProps , ... selectDefaultProps } ; SelectField . defaultProps = selectFieldDefaultProps ; const C = SelectField ; export default C ;