feat(modal): support modal locale

Author: LuckyFBB

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: (
+                <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
@@ -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>

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 <LocaleContext.Provider value={{ locale }}>{children}</LocaleContext.Provider>;
 };
 

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',
     },

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;

src/locale/zh-CN.ts

@@ -42,6 +42,11 @@ const localeValues: Locale = {
         front: '头部匹配',
         tail: '尾部匹配',
     },
+    Modal: {
+        okText: '确定',
+        cancelText: '取消',
+        notYetText: '暂不',
+    },
     NotFound: {
         description: '抱歉，您访问的页面不存在',
     },

src/modal/index.tsx

@@ -3,10 +3,9 @@ import { CheckFilled, CloseFilled, InformationFilled, WarningFilled } from '@dti
 import { Modal as AntdModal, ModalFuncProps } from 'antd';
 import { ModalFunc, ModalStaticFunctions } from 'antd/lib/modal/confirm';
 
+import { getRunTimeLocale, ModalLocale } from './locale';
 import InternalModal from './modal';
 
-const OK_TEXT = '确认';
-
 type ModalType = typeof InternalModal &
     ModalStaticFunctions & {
         useModal: typeof AntdModal.useModal;
@@ -17,31 +16,42 @@ type ModalType = typeof InternalModal &
 
 const { useModal, info, success, error, warning, confirm, destroyAll, config } = AntdModal;
 
-const customProps: Record<
+const getCustomProps = (
+    locale: ModalLocale
+): Record<
     | keyof Pick<ModalStaticFunctions, 'info' | 'success' | 'error' | 'warning' | 'confirm'>
     | 'delete',
     ModalFuncProps
-> = {
-    info: { icon: <InformationFilled color="#1D78FF" />, okText: OK_TEXT },
-    success: { icon: <CheckFilled color="#11D7B2" />, okText: OK_TEXT },
-    error: {
-        icon: <CloseFilled color="#F96C5B" />,
-        okText: OK_TEXT,
-        okButtonProps: { danger: true },
-    },
-    warning: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT },
-    confirm: { icon: <WarningFilled color="#FBB310" />, okText: OK_TEXT, cancelText: '取消' },
-    delete: {
-        icon: <CloseFilled color="#F96C5B" />,
-        okButtonProps: { danger: true },
-        okText: OK_TEXT,
-        cancelText: '暂不',
-    },
+> => {
+    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 typeof customProps) {
-    return (props: ModalFuncProps) =>
-        fn({ ...customProps[type], wrapClassName: 'dtc-modal', ...props });
+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;

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<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;
+};