A HOC to handle "autosaving" when a formik form changes value

withSubmitOnChange.js

// @flow
import { isEqual, noop } from 'lodash/fp';
import React, { Component, createFactory } from 'react';
import { setDisplayName, wrapDisplayName } from 'recompose';
import debounce from 'common/utilities/debounce';

const withSubmitOnChange = (BaseComponent: Class<*>) => {
  const factory = createFactory(BaseComponent);

  type Props = {
    handleChange: Function,
    handleSubmit: Function,
  };

  class WithSubmitOnChange extends Component {
    static contextTypes = {
      formik: React.PropTypes.shape({
        handleChange: React.PropTypes.func,
        handleSubmit: React.PropTypes.func,
      }),
    };

    static childContextTypes = {
      formik: React.PropTypes.shape({
        handleChange: React.PropTypes.func,
      }),
    };

    constructor(props: Props) {
      super(props);
      this.commit = debounce(300, props.handleSubmit).bind(this, {
        preventDefault: noop,
      });
    }

    getChildContext() {
      return {
        formik: {
          ...this.context.formik,
          handleChange: this.handleChange,
        },
      };
    }

    componentWillReceiveProps(nextProps: Props) {
      if (!isEqual(this.props.handleSubmit, nextProps.handleSubmit)) {
        this.commit = debounce(300, nextProps.handleSubmit).bind(this, {
          preventDefault: noop,
        });
      }
    }

    handleChange = (e: any) => {
      this.props.handleChange(e);
      this.commit();
    };

    commit: Function;

    props: Props;

    render() {
      return factory(this.props);
    }
  }
  if (process.env.NODE_ENV !== 'production') {
    return setDisplayName(wrapDisplayName(BaseComponent, 'withSubmitOnChange'))(
      WithSubmitOnChange
    );
  }
  return WithSubmitOnChange;
};

export default withSubmitOnChange;