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

/**
 * Form component
 */

function render(_ref) {
  var props = _ref.props;
  var children = _ref.children;
  var _props$onSubmit = props.onSubmit;
  var onSubmit = _props$onSubmit === undefined ? _noop2.default : _props$onSubmit;
  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$loading = props.loading;
  var loading = _props$loading === undefined ? false : _props$loading;

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

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

  function handleSubmit(e) {
    e.preventDefault();

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

    if (!loading && valid) {
      return onSubmit(model, function (res, err) {
        return err && invalidate(form, err);
      });
    }
  }

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

/**
 * Exports
 */

exports.default = {
  render: render
};