diff --git a/src/components/FieldGroupCheckbox/FieldCheckbox.js b/src/components/FieldGroupCheckbox/FieldCheckbox.js index 13a94036..cad10ef6 100644 --- a/src/components/FieldGroupCheckbox/FieldCheckbox.js +++ b/src/components/FieldGroupCheckbox/FieldCheckbox.js @@ -1,7 +1,7 @@ import React from 'react'; import { any, node, string, object, shape } from 'prop-types'; import classNames from 'classnames'; -import { Field } from 'redux-form'; +import { Field } from 'react-final-form'; import { ValidationError } from '../../components'; import css from './FieldCheckbox.css'; @@ -79,7 +79,7 @@ FieldCheckboxComponent.propTypes = { id: string.isRequired, label: node, - // redux-form Field params + // FieldRenderProps input: shape({ value: any }).isRequired, meta: object.isRequired, }; diff --git a/src/components/PropertyGroup/PropertyGroup.js b/src/components/PropertyGroup/PropertyGroup.js index 0c535635..15bb2542 100644 --- a/src/components/PropertyGroup/PropertyGroup.js +++ b/src/components/PropertyGroup/PropertyGroup.js @@ -2,7 +2,7 @@ * Renders a set of options with selected and non-selected values. * * The corresponding component when selecting the values is - * FieldGroupCheckbox. + * FieldCheckboxGroup. * */ diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js index 986e8433..d96a6cdc 100644 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js +++ b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.example.js @@ -41,6 +41,7 @@ const options = [ ]; const handleSelect = (urlParam, values, history) => { + console.log(`handle select`, values); const queryParams = values ? `?${stringify({ [urlParam]: values.join(',') })}` : ''; history.push(`${window.location.pathname}${queryParams}`); }; diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js index 1e4a47c3..25ba8c44 100644 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js +++ b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlain.js @@ -4,7 +4,6 @@ import classNames from 'classnames'; import { injectIntl, intlShape, FormattedMessage } from 'react-intl'; import SelectMultipleFilterPlainForm from './SelectMultipleFilterPlainForm'; -import { arrayToFormValues, formValuesToArray } from '../../util/data'; import css from './SelectMultipleFilterPlain.css'; @@ -20,8 +19,8 @@ class SelectMultipleFilterPlainComponent extends Component { handleSelect(values) { const { urlParam, name, onSelect } = this.props; - const selectedKeys = formValuesToArray(values[name]); - onSelect(urlParam, selectedKeys); + const paramValues = values[name]; + onSelect(urlParam, paramValues); } handleClear() { @@ -64,8 +63,7 @@ class SelectMultipleFilterPlainComponent extends Component { [css.columnLayout]: twoColumns, }); - const initialValuesObj = arrayToFormValues(initialValues); - const namedInitialValues = { [name]: initialValuesObj }; + const namedInitialValues = { [name]: initialValues }; return (
diff --git a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlainForm.js b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlainForm.js index f2775bbb..6be5a3ba 100644 --- a/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlainForm.js +++ b/src/components/SelectMultipleFilterPlain/SelectMultipleFilterPlainForm.js @@ -1,31 +1,46 @@ import React from 'react'; -import { arrayOf, bool, node, shape, string } from 'prop-types'; -import { reduxForm, propTypes as formPropTypes } from 'redux-form'; +import { arrayOf, bool, node, shape, string, func } from 'prop-types'; +import { Form as FinalForm, FormSpy } from 'react-final-form'; +import arrayMutators from 'final-form-arrays'; -import { FieldGroupCheckbox, Form } from '../../components'; +import { FieldCheckboxGroup, Form } from '../../components'; -const SelectMultipleFilterPlainFormComponent = props => { - const { form, className, name, options, twoColumns } = props; +const SelectMultipleFilterPlainForm = props => { + const { onChange, ...rest } = props; + + const handleChange = formState => { + if (formState.dirty) { + onChange(formState.values); + } + } return ( -
- - + console.log('SelectMultipleFilterPlainForm', vals)} + render={({ className, name, options, twoColumns, onChange }) => +
+ + + + } + /> ); }; -SelectMultipleFilterPlainFormComponent.defaultProps = { +SelectMultipleFilterPlainForm.defaultProps = { className: null, twoColumns: false, + onChange: () => null, }; -SelectMultipleFilterPlainFormComponent.propTypes = { - ...formPropTypes, +SelectMultipleFilterPlainForm.propTypes = { className: string, name: string.isRequired, options: arrayOf( @@ -35,8 +50,7 @@ SelectMultipleFilterPlainFormComponent.propTypes = { }) ).isRequired, twoColumns: bool, + onChange: func, }; -const SelectMultipleFilterPlainForm = reduxForm({})(SelectMultipleFilterPlainFormComponent); - export default SelectMultipleFilterPlainForm;