优化删除函数组件

src/forge/Wiki/components/ModalFun/index.jsx

@@ -1,8 +1,16 @@
+/* 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
+};
+
 // 使用函数调用删除组件
 export default function DelModal(props) {
   renderModal({ ...props, type: 'delete' })
@@ -14,11 +22,12 @@ export function Confirm(props) {
 }
 
 function renderModal(props) {
-  const type = props.type;
+  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);
@@ -27,11 +36,22 @@ function renderModal(props) {
 
   function modalType(type) {
     if (type === 'delete') {
-      return <DeleteModal title="删除页面" contentTitle="确定要删除吗？" afterClose={destroy} {...props} />
+      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 <ConfirmModal title="选择" afterClose={destroy} {...props} />
+      return <InitModal title="选择" afterClose={destroy} {...props} />
     } else {
-      return <ConfirmModal title="选择" afterClose={destroy} {...props} />
+      return <InitModal title="选择" afterClose={destroy} {...props} />
     }
   }
 
@@ -46,17 +66,17 @@ function renderModal(props) {
   render();
 }
 
-
-// 删除组件
-function DeleteModal({
+// 选择模态框组件
+function InitModal({
   onCancel,
   onOk,
   title,
   contentTitle,
   content,
-  afterClose,
   okText,
   cancelText,
+  afterClose,
+  className,
 }) {
 
   const [visible, setVisible] = useState(true);
@@ -77,66 +97,14 @@ function DeleteModal({
       onCancel={onCancelModal}
       afterClose={afterClose}
       title={title}
-      className="myself-modal"
+      className={`myself-modal ${className}`}
       centered
       footer={[
         <Button type="default" key="back" onClick={onCancelModal}>
-          {cancelText||'取消'}
+          {cancelText}
         </Button>,
         <Button className="foot-submit" key="submit" onClick={onSuccess}>
-          {okText||'确认删除'}
-        </Button>,
-      ]}
-    >
-      <div>
-        <p className="content-title">
-          <i className="red-circle iconfont icon-shanchu_tc_icon mr3"></i>
-          {contentTitle}</p>
-        <p className="content-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 type="default" key="back"  onClick={onCancelModal}>
-          {cancelText||'取消'}
-        </Button>,
-        <Button className="foot-submit" key="submit" onClick={onSuccess}>
-          {okText||'确认'}
+          {okText}
         </Button>,
       ]}
     >