Skip to content

Commit 3b09b0a

Browse files
LuckyFBBLuckyFBB
authored
feat(modal): support loading and rename IModalProps to ModalProps (#619)
fix #616
1 parent ac147ed commit 3b09b0a

File tree

6 files changed

+160
-12
lines changed

6 files changed

+160
-12
lines changed

‎src/modal/__tests__/__snapshots__/modal.test.tsx.snap‎

Lines changed: 100 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,40 @@ exports[`Test Modal Component Should Match snapshot 1`] = `
7474
<section
7575
class="dtc-modal-body"
7676
>
77-
<div>
78-
test
77+
<div
78+
class="ant-spin-nested-loading"
79+
>
80+
<div>
81+
<div
82+
aria-busy="true"
83+
aria-live="polite"
84+
class="ant-spin ant-spin-spinning"
85+
>
86+
<span
87+
class="ant-spin-dot ant-spin-dot-spin"
88+
>
89+
<i
90+
class="ant-spin-dot-item"
91+
/>
92+
<i
93+
class="ant-spin-dot-item"
94+
/>
95+
<i
96+
class="ant-spin-dot-item"
97+
/>
98+
<i
99+
class="ant-spin-dot-item"
100+
/>
101+
</span>
102+
</div>
103+
</div>
104+
<div
105+
class="ant-spin-container ant-spin-blur"
106+
>
107+
<div>
108+
test
109+
</div>
110+
</div>
79111
</div>
80112
</section>
81113
</div>
@@ -189,7 +221,39 @@ exports[`Test Modal Component Should support banner Should match snapshot for dr
189221
<section
190222
class="dtc-modal-body"
191223
>
192-
test
224+
<div
225+
class="ant-spin-nested-loading"
226+
>
227+
<div>
228+
<div
229+
aria-busy="true"
230+
aria-live="polite"
231+
class="ant-spin ant-spin-spinning"
232+
>
233+
<span
234+
class="ant-spin-dot ant-spin-dot-spin"
235+
>
236+
<i
237+
class="ant-spin-dot-item"
238+
/>
239+
<i
240+
class="ant-spin-dot-item"
241+
/>
242+
<i
243+
class="ant-spin-dot-item"
244+
/>
245+
<i
246+
class="ant-spin-dot-item"
247+
/>
248+
</span>
249+
</div>
250+
</div>
251+
<div
252+
class="ant-spin-container ant-spin-blur"
253+
>
254+
test
255+
</div>
256+
</div>
193257
</section>
194258
</div>
195259
<div
@@ -299,7 +363,39 @@ exports[`Test Modal Component Should support banner Should match snapshot for re
299363
<section
300364
class="dtc-modal-body"
301365
>
302-
test
366+
<div
367+
class="ant-spin-nested-loading"
368+
>
369+
<div>
370+
<div
371+
aria-busy="true"
372+
aria-live="polite"
373+
class="ant-spin ant-spin-spinning"
374+
>
375+
<span
376+
class="ant-spin-dot ant-spin-dot-spin"
377+
>
378+
<i
379+
class="ant-spin-dot-item"
380+
/>
381+
<i
382+
class="ant-spin-dot-item"
383+
/>
384+
<i
385+
class="ant-spin-dot-item"
386+
/>
387+
<i
388+
class="ant-spin-dot-item"
389+
/>
390+
</span>
391+
</div>
392+
</div>
393+
<div
394+
class="ant-spin-container ant-spin-blur"
395+
>
396+
test
397+
</div>
398+
</div>
303399
</section>
304400
</div>
305401
<div

‎src/modal/demos/loading.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useState } from 'react';
2+
import { Button, Space } from 'antd';
3+
import { Modal } from 'dt-react-component';
4+
5+
export default function Loading() {
6+
const [visible, setVisible] = useState(false);
7+
const [loading, setLoading] = useState(false);
8+
9+
return (
10+
<>
11+
<Modal
12+
title="展示loading效果"
13+
visible={visible}
14+
loading={loading}
15+
onCancel={() => setVisible(false)}
16+
onOk={() => setVisible(false)}
17+
>
18+
<ul>
19+
{Array.from({ length: 100 }).map((_, i) => (
20+
<li key={i} style={{ height: 30 }}>
21+
{i}
22+
</li>
23+
))}
24+
</ul>
25+
</Modal>
26+
<Space>
27+
<Button
28+
onClick={() => {
29+
setVisible(true);
30+
setLoading(true);
31+
}}
32+
>
33+
loading
34+
</Button>
35+
<Button
36+
onClick={() => {
37+
setVisible(true);
38+
setLoading(false);
39+
}}
40+
>
41+
no loading
42+
</Button>
43+
</Space>
44+
</>
45+
);
46+
}

‎src/modal/demos/size.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useState } from 'react';
22
import { Button, Space } from 'antd';
33
import { Modal } from 'dt-react-component';
4-
import type { IModalProps } from 'dt-react-component/modal';
4+
import type { ModalProps } from 'dt-react-component/modal';
55

66
export default function Size() {
77
const [visible, setVisible] = useState(false);
8-
const [size, setSize] = useState<IModalProps['size']>('default');
8+
const [size, setSize] = useState<ModalProps['size']>('default');
99

1010
return (
1111
<>

‎src/modal/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ toc: content
2323
<code src="./demos/resizable.tsx" title="resizable"></code>
2424
<code src="./demos/window.tsx" title="窗口模式即支持 draggable 同时也支持 resizable"></code>
2525
<code src="./demos/method.tsx" title="重写 Modal.method 的 icon"></code>
26+
<code src="./demos/loading.tsx" title="支持 loading 属性"></code>
2627

2728
## API
2829

@@ -31,6 +32,7 @@ toc: content
3132
| size | 尺寸 | `'small' \| 'default' \| 'middle' \| 'large'` | `default` |
3233
| banner | 提示 | `React.ReactNode \| AlertProps` | |
3334
| draggable | 是否可拖拽 | `IFloatProps['draggable']` | `false` |
35+
| loading | 是否加载中 | `boolean` | `false` |
3436
| resizable | 是否可调整大小 | `MergeOption<Partial<ResizableProps>>` | `false` |
3537
| rect | 初始宽高（仅开启 resizable 的情况下生效） | `{ width: number; height: number }` | |
3638
| position | 初始位置（仅开启 draggable 的情况下生效） | `{ x: number; y: number}` | |

‎src/modal/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Object.assign(Modal, {
6969
config,
7070
});
7171

72-
export type { IModalProps, RectState } from './modal';
72+
export type { ModalProps, RectState } from './modal';
7373
export type { ResizeHandle } from 'react-resizable';
7474

7575
export default Modal;

‎src/modal/modal.tsx‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useMemo } from 'react';
22
import { Resizable, type ResizableProps } from 'react-resizable';
3-
import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
3+
import { Alert, type AlertProps, Modal, type ModalProps as AntdModalProps, Spin } from 'antd';
44
import classNames from 'classnames';
55
import { omit } from 'lodash-es';
66

@@ -12,18 +12,19 @@ import './index.scss';
1212

1313
export type RectState = { width: number; height: number };
1414

15-
export interface IModalProps extends ModalProps {
15+
export interface ModalProps extends AntdModalProps {
1616
size?: 'small' | 'default' | 'middle' | 'large';
1717
banner?: AlertProps['message'] | Omit<AlertProps, 'banner'>;
1818
draggable?: IFloatProps['draggable'];
1919
resizable?: MergeOption<Partial<ResizableProps>>;
2020
rect?: RectState;
2121
position?: IFloatProps['position'];
22+
loading?: boolean;
2223
onPositionChange?: (data: NonNullable<IFloatProps['position']>) => void;
2324
onRectChange?: (data: RectState) => void;
2425
}
2526

26-
const getWidthFromSize = (size: IModalProps['size']) => {
27+
const getWidthFromSize = (size: ModalProps['size']) => {
2728
if (size === 'small') return 400;
2829
if (size === 'middle') return 640;
2930
if (size === 'large') return 900;
@@ -41,11 +42,12 @@ export default function InternalModal({
4142
position,
4243
resizable = false,
4344
rect,
45+
loading,
4446
onRectChange,
4547
onPositionChange,
4648
modalRender,
4749
...rest
48-
}: IModalProps) {
50+
}: ModalProps) {
4951
const mergedDraggable = useMergeOption(draggable, { handle: '.ant-modal-header' });
5052
const mergedResizable = useMergeOption(resizable, {
5153
axis: 'both',
@@ -139,7 +141,9 @@ export default function InternalModal({
139141
{...(isAlertObjectProps(banner) ? omit(banner, 'message') : {})}
140142
/>
141143
)}
142-
<section className="dtc-modal-body">{children}</section>
144+
<section className="dtc-modal-body">
145+
<Spin spinning={loading}>{children}</Spin>
146+
</section>
143147
</Modal>
144148
);
145149
}

0 commit comments

Comments
 (0)