Custom SelectField for react-final-form
This commit is contained in:
parent
9d882e7a8b
commit
249c2526ed
|
@ -0,0 +1,47 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react'
|
||||||
|
import Select, { type SelectFieldProps } from '@material-ui/core/Select'
|
||||||
|
import FormControl from '@material-ui/core/FormControl'
|
||||||
|
import InputLabel from '@material-ui/core/InputLabel'
|
||||||
|
import FormHelperText from '@material-ui/core/FormHelperText'
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
minWidth: '100%',
|
||||||
|
}
|
||||||
|
|
||||||
|
const SelectInput = ({
|
||||||
|
input: {
|
||||||
|
name, value, onChange, ...restInput
|
||||||
|
},
|
||||||
|
meta,
|
||||||
|
label,
|
||||||
|
formControlProps,
|
||||||
|
...rest
|
||||||
|
}: SelectFieldProps) => {
|
||||||
|
const showError = ((meta.submitError && !meta.dirtySinceLastSubmit) || meta.error) && meta.touched
|
||||||
|
const inputProps = { ...restInput, name }
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl
|
||||||
|
{...formControlProps}
|
||||||
|
error={showError}
|
||||||
|
style={style}
|
||||||
|
>
|
||||||
|
<InputLabel htmlFor={name}>{label}</InputLabel>
|
||||||
|
<Select
|
||||||
|
{...rest}
|
||||||
|
onChange={onChange}
|
||||||
|
inputProps={inputProps}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
{ showError &&
|
||||||
|
<FormHelperText>
|
||||||
|
{meta.error || meta.submitError}
|
||||||
|
</FormHelperText>
|
||||||
|
}
|
||||||
|
</FormControl>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default SelectInput
|
Loading…
Reference in New Issue