feat(modal): change Modal.method to use dtinsightIcon and add Modal.delete

Author: LuckyFBB

src/index.ts

@@ -28,7 +28,7 @@ export { default as KeyEventListener } from './keyEventListener';
 export { default as enUS } from './locale/en-US';
 export { default as zhCN } from './locale/zh-CN';
 export { default as MarkdownRender } from './markdownRender';
-export { default as Modal } from './modal/modal';
+export { default as Modal } from './modal';
 export { default as NotFound } from './notFound';
 export { default as ProgressBar } from './progressBar';
 export { default as ProgressLine } from './progressLine';

src/modal/demos/method.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { Button, Space } from 'antd';
+import { Modal } from 'dt-react-component';
+
+const info = () => {
+    Modal.info({
+        title: 'This is a notification message',
+        content: (
+            <div>
+                <p>some messages...some messages...</p>
+                <p>some messages...some messages...</p>
+            </div>
+        ),
+        onOk() {},
+    });
+};
+
+const success = () => {
+    Modal.success({
+        title: 'This is an success message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const error = () => {
+    Modal.error({
+        title: 'This is an error message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const warning = () => {
+    Modal.warning({
+        title: 'This is a warning message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const confirm = () => {
+    Modal.confirm({
+        title: 'This is a confirm message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const handleDelete = () => {
+    Modal.delete({
+        title: 'This is a delete message',
+        content: 'some messages...some messages...',
+    });
+};
+
+const Method: React.FC = () => (
+    <Space wrap>
+        <Button onClick={info}>Info</Button>
+        <Button onClick={success}>Success</Button>
+        <Button onClick={error}>Error</Button>
+        <Button onClick={warning}>Warning</Button>
+        <Button onClick={confirm}>Confirm</Button>
+        <Button onClick={handleDelete}>Delete</Button>
+    </Space>
+);
+
+export default Method;

src/modal/index.md

@@ -22,6 +22,7 @@ toc: content
 <code src="./demos/draggable.tsx" title="draggable"></code>
 <code src="./demos/resizable.tsx" title="resizable"></code>
 <code src="./demos/window.tsx" title="窗口模式即支持 draggable 同时也支持 resizable"></code>
+<code src="./demos/method.tsx" title="重写 Modal.method 的 icon"></code>
 
 ## API
 
@@ -36,3 +37,11 @@ toc: content
 | onPositionChange | 位置变化时的回调                          | `(data: { x: number; y: number}) => void`                    |           |
 | onRectChange     | 尺寸变化时的回调                          | `(data: { width: number; height: number }) => void`          |           |
 | ...rest          | 其他继承自 antd Modal 的属性              | [ModalProps](https://4x.ant.design/components/modal-cn/#API) |           |
+
+## Modal.method
+
+新增: Modal.delete
+
+:::info
+其余和 antd4.x 的 [Modal.method](<https://4x.ant.design/components/modal-cn/#Modal.method()>) 一致
+:::

src/modal/index.scss

@@ -40,4 +40,21 @@ $modal-max-height: 80vh;
             flex: 0 1 auto;
         }
     }
+    .ant-modal-confirm-body {
+        .dtstack-icon {
+            float: left;
+            margin-right: 8px;
+            font-size: 20px;
+        }
+        .ant-modal-confirm-title {
+            color: #3D446E;
+            line-height: 20px;
+            font-size: 14px;
+        }
+        .ant-modal-confirm-content {
+            margin: 8px 0 16px 30px;
+            color: #8B8FA8;
+            line-height: 20px;
+        }
+    }
 }

src/modal/index.tsx

@@ -1,26 +1,60 @@
-import { Modal as AntdModal } from 'antd';
-import { ModalStaticFunctions } from 'antd/lib/modal/confirm';
+import React from 'react';
+import { CheckFilled, CloseFilled, InformationFilled, WarningFilled } from '@dtinsight/react-icons';
+import { Modal as AntdModal, ModalFuncProps } from 'antd';
+import { ModalFunc, ModalStaticFunctions } from 'antd/lib/modal/confirm';
 
 import InternalModal from './modal';
 
+const OK_TEXT = '确认';
+
 type ModalType = typeof InternalModal &
     ModalStaticFunctions & {
         useModal: typeof AntdModal.useModal;
         destroyAll: () => void;
         config: typeof AntdModal.config;
+        delete: (props: ModalFuncProps) => void;
     };
 
 const { useModal, info, success, error, warning, confirm, destroyAll, config } = AntdModal;
 
-const Modal = InternalModal as ModalType;
+const customProps: Record<
+    | keyof Pick<ModalStaticFunctions, 'info' | 'success' | 'error' | 'warning' | 'confirm'>
+    | 'delete',
+    ModalFuncProps
+> = {
+    info: { icon: <InformationFilled color="#1D78FF" />, okText: OK_TEXT },
+    success: { icon: <CheckFilled color="#11D7B2" />, okText: OK_TEXT },
+    error: {
+        icon: <CloseFilled color="#F96C5B" />,
+        okText: OK_TEXT,
+        okButtonProps: { danger: true },
+    },
+    warning: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT },
+    confirm: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT, cancelText: '取消' },
+    delete: {
+        icon: <CloseFilled color="#F96C5B" />,
+        okButtonProps: { danger: true },
+        okText: OK_TEXT,
+        cancelText: '暂不',
+    },
+};
+
+function withCustomIcon(fn: ModalFunc, type: keyof typeof customProps) {
+    return (props: ModalFuncProps) =>
+        fn({ ...customProps[type], wrapClassName: 'dtc-modal', ...props });
+}
+
+const Modal = InternalModal as unknown as ModalType;
 
 Object.assign(Modal, {
+    InternalModal,
     useModal,
-    info,
-    success,
-    error,
-    warning,
-    confirm,
+    info: withCustomIcon(info, 'info'),
+    success: withCustomIcon(success, 'success'),
+    error: withCustomIcon(error, 'error'),
+    warning: withCustomIcon(warning, 'warning'),
+    confirm: withCustomIcon(confirm, 'confirm'),
+    delete: withCustomIcon(confirm, 'delete'),
     destroyAll,
     config,
 });