redux-form/src/createReduxFormConnector.js

A higher order component decorator for forms using Redux and React

import LazyCache from 'react-lazy-cache/noGetters';
import getDisplayName from './getDisplayName';
import createHigherOrderComponent from './createHigherOrderComponent';

/**
 * This component tracks props that affect how the form is mounted to the store. Normally these should not change,
 * but if they do, the connected components below it need to be redefined.
 */
const createReduxFormConnector =
  (isReactNative, React, connect) =>
    (WrappedComponent, mapStateToProps, mapDispatchToProps, mergeProps, options) => {
      const {Component, PropTypes} = React;
      class ReduxFormConnector extends Component {
        constructor(props) {
          super(props);
          this.cache = new LazyCache(this, {
            ReduxForm: {
              params: [
                // props that effect how redux-form connects to the redux store
                'reduxMountPoint',
                'form',
                'formKey',
                'getFormState'
              ],
              fn: createHigherOrderComponent(props, isReactNative, React, connect, WrappedComponent,
                mapStateToProps, mapDispatchToProps, mergeProps, options)
            }
          });
        }

        componentWillReceiveProps(nextProps) {
          this.cache.componentWillReceiveProps(nextProps);
        }

        render() {
          const ReduxForm = this.cache.get('ReduxForm');
          // remove some redux-form config-only props
          const {reduxMountPoint, destroyOnUnmount, form, getFormState, touchOnBlur, touchOnChange,
            ...passableProps } = this.props; // eslint-disable-line no-redeclare
          return <ReduxForm {...passableProps}/>;
        }
      }
      ReduxFormConnector.displayName = `ReduxFormConnector(${getDisplayName(WrappedComponent)})`;
      ReduxFormConnector.WrappedComponent = WrappedComponent;
      ReduxFormConnector.propTypes = {
        destroyOnUnmount: PropTypes.bool,
        reduxMountPoint: PropTypes.string,
        form: PropTypes.string.isRequired,
        formKey: PropTypes.string,
        getFormState: PropTypes.func,
        touchOnBlur: PropTypes.bool,
        touchOnChange: PropTypes.bool
      };
      ReduxFormConnector.defaultProps = {
        reduxMountPoint: 'form',
        getFormState: (state, reduxMountPoint) => state[reduxMountPoint]
      };
      return ReduxFormConnector;
    };

export default createReduxFormConnector;