react-admin-kit
Version:
A react based UI components for admin system
244 lines (239 loc) • 9.87 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ModalFormType = exports.ModalFormInnerRefTypeComponent = void 0;
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 _antd = require("antd");
var _react = require("react");
var _SchemaForm = _interopRequireDefault(require("../SchemaForm"));
var _utils = require("../utils");
var _context = require("../SettingProvider/context");
var _context2 = require("../context");
var _treeUtil = require("../utils/treeUtil");
var _omit = _interopRequireDefault(require("omit.js"));
var _ProForm = require("../ProForm");
var _utils2 = require("../SchemaForm/utils");
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["open", "styles", "onCancel", "onOk", "formProps", "confirmLoading"],
_excluded2 = ["initialValues"],
_excluded3 = ["width", "initialValue"];
var ModalForm = function ModalForm(props) {
// 全局默认设置
var globalLocale = (0, _react.useContext)(_context.LocaleContext);
var setting = (0, _react.useContext)(_context.ModalFormContext) || {};
var safeProps = (0, _omit.default)(props, ['formRef', 'innerRef', 'onFinish', 'columns']);
var mergedProps = (0, _utils.myMergeOptions)(setting, safeProps || {},
// 默认值给到这里，特别是对象类的值
{
styles: {
body: {
maxHeight: 'calc(100vh - 240px)',
overflow: 'auto',
// 让滚动条贴边
marginRight: '-20px',
paddingRight: '20px'
}
}
});
var propsFormRef = props.formRef,
propsInnerRef = props.innerRef,
onFinish = props.onFinish,
columns = props.columns;
var open = mergedProps.open,
styles = mergedProps.styles,
onCancel = mergedProps.onCancel,
onOk = mergedProps.onOk,
formProps = mergedProps.formProps,
propsConfirmLoading = mergedProps.confirmLoading,
modalRest = (0, _objectWithoutProperties2.default)(mergedProps, _excluded);
var _ref = formProps || {},
_ref$initialValues = _ref.initialValues,
propsInitialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
formRest = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
// 这是传给 SchemaForm 组件的
var innerRef = (0, _react.useRef)((0, _context2.CreateBaseInner)());
var formRef = (0, _react.useRef)();
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = (0, _react.useState)('new'),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
formType = _useState4[0],
setFormType = _useState4[1];
var _useState5 = (0, _react.useState)(propsInitialValues),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
formData = _useState6[0],
setFormData = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
confirmLoading = _useState8[0],
setConfirmLoading = _useState8[1];
var _Modal$useModal = _antd.Modal.useModal(),
_Modal$useModal2 = (0, _slicedToArray2.default)(_Modal$useModal, 2),
modal = _Modal$useModal2[0],
contextHolder = _Modal$useModal2[1];
var _Form$useForm = _antd.Form.useForm(),
_Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
form = _Form$useForm2[0];
(0, _react.useEffect)(function () {
if (open || visible) {
if (mergedProps.onOpen) {
setConfirmLoading(true);
Promise.resolve(mergedProps.onOpen(formType, getFormRef(), formData)).then(function () {
setConfirmLoading(false);
}).catch(function () {
setConfirmLoading(false);
});
}
}
}, [open, visible]);
(0, _react.useEffect)(function () {
// @ts-ignore
var _form$getInternalHook = form.getInternalHooks('RC_FORM_INTERNAL_HOOKS'),
setInitialValues = _form$getInternalHook.setInitialValues;
var $values = (0, _utils2.transformValuesForConvention)(formData, (0, _utils2.collectDataIndex)(columns, formData));
setInitialValues($values);
form.resetFields();
}, [formData]);
var getFormRef = function getFormRef() {
return propsFormRef || formRef;
};
var getOnCancel = function getOnCancel(e) {
if (open) {
if (onCancel) onCancel(e);
} else {
setVisible(false);
}
};
var handleOnCancel = function handleOnCancel(e) {
var _mergedProps$confirmO, _current;
var confirmOnCloseDefault = {
title: globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.confirmOnCloseTitle,
content: globalLocale === null || globalLocale === void 0 ? void 0 : globalLocale.confirmOnCloseContent
};
var confirmOnClose = (_mergedProps$confirmO = mergedProps.confirmOnClose) !== null && _mergedProps$confirmO !== void 0 ? _mergedProps$confirmO : confirmOnCloseDefault;
confirmOnClose = confirmOnClose === true ? confirmOnCloseDefault : confirmOnClose;
var isTouched = (_current = getFormRef().current) === null || _current === void 0 ? void 0 : _current.isFieldsTouched();
if (confirmOnClose && isTouched) {
modal.confirm({
title: confirmOnClose.title,
content: confirmOnClose.content,
centered: true,
closable: true,
onOk: function onOk() {
getOnCancel(e);
},
getContainer: mergedProps.getContainer
});
} else {
getOnCancel(e);
}
};
var handleOnOk = function handleOnOk() {
if (getFormRef().current) {
var _current2;
(_current2 = getFormRef().current) === null || _current2 === void 0 || _current2.submit();
}
};
var handleOnFinish = function handleOnFinish(values) {
if (onFinish) {
setConfirmLoading(true);
Promise.resolve(onFinish(values, formType, formData)).then(function () {
setConfirmLoading(false);
getOnCancel(null);
}).catch(function (e) {
/* istanbul ignore next */
console.log('onFinishError', e);
setConfirmLoading(false);
});
}
};
var getColumns = function getColumns() {
var $cols = (0, _treeUtil.normalizeTree)(columns, function (item) {
/** 去掉 width 属性, 因为在表单中不需要 width */
var width = item.width,
initialValue = item.initialValue,
rest = (0, _objectWithoutProperties2.default)(item, _excluded3);
// columns 上和 SchemaForm 组件的 initialValues 上不能有相同的字段, 否则会有告警.
// Form already set 'initialValues' with path 'name'. Field can not overwrite it
if (typeof item.dataIndex === 'string' && formData.hasOwnProperty(item.dataIndex)) {
return rest;
} else {
return (0, _objectSpread2.default)({
initialValue: initialValue
}, rest);
}
}, {
replace: true
});
return $cols;
};
var openModal = function openModal() {
var formType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'new';
var initialData = arguments.length > 1 ? arguments[1] : undefined;
var cb = arguments.length > 2 ? arguments[2] : undefined;
// 将 formType 挂在 innerRef 上
propsInnerRef.current.formType = formType;
// 合并初始值. openModal 所携带的初始值优先级更大.
var initialValues = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, propsInitialValues || {}), initialData || {});
setFormType(formType);
setFormData(initialValues);
setVisible(true);
if (cb) cb();
};
(0, _react.useImperativeHandle)(propsInnerRef, function () {
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, innerRef.current), {}, {
openModal: openModal
});
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProForm.InnerRefContext.Provider, {
value: innerRef,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({
open: open !== null && open !== void 0 ? open : visible,
styles: styles,
onCancel: handleOnCancel,
onOk: handleOnOk,
confirmLoading: propsConfirmLoading !== null && propsConfirmLoading !== void 0 ? propsConfirmLoading : confirmLoading
}, modalRest), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SchemaForm.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
scrollToFirstError: true // 默认值
,
autoFocusFirstInput: true // 默认值
,
isKeyPressSubmit: true // 默认值
,
readonly: formType === 'read',
columns: getColumns(),
onFinish: handleOnFinish,
formRef: getFormRef(),
innerRef: innerRef,
initialValues: formData
}, formRest), {}, {
//@ts-ignore
form: form // 当外部没传 form 时使用自身的 form, 防止当 ModalForm 嵌在 ProForm 里时被它的 form 覆盖
}))
}))
}), contextHolder]
});
};
var _default = exports.default = ModalForm;
/**
* 仅用于输出文档
*/
/* istanbul ignore next */
var ModalFormType = exports.ModalFormType = function ModalFormType() {
return null;
};
/**
* 仅用于输出文档
*/
/* istanbul ignore next */
var ModalFormInnerRefTypeComponent = exports.ModalFormInnerRefTypeComponent = function ModalFormInnerRefTypeComponent() {
return null;
};