fix: local provider not working when confirming modal

Author: pancongcong

packages/semi-ui/locale/localeProvider.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { changeConfirmLocale } from '../modal/local';
 import LocaleContext from './context';
 import DefaultLocale from './source/zh_CN';
 import { Locale } from './interface';
@@ -22,6 +23,17 @@ export default class LocaleProvider extends Component<LocaleProviderProps> {
     constructor(props: LocaleProviderProps) {
         super(props);
         this.state = {};
+        changeConfirmLocale(props.locale?.Modal);
+    }
+
+    componentDidUpdate(prevProps: Readonly<LocaleProviderProps>): void {
+        if (prevProps.locale?.Modal !== this.props.locale?.Modal) {
+            changeConfirmLocale(this.props.locale.Modal);
+        }
+    }
+
+    componentWillUnmount(): void {
+        changeConfirmLocale();
     }
 
     render() {

packages/semi-ui/modal/_story/modal.stories.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import en_GB from '../../locale/source/en_GB';
 
-import { Select, Modal, Button, Tooltip, Popover, ConfigProvider, Tag, Space } from '../../index';
+import { Select, Modal, Button, Tooltip, Popover, ConfigProvider, Tag, Space, LocaleProvider } from '../../index';
 import CollapsibleInModal from './CollapsibleInModal';
 import DynamicContextDemo from './DynamicContext';
 
@@ -100,13 +100,13 @@ function confirm() {
 }
 
 export const ConfirmModal = () => (
-  <div>
+  <LocaleProvider locale={en_GB}>
     <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>
-  </div>
+  </LocaleProvider>
 );
 
 ConfirmModal.story = {

packages/semi-ui/modal/confirm.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { destroyFns, ModalReactProps } from './Modal';
 import ConfirmModal from './ConfirmModal';
+import { getConfirmLocale } from './local';
 
 import '@douyinfe/semi-foundation/modal/modal.scss';
 import { IconAlertCircle, IconAlertTriangle, IconHelpCircle, IconInfoCircle, IconTickCircle } from '@douyinfe/semi-icons';
@@ -36,7 +37,16 @@ export default function confirm<T>(props: ConfirmProps) {
 
 
     function render(renderProps: ConfirmProps) {
-        ReactDOM.render(<ConfirmModal {...renderProps} motion={props.motion}/>, div);
+        const runtimeLocale = getConfirmLocale();
+        ReactDOM.render(
+            <ConfirmModal
+                okText={runtimeLocale.confirm}
+                cancelText={runtimeLocale.cancel}
+                {...renderProps}
+                motion={props.motion}
+            />,
+            div
+        );
     }
 
     function close() {

packages/semi-ui/modal/local.ts

@@ -0,0 +1,27 @@
+import defaultLocale from '../locale/source/zh_CN';
+
+export interface ModalLocale {
+    confirm: string;
+    cancel: string
+}
+
+let runtimeLocale: ModalLocale = {
+    ...defaultLocale.Modal,
+};
+
+export function changeConfirmLocale(newLocale?: ModalLocale) {
+    if (newLocale) {
+        runtimeLocale = {
+            ...runtimeLocale,
+            ...newLocale,
+        };
+    } else {
+        runtimeLocale = {
+            ...defaultLocale.Modal,
+        };
+    }
+}
+
+export function getConfirmLocale() {
+    return runtimeLocale;
+}