feat(modal): support loading and rename IModalProps to ModalProps

Author: LuckyFBB

src/modal/demos/loading.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Button, Space } from 'antd';
+import { Modal } from 'dt-react-component';
+
+export default function Loading() {
+    const [visible, setVisible] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    return (
+        <>
+            <Modal
+                title="展示loading效果"
+                visible={visible}
+                loading={loading}
+                onCancel={() => setVisible(false)}
+                onOk={() => setVisible(false)}
+            >
+                <ul>
+                    {Array.from({ length: 100 }).map((_, i) => (
+                        <li key={i} style={{ height: 30 }}>
+                            {i}
+                        </li>
+                    ))}
+                </ul>
+            </Modal>
+            <Space>
+                <Button
+                    onClick={() => {
+                        setVisible(true);
+                        setLoading(true);
+                    }}
+                >
+                    loading
+                </Button>
+                <Button
+                    onClick={() => {
+                        setVisible(true);
+                        setLoading(false);
+                    }}
+                >
+                    no loading
+                </Button>
+            </Space>
+        </>
+    );
+}

src/modal/demos/size.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { Button, Space } from 'antd';
 import { Modal } from 'dt-react-component';
-import type { IModalProps } from 'dt-react-component/modal';
+import type { ModalProps } from 'dt-react-component/modal';
 
 export default function Size() {
     const [visible, setVisible] = useState(false);
-    const [size, setSize] = useState<IModalProps['size']>('default');
+    const [size, setSize] = useState<ModalProps['size']>('default');
 
     return (
         <>

src/modal/index.md

@@ -23,6 +23,7 @@ toc: content
 <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>
+<code src="./demos/loading.tsx" title="支持 loading 属性"></code>
 
 ## API
 
@@ -31,6 +32,7 @@ toc: content
 | size             | 尺寸                                      | `'small' \| 'default' \| 'middle' \| 'large'`                | `default` |
 | banner           | 提示                                      | `React.ReactNode \| AlertProps`                              |           |
 | draggable        | 是否可拖拽                                | `IFloatProps['draggable']`                                   | `false`   |
+| loading          | 是否加载中                                | `boolean`                                                    | `false`   |
 | resizable        | 是否可调整大小                            | `MergeOption<Partial<ResizableProps>>`                       | `false`   |
 | rect             | 初始宽高（仅开启 resizable 的情况下生效） | `{ width: number; height: number }`                          |           |
 | position         | 初始位置（仅开启 draggable 的情况下生效） | `{ x: number; y: number}`                                    |           |

src/modal/index.tsx

@@ -69,7 +69,7 @@ Object.assign(Modal, {
     config,
 });
 
-export type { IModalProps, RectState } from './modal';
+export type { ModalProps, RectState } from './modal';
 export type { ResizeHandle } from 'react-resizable';
 
 export default Modal;

src/modal/modal.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Resizable, type ResizableProps } from 'react-resizable';
-import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
+import { Alert, type AlertProps, Modal, type ModalProps as AntdModalProps, Spin } from 'antd';
 import classNames from 'classnames';
 import { omit } from 'lodash-es';
 
@@ -12,18 +12,19 @@ import './index.scss';
 
 export type RectState = { width: number; height: number };
 
-export interface IModalProps extends ModalProps {
+export interface ModalProps extends AntdModalProps {
     size?: 'small' | 'default' | 'middle' | 'large';
     banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
     draggable?: IFloatProps['draggable'];
     resizable?: MergeOption<Partial<ResizableProps>>;
     rect?: RectState;
     position?: IFloatProps['position'];
+    loading?: boolean;
     onPositionChange?: (data: NonNullable<IFloatProps['position']>) => void;
     onRectChange?: (data: RectState) => void;
 }
 
-const getWidthFromSize = (size: IModalProps['size']) => {
+const getWidthFromSize = (size: ModalProps['size']) => {
     if (size === 'small') return 400;
     if (size === 'middle') return 640;
     if (size === 'large') return 900;
@@ -41,11 +42,12 @@ export default function InternalModal({
     position,
     resizable = false,
     rect,
+    loading,
     onRectChange,
     onPositionChange,
     modalRender,
     ...rest
-}: IModalProps) {
+}: ModalProps) {
     const mergedDraggable = useMergeOption(draggable, { handle: '.ant-modal-header' });
     const mergedResizable = useMergeOption(resizable, {
         axis: 'both',
@@ -139,7 +141,9 @@ export default function InternalModal({
                     {...(isAlertObjectProps(banner) ? omit(banner, 'message') : {})}
                 />
             )}
-            <section className="dtc-modal-body">{children}</section>
+            <section className="dtc-modal-body">
+                <Spin spinning={loading}>{children}</Spin>
+            </section>
         </Modal>
     );
 }