{
- removeProps.onClick()
- removeProps.onMouseDown(event)
- }}
- />
-)
-MultiValue.propTypes = {
- selectProps: PropTypes.object,
- isFocused: PropTypes.bool,
- children: PropTypes.node,
- removeProps: PropTypes.object,
-}
-
-const Menu = ({ selectProps, innerProps, children }) => (
-
- {children}
-
-)
-Menu.propTypes = {
- selectProps: PropTypes.object,
- innerProps: PropTypes.object,
- children: PropTypes.node,
-}
-
-const components = {
- Option,
- Control,
- NoOptionsMessage,
- Placeholder,
- SingleValue,
- MultiValue,
- ValueContainer,
- Menu,
-}
-
-class Autocomplete extends React.PureComponent {
- render() {
- const {
- required,
- classes,
- theme,
- label,
- field,
- form: { dirty, touched, errors, setFieldValue },
- options,
- isMultiple,
- ...other
- } = this.props
-
- const errorText = getIn(errors, field.name)
- const touchedVal = getIn(touched, field.name)
- const hasError = dirty && touchedVal && errorText !== undefined
-
- const selectStyles = {
- input: base => ({
- ...base,
- color: theme.palette.text.primary,
- }),
- }
-
- return (
-
-
-
-
- )
+const FAutocomplete = props => {
+ const {
+ field,
+ form: { dirty, touched, errors, setFieldValue },
+ options,
+ getOptionLabel,
+ textFieldProps,
+ ...autoCompleteProps
+ } = props
+
+ // Merge default textFieldProps with textFieldProps passed in the component
+ const mergedTextFieldProps = {
+ ...FAutocomplete.defaultProps.textFieldProps,
+ ...textFieldProps,
}
+ const errorText = getIn(errors, field.name)
+ const touchedVal = getIn(touched, field.name)
+ const hasError = dirty && touchedVal && errorText !== undefined
+
+ return (
+ setFieldValue(field.name, value)}
+ renderInput={params => (
+
+ )}
+ {...autoCompleteProps}
+ />
+ )
}
-Autocomplete.propTypes = {
- classes: PropTypes.object.isRequired,
- theme: PropTypes.object.isRequired,
- label: PropTypes.string,
- field: PropTypes.object,
+FAutocomplete.propTypes = {
form: PropTypes.shape({
dirty: PropTypes.bool,
errors: PropTypes.object,
@@ -271,22 +50,26 @@ Autocomplete.propTypes = {
}).isRequired,
options: PropTypes.arrayOf(
PropTypes.shape({
- label: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
- .isRequired,
+ label: PropTypes.string,
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
})
).isRequired,
- required: PropTypes.bool,
- fullWidth: PropTypes.bool,
- margin: PropTypes.oneOf(['none', 'dense', 'normal']),
- isMultiple: PropTypes.bool,
+ getOptionLabel: PropTypes.func,
+ textFieldProps: PropTypes.shape({
+ label: PropTypes.string,
+ required: PropTypes.bool,
+ fullWidth: PropTypes.bool,
+ margin: PropTypes.oneOf(['none', 'dense', 'normal']),
+ }),
}
-Autocomplete.defaultProps = {
- required: false,
- fullWidth: true,
- margin: 'normal',
- isMultiple: false,
+FAutocomplete.defaultProps = {
+ getOptionLabel: option => option.label,
+ textFieldProps: {
+ required: false,
+ fullWidth: true,
+ margin: 'normal',
+ },
}
-export default withStyles(styles, { withTheme: true })(Autocomplete)
+export default FAutocomplete