Skip to content

Commit 5fe556b

Browse files
LuckyFBBLuckyFBB
authored
feat(modal): change Modal.method to use dtinsightIcon and add Modal.delete (#586)
* feat(modal): change Modal.method to use dtinsightIcon and add Modal.delete * feat(modal): support modal locale
1 parent fd4385f commit 5fe556b

File tree

11 files changed

+242
-11
lines changed

11 files changed

+242
-11
lines changed

‎src/configProvider/demos/basic.tsx‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,39 @@
11
import React, { useState } from 'react';
22
import { Radio, Space } from 'antd';
3-
import { BlockHeader, ConfigProvider, Copy, enUS, Input, zhCN } from 'dt-react-component';
3+
import {
4+
BlockHeader,
5+
Button,
6+
ConfigProvider,
7+
Copy,
8+
enUS,
9+
Input,
10+
Modal,
11+
zhCN,
12+
} from 'dt-react-component';
413

514
export default function Basic() {
615
const [locale, setLocale] = useState(zhCN);
716

17+
const info = () => {
18+
Modal.info({
19+
title: 'This is a notification message',
20+
content: (
21+
<div>
22+
<p>some messages...some messages...</p>
23+
<p>some messages...some messages...</p>
24+
</div>
25+
),
26+
onOk() {},
27+
});
28+
};
29+
30+
const handleDelete = () => {
31+
Modal.delete({
32+
title: 'This is a delete message',
33+
content: 'some messages...some messages...',
34+
});
35+
};
36+
837
return (
938
<Space direction="vertical" size="large">
1039
<Radio.Group
@@ -31,6 +60,13 @@ export default function Basic() {
3160
<h3>Input.Match 组件</h3>
3261
<Input.Match />
3362
</div>
63+
<div>
64+
<h3>Modal.method 组件</h3>
65+
<Button onClick={info} style={{ marginRight: 12 }}>
66+
Info
67+
</Button>
68+
<Button onClick={handleDelete}>Delete</Button>
69+
</div>
3470
</Space>
3571
</ConfigProvider>
3672
</Space>

‎src/configProvider/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1-
import React from 'react';
1+
import React, { useEffect } from 'react';
22

33
import { Locale, LocaleContext } from '../locale/useLocale';
4+
import { changeConfirmLocale } from '../modal/locale';
45

56
const ConfigProvider = ({ locale, children }: { locale: Locale; children: React.ReactNode }) => {
7+
useEffect(() => {
8+
const clearLocale = changeConfirmLocale(locale?.Modal);
9+
return clearLocale;
10+
}, [locale]);
11+
612
return <LocaleContext.Provider value={{ locale }}>{children}</LocaleContext.Provider>;
713
};
814

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export { default as enUS } from './locale/en-US';
2929
export { default as useLocale } from './locale/useLocale';
3030
export { default as zhCN } from './locale/zh-CN';
3131
export { default as MarkdownRender } from './markdownRender';
32-
export { default as Modal } from './modal/modal';
32+
export { default as Modal } from './modal';
3333
export { default as NotFound } from './notFound';
3434
export { default as Popconfirm } from './popConfirm';
3535
export { default as ProgressBar } from './progressBar';

‎src/locale/en-US.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ const localeValues: Locale = {
4646
front: 'Head match',
4747
tail: 'Tail match',
4848
},
49+
Modal: {
50+
okText: 'Ok',
51+
cancelText: 'Cancel',
52+
notYetText: 'Not Now',
53+
},
4954
NotFound: {
5055
description: 'Sorry, the page you visited does not exist',
5156
},

‎src/locale/useLocale.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,11 @@ export interface Locale {
3333
NotFound: {
3434
description: string;
3535
};
36+
Modal: {
37+
okText: string;
38+
cancelText: string;
39+
notYetText: string;
40+
};
3641
SpreadSheet: {
3742
description: string;
3843
copy: string;

‎src/locale/zh-CN.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const localeValues: Locale = {
4242
front: '头部匹配',
4343
tail: '尾部匹配',
4444
},
45+
Modal: {
46+
okText: '确定',
47+
cancelText: '取消',
48+
notYetText: '暂不',
49+
},
4550
NotFound: {
4651
description: '抱歉，您访问的页面不存在',
4752
},

‎src/modal/demos/method.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import { Button, Space } from 'antd';
3+
import { Modal } from 'dt-react-component';
4+
5+
const info = () => {
6+
Modal.info({
7+
title: 'This is a notification message',
8+
content: (
9+
<div>
10+
<p>some messages...some messages...</p>
11+
<p>some messages...some messages...</p>
12+
</div>
13+
),
14+
onOk() {},
15+
});
16+
};
17+
18+
const success = () => {
19+
Modal.success({
20+
title: 'This is an success message',
21+
content: 'some messages...some messages...',
22+
});
23+
};
24+
25+
const error = () => {
26+
Modal.error({
27+
title: 'This is an error message',
28+
content: 'some messages...some messages...',
29+
});
30+
};
31+
32+
const warning = () => {
33+
Modal.warning({
34+
title: 'This is a warning message',
35+
content: 'some messages...some messages...',
36+
});
37+
};
38+
39+
const confirm = () => {
40+
Modal.confirm({
41+
title: 'This is a confirm message',
42+
content: 'some messages...some messages...',
43+
});
44+
};
45+
46+
const handleDelete = () => {
47+
Modal.delete({
48+
title: 'This is a delete message',
49+
content: 'some messages...some messages...',
50+
});
51+
};
52+
53+
const Method: React.FC = () => (
54+
<Space wrap>
55+
<Button onClick={info}>Info</Button>
56+
<Button onClick={success}>Success</Button>
57+
<Button onClick={error}>Error</Button>
58+
<Button onClick={warning}>Warning</Button>
59+
<Button onClick={confirm}>Confirm</Button>
60+
<Button onClick={handleDelete}>Delete</Button>
61+
</Space>
62+
);
63+
64+
export default Method;

‎src/modal/index.md‎

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

2627
## API
2728

@@ -36,3 +37,11 @@ toc: content
3637
| onPositionChange | 位置变化时的回调 | `(data: { x: number; y: number}) => void` | |
3738
| onRectChange | 尺寸变化时的回调 | `(data: { width: number; height: number }) => void` | |
3839
| ...rest | 其他继承自 antd Modal 的属性 | [ModalProps](https://4x.ant.design/components/modal-cn/#API) | |
40+
41+
## Modal.method
42+
43+
新增: Modal.delete
44+
45+
:::info
46+
其余和 antd4.x 的 [Modal.method](<https://4x.ant.design/components/modal-cn/#Modal.method()>) 一致
47+
:::

‎src/modal/index.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,21 @@ $modal-max-height: 80vh;
4040
flex: 0 1 auto;
4141
}
4242
}
43+
.ant-modal-confirm-body {
44+
.dtstack-icon {
45+
float: left;
46+
margin-right: 8px;
47+
font-size: 20px;
48+
}
49+
.ant-modal-confirm-title {
50+
color: #3D446E;
51+
line-height: 20px;
52+
font-size: 14px;
53+
}
54+
.ant-modal-confirm-content {
55+
margin: 8px 0 16px 30px;
56+
color: #8B8FA8;
57+
line-height: 20px;
58+
}
59+
}
4360
}

‎src/modal/index.tsx‎

Lines changed: 52 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,70 @@
1-
import { Modal as AntdModal } from 'antd';
2-
import { ModalStaticFunctions } from 'antd/lib/modal/confirm';
1+
import React from 'react';
2+
import { CheckFilled, CloseFilled, InformationFilled, WarningFilled } from '@dtinsight/react-icons';
3+
import { Modal as AntdModal, ModalFuncProps } from 'antd';
4+
import { ModalFunc, ModalStaticFunctions } from 'antd/lib/modal/confirm';
35

6+
import { getRunTimeLocale, ModalLocale } from './locale';
47
import InternalModal from './modal';
58

69
type ModalType = typeof InternalModal &
710
ModalStaticFunctions & {
811
useModal: typeof AntdModal.useModal;
912
destroyAll: () => void;
1013
config: typeof AntdModal.config;
14+
delete: (props: ModalFuncProps) => void;
1115
};
1216

1317
const { useModal, info, success, error, warning, confirm, destroyAll, config } = AntdModal;
1418

15-
const Modal = InternalModal as ModalType;
19+
const getCustomProps = (
20+
locale: ModalLocale
21+
): Record<
22+
| keyof Pick<ModalStaticFunctions, 'info' | 'success' | 'error' | 'warning' | 'confirm'>
23+
| 'delete',
24+
ModalFuncProps
25+
> => {
26+
return {
27+
info: { icon: <InformationFilled color="#1D78FF" />, okText: locale.okText },
28+
success: { icon: <CheckFilled color="#11D7B2" />, okText: locale.okText },
29+
error: {
30+
icon: <CloseFilled color="#F96C5B" />,
31+
okText: locale.okText,
32+
okButtonProps: { danger: true },
33+
},
34+
warning: { icon: <WarningFilled color="#FBB310" />, okText: locale.okText },
35+
confirm: {
36+
icon: <WarningFilled color="#FBB310" />,
37+
okText: locale.okText,
38+
cancelText: locale.cancelText,
39+
},
40+
delete: {
41+
icon: <CloseFilled color="#F96C5B" />,
42+
okButtonProps: { danger: true },
43+
okText: locale.okText,
44+
cancelText: locale.notYetText,
45+
},
46+
};
47+
};
48+
49+
function withCustomIcon(fn: ModalFunc, type: keyof ReturnType<typeof getCustomProps>) {
50+
return (props: ModalFuncProps) => {
51+
const locale = getRunTimeLocale();
52+
const customProps = getCustomProps(locale);
53+
return fn({ ...customProps[type], wrapClassName: 'dtc-modal', ...props });
54+
};
55+
}
56+
57+
const Modal = InternalModal as unknown as ModalType;
1658

1759
Object.assign(Modal, {
60+
InternalModal,
1861
useModal,
19-
info,
20-
success,
21-
error,
22-
warning,
23-
confirm,
62+
info: withCustomIcon(info, 'info'),
63+
success: withCustomIcon(success, 'success'),
64+
error: withCustomIcon(error, 'error'),
65+
warning: withCustomIcon(warning, 'warning'),
66+
confirm: withCustomIcon(confirm, 'confirm'),
67+
delete: withCustomIcon(confirm, 'delete'),
2468
destroyAll,
2569
config,
2670
});

0 commit comments

Comments
 (0)