forgeplus-react/src/forge/Wiki/components/ModalFun/index.jsx

import React, { useState } from 'react';
import * as ReactDOM from 'react-dom';
import { Modal, Button } from 'antd';
import './index.scss';

// 使用函数调用删除组件
export default function DelModal(props) {
  renderModal({ ...props, type: 'delete' })
}

export function confirmModal(props) {
  renderModal({ ...props, type: 'confirm' })
}

function renderModal(props) {
  const type = props.type;
  const div = document.createElement('div');
  document.body.appendChild(div);

  function destroy() {
    const unmountResult = ReactDOM.unmountComponentAtNode(div);
    if (unmountResult && div.parentNode) {
      div.parentNode.removeChild(div);
    }
  }

  function modalType(type) {
    if (type === 'delete') {
      return <DeleteModal title="删除页面" contentTitle="确定要删除吗？" afterClose={destroy} {...props} />
    } else if (type === 'confirm') {
      return <ConfirmModal title="选择" afterClose={destroy} {...props} />
    } else {
      return <ConfirmModal title="选择" afterClose={destroy} {...props} />
    }
  }

  function render() {
    /**
     * Sync render blocks React event. Let's make this async.
     */
    setTimeout(() => {
      ReactDOM.render(
        modalType(type),
        div,
      );
    });
  }
  render();
}

// 真正的删除组件
function DeleteModal({
  onCancel,
  onOk,
  title,
  contentTitle,
  content,
  afterClose,
  okText,
  cancelText,
}) {

  const [visible, setVisible] = useState(true);

  function onCancelModal() {
    setVisible(false);
    onCancel && onCancel()
  }

  function onSuccess() {
    setVisible(false);
    onOk && onOk();
  }

  return (
    <Modal
      visible={visible}
      onCancel={onCancelModal}
      afterClose={afterClose}
      title={title}
      className="myself-modal"
      centered
      footer={[
        <Button key="back" onClick={onCancelModal}>
          {cancelText||'取消'}
        </Button>,
        <Button className="foot-submit" key="submit" onClick={onSuccess}>
          {okText||'确认删除'}
        </Button>,
      ]}
    >
      <div>
        <p className="delete-title">
          <i className="red-circle iconfont icon-shanchu_tc_icon mr3"></i>
          {contentTitle}</p>
        <p className="delete-descibe">{content}</p>
      </div>
    </Modal>
  )
}

// 选择组件
function ConfirmModal({
  onCancel,
  onOk,
  title,
  contentTitle,
  content,
  okText,
  cancelText,
  afterClose,
}) {

  const [visible, setVisible] = useState(true);

  function onCancelModal() {
    setVisible(false);
    onCancel && onCancel()
  }

  function onSuccess() {
    setVisible(false);
    onOk && onOk();
  }

  return (
    <Modal
      visible={visible}
      onCancel={onCancelModal}
      afterClose={afterClose}
      title={title}
      className="myself-modal"
      centered
      footer={[
        <Button key="back" onClick={onCancelModal}>
          {cancelText||'取消'}
        </Button>,
        <Button className="foot-submit" key="submit" onClick={onSuccess}>
          {okText||'确认'}
        </Button>,
      ]}
    >
      <div>
        {contentTitle && <p className="delete-title">{contentTitle}</p>}
        <p className="delete-descibe">{content}</p>
      </div>
    </Modal>
  )
}