simple-redux-form/lib/simpleReduxForm.js

This is simplest redux form

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

exports.default = simpleReduxForm;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRedux = require('react-redux');

var _redux = require('redux');

var _deepEqual = require('deep-equal');

var _deepEqual2 = _interopRequireDefault(_deepEqual);

var _actions = require('./actions');

var _helpers = require('./helpers');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

// Higher order component for huge fast dynamic deeply nested universal forms.
function simpleReduxForm(Wrapped, options) {
  var _options$form = options.form;
  var form = _options$form === undefined ? '' : _options$form;
  var _options$fields = options.fields;
  var initFields = _options$fields === undefined ? [] : _options$fields;
  var getInitialState = options.getInitialState;
  var _options$validate = options.validate;
  var validate = _options$validate === undefined ? function () {} : _options$validate;

  var SimpleReduxForm = function (_Component) {
    _inherits(SimpleReduxForm, _Component);

    function SimpleReduxForm(props) {
      _classCallCheck(this, SimpleReduxForm);

      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SimpleReduxForm).call(this, props));

      _this.state = {
        model: null
      };
      _this.onFieldChange = _this.onFieldChange.bind(_this);
      _this.validate = _this.validate.bind(_this);
      return _this;
    }

    _createClass(SimpleReduxForm, [{
      key: 'componentWillMount',
      value: function componentWillMount() {
        this.createFields(this.props.fields); // Create all the fields
        this.setModel(); // set Current state of HOC
      }
    }, {
      key: 'componentDidMount',
      value: function componentDidMount() {
        /*
          initialize the form on client side, as we can access storage easily and
          can avoid the Dom difference.
        */
        var initialState = getInitialState && getInitialState(this.props);
        if (!initialState) {
          initialState = {};
        }
        var state = this.props.currentForm;
        var initialized = state && state.initialized ? state.initialized : false;
        // Make initialized only if object is not empty
        if (!initialized && Object.keys(initialState).length > 0) {
          this.props.actions.initialize(initialState, form, this.props.fields);
          this.setModel();
        }
      }
    }, {
      key: 'componentWillReceiveProps',
      value: function componentWillReceiveProps(nextProps) {
        // console.log('NextProps.currentForm', nextProps.currentForm);
        if (!(0, _deepEqual2.default)(this.props.currentForm, nextProps.currentForm)) {
          var currentFields = Object.keys(this.fields);
          if (!(0, _deepEqual2.default)(currentFields, nextProps.fields)) {
            this.createFields(nextProps.fields); // Create all the fields
          }
          this.setModel(nextProps.currentForm); // set Current state of HOC
        }
        // Need to compare and then do this thing
        var state = this.props.currentForm;
        var initialized = state && state.initialized ? state.initialized : false;
        if (!initialized) {
          var initialState = getInitialState && getInitialState(nextProps);
          if (initialState) {
            this.props.actions.initialize(initialState, form, this.props.fields);
          }
        }
      }
    }, {
      key: 'componentWillUnmount',
      value: function componentWillUnmount() {
        this.fields = null;
      }
    }, {
      key: 'onFieldChange',
      value: function onFieldChange(field, value) {
        this.props.actions.setField(field, value, form);
      }
    }, {
      key: 'setModel',
      value: function setModel(newState) {
        var _this2 = this;

        var fieldsKeys = Object.keys(this.fields);
        this.values = (0, _helpers.simplifiedVlaues)(newState, fieldsKeys);
        // We are passing two arguments to validate function
        // Second can be used for dynamic validation usecase
        var errors = validate(this.values, this.props);
        fieldsKeys.forEach(function (field) {
          var fields = _this2.fields;
          var values = _this2.values;

          fields[field].value = values[field];
          fields[field].error = errors && errors[field] ? errors[field] : undefined;
          fields[field].touched = newState && newState[field] ? newState[field].touched : false;
        });
        this.fields = _extends({}, this.fields);
        this.allValid = !(0, _helpers.hasSyncErrors)(errors);
        // this.setState({ model: newState });
      }
      /*
        TODO::This needs to be triggred before every submit.
        We can commbine this to handle All submit which will
        make sure it validates and gives value back with returning
        promise.
      */

    }, {
      key: 'validate',
      value: function validate() {
        this.props.actions.touchAll(form, this.props.fields);
        return this.allValid;
      }
      // Create all Fields with all sugar functions

    }, {
      key: 'createFields',
      value: function createFields(fieldList) {
        var _this3 = this;

        var formFields = fieldList.reduce(function (fields, field) {
          return _extends({}, fields, _defineProperty({}, field, (0, _helpers.createField)(field, _this3.onFieldChange)));
        }, {});
        this.fields = _extends({}, formFields);
      }
    }, {
      key: 'render',
      value: function render() {
        return _react2.default.createElement(Wrapped, _extends({}, this.props, {
          fields: this.fields,
          allValid: this.allValid,
          values: this.values,
          validate: this.validate
        }));
      }
    }]);

    return SimpleReduxForm;
  }(_react.Component);

  SimpleReduxForm.propTypes = {
    fields: _react.PropTypes.array,
    actions: _react.PropTypes.object,
    currentForm: _react.PropTypes.object
  };
  SimpleReduxForm.defaultProps = {
    fields: initFields // Take either from the Decorator or else as props
  };
  function mapStateToProps(state) {
    return {
      currentForm: state.forms[form]
    };
  }
  function mapDispatchToProps(dispatch) {
    return {
      actions: (0, _redux.bindActionCreators)({
        setField: _actions.setField,
        initialize: _actions.initialize,
        touchAll: _actions.touchAll
      }, dispatch),
      dispatch: dispatch
    };
  }
  return (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(SimpleReduxForm);
}