Refactor FieldDateInput: use Field connector from Final Form

src/components/FieldDateInput/DateInput.js

@@ -46,6 +46,8 @@ const defaultProps = {
   horizontalMargin: 0,
   withPortal: false,
   withFullScreenPortal: false,
+  appendToBody: false,
+  disableScroll: false,
   initialVisibleMonth: null,
   firstDayOfWeek: config.i18n.firstDayOfWeek,
   numberOfMonths: 1,
@@ -137,12 +139,12 @@ class DateInputComponent extends Component {
       onBlur,
       onChange,
       onFocus,
-      onDragStart,
-      onDrop,
       phrases,
       screenReaderInputMessage,
       useMobileMargins,
       value,
+      children,
+      render,
       ...datePickerProps
     } = this.props;
     /* eslint-enable no-unused-vars */
@@ -194,6 +196,7 @@ DateInputComponent.defaultProps = {
 
 DateInputComponent.propTypes = {
   className: string,
+  id: string,
   focused: bool,
   initialDate: instanceOf(Date),
   intl: intlShape.isRequired,
@@ -202,8 +205,6 @@ DateInputComponent.propTypes = {
   onChange: func.isRequired,
   onBlur: func.isRequired,
   onFocus: func.isRequired,
-  onDragStart: func.isRequired,
-  onDrop: func.isRequired,
   phrases: shape({
     closeDatePicker: string,
     clearDate: string,

src/components/FieldDateInput/FieldDateInput.example.js

@@ -1,34 +1,51 @@
 /* eslint-disable no-console */
 import React from 'react';
-import { reduxForm, propTypes as formPropTypes } from 'redux-form';
+import { Form as FinalForm, FormSpy } from 'react-final-form';
 import moment from 'moment';
 import { Button } from '../../components';
-import { required, bookingDateRequired } from '../../util/validators';
+import { required, bookingDateRequired, composeValidators } from '../../util/validators';
 import FieldDateInput from './FieldDateInput';
 
-const FormComponent = props => {
-  const { form, handleSubmit, pristine, submitting, dateInputProps } = props;
-  const submitDisabled = pristine || submitting;
-  return (
-    <form onSubmit={handleSubmit}>
-      <FieldDateInput {...dateInputProps} />
-      <Button type="submit" disabled={submitDisabled} style={{ marginTop: '24px' }}>
-        Select
-      </Button>
-    </form>
-  );
-};
+const FormComponent = props => (
+  <FinalForm
+    {...props}
+    render={fieldRenderProps => {
+      const {
+        form,
+        handleSubmit,
+        onChange,
+        pristine,
+        submitting,
+        dateInputProps,
+        values,
+      } = fieldRenderProps;
+      const submitDisabled = pristine || submitting;
+      if (values && values.bookingDates) {
+        onChange(values.bookingDates);
+      }
 
-FormComponent.propTypes = formPropTypes;
+      return (
+        <form
+          onSubmit={e => {
+            e.preventDefault();
+            handleSubmit(e);
+          }}
+        >
+          <FormSpy onChange={onChange} />
+          <FieldDateInput {...dateInputProps} />
+          <Button type="submit" disabled={submitDisabled} style={{ marginTop: '24px' }}>
+            Select
+          </Button>
+        </form>
+      );
+    }}
+  />
+);
 
-const defaultFormName = 'Styleguide.DateInput.Form';
-
-const Form = reduxForm({
-  form: defaultFormName,
-})(FormComponent);
+const defaultFormName = 'FieldDateInputExampleForm';
 
 export const Empty = {
-  component: Form,
+  component: FormComponent,
   props: {
     dateInputProps: {
       name: 'bookingDate',
@@ -37,16 +54,19 @@ export const Empty = {
       label: 'Date',
       placeholderText: moment().format('ddd, MMMM D'),
       format: null,
-      validate: [required('Required'), bookingDateRequired('Date is not valid')],
+      validate: composeValidators(required('Required'), bookingDateRequired('Date is not valid')),
       onBlur: () => console.log('onBlur called from DateInput props.'),
       onFocus: () => console.log('onFocus called from DateInput props.'),
     },
-    onChange: values => {
-      const { date } = values;
-      console.log('Changed to', moment(date).format('L'));
+    onChange: formState => {
+      const { date } = formState.values;
+      if (date) {
+        console.log('Changed to', moment(date).format('L'));
+      }
     },
     onSubmit: values => {
       console.log('Submitting a form with values:', values);
+      return false;
     },
   },
   group: 'custom inputs',

src/components/FieldDateInput/FieldDateInput.js

@@ -1,12 +1,12 @@
 /**
- * Provides a date picker for Redux Forms (using https://github.com/airbnb/react-dates)
+ * Provides a date picker for Final Forms (using https://github.com/airbnb/react-dates)
  *
  * NOTE: If you are using this component inside BookingDatesForm,
  * you should convert value.date to start date and end date before submitting it to API
  */
 import React, { Component } from 'react';
 import { bool, object, string } from 'prop-types';
-import { Field } from 'redux-form';
+import { Field } from 'react-final-form';
 import classNames from 'classnames';
 import { ValidationError } from '../../components';
 
@@ -49,6 +49,7 @@ class FieldDateInputComponent extends Component {
       onBlur: input.onBlur,
       onFocus: input.onFocus,
       useMobileMargins,
+      id,
       ...restOfInput,
       ...rest,
     };

src/components/FieldDateInput/FieldDateInput.test.js

@@ -16,8 +16,6 @@ describe('DateInput', () => {
       onBlur: noop,
       onChange: noop,
       onFocus: noop,
-      onDragStart: noop,
-      onDrop: noop,
       id: 'bookingDate',
       placeholderText: 'today',
     };

src/util/validators.js

@@ -119,3 +119,6 @@ export const ageAtLeast = (message, minYears) => value => {
   const ageInYears = now.diff(moment(value), 'years', true);
   return value && value instanceof Date && ageInYears >= minYears ? VALID : message;
 };
+
+export const composeValidators = (...validators) => value =>
+  validators.reduce((error, validator) => error || validator(value), VALID);