react-admin-kit
Version:
A react based UI components for admin system
240 lines (235 loc) • 9.08 kB
JavaScript
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 = ["open", "styles", "onCancel", "onOk", "formProps", "confirmLoading"],
_excluded2 = ["initialValues"],
_excluded3 = ["width", "initialValue"];
import { Form, Modal } from 'antd';
import { useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
import SchemaForm from "../SchemaForm";
import { myMergeOptions } from "../utils";
import { LocaleContext, ModalFormContext } from "../SettingProvider/context";
import { CreateBaseInner } from "../context";
import { normalizeTree } from "../utils/treeUtil";
import Omit from 'omit.js';
import { InnerRefContext } from "../ProForm";
import { collectDataIndex, transformValuesForConvention } from "../SchemaForm/utils";
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 ModalForm = function ModalForm(props) {
// 全局默认设置
var globalLocale = useContext(LocaleContext);
var setting = useContext(ModalFormContext) || {};
var safeProps = Omit(props, ['formRef', 'innerRef', 'onFinish', 'columns']);
var mergedProps = 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 = _objectWithoutProperties(mergedProps, _excluded);
var _ref = formProps || {},
_ref$initialValues = _ref.initialValues,
propsInitialValues = _ref$initialValues === void 0 ? {} : _ref$initialValues,
formRest = _objectWithoutProperties(_ref, _excluded2);
// 这是传给 SchemaForm 组件的
var innerRef = useRef(CreateBaseInner());
var formRef = useRef();
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visible = _useState2[0],
setVisible = _useState2[1];
var _useState3 = useState('new'),
_useState4 = _slicedToArray(_useState3, 2),
formType = _useState4[0],
setFormType = _useState4[1];
var _useState5 = useState(propsInitialValues),
_useState6 = _slicedToArray(_useState5, 2),
formData = _useState6[0],
setFormData = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
confirmLoading = _useState8[0],
setConfirmLoading = _useState8[1];
var _Modal$useModal = Modal.useModal(),
_Modal$useModal2 = _slicedToArray(_Modal$useModal, 2),
modal = _Modal$useModal2[0],
contextHolder = _Modal$useModal2[1];
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
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]);
useEffect(function () {
// @ts-ignore
var _form$getInternalHook = form.getInternalHooks('RC_FORM_INTERNAL_HOOKS'),
setInitialValues = _form$getInternalHook.setInitialValues;
var $values = transformValuesForConvention(formData, 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 = normalizeTree(columns, function (item) {
/** 去掉 width 属性, 因为在表单中不需要 width */
var width = item.width,
initialValue = item.initialValue,
rest = _objectWithoutProperties(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 _objectSpread({
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 = _objectSpread(_objectSpread({}, propsInitialValues || {}), initialData || {});
setFormType(formType);
setFormData(initialValues);
setVisible(true);
if (cb) cb();
};
useImperativeHandle(propsInnerRef, function () {
return _objectSpread(_objectSpread({}, innerRef.current), {}, {
openModal: openModal
});
}, []);
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(InnerRefContext.Provider, {
value: innerRef,
children: /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
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__*/_jsx(SchemaForm, _objectSpread(_objectSpread({
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]
});
};
export default ModalForm;
/**
* 仅用于输出文档
*/
/* istanbul ignore next */
export var ModalFormType = function ModalFormType() {
return null;
};
/**
* 仅用于输出文档
*/
/* istanbul ignore next */
export var ModalFormInnerRefTypeComponent = function ModalFormInnerRefTypeComponent() {
return null;
};