@uiw-admin/components
Version:
189 lines (185 loc) • 8.59 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
var _exportNames = {};
exports["default"] = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _uiw = require("uiw");
var _formdom = _interopRequireDefault(require("./formdom"));
var _readform = _interopRequireDefault(require("./readform"));
var _widgets = require("./widgets");
var _store = require("./hooks/store");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
var _type = require("./type");
Object.keys(_type).forEach(function (key) {
if (key === "default" || key === "__esModule") return;
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
if (key in exports && exports[key] === _type[key]) return;
Object.defineProperty(exports, key, {
enumerable: true,
get: function get() {
return _type[key];
}
});
});
function ProForm(props, ref) {
var _props$formDatas = props.formDatas,
formDatas = _props$formDatas === void 0 ? [] : _props$formDatas,
_props$title = props.title,
title = _props$title === void 0 ? '' : _props$title,
_props$formType = props.formType,
formType = _props$formType === void 0 ? 'card' : _props$formType,
_props$layout = props.layout,
layout = _props$layout === void 0 ? 'vertical' : _props$layout,
_props$readOnly = props.readOnly,
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
_props$customWidgetsL = props.customWidgetsList,
customWidgetsList = _props$customWidgetsL === void 0 ? {} : _props$customWidgetsL,
form = props.form,
_props$cardProps = props.cardProps,
cardProps = _props$cardProps === void 0 ? {} : _props$cardProps,
_props$collapseProps = props.collapseProps,
collapseProps = _props$collapseProps === void 0 ? {} : _props$collapseProps,
_props$collapsePanelP = props.collapsePanelProps,
collapsePanelProps = _props$collapsePanelP === void 0 ? {} : _props$collapsePanelP,
colProps = props.colProps;
// 获取表单配置
var formfields = (0, _react.useMemo)(function () {
return (0, _widgets.getFormFields)(readOnly, formDatas, customWidgetsList);
}, [formDatas]);
var _ref = form || {},
setFormState = _ref.setFormState;
var store = (0, _react.useMemo)(function () {
return {
setFormState: setFormState
};
}, [form]);
var formInstanceRef = (0, _react.useRef)();
// 通过ref导出实例方法
(0, _react.useImperativeHandle)(ref, function () {
var _formInstanceRef$curr7;
// 表单验证(同时兼容老api submitvalidate和新api onSubmit )
var submitvalidate = function submitvalidate() {
var _formInstanceRef$curr, _formInstanceRef$curr2;
return (formInstanceRef === null || formInstanceRef === void 0 ? void 0 : (_formInstanceRef$curr = formInstanceRef.current) === null || _formInstanceRef$curr === void 0 ? void 0 : (_formInstanceRef$curr2 = _formInstanceRef$curr.current) === null || _formInstanceRef$curr2 === void 0 ? void 0 : _formInstanceRef$curr2.onSubmit()) || null;
};
// 获取表单的值
var getFieldValues = function getFieldValues() {
var _formInstanceRef$curr3, _formInstanceRef$curr4;
return (formInstanceRef === null || formInstanceRef === void 0 ? void 0 : (_formInstanceRef$curr3 = formInstanceRef.current) === null || _formInstanceRef$curr3 === void 0 ? void 0 : (_formInstanceRef$curr4 = _formInstanceRef$curr3.current) === null || _formInstanceRef$curr4 === void 0 ? void 0 : _formInstanceRef$curr4.getFieldValues()) || {};
};
// 获取表单错误信息
var getError = function getError() {
var _formInstanceRef$curr5, _formInstanceRef$curr6;
return (formInstanceRef === null || formInstanceRef === void 0 ? void 0 : (_formInstanceRef$curr5 = formInstanceRef.current) === null || _formInstanceRef$curr5 === void 0 ? void 0 : (_formInstanceRef$curr6 = _formInstanceRef$curr5.current) === null || _formInstanceRef$curr6 === void 0 ? void 0 : _formInstanceRef$curr6.getError()) || {};
};
// 验证并获取表单值
var validateFieldsAndGetValue = function validateFieldsAndGetValue() {
return new Promise( /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(resolve, reject) {
var errors, value;
return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return submitvalidate();
case 2:
_context.next = 4;
return getError();
case 4:
_context.t0 = _context.sent;
if (_context.t0) {
_context.next = 7;
break;
}
_context.t0 = {};
case 7:
errors = _context.t0;
if (!(0, _utils.isObjectEmpty)(errors)) {
_context.next = 18;
break;
}
_context.next = 11;
return getFieldValues();
case 11:
_context.t1 = _context.sent;
if (_context.t1) {
_context.next = 14;
break;
}
_context.t1 = {};
case 14:
value = _context.t1;
resolve(value);
_context.next = 19;
break;
case 18:
reject(errors);
case 19:
case "end":
return _context.stop();
}
}, _callee);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}());
};
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (_formInstanceRef$curr7 = formInstanceRef.current) === null || _formInstanceRef$curr7 === void 0 ? void 0 : _formInstanceRef$curr7.current), {}, {
getError: getError,
getFieldValues: getFieldValues,
submitvalidate: submitvalidate,
validateFieldsAndGetValue: validateFieldsAndGetValue
});
});
var children;
var formDomProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, {
layout: layout,
formfields: formfields,
formInstanceRef: formInstanceRef
});
// 非详情模式下渲染标题
var renderTitle = !readOnly ? title : undefined;
// 判断是否是详情模式
var child = readOnly ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_readform["default"], (0, _objectSpread2["default"])({}, props)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_formdom["default"], (0, _objectSpread2["default"])({}, formDomProps));
// 判断渲染的form类型
if (formType === 'card') {
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uiw.Card, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
title: renderTitle
}, cardProps), {}, {
children: child
}));
} else if (formType === 'collapse') {
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uiw.Collapse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
activeKey: "1"
}, collapseProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uiw.Collapse.Panel, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
header: title
}, collapsePanelProps), {}, {
children: child
}), '1')
}));
} else {
children = child;
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.StoreCtx.Provider, {
value: store,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.ColPropsContext.Provider, {
value: colProps || {},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "uiw-admin-proform uiw-admin-proform-".concat(layout),
children: children
})
})
});
}
var _default = /*#__PURE__*/(0, _react.forwardRef)(ProForm);
exports["default"] = _default;