新增函数调用模态框

src/forge/Component/ModalFun/index.jsx

@@ -0,0 +1,125 @@
+/* eslint-disable react/jsx-no-duplicate-props */
+import React, { useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { Modal, Button } from 'antd';
+import './index.scss';
+
+// 函数式调用删除、通知等模态框
+
+InitModal.defaultProps = {
+  okText: '确认',     //确定按钮的文字
+  cancelText: '取消',  //取消按钮的文字
+  className: '',         //传入的模态框类名
+  inputId: 'copyText',    //要复制的文本的ID
+  onCancel:()=>{},        //取消的回调
+  onOk:()=>{},            //确认的回调
+  title:'提示',            //模态框名字
+  contentTitle:'',        //内容标题
+  content:'',             //详细内容
+  afterClose:()=>{},      //关闭模态框以后的回调
+};
+
+// 使用函数调用删除组件
+export default function DelModal(props) {
+  renderModal({ ...props, type: 'delete' })
+}
+
+// 使用函数调用选择模态框组件
+export function Confirm(props) {
+  renderModal({ ...props, type: 'confirm' })
+}
+
+function renderModal(props) {
+  const { type, afterClose } = props;
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  function destroy() {
+    afterClose && afterClose();
+    const unmountResult = ReactDOM.unmountComponentAtNode(div);
+    if (unmountResult && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
+  }
+
+  function modalType(type) {
+    if (type === 'delete') {
+      return <InitModal
+        title="删除"
+        contentTitle="确定要删除吗？"
+        okText="确认删除"
+        {...props}
+
+        afterClose={destroy}
+        contentTitle={<React.Fragment>
+          <i className="red-circle iconfont icon-shanchu_tc_icon mr3"></i>
+          {props.contentTitle}
+        </React.Fragment>}
+      />
+    } else if (type === 'confirm') {
+      return <InitModal title="选择" afterClose={destroy} {...props} />
+    } else {
+      return <InitModal title="选择" afterClose={destroy} {...props} />
+    }
+  }
+
+  function render() {
+    setTimeout(() => {
+      ReactDOM.render(
+        modalType(type),
+        div,
+      );
+    });
+  }
+  render();
+}
+
+// 选择模态框组件
+function InitModal({
+  onCancel,
+  onOk,
+  title,
+  contentTitle,
+  content,
+  okText,
+  cancelText,
+  afterClose,
+  className,
+}) {
+
+  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 ${className}`}
+      centered
+      footer={[
+        <Button type="default" key="back" onClick={onCancelModal}>
+          {cancelText}
+        </Button>,
+        <Button className="foot-submit" key="submit" onClick={onSuccess}>
+          {okText}
+        </Button>,
+      ]}
+    >
+      <div>
+        {contentTitle && <p className="content-title">{contentTitle}</p>}
+        <p className="content-descibe">{content}</p>
+      </div>
+    </Modal>
+  )
+}

src/forge/Component/ModalFun/index.scss

@@ -0,0 +1,63 @@
+.myself-modal {
+  .ant-modal-header {
+    padding: 9px 24px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+  .ant-modal-title {
+    text-align: left;
+  }
+  .ant-modal-close {
+    top: 0px !important;
+  }
+  .ant-modal-close-x {
+    font-size: 24px;
+  }
+  .ant-modal-body {
+    text-align: center;
+  }
+  .content-title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem 0 1rem !important;
+    font-size: 16px;
+    color: #333;
+    letter-spacing: 0;
+    line-height: 29px;
+    font-weight: 400;
+  }
+  .red-circle {
+    align-self: flex-start;
+    color: #ca0002;
+    font-size: 1.5rem !important;
+  }
+  .content-descibe {
+    font-size: 14px;
+    color: #666;
+    line-height: 33px;
+    font-weight: 400;
+  }
+  .ant-modal-footer {
+    padding: 2rem 0;
+    text-align: center;
+    border: 0;
+    .ant-btn {
+      width: 6rem;
+    }
+  }
+  .foot-submit {
+    margin-left: 3rem;
+    color: #df0002;
+    &:hover {
+      border-color: #df0002;
+    }
+  }
+  .ant-btn-default:hover,
+  .ant-btn-default:active,
+  .ant-btn-default:focus {
+    background: #f3f4f6;
+    color: #333;
+    border-color: #d0d0d0;
+  }
+}