Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 37 additions & 1 deletion src/configProvider/demos/basic.tsx
Original file line number Diff line number Diff line change
@@ -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: (
<div>
<p>some messages...some messages...</p>
<p>some messages...some messages...</p>
</div>
),
onOk() {},
});
};

const handleDelete = () => {
Modal.delete({
title: 'This is a delete message',
content: 'some messages...some messages...',
});
};

return (
<Space direction="vertical" size="large">
<Radio.Group
Expand All @@ -31,6 +60,13 @@ export default function Basic() {
<h3>Input.Match 组件</h3>
<Input.Match />
</div>
<div>
<h3>Modal.method 组件</h3>
<Button onClick={info} style={{ marginRight: 12 }}>
Info
</Button>
<Button onClick={handleDelete}>Delete</Button>
</div>
</Space>
</ConfigProvider>
</Space>
Expand Down
8 changes: 7 additions & 1 deletion src/configProvider/index.tsx
Original file line number Diff line number Diff line change
@@ -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 <LocaleContext.Provider value={{ locale }}>{children}</LocaleContext.Provider>;
};

Expand Down
2 changes: 1 addition & 1 deletion src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
5 changes: 5 additions & 0 deletions src/locale/en-US.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
5 changes: 5 additions & 0 deletions src/locale/useLocale.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ export interface Locale {
NotFound: {
description: string;
};
Modal: {
okText: string;
cancelText: string;
notYetText: string;
};
SpreadSheet: {
description: string;
copy: string;
Expand Down
5 changes: 5 additions & 0 deletions src/locale/zh-CN.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,11 @@ const localeValues: Locale = {
front: '头部匹配',
tail: '尾部匹配',
},
Modal: {
okText: '确定',
cancelText: '取消',
notYetText: '暂不',
},
NotFound: {
description: '抱歉,您访问的页面不存在',
},
Expand Down
64 changes: 64 additions & 0 deletions src/modal/demos/method.tsx
Original file line number Diff line number Diff line change
@@ -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;
9 changes: 9 additions & 0 deletions src/modal/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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()>) 一致
:::
17 changes: 17 additions & 0 deletions src/modal/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
60 changes: 52 additions & 8 deletions src/modal/index.tsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,70 @@
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 &
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 getCustomProps = (
locale: ModalLocale
): Record<
| keyof Pick<ModalStaticFunctions, 'info' | 'success' | 'error' | 'warning' | 'confirm'>
| 'delete',
ModalFuncProps
> => {
return {
info: { icon: <InformationFilled color="#1D78FF" />, okText: locale.okText },
success: { icon: <CheckFilled color="#11D7B2" />, okText: locale.okText },
error: {
icon: <CloseFilled color="#F96C5B" />,
okText: locale.okText,
okButtonProps: { danger: true },
},
warning: { icon: <WarningFilled color="#FBB310" />, okText: locale.okText },
confirm: {
icon: <WarningFilled color="#FBB310" />,
okText: locale.okText,
cancelText: locale.cancelText,
},
delete: {
icon: <CloseFilled color="#F96C5B" />,
okButtonProps: { danger: true },
okText: locale.okText,
cancelText: locale.notYetText,
},
};
};

function withCustomIcon(fn: ModalFunc, type: keyof ReturnType<typeof getCustomProps>) {
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,
});
Expand Down
40 changes: 40 additions & 0 deletions src/modal/locale.ts
Original file line number Diff line number Diff line change
@@ -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<ModalLocale>(
(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;
};
Loading