vdux-form/lib/index.js

'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 _serializeForm = require('@f/serialize-form');

var _serializeForm2 = _interopRequireDefault(_serializeForm);

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

var _identity2 = _interopRequireDefault(_identity);

var _element = require('vdux/element');

var _element2 = _interopRequireDefault(_element);

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

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

var _noop2 = _interopRequireDefault(_noop);

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

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /**
                                                                                                                                                                                                                              * Imports
                                                                                                                                                                                                                              */

/**
 * Constants
 */

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

/**
 * Form component
 */

function render(_ref) {
  var _marked = [handleSubmit].map(regeneratorRuntime.mark);

  var props = _ref.props;
  var children = _ref.children;
  var _props$onSubmit = props.onSubmit;
  var onSubmit = _props$onSubmit === undefined ? _noop2.default : _props$onSubmit;
  var _props$onSuccess = props.onSuccess;
  var onSuccess = _props$onSuccess === undefined ? _noop2.default : _props$onSuccess;
  var _props$onFailure = props.onFailure;
  var onFailure = _props$onFailure === undefined ? _noop2.default : _props$onFailure;
  var _props$validate = props.validate;
  var validate = _props$validate === undefined ? defaultValidate : _props$validate;
  var _props$cast = props.cast;
  var cast = _props$cast === undefined ? _identity2.default : _props$cast;
  var _props$transformError = props.transformError;
  var transformError = _props$transformError === undefined ? defaultTransformError : _props$transformError;
  var _props$loading = props.loading;
  var loading = _props$loading === undefined ? false : _props$loading;

  var rest = _objectWithoutProperties(props, ['onSubmit', 'onSuccess', 'onFailure', 'validate', 'cast', 'transformError', 'loading']);

  return (0, _element2.default)(
    _vduxUi.Base,
    _extends({ tag: 'form', novalidate: true, onSubmit: handleSubmit, onChange: handleChange }, rest),
    children
  );

  function handleSubmit(e) {
    var form, model, valid, result, newErr;
    return regeneratorRuntime.wrap(function handleSubmit$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            e.preventDefault();

            form = e.target;
            model = cast((0, _serializeForm2.default)(form));
            valid = checkValidity(form, model);

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

            _context.prev = 5;
            _context.next = 8;
            return onSubmit(model);

          case 8:
            result = _context.sent;
            _context.next = 11;
            return onSuccess(result);

          case 11:
            _context.next = 19;
            break;

          case 13:
            _context.prev = 13;
            _context.t0 = _context['catch'](5);
            _context.next = 17;
            return onFailure(_context.t0);

          case 17:
            newErr = transformError(_context.t0);

            if (newErr) invalidate(form, newErr);

          case 19:
          case 'end':
            return _context.stop();
        }
      }
    }, _marked[0], this, [[5, 13]]);
  }

  function handleChange(e) {
    var _e$target = e.target;
    var name = _e$target.name;
    var form = _e$target.form;

    checkValidity(form, cast((0, _serializeForm2.default)(form)), name);
  }

  function checkValidity(form, model, name) {
    var _validate = validate(model, name);

    var valid = _validate.valid;
    var errors = _validate.errors;


    if (!valid) {
      invalidate(form, errors, name);
    }

    return valid;
  }

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

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

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

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

function setTransformError(transformError) {
  defaultTransformError = transformError;
}

/**
 * Exports
 */

exports.default = {
  render: render,
  setTransformError: setTransformError
};