react-admin-kit
Version:
A react based UI components for admin system
352 lines (335 loc) • 15.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SchemaFormSelfType = exports.SchemaFormOriginType = exports.FormColumnTypeComponent = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _proForm = require("@ant-design/pro-form");
var _immer = require("immer");
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _context2 = require("../SettingProvider/context");
var _genItems = require("./genItems");
var _ProForm = require("../ProForm");
var _context3 = require("../context");
var _utils = require("./utils");
var _utils2 = require("../utils");
var _omit = _interopRequireDefault(require("omit.js"));
var _DescriptionsTable = _interopRequireDefault(require("./DescriptionsTable"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["embed", "readonly", "readonlyType", "submitter", "valueBaseName", "initialValues", "descriptionsProps"];
var SchemaForm = function SchemaForm(props) {
// 全局默认设置
var setting = (0, _react.useContext)(_context2.SchemaFormContext) || {};
var safeProps = (0, _omit.default)(props, ['form', 'formRef', 'innerRef', 'onFinish', 'columns']);
var mergedProps = (0, _utils2.myMergeOptions)(setting, safeProps || {}, {});
var _mergedProps$embed = mergedProps.embed,
embed = _mergedProps$embed === void 0 ? false : _mergedProps$embed,
readonly = mergedProps.readonly,
_mergedProps$readonly = mergedProps.readonlyType,
readonlyType = _mergedProps$readonly === void 0 ? 'form' : _mergedProps$readonly,
_mergedProps$submitte = mergedProps.submitter,
submitter = _mergedProps$submitte === void 0 ? false : _mergedProps$submitte,
valueBaseName = mergedProps.valueBaseName,
initialValues = mergedProps.initialValues,
descriptionsProps = mergedProps.descriptionsProps,
rest = (0, _objectWithoutProperties2.default)(mergedProps, _excluded);
var propsForm = props.form,
propsFormRef = props.formRef,
propsInnerRef = props.innerRef,
onFinish = props.onFinish,
columns = props.columns;
// 当 innerRef 不传时提供一个内部默认值, 保证 innerRef 不为空
var innerRef = (0, _react.useRef)((0, _context3.CreateBaseInner)());
var parentInnerRef = (0, _react.useContext)(_ProForm.InnerRefContext);
var getInnerRef = function getInnerRef() {
// 以最近的 InnerRefContext 为优先
// ProForm -> SchemaForm
// -> ModalForm -> SchemaForm
return parentInnerRef || innerRef;
};
var embedColumnsRef = (0, _react.useContext)(_ProForm.EmbedColumnContext);
var formContainerRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(propsInnerRef, function () {
return getInnerRef().current;
}, []);
// 包装 form 实例方法, 用于约定式赋值
var wrapForm = function wrapForm(form) {
var setFieldsValue = form.setFieldsValue;
form.setFieldsValue = function (values) {
var _getInnerRef$current;
var $values = (0, _utils.transformValuesForConvention)(values, (0, _utils.collectDataIndex)(columns, values, valueBaseName));
setFieldsValue($values);
/** 将赋值的值额外存在 innerRef 里, 在 render 函数(只读模式), 表单提交等场景里可用 */
(_getInnerRef$current = getInnerRef().current) === null || _getInnerRef$current === void 0 || _getInnerRef$current.setData($values || {});
};
return form;
};
var _Form$useForm = _antd.Form.useForm(),
_Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
form = _Form$useForm2[0];
var formInstance = _antd.Form.useFormInstance();
var formInstanceRef = (0, _react.useRef)(embed ? null : wrapForm(propsForm || formInstance || form));
var formRef = (0, _react.useRef)();
var initialValuesRef = (0, _react.useRef)((0, _utils.transformValuesForConvention)(initialValues, (0, _utils.collectDataIndex)(columns, initialValues, valueBaseName)));
(0, _react.useEffect)(function () {
if (embed) {
embedColumnsRef.current.push({
columns: columns,
baseName: valueBaseName
});
}
}, [embed]);
(0, _react.useImperativeHandle)(propsFormRef, function () {
if (formRef.current) {
var _formRef$current = formRef.current,
_getFieldsValue = _formRef$current.getFieldsValue,
_validateFields = _formRef$current.validateFields,
_getFieldsFormatValue = _formRef$current.getFieldsFormatValue,
_validateFieldsReturnFormatValue = _formRef$current.validateFieldsReturnFormatValue;
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRef.current), {}, {
getFieldsValue: function getFieldsValue() {
// @ts-ignore
return (0, _utils.splitValues)(_getFieldsValue.apply(void 0, arguments));
},
getFieldsFormatValue: function getFieldsFormatValue() {
// @ts-ignore
return (0, _utils.splitValues)(_getFieldsFormatValue.apply(void 0, arguments));
},
validateFields: function validateFields() {
return _validateFields.apply(void 0, arguments).then(function (res) {
return (0, _utils.splitValues)(res);
});
},
validateFieldsReturnFormatValue: function validateFieldsReturnFormatValue() {
// @ts-ignore
return _validateFieldsReturnFormatValue.apply(void 0, arguments).then(function (res) {
return (0, _utils.splitValues)(res);
});
}
});
}
}, [formRef.current]);
var handleOnFinish = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(values) {
return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!onFinish) {
_context.next = 2;
break;
}
return _context.abrupt("return", onFinish((0, _utils.splitValues)(values)));
case 2:
case "end":
return _context.stop();
}
}, _callee);
}));
return function handleOnFinish(_x) {
return _ref.apply(this, arguments);
};
}();
/**
* 给 fieldProps 和 renderFormItem 注入 innerRef
* 给一些约定的字段加上属性：required: true => formItemProps
*/
var patchColumn = function patchColumn($cols) {
var $innerRef = getInnerRef();
return (0, _immer.produce)($cols, function (cols) {
cols.forEach(function (col) {
var renderFormItem = col.renderFormItem,
fieldProps = col.fieldProps,
valueType = col.valueType,
columns = col.columns,
_col$formItemProps = col.formItemProps,
formItemProps = _col$formItemProps === void 0 ? {} : _col$formItemProps,
required = col.required,
render = col.render;
// 增加 required: true 简写
if (required) {
if (typeof formItemProps === 'function') {
col.formItemProps = function (_form, _config) {
var _formItemProps = formItemProps(_form, _config);
if (!_formItemProps.rules) {
_formItemProps.rules = [];
}
_formItemProps.rules.push({
required: true
});
return _formItemProps;
};
} else {
var _formItemProps = formItemProps || {};
if (!_formItemProps.rules) {
_formItemProps.rules = [];
}
_formItemProps.rules.push({
required: true
});
col.formItemProps = _formItemProps;
}
}
// 给fieldProps增加ref参数
if (fieldProps && typeof fieldProps === 'function') {
col.fieldProps = function (form, config) {
return fieldProps(form, $innerRef, config);
};
}
// 给renderFormItem增加ref参数
if (renderFormItem) {
col.renderFormItem = function (a, b, c) {
return renderFormItem(a, b, c, $innerRef);
};
}
// 针对只读模式, 扩展 entity
if (render) {
col.render = function (dom, entity) {
var _formRef$current2, _formRef$current2$get, _getInnerRef$current2;
var values = ((_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 || (_formRef$current2$get = _formRef$current2.getFieldsFormatValue) === null || _formRef$current2$get === void 0 ? void 0 : _formRef$current2$get.call(_formRef$current2)) || {};
var innerRefData = ((_getInnerRef$current2 = getInnerRef().current) === null || _getInnerRef$current2 === void 0 ? void 0 : _getInnerRef$current2.data) || {};
/** entity 中原有的 id, value 等属性会有被 values 中同名的值覆盖的可能 */
for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
rest[_key - 2] = arguments[_key];
}
return render.apply(void 0, [dom, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, entity), initialValues || {}), innerRefData), values)].concat(rest));
};
}
// 处理 columns 的套嵌, 例如 valueType 为 group
if (columns && Array.isArray(columns)) {
col.columns = patchColumn(columns);
}
// 处理 dependency 的套嵌
if (valueType === 'dependency' && columns && typeof columns === 'function') {
col.columns = function (values) {
return patchColumn(columns(values));
};
}
});
});
};
/**
* 在原来的 submitter dom 上增加一层 div, 方便在 div 上增加样式
*/
var patchSubmitter = function patchSubmitter() {
if ((0, _typeof2.default)(submitter) === 'object') {
var render = submitter.render,
_submitter$style = submitter.style,
style = _submitter$style === void 0 ? {} : _submitter$style,
className = submitter.className;
/* istanbul ignore next */
if (render) {
return submitter;
} else {
submitter.render = function (options, dom) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: className,
style: (0, _objectSpread2.default)({
display: 'flex',
alignItems: 'center',
gap: '8px'
}, style),
children: dom
});
};
return submitter;
}
}
return submitter;
};
/**
* embed模式下只是用来生成formItem项, 所以不需要传任何Form的属性
*/
if (embed) {
var grid = mergedProps.grid,
rowProps = mergedProps.rowProps,
colProps = mergedProps.colProps,
labelCol = mergedProps.labelCol;
var parentReadonly = (0, _react.useContext)(_ProForm.ReadonlyContext);
var activeReadonly = readonly === undefined ? parentReadonly : readonly;
var activeReadonlyType = props.readonlyType === undefined ? (0, _react.useContext)(_ProForm.ReadonlyTypeContext) : readonlyType;
var activeDescriptionsProps = descriptionsProps === undefined ? (0, _react.useContext)(_ProForm.DescriptionsPropsContext) : descriptionsProps;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "form-item-wrapper",
ref: formContainerRef,
style: {
display: activeReadonly && activeReadonlyType === 'descriptions' ? 'none' : 'block'
},
children: grid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_proForm.GridContext.Provider, {
value: {
grid: true,
colProps: colProps
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Row, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rowProps), {}, {
children: (0, _genItems.genItems)(patchColumn(columns), 'form', formInstance, {
labelCol: labelCol,
valueBaseName: valueBaseName,
colProps: colProps,
readonly: activeReadonly
})
}))
}) : (0, _genItems.genItems)(patchColumn(columns), 'form', formInstance, {
labelCol: labelCol,
valueBaseName: valueBaseName,
readonly: activeReadonly
})
}), activeReadonly && activeReadonlyType === 'descriptions' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescriptionsTable.default, {
formContainerRef: formContainerRef,
grid: grid,
embed: true,
descriptionsProps: activeDescriptionsProps,
layout: (0, _react.useContext)(_ProForm.LayoutContext) === 'horizontal' ? 'horizontal' : 'vertical' // 保持与 ProForm 的默认 layout 一致
})]
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
ref: formContainerRef,
style: {
display: readonly && readonlyType === 'descriptions' ? 'none' : 'block'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_proForm.BetaSchemaForm, (0, _objectSpread2.default)((0, _objectSpread2.default)({
onFinish: handleOnFinish
//@ts-ignore 说不能传true, 但是试了下 true 是可以给的
,
submitter: patchSubmitter(),
readonly: readonly,
initialValues: initialValuesRef.current,
formRef: formRef
}, rest), {}, {
// @ts-ignore
form: formInstanceRef.current,
columns: patchColumn(columns),
layoutType: 'Form'
}))
}), readonly && readonlyType === 'descriptions' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescriptionsTable.default, {
formContainerRef: formContainerRef,
grid: mergedProps.grid,
descriptionsProps: descriptionsProps,
layout: mergedProps.layout || 'vertical' // SchemaForm 的 layout 默认是 vertical
})]
});
};
var _default = exports.default = SchemaForm; // 用于生成api文档
/* istanbul ignore next */
var SchemaFormSelfType = exports.SchemaFormSelfType = function SchemaFormSelfType() {
return null;
};
// 用于生成api文档
/* istanbul ignore next */
var SchemaFormOriginType = exports.SchemaFormOriginType = function SchemaFormOriginType() {
return null;
};
// 用于生成api文档
/* istanbul ignore next */
var FormColumnTypeComponent = exports.FormColumnTypeComponent = function FormColumnTypeComponent() {
return null;
};