@jay.kou/rak-ssr/es/ModalForm/index.js

A react based UI components for admin system

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 { mergeOptions } from "../utils";
import { ModalFormContext } from "../SettingProvider/context";
import { normalizeTree } from "../utils/treeUtil";
import Omit from 'omit.js';
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 setting = useContext(ModalFormContext) || {};
  var safeProps = Omit(props, ['formRef', 'innerRef', 'onFinish', 'columns']);
  var mergedProps = mergeOptions(setting, safeProps || {}, {});
  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();
  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];
  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]);
  var getStylesProps = function getStylesProps() {
    return mergeOptions({
      body: {
        maxHeight: 'calc(100vh - 240px)',
        overflow: 'auto',
        // 让滚动条贴边
        marginRight: '-20px',
        paddingRight: '20px'
      }
    }, styles);
  };
  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: '确认关闭',
      content: '表单项内容未保存, 是否确认关闭?'
    };
    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(Modal, _objectSpread(_objectSpread({
      destroyOnHidden: true // 默认值
      ,
      open: open !== null && open !== void 0 ? open : visible,
      styles: getStylesProps(),
      onCancel: handleOnCancel,
      onOk: handleOnOk,
      confirmLoading: propsConfirmLoading !== null && propsConfirmLoading !== void 0 ? propsConfirmLoading : confirmLoading
    }, modalRest), {}, {
      children: /*#__PURE__*/_jsx(ModalContent, _objectSpread({
        scrollToFirstError: true // 默认值
        ,
        autoFocusFirstInput: true // 默认值
        ,
        isKeyPressSubmit: true // 默认值
        ,
        readonly: formType === 'read',
        columns: getColumns(),
        onFinish: handleOnFinish,
        formRef: getFormRef(),
        innerRef: innerRef,
        initialValues: formData
      }, formRest))
    })), contextHolder]
  });
};
var ModalContent = function ModalContent(props) {
  var _Form$useForm = Form.useForm(),
    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
    form = _Form$useForm2[0]; // 弹窗每次关闭需要重新生成实例

  return /*#__PURE__*/_jsx(SchemaForm, _objectSpread(_objectSpread({}, props), {}, {
    form: form // 当外部没传 form 时使用自身的 form, 防止当 ModalForm 嵌在 ProForm 里时被它的 form 覆盖
  }));
};
export default ModalForm;

/**
 * 仅用于输出文档
 */
/* istanbul ignore next */
export var ModalFormType = function ModalFormType() {
  return null;
};