Refactor FieldBoolean: use FieldSelect (Final Form Field)

src/components/FieldBoolean/FieldBoolean.example.js

@@ -1,42 +1,50 @@
 import React from 'react';
-import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
 import * as validators from '../../util/validators';
 import { Button } from '../../components';
 import FieldBoolean from './FieldBoolean';
 
 const formName = 'Styleguide.FieldBoolean.Form';
 
-const FormComponent = props => {
-  const { form, handleSubmit, invalid, pristine, submitting } = props;
-  const required = validators.requiredBoolean('This field is required');
-  const submitDisabled = invalid || pristine || submitting;
-  return (
-    <form onSubmit={handleSubmit}>
-      <FieldBoolean
-        id={`${form}.boolOption`}
-        name="boolOption"
-        label="Boolean option"
-        placeholder="Choose yes/no"
-        validate={required}
-      />
-      <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
-        Submit
-      </Button>
-    </form>
-  );
-};
-
-FormComponent.propTypes = formPropTypes;
-
-const Form = reduxForm({
-  form: formName,
-})(FormComponent);
+const FormComponent = props => (
+  <FinalForm
+    {...props}
+    form={formName}
+    render={fieldRenderProps => {
+      const { form, handleSubmit, onChange, invalid, pristine, submitting } = props;
+      const required = validators.requiredBoolean('This field is required');
+      const submitDisabled = invalid || pristine || submitting;
+      return (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit(e);
+          }}
+        >
+          <FormSpy onChange={onChange} />
+          <FieldBoolean
+            id={`${form}.boolOption`}
+            name="boolOption"
+            label="Boolean option"
+            placeholder="Choose yes/no"
+            validate={required}
+          />
+          <Button style={{ marginTop: 24 }} type="submit" disabled={submitDisabled}>
+            Submit
+          </Button>
+        </form>
+      );
+    }}
+  />
+);
 
 export const YesNo = {
-  component: Form,
+  component: FormComponent,
   props: {
-    onChange(values) {
-      console.log('onChange:', values);
+    onChange: formState => {
+      if (Object.keys(formState.values).length > 0) {
+        console.log('form values changed to:', formState.values);
+      }
     },
     onSubmit(values) {
       console.log('onSubmit:', values);

src/components/FieldBoolean/FieldBoolean.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl, intlShape } from 'react-intl';
-import { SelectField } from '../../components';
+import { FieldSelect } from '../../components';
 
 const FieldBoolean = props => {
   const { placeholder, intl, ...rest } = props;
@@ -30,11 +30,11 @@ const FieldBoolean = props => {
     },
   };
   return (
-    <SelectField {...selectProps}>
+    <FieldSelect {...selectProps}>
       <option value="">{placeholder}</option>
       <option value="true">{trueLabel}</option>
       <option value="false">{falseLabel}</option>
-    </SelectField>
+    </FieldSelect>
   );
 };