diff --git a/src/configProvider/demos/basic.tsx b/src/configProvider/demos/basic.tsx
index 54f83d555..4e67285a4 100644
--- a/src/configProvider/demos/basic.tsx
+++ b/src/configProvider/demos/basic.tsx
@@ -1,10 +1,39 @@
import React, { useState } from 'react';
import { Radio, Space } from 'antd';
-import { BlockHeader, ConfigProvider, Copy, enUS, Input, zhCN } from 'dt-react-component';
+import {
+ BlockHeader,
+ Button,
+ ConfigProvider,
+ Copy,
+ enUS,
+ Input,
+ Modal,
+ zhCN,
+} from 'dt-react-component';
export default function Basic() {
const [locale, setLocale] = useState(zhCN);
+ const info = () => {
+ Modal.info({
+ title: 'This is a notification message',
+ content: (
+
+
some messages...some messages...
+
some messages...some messages...
+
+ ),
+ onOk() {},
+ });
+ };
+
+ const handleDelete = () => {
+ Modal.delete({
+ title: 'This is a delete message',
+ content: 'some messages...some messages...',
+ });
+ };
+
return (
Input.Match 组件
+
+
Modal.method 组件
+
+
+
diff --git a/src/configProvider/index.tsx b/src/configProvider/index.tsx
index d24d70ab0..3ec2a5c69 100644
--- a/src/configProvider/index.tsx
+++ b/src/configProvider/index.tsx
@@ -1,8 +1,14 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import { Locale, LocaleContext } from '../locale/useLocale';
+import { changeConfirmLocale } from '../modal/locale';
const ConfigProvider = ({ locale, children }: { locale: Locale; children: React.ReactNode }) => {
+ useEffect(() => {
+ const clearLocale = changeConfirmLocale(locale?.Modal);
+ return clearLocale;
+ }, [locale]);
+
return {children};
};
diff --git a/src/index.ts b/src/index.ts
index a035117f6..5e9fdb22f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -29,7 +29,7 @@ export { default as enUS } from './locale/en-US';
export { default as useLocale } from './locale/useLocale';
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';
diff --git a/src/locale/en-US.ts b/src/locale/en-US.ts
index d5e90024b..6f44cbf28 100644
--- a/src/locale/en-US.ts
+++ b/src/locale/en-US.ts
@@ -46,6 +46,11 @@ const localeValues: Locale = {
front: 'Head match',
tail: 'Tail match',
},
+ Modal: {
+ okText: 'Ok',
+ cancelText: 'Cancel',
+ notYetText: 'Not Now',
+ },
NotFound: {
description: 'Sorry, the page you visited does not exist',
},
diff --git a/src/locale/useLocale.tsx b/src/locale/useLocale.tsx
index e4681d6e5..9d57f29e2 100644
--- a/src/locale/useLocale.tsx
+++ b/src/locale/useLocale.tsx
@@ -33,6 +33,11 @@ export interface Locale {
NotFound: {
description: string;
};
+ Modal: {
+ okText: string;
+ cancelText: string;
+ notYetText: string;
+ };
SpreadSheet: {
description: string;
copy: string;
diff --git a/src/locale/zh-CN.ts b/src/locale/zh-CN.ts
index 418ac6331..6e3e55449 100644
--- a/src/locale/zh-CN.ts
+++ b/src/locale/zh-CN.ts
@@ -42,6 +42,11 @@ const localeValues: Locale = {
front: '头部匹配',
tail: '尾部匹配',
},
+ Modal: {
+ okText: '确定',
+ cancelText: '取消',
+ notYetText: '暂不',
+ },
NotFound: {
description: '抱歉,您访问的页面不存在',
},
diff --git a/src/modal/demos/method.tsx b/src/modal/demos/method.tsx
new file mode 100644
index 000000000..b03f78394
--- /dev/null
+++ b/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: (
+
+
some messages...some messages...
+
some messages...some messages...
+
+ ),
+ 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 = () => (
+
+
+
+
+
+
+
+
+);
+
+export default Method;
diff --git a/src/modal/index.md b/src/modal/index.md
index 00309066b..71aa6d799 100644
--- a/src/modal/index.md
+++ b/src/modal/index.md
@@ -22,6 +22,7 @@ toc: content
+
## 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]() 一致
+:::
diff --git a/src/modal/index.scss b/src/modal/index.scss
index db75dff2e..1858ea414 100644
--- a/src/modal/index.scss
+++ b/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;
+ }
+ }
}
diff --git a/src/modal/index.tsx b/src/modal/index.tsx
index 000817bfa..0bbbeb4dc 100644
--- a/src/modal/index.tsx
+++ b/src/modal/index.tsx
@@ -1,6 +1,9 @@
-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 { getRunTimeLocale, ModalLocale } from './locale';
import InternalModal from './modal';
type ModalType = typeof InternalModal &
@@ -8,19 +11,60 @@ type ModalType = typeof InternalModal &
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 getCustomProps = (
+ locale: ModalLocale
+): Record<
+ | keyof Pick
+ | 'delete',
+ ModalFuncProps
+> => {
+ return {
+ info: { icon: , okText: locale.okText },
+ success: { icon: , okText: locale.okText },
+ error: {
+ icon: ,
+ okText: locale.okText,
+ okButtonProps: { danger: true },
+ },
+ warning: { icon: , okText: locale.okText },
+ confirm: {
+ icon: ,
+ okText: locale.okText,
+ cancelText: locale.cancelText,
+ },
+ delete: {
+ icon: ,
+ okButtonProps: { danger: true },
+ okText: locale.okText,
+ cancelText: locale.notYetText,
+ },
+ };
+};
+
+function withCustomIcon(fn: ModalFunc, type: keyof ReturnType) {
+ return (props: ModalFuncProps) => {
+ const locale = getRunTimeLocale();
+ const customProps = getCustomProps(locale);
+ return 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,
});
diff --git a/src/modal/locale.ts b/src/modal/locale.ts
new file mode 100644
index 000000000..12e2128a9
--- /dev/null
+++ b/src/modal/locale.ts
@@ -0,0 +1,40 @@
+import defaultLocale from '../locale/zh-CN';
+
+export interface ModalLocale {
+ okText: string;
+ cancelText: string;
+ notYetText: string;
+}
+
+let runtimeLocale: ModalLocale = {
+ ...(defaultLocale.Modal as ModalLocale),
+};
+
+let localeList: ModalLocale[] = [];
+
+const generateLocale = () =>
+ localeList.reduce(
+ (merged, locale) => ({ ...merged, ...locale }),
+ defaultLocale.Modal!
+ );
+
+export function changeConfirmLocale(newLocale?: ModalLocale) {
+ if (newLocale) {
+ const cloneLocale = { ...newLocale };
+ localeList.push(cloneLocale);
+ runtimeLocale = generateLocale();
+
+ return () => {
+ localeList = localeList.filter((locale) => locale !== cloneLocale);
+ runtimeLocale = generateLocale();
+ };
+ }
+
+ runtimeLocale = {
+ ...(defaultLocale.Modal as ModalLocale),
+ };
+}
+
+export const getRunTimeLocale = () => {
+ return runtimeLocale;
+};