@olapat/react-useform
Version:
react hook useform controller
124 lines (123 loc) • 5.88 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormContext = void 0;
var jsx_runtime_1 = require("react/jsx-runtime");
var react_1 = require("react");
var middleware_1 = __importDefault(require("../utils/middleware"));
exports.FormContext = (0, react_1.createContext)(null);
var Form = function (props) {
var children = props.children, handlerSubmit = props.handlerSubmit, handleSubmit = props.handleSubmit, onSubmitError = props.onSubmitError, form = props.form, _a = props.preventEnter, preventEnter = _a === void 0 ? false : _a, _b = props.showStarRequired, showStarRequired = _b === void 0 ? true : _b, mode = props.mode, listCtl = props.listCtl, listName = props.listName, formProps = __rest(props, ["children", "handlerSubmit", "handleSubmit", "onSubmitError", "form", "preventEnter", "showStarRequired", "mode", "listCtl", "listName"]);
var setSubmitting = form.setSubmitting, validate = form.validate, values = form.values, blackList = form.blackList, whiteList = form.whiteList, rules = form.rules;
var onStartSubmit = (0, react_1.useCallback)(function (next) {
setSubmitting(true);
if (typeof next === 'function') {
next();
}
}, [setSubmitting]);
var onEndSubmit = (0, react_1.useCallback)(function () {
setSubmitting(false);
}, [setSubmitting]);
var buildValidate = (0, react_1.useCallback)(function (next, end) {
var resultValid = validate(null, end, true);
var errors = {};
var isValid = false;
var _values = null;
if (typeof resultValid === 'boolean') {
}
else {
isValid = resultValid[0];
errors = resultValid[1];
_values = resultValid[2];
}
if (mode === 'list' && listCtl) {
var isValidList = listCtl.validateListItem();
if (isValid && isValidList) {
next(_values);
return;
}
}
else if (mode !== 'list') {
if (isValid) {
next(_values);
return;
}
}
if (typeof onSubmitError === 'function') {
onSubmitError(errors, _values, rules);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [validate, onSubmitError, values, rules, listCtl, mode]);
var buildValues = (0, react_1.useCallback)(function (values, next) {
var _a;
if (mode === 'list' && listCtl) {
next(__assign(__assign({}, values), (_a = {}, _a[listName || 'listValue'] = listCtl.values.map(function (item) { return item.values; }), _a)));
}
else {
next(values);
}
}, [listCtl, mode, listName]);
var _handlerSubmit = (0, react_1.useCallback)(function (event) {
event.preventDefault();
var handle = handleSubmit || handlerSubmit;
if (Array.isArray(handle)) {
(0, middleware_1.default)(__spreadArray(__spreadArray([onStartSubmit, buildValidate, buildValues], handle, true), [onEndSubmit], false), { end: onEndSubmit });
}
else if (typeof handle === 'function') {
(0, middleware_1.default)([onStartSubmit, buildValidate, buildValues, handle, onEndSubmit], { end: onEndSubmit });
}
}, [handlerSubmit, handleSubmit, buildValidate, onStartSubmit, onEndSubmit, buildValues]);
var isFieldDisable = (0, react_1.useCallback)(function (name) {
if (blackList === '*') {
return true;
}
else if (whiteList === '*') {
return false;
}
else if (blackList && (blackList === null || blackList === void 0 ? void 0 : blackList.length)) {
return blackList.includes(String(name));
}
else if (whiteList && (whiteList === null || whiteList === void 0 ? void 0 : whiteList.length)) {
return !whiteList.includes(String(name));
}
else {
return false;
}
}, [whiteList, blackList]);
return ((0, jsx_runtime_1.jsx)(exports.FormContext.Provider, { value: __assign(__assign({}, form), { isFieldDisable: isFieldDisable, showStarRequired: showStarRequired }), children: (0, jsx_runtime_1.jsx)("form", __assign({ noValidate: true, onSubmit: _handlerSubmit }, formProps, { onKeyDown: function (e) { if (preventEnter && e.code === 'Enter')
e.preventDefault(); }, children: children })) }));
};
exports.default = Form;