react-admin-kit
Version:
A react based UI components for admin system
348 lines (331 loc) • 14.2 kB
JavaScript
import _typeof from "@babel/runtime/helpers/esm/typeof";
import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["embed", "readonly", "readonlyType", "submitter", "valueBaseName", "initialValues", "descriptionsProps"];
import { BetaSchemaForm, GridContext } from '@ant-design/pro-form';
import { produce } from 'immer';
import React, { useContext, useEffect, useImperativeHandle, useRef } from 'react';
import { Form, Row } from 'antd';
import { SchemaFormContext } from "../SettingProvider/context";
import { genItems } from "./genItems";
import { EmbedColumnContext, InnerRefContext, ReadonlyContext, ReadonlyTypeContext, DescriptionsPropsContext, LayoutContext } from "../ProForm";
import { CreateBaseInner } from "../context";
import { collectDataIndex, splitValues, transformValuesForConvention } from "./utils";
import { myMergeOptions } from "../utils";
import omit from 'omit.js';
import DescriptionsTable from "./DescriptionsTable";
import { jsx as _jsx } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var SchemaForm = function SchemaForm(props) {
// 全局默认设置
var setting = useContext(SchemaFormContext) || {};
var safeProps = omit(props, ['form', 'formRef', 'innerRef', 'onFinish', 'columns']);
var mergedProps = 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 = _objectWithoutProperties(mergedProps, _excluded);
var propsForm = props.form,
propsFormRef = props.formRef,
propsInnerRef = props.innerRef,
onFinish = props.onFinish,
columns = props.columns;
// 当 innerRef 不传时提供一个内部默认值, 保证 innerRef 不为空
var innerRef = useRef(CreateBaseInner());
var parentInnerRef = useContext(InnerRefContext);
var getInnerRef = function getInnerRef() {
// 以最近的 InnerRefContext 为优先
// ProForm -> SchemaForm
// -> ModalForm -> SchemaForm
return parentInnerRef || innerRef;
};
var embedColumnsRef = useContext(EmbedColumnContext);
var formContainerRef = useRef(null);
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 = transformValuesForConvention(values, 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 = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var formInstance = Form.useFormInstance();
var formInstanceRef = useRef(embed ? null : wrapForm(propsForm || formInstance || form));
var formRef = useRef();
var initialValuesRef = useRef(transformValuesForConvention(initialValues, collectDataIndex(columns, initialValues, valueBaseName)));
useEffect(function () {
if (embed) {
embedColumnsRef.current.push({
columns: columns,
baseName: valueBaseName
});
}
}, [embed]);
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 _objectSpread(_objectSpread({}, formRef.current), {}, {
getFieldsValue: function getFieldsValue() {
// @ts-ignore
return splitValues(_getFieldsValue.apply(void 0, arguments));
},
getFieldsFormatValue: function getFieldsFormatValue() {
// @ts-ignore
return splitValues(_getFieldsFormatValue.apply(void 0, arguments));
},
validateFields: function validateFields() {
return _validateFields.apply(void 0, arguments).then(function (res) {
return splitValues(res);
});
},
validateFieldsReturnFormatValue: function validateFieldsReturnFormatValue() {
// @ts-ignore
return _validateFieldsReturnFormatValue.apply(void 0, arguments).then(function (res) {
return splitValues(res);
});
}
});
}
}, [formRef.current]);
var handleOnFinish = /*#__PURE__*/function () {
var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(values) {
return _regeneratorRuntime().wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!onFinish) {
_context.next = 2;
break;
}
return _context.abrupt("return", onFinish(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 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, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, 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 (_typeof(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__*/_jsx("div", {
className: className,
style: _objectSpread({
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 = useContext(ReadonlyContext);
var activeReadonly = readonly === undefined ? parentReadonly : readonly;
var activeReadonlyType = props.readonlyType === undefined ? useContext(ReadonlyTypeContext) : readonlyType;
var activeDescriptionsProps = descriptionsProps === undefined ? useContext(DescriptionsPropsContext) : descriptionsProps;
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
className: "form-item-wrapper",
ref: formContainerRef,
style: {
display: activeReadonly && activeReadonlyType === 'descriptions' ? 'none' : 'block'
},
children: grid ? /*#__PURE__*/_jsx(GridContext.Provider, {
value: {
grid: true,
colProps: colProps
},
children: /*#__PURE__*/_jsx(Row, _objectSpread(_objectSpread({}, rowProps), {}, {
children: genItems(patchColumn(columns), 'form', formInstance, {
labelCol: labelCol,
valueBaseName: valueBaseName,
colProps: colProps,
readonly: activeReadonly
})
}))
}) : genItems(patchColumn(columns), 'form', formInstance, {
labelCol: labelCol,
valueBaseName: valueBaseName,
readonly: activeReadonly
})
}), activeReadonly && activeReadonlyType === 'descriptions' && /*#__PURE__*/_jsx(DescriptionsTable, {
formContainerRef: formContainerRef,
grid: grid,
embed: true,
descriptionsProps: activeDescriptionsProps,
layout: useContext(LayoutContext) === 'horizontal' ? 'horizontal' : 'vertical' // 保持与 ProForm 的默认 layout 一致
})]
});
}
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx("div", {
ref: formContainerRef,
style: {
display: readonly && readonlyType === 'descriptions' ? 'none' : 'block'
},
children: /*#__PURE__*/_jsx(BetaSchemaForm, _objectSpread(_objectSpread({
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__*/_jsx(DescriptionsTable, {
formContainerRef: formContainerRef,
grid: mergedProps.grid,
descriptionsProps: descriptionsProps,
layout: mergedProps.layout || 'vertical' // SchemaForm 的 layout 默认是 vertical
})]
});
};
export default SchemaForm;
// 用于生成api文档
/* istanbul ignore next */
export var SchemaFormSelfType = function SchemaFormSelfType() {
return null;
};
// 用于生成api文档
/* istanbul ignore next */
export var SchemaFormOriginType = function SchemaFormOriginType() {
return null;
};
// 用于生成api文档
/* istanbul ignore next */
export var FormColumnTypeComponent = function FormColumnTypeComponent() {
return null;
};