redux-form-manager/dist/form.js

Redux form manager

'use strict';

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

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; }; }();

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _lodash = require('lodash');

var _lodash2 = _interopRequireDefault(_lodash);

var _validation = require('./validation');

var _validation2 = _interopRequireDefault(_validation);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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; }

var isFunction = function isFunction(func) {
  return func && typeof func === 'function';
};
var getErrorMessage = exports.getErrorMessage = function getErrorMessage(value, rules) {
  return (0, _validation2.default)(value, rules);
};
var getFirstError = function getFirstError(formData, priority) {
  if (priority) {
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = priority[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var key = _step.value;

        var errorMessage = formData[key].hidden ? '' : getErrorMessage(formData[key].value, formData[key].rules);
        if (errorMessage) return errorMessage;
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator.return) {
          _iterator.return();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }
  }
  for (var _key in formData) {
    var _errorMessage = formData[_key].hidden ? '' : getErrorMessage(formData[_key].value, formData[_key].rules);
    if (_errorMessage) return _errorMessage;
  }
  return '';
};

var shallowEqual = function shallowEqual(objA, objB) {
  if (objA === objB) {
    return true;
  }

  if ((typeof objA === 'undefined' ? 'undefined' : _typeof(objA)) !== 'object' || objA === null || (typeof objB === 'undefined' ? 'undefined' : _typeof(objB)) !== 'object' || objB === null) {
    return false;
  }

  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  var bHasOwnProperty = hasOwnProperty.bind(objB);
  for (var i = 0; i < keysA.length; i++) {
    if (!bHasOwnProperty(keysA[i]) || objA[keysA[i]] !== objB[keysA[i]]) {
      return false;
    }
  }

  return true;
};

var shallowCompare = function shallowCompare(instance, nextProps, nextState) {
  return !shallowEqual(instance.state, nextState);
};

var bindFormValidation = function bindFormValidation(options) {
  var afterFieldChange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  var mapStateToValidationPriority = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
  return function (WrappedComponent) {
    var _class, _temp2;

    var _options$actionType = options.actionType,
        actionType = _options$actionType === undefined ? undefined : _options$actionType,
        formData = options.formData,
        _options$getFormError = options.getFormError,
        getFormError = _options$getFormError === undefined ? undefined : _options$getFormError;

    return _temp2 = _class = function (_Component) {
      _inherits(FormValidation, _Component);

      function FormValidation() {
        var _ref;

        var _temp, _this, _ret;

        _classCallCheck(this, FormValidation);

        for (var _len = arguments.length, args = Array(_len), _key2 = 0; _key2 < _len; _key2++) {
          args[_key2] = arguments[_key2];
        }

        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormValidation.__proto__ || Object.getPrototypeOf(FormValidation)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
          id: Date.now(),
          formData: {},
          firstError: ''
        }, _this.shouldComponentUpdate = function (nextProps, nextState) {
          var _this$context$store = _this.context.store,
              dispatch = _this$context$store.dispatch,
              getState = _this$context$store.getState;

          var currFormData = _this.state.formData;
          var nextFormData = nextState.formData;
          var currFirstError = getFirstError(currFormData);
          var nextFirstError = getFirstError(nextFormData);
          if (currFirstError !== nextFirstError && getFormError && isFunction(getFormError)) getFormError(getFirstError(nextFormData), dispatch, getState());
          return shallowCompare(_this, nextProps, nextState);
        }, _this.componentWillMount = function () {
          var _this$context$store2 = _this.context.store,
              getState = _this$context$store2.getState,
              dispatch = _this$context$store2.dispatch,
              subscribe = _this$context$store2.subscribe;

          _this.unsubscribe = subscribe(function () {
            _this.setState({ formData: formData(getState(), _this.props), firstError: getFirstError(_this.state.formData, _this.validatePriority()) });
          });
          _this.setState({
            formData: formData(getState(), _this.props)
          });
          if (getFormError && isFunction(getFormError)) {
            getFormError(getFirstError(formData(getState(), _this.props)), dispatch, getState());
          }
        }, _this.componentWillUnmount = function () {
          _this.unsubscribe();
        }, _this.onUpdateValue = function (value, key) {
          var _this$context$store3 = _this.context.store,
              dispatch = _this$context$store3.dispatch,
              getState = _this$context$store3.getState;

          var fieldData = _lodash2.default.get(formData(getState(), _this.props), key);
          if (!fieldData) {
            console.error('Cannot get fieldData in formData at key \'' + key + '\'. Please recheck your formData');
            return;
          }
          var fieldActionType = fieldData.actionType || '';
          if (actionType || fieldActionType) {
            dispatch({
              type: fieldActionType || actionType,
              key: key,
              value: value
            });
            if (isFunction(afterFieldChange) && isFunction(afterFieldChange(dispatch, getState())[key])) {
              if (fieldData.afterUpdateWhenValid || false) {
                var rules = fieldData.rules;

                var errorMessage = getErrorMessage(value, rules);
                if (errorMessage === '') {
                  afterFieldChange(dispatch, getState())[key](value, key);
                }
              } else {
                afterFieldChange(dispatch, getState())[key](value, key);
              }
            }
          } else {
            console.error('actionType is empty. Please send it to using in dispatch');
          }
        }, _this.renderInputField = function (fieldData, renderUIInputField) {
          var value = fieldData.value,
              rules = fieldData.rules;

          var errorMessage = getErrorMessage(value, rules);
          fieldData.errorMessage = errorMessage;
          if (isFunction(renderUIInputField)) {
            return renderUIInputField(fieldData, _this.onUpdateValue);
          }
          if (isFunction(options.renderUIInputField)) {
            return options.renderUIInputField(fieldData, _this.onUpdateValue);
          }
          console.error('Cannot render input field please define function renderUIInputField to return React Component');
          return 'Unable to render UIInputField';
        }, _this.validatePriority = function () {
          var getState = _this.context.store.getState;

          if (isFunction(mapStateToValidationPriority)) {
            return mapStateToValidationPriority(getState());
          }
          return false;
        }, _temp), _possibleConstructorReturn(_this, _ret);
      }

      _createClass(FormValidation, [{
        key: 'render',
        value: function render() {
          var formData = this.state.formData;

          return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
            formData: formData,
            renderInputField: this.renderInputField,
            firstError: getFirstError(formData, this.validatePriority())
          }));
        }
      }]);

      return FormValidation;
    }(_react.Component), _class.contextTypes = {
      store: _propTypes2.default.shape({})
    }, _temp2;
  };
};

exports.default = bindFormValidation;