vdux-form/lib/index.js

'use strict';

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

var _regenerator = require('babel-runtime/regenerator');

var _regenerator2 = _interopRequireDefault(_regenerator);

var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray');

var _slicedToArray3 = _interopRequireDefault(_slicedToArray2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _vdux = require('vdux');

var _serializeForm = require('@f/serialize-form');

var _serializeForm2 = _interopRequireDefault(_serializeForm);

var _identity = require('@f/identity');

var _identity2 = _interopRequireDefault(_identity);

var _vduxUi = require('vdux-ui');

var _noop = require('@f/noop');

var _noop2 = _interopRequireDefault(_noop);

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

var _marked = [poss].map(_regenerator2.default.mark);

var defaultValidate = function defaultValidate() {
  return { valid: true };
};
var defaultTransformError = _identity2.default;

exports.default = (0, _vdux.component)({
  render: function render(_ref) {
    var props = _ref.props,
        children = _ref.children,
        actions = _ref.actions;


    return (0, _vdux.element)(
      _vduxUi.Base,
      (0, _extends3.default)({ tag: 'form', novalidate: true }, props, { onSubmit: [(0, _vdux.decodeNode)(actions.handleSubmit), _vdux.preventDefault, _vdux.stopPropagation], onChange: (0, _vdux.decodeNode)(actions.handleChange) }),
      children
    );
  },


  controller: {
    handleChange: function handleChange(_ref2, _ref3) {
      var props = _ref2.props;
      var name = _ref3.name,
          form = _ref3.form;
      var _props$cast = props.cast,
          cast = _props$cast === undefined ? _identity2.default : _props$cast,
          _props$validate = props.validate,
          validate = _props$validate === undefined ? defaultValidate : _props$validate;

      var model = cast((0, _serializeForm2.default)(form));

      var _validate = validate(model, name),
          valid = _validate.valid,
          errors = _validate.errors;

      if (!valid) invalidate(form, errors, name);
    },
    handleSubmit: _regenerator2.default.mark(function handleSubmit(_ref4, form) {
      var props = _ref4.props;

      var _props$onSubmit, onSubmit, _props$onSuccess, onSuccess, _props$onFailure, onFailure, _props$validate2, validate, _props$cast2, cast, _props$transformError, transformError, _props$loading, loading, model, _validate2, valid, errors, _ref5, _ref6, result, err, newErr;

      return _regenerator2.default.wrap(function handleSubmit$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              _props$onSubmit = props.onSubmit, onSubmit = _props$onSubmit === undefined ? _noop2.default : _props$onSubmit, _props$onSuccess = props.onSuccess, onSuccess = _props$onSuccess === undefined ? _noop2.default : _props$onSuccess, _props$onFailure = props.onFailure, onFailure = _props$onFailure === undefined ? _noop2.default : _props$onFailure, _props$validate2 = props.validate, validate = _props$validate2 === undefined ? defaultValidate : _props$validate2, _props$cast2 = props.cast, cast = _props$cast2 === undefined ? _identity2.default : _props$cast2, _props$transformError = props.transformError, transformError = _props$transformError === undefined ? defaultTransformError : _props$transformError, _props$loading = props.loading, loading = _props$loading === undefined ? false : _props$loading;
              model = cast((0, _serializeForm2.default)(form));
              _validate2 = validate(model), valid = _validate2.valid, errors = _validate2.errors;


              if (!valid) invalidate(form, errors);

              if (!(!loading && valid)) {
                _context.next = 20;
                break;
              }

              _context.next = 7;
              return poss(onSubmit(model));

            case 7:
              _ref5 = _context.sent;
              _ref6 = (0, _slicedToArray3.default)(_ref5, 2);
              result = _ref6[0];
              err = _ref6[1];

              if (!err) {
                _context.next = 18;
                break;
              }

              _context.next = 14;
              return onFailure(err);

            case 14:
              newErr = transformError(err);

              if (newErr) invalidate(form, newErr);
              _context.next = 20;
              break;

            case 18:
              _context.next = 20;
              return onSuccess(result);

            case 20:
            case 'end':
              return _context.stop();
          }
        }
      }, handleSubmit, this);
    })
  },

  setTransformError: function setTransformError(transformError) {
    defaultTransformError = transformError;
  }
});


function dotsToBrackets(str) {
  return str.split('.').map(function (part, idx) {
    return idx === 0 ? part : '[' + part + ']';
  }).join('');
}

function poss(gen) {
  return _regenerator2.default.wrap(function poss$(_context2) {
    while (1) {
      switch (_context2.prev = _context2.next) {
        case 0:
          _context2.prev = 0;
          _context2.next = 3;
          return gen;

        case 3:
          _context2.t0 = _context2.sent;
          return _context2.abrupt('return', [_context2.t0, null]);

        case 7:
          _context2.prev = 7;
          _context2.t1 = _context2['catch'](0);
          return _context2.abrupt('return', [null, _context2.t1]);

        case 10:
        case 'end':
          return _context2.stop();
      }
    }
  }, _marked[0], this, [[0, 7]]);
}

function invalidate(form, errors, name) {
  if (name) {
    errors = errors.filter(function (_ref7) {
      var field = _ref7.field;
      return field === name;
    });
  }

  errors.forEach(function (_ref8) {
    var field = _ref8.field,
        message = _ref8.message;

    var ctrl = form.querySelector('[name="' + dotsToBrackets(field) + '"]');

    if (ctrl) {
      ctrl.setCustomValidity(message);
      ctrl.checkValidity();
    }
  });
}