390 lines
13 KiB
JavaScript
390 lines
13 KiB
JavaScript
"use strict";
|
|
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
|
|
var _extends6 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
|
|
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
|
|
|
|
var _omit2 = _interopRequireDefault(require("lodash/omit"));
|
|
|
|
var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
|
|
|
|
var React = _interopRequireWildcard(require("react"));
|
|
|
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
|
var _schemaTyped = require("schema-typed");
|
|
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
|
var _shallowEqual = _interopRequireDefault(require("../utils/shallowEqual"));
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _prefix = require("../utils/prefix");
|
|
|
|
var _FormContext = _interopRequireWildcard(require("./FormContext"));
|
|
|
|
var Form =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
(0, _inheritsLoose2.default)(Form, _React$Component);
|
|
|
|
function Form(_props) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, _props) || this;
|
|
_this.formContextValue = null;
|
|
|
|
_this.getFormValue = function (state, props) {
|
|
if (state === void 0) {
|
|
state = _this.state;
|
|
}
|
|
|
|
if (props === void 0) {
|
|
props = _this.props;
|
|
}
|
|
|
|
return (0, _isUndefined2.default)(props.formValue) ? state.formValue : props.formValue;
|
|
};
|
|
|
|
_this.getFormError = function (state, props) {
|
|
if (state === void 0) {
|
|
state = _this.state;
|
|
}
|
|
|
|
if (props === void 0) {
|
|
props = _this.props;
|
|
}
|
|
|
|
return (0, _isUndefined2.default)(props.formError) ? state.formError : props.formError;
|
|
};
|
|
|
|
_this.check = function (callback) {
|
|
var formValue = _this.getFormValue() || {};
|
|
var _this$props = _this.props,
|
|
model = _this$props.model,
|
|
onCheck = _this$props.onCheck,
|
|
onError = _this$props.onError;
|
|
var formError = {};
|
|
var errorCount = 0;
|
|
Object.keys(model.schema).forEach(function (key) {
|
|
var checkResult = model.checkForField(key, formValue[key], formValue);
|
|
|
|
if (checkResult.hasError === true) {
|
|
errorCount += 1;
|
|
formError[key] = checkResult.errorMessage;
|
|
}
|
|
});
|
|
|
|
_this.setState({
|
|
formError: formError
|
|
});
|
|
|
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
callback === null || callback === void 0 ? void 0 : callback(formError);
|
|
|
|
if (errorCount > 0) {
|
|
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
_this.checkForField = function (fieldName, callback) {
|
|
var formValue = _this.getFormValue() || {};
|
|
var _this$props2 = _this.props,
|
|
model = _this$props2.model,
|
|
onCheck = _this$props2.onCheck,
|
|
onError = _this$props2.onError;
|
|
var checkResult = model.checkForField(fieldName, formValue[fieldName], formValue);
|
|
|
|
_this.setState(function (prvState, props) {
|
|
var _extends2;
|
|
|
|
var formError = (0, _extends6.default)({}, _this.getFormError(prvState, props), (_extends2 = {}, _extends2[fieldName] = checkResult.errorMessage, _extends2));
|
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
|
|
if (checkResult.hasError) {
|
|
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
}
|
|
|
|
return {
|
|
formError: formError
|
|
};
|
|
});
|
|
|
|
callback === null || callback === void 0 ? void 0 : callback(checkResult);
|
|
return !checkResult.hasError;
|
|
};
|
|
|
|
_this.checkAsync = function () {
|
|
var formValue = _this.getFormValue() || {};
|
|
var _this$props3 = _this.props,
|
|
model = _this$props3.model,
|
|
onCheck = _this$props3.onCheck,
|
|
onError = _this$props3.onError;
|
|
var promises = [];
|
|
var keys = [];
|
|
Object.keys(model.schema).forEach(function (key) {
|
|
keys.push(key);
|
|
promises.push(model.checkForFieldAsync(key, formValue[key], formValue));
|
|
});
|
|
return Promise.all(promises).then(function (values) {
|
|
var formError = {};
|
|
var errorCount = 0;
|
|
|
|
for (var i = 0; i < values.length; i++) {
|
|
if (values[i].hasError) {
|
|
errorCount += 1;
|
|
formError[keys[i]] = values[i].errorMessage;
|
|
}
|
|
}
|
|
|
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
|
|
if (errorCount > 0) {
|
|
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
}
|
|
|
|
_this.setState({
|
|
formError: formError
|
|
});
|
|
|
|
return {
|
|
hasError: errorCount > 0,
|
|
formError: formError
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.checkForFieldAsync = function (fieldName) {
|
|
var formValue = _this.getFormValue() || {};
|
|
var _this$props4 = _this.props,
|
|
model = _this$props4.model,
|
|
onCheck = _this$props4.onCheck,
|
|
onError = _this$props4.onError;
|
|
return model.checkForFieldAsync(fieldName, formValue[fieldName], formValue).then(function (checkResult) {
|
|
_this.setState(function (prvState, props) {
|
|
var _extends3;
|
|
|
|
var formError = (0, _extends6.default)({}, _this.getFormError(prvState, props), (_extends3 = {}, _extends3[fieldName] = checkResult.errorMessage, _extends3));
|
|
onCheck === null || onCheck === void 0 ? void 0 : onCheck(formError);
|
|
|
|
if (checkResult.hasError) {
|
|
onError === null || onError === void 0 ? void 0 : onError(formError);
|
|
}
|
|
|
|
return {
|
|
formError: formError
|
|
};
|
|
});
|
|
|
|
return checkResult;
|
|
});
|
|
};
|
|
|
|
_this.handleFieldError = function (name, errorMessage) {
|
|
_this.setState(function (prvState, props) {
|
|
var _extends4, _this$props$onError, _this$props5, _this$props$onCheck, _this$props6;
|
|
|
|
var formError = (0, _extends6.default)({}, _this.getFormError(prvState, props), (_extends4 = {}, _extends4[name] = errorMessage, _extends4));
|
|
(_this$props$onError = (_this$props5 = _this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props5, formError);
|
|
(_this$props$onCheck = (_this$props6 = _this.props).onCheck) === null || _this$props$onCheck === void 0 ? void 0 : _this$props$onCheck.call(_this$props6, formError);
|
|
return {
|
|
formError: formError
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.handleFieldSuccess = function (name) {
|
|
_this.setState(function (prvState, props) {
|
|
var _this$props$onCheck2, _this$props7;
|
|
|
|
var formError = (0, _omit2.default)(_this.getFormError(prvState, props), [name]);
|
|
(_this$props$onCheck2 = (_this$props7 = _this.props).onCheck) === null || _this$props$onCheck2 === void 0 ? void 0 : _this$props$onCheck2.call(_this$props7, formError);
|
|
return {
|
|
formError: formError
|
|
};
|
|
});
|
|
};
|
|
|
|
_this.handleFieldChange = function (name, value, event) {
|
|
var _extends5, _this$props$onChange, _this$props8;
|
|
|
|
var formValue = _this.getFormValue();
|
|
|
|
var nextFormValue = (0, _extends6.default)({}, formValue, (_extends5 = {}, _extends5[name] = value, _extends5));
|
|
|
|
_this.setState({
|
|
formValue: nextFormValue
|
|
});
|
|
|
|
(_this$props$onChange = (_this$props8 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props8, nextFormValue, event);
|
|
};
|
|
|
|
_this.handleSubmit = function (event) {
|
|
var _this$props$onSubmit, _this$props9;
|
|
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
var checkStatus = _this.check();
|
|
|
|
(_this$props$onSubmit = (_this$props9 = _this.props).onSubmit) === null || _this$props$onSubmit === void 0 ? void 0 : _this$props$onSubmit.call(_this$props9, checkStatus, event);
|
|
};
|
|
|
|
var _this$props10 = _this.props,
|
|
formDefaultValue = _this$props10.formDefaultValue,
|
|
_formError = _this$props10.formError;
|
|
_this.state = {
|
|
formError: _formError || {},
|
|
formValue: formDefaultValue
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Form.prototype;
|
|
|
|
/**
|
|
* public APIs
|
|
*/
|
|
_proto.cleanErrors = function cleanErrors(callback) {
|
|
this.setState({
|
|
formError: {}
|
|
}, callback);
|
|
}
|
|
/**
|
|
* public APIs
|
|
*/
|
|
;
|
|
|
|
_proto.cleanErrorForFiled = function cleanErrorForFiled(fieldName, callback) {
|
|
this.setState({
|
|
formError: (0, _omit2.default)(this.state.formError, [fieldName])
|
|
}, callback);
|
|
}
|
|
/**
|
|
* public APIs
|
|
*/
|
|
;
|
|
|
|
_proto.resetErrors = function resetErrors(formError, callback) {
|
|
if (formError === void 0) {
|
|
formError = {};
|
|
}
|
|
|
|
this.setState({
|
|
formError: formError
|
|
}, callback);
|
|
};
|
|
|
|
_proto.getFormContextValue = function getFormContextValue() {
|
|
var _this$props11 = this.props,
|
|
formDefaultValue = _this$props11.formDefaultValue,
|
|
errorFromContext = _this$props11.errorFromContext,
|
|
model = _this$props11.model,
|
|
checkTrigger = _this$props11.checkTrigger,
|
|
readOnly = _this$props11.readOnly,
|
|
plaintext = _this$props11.plaintext;
|
|
var nextFormContextValue = {
|
|
model: model,
|
|
checkTrigger: checkTrigger,
|
|
formDefaultValue: formDefaultValue,
|
|
errorFromContext: errorFromContext,
|
|
readOnly: readOnly,
|
|
plaintext: plaintext,
|
|
onFieldChange: this.handleFieldChange,
|
|
onFieldError: this.handleFieldError,
|
|
onFieldSuccess: this.handleFieldSuccess
|
|
};
|
|
|
|
if (!(0, _shallowEqual.default)(nextFormContextValue, this.formContextValue)) {
|
|
this.formContextValue = nextFormContextValue;
|
|
}
|
|
|
|
return this.formContextValue;
|
|
};
|
|
|
|
_proto.checkErrorFromContext = function checkErrorFromContext(children) {
|
|
var errorFromContext = this.props.errorFromContext;
|
|
|
|
if (errorFromContext) {
|
|
var formError = this.getFormError();
|
|
return React.createElement(_FormContext.FormErrorContext.Provider, {
|
|
value: formError
|
|
}, children);
|
|
}
|
|
|
|
return children;
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _this$props12 = this.props,
|
|
_this$props12$formVal = _this$props12.formValue,
|
|
formValue = _this$props12$formVal === void 0 ? {} : _this$props12$formVal,
|
|
layout = _this$props12.layout,
|
|
classPrefix = _this$props12.classPrefix,
|
|
fluid = _this$props12.fluid,
|
|
className = _this$props12.className,
|
|
children = _this$props12.children,
|
|
props = (0, _objectWithoutPropertiesLoose2.default)(_this$props12, ["formValue", "layout", "classPrefix", "fluid", "className", "children"]);
|
|
var addPrefix = (0, _utils.prefix)(classPrefix);
|
|
var classes = (0, _classnames.default)(classPrefix, className, addPrefix(layout), addPrefix(fluid && layout === 'vertical' ? 'fluid' : 'fixed-width'));
|
|
var unhandled = (0, _utils.getUnhandledProps)(Form, props);
|
|
var contextDefalutValue = this.getFormContextValue();
|
|
return React.createElement("form", (0, _extends6.default)({
|
|
onSubmit: this.handleSubmit
|
|
}, unhandled, {
|
|
className: classes
|
|
}), React.createElement(_FormContext.default.Provider, {
|
|
value: contextDefalutValue
|
|
}, React.createElement(_FormContext.FormValueContext.Provider, {
|
|
value: formValue
|
|
}, this.checkErrorFromContext(children))));
|
|
};
|
|
|
|
return Form;
|
|
}(React.Component);
|
|
|
|
Form.propTypes = {
|
|
className: _propTypes.default.string,
|
|
layout: _propTypes.default.oneOf(['horizontal', 'vertical', 'inline']),
|
|
fluid: _propTypes.default.bool,
|
|
formValue: _propTypes.default.object,
|
|
formDefaultValue: _propTypes.default.object,
|
|
formError: _propTypes.default.object,
|
|
checkDelay: _propTypes.default.number,
|
|
checkTrigger: _propTypes.default.oneOf(['change', 'blur', 'none']),
|
|
onChange: _propTypes.default.func,
|
|
onError: _propTypes.default.func,
|
|
onCheck: _propTypes.default.func,
|
|
onSubmit: _propTypes.default.func,
|
|
model: _propTypes.default.object,
|
|
classPrefix: _propTypes.default.string,
|
|
errorFromContext: _propTypes.default.bool,
|
|
children: _propTypes.default.node,
|
|
readOnly: _propTypes.default.bool,
|
|
plaintext: _propTypes.default.bool
|
|
};
|
|
Form.defaultProps = {
|
|
classPrefix: (0, _prefix.defaultClassPrefix)('form'),
|
|
model: (0, _schemaTyped.SchemaModel)({}),
|
|
layout: 'vertical',
|
|
formDefaultValue: {},
|
|
checkDelay: 500,
|
|
checkTrigger: 'change',
|
|
errorFromContext: true
|
|
};
|
|
var _default = Form;
|
|
exports.default = _default;
|
|
module.exports = exports.default; |