Migrate SelectMultipleFilterPlainForm

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,
 };

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.
  *
  */
 

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}`);
 };

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 (
       <div className={classes}>

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 (
-    <Form className={className}>
-      <FieldGroupCheckbox
-        name={name}
-        id={`${form}.${name}`}
-        options={options}
-        twoColumns={twoColumns}
-      />
-    </Form>
+    <FinalForm
+      {...rest}
+      mutators={{ ...arrayMutators }}
+      onSubmit={vals => console.log('SelectMultipleFilterPlainForm', vals)}
+      render={({ className, name, options, twoColumns, onChange }) =>
+        <Form className={className}>
+        <FormSpy onChange={handleChange} subscription={{ values: true, dirty: true }} />
+          <FieldCheckboxGroup
+            name={name}
+            id={`${name}-filter`}
+            options={options}
+            twoColumns={twoColumns}
+          />
+        </Form>
+      }
+    />
   );
 };
 
-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;