128 lines
3.7 KiB
JavaScript
128 lines
3.7 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _extends2 = require('babel-runtime/helpers/extends');
|
|
|
|
var _extends3 = _interopRequireDefault(_extends2);
|
|
|
|
var _reactDom = require('react-dom');
|
|
|
|
var _reactDom2 = _interopRequireDefault(_reactDom);
|
|
|
|
var _domScrollIntoView = require('dom-scroll-into-view');
|
|
|
|
var _domScrollIntoView2 = _interopRequireDefault(_domScrollIntoView);
|
|
|
|
var _has = require('lodash/has');
|
|
|
|
var _has2 = _interopRequireDefault(_has);
|
|
|
|
var _createBaseForm = require('./createBaseForm');
|
|
|
|
var _createBaseForm2 = _interopRequireDefault(_createBaseForm);
|
|
|
|
var _createForm = require('./createForm');
|
|
|
|
var _utils = require('./utils');
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function computedStyle(el, prop) {
|
|
var getComputedStyle = window.getComputedStyle;
|
|
var style =
|
|
// If we have getComputedStyle
|
|
getComputedStyle ?
|
|
// Query it
|
|
// TODO: From CSS-Query notes, we might need (node, null) for FF
|
|
getComputedStyle(el) :
|
|
|
|
// Otherwise, we are in IE and use currentStyle
|
|
el.currentStyle;
|
|
if (style) {
|
|
return style[
|
|
// Switch to camelCase for CSSOM
|
|
// DEV: Grabbed from jQuery
|
|
// https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194
|
|
// https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597
|
|
prop.replace(/-(\w)/gi, function (word, letter) {
|
|
return letter.toUpperCase();
|
|
})];
|
|
}
|
|
return undefined;
|
|
}
|
|
|
|
function getScrollableContainer(n) {
|
|
var node = n;
|
|
var nodeName = void 0;
|
|
/* eslint no-cond-assign:0 */
|
|
while ((nodeName = node.nodeName.toLowerCase()) !== 'body') {
|
|
var overflowY = computedStyle(node, 'overflowY');
|
|
// https://stackoverflow.com/a/36900407/3040605
|
|
if (node !== n && (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight) {
|
|
return node;
|
|
}
|
|
node = node.parentNode;
|
|
}
|
|
return nodeName === 'body' ? node.ownerDocument : node;
|
|
}
|
|
|
|
var mixin = {
|
|
getForm: function getForm() {
|
|
return (0, _extends3['default'])({}, _createForm.mixin.getForm.call(this), {
|
|
validateFieldsAndScroll: this.validateFieldsAndScroll
|
|
});
|
|
},
|
|
validateFieldsAndScroll: function validateFieldsAndScroll(ns, opt, cb) {
|
|
var _this = this;
|
|
|
|
var _getParams = (0, _utils.getParams)(ns, opt, cb),
|
|
names = _getParams.names,
|
|
callback = _getParams.callback,
|
|
options = _getParams.options;
|
|
|
|
var newCb = function newCb(error, values) {
|
|
if (error) {
|
|
var validNames = _this.fieldsStore.getValidFieldsName();
|
|
var firstNode = void 0;
|
|
var firstTop = void 0;
|
|
|
|
validNames.forEach(function (name) {
|
|
if ((0, _has2['default'])(error, name)) {
|
|
var instance = _this.getFieldInstance(name);
|
|
if (instance) {
|
|
var node = _reactDom2['default'].findDOMNode(instance);
|
|
var top = node.getBoundingClientRect().top;
|
|
if (node.type !== 'hidden' && (firstTop === undefined || firstTop > top)) {
|
|
firstTop = top;
|
|
firstNode = node;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
if (firstNode) {
|
|
var c = options.container || getScrollableContainer(firstNode);
|
|
(0, _domScrollIntoView2['default'])(firstNode, c, (0, _extends3['default'])({
|
|
onlyScrollIfNeeded: true
|
|
}, options.scroll));
|
|
}
|
|
}
|
|
|
|
if (typeof callback === 'function') {
|
|
callback(error, values);
|
|
}
|
|
};
|
|
|
|
return this.validateFields(names, options, newCb);
|
|
}
|
|
};
|
|
|
|
function createDOMForm(option) {
|
|
return (0, _createBaseForm2['default'])((0, _extends3['default'])({}, option), [mixin]);
|
|
}
|
|
|
|
exports['default'] = createDOMForm;
|
|
module.exports = exports['default']; |