diff --git a/packages/semi-ui/locale/localeProvider.tsx b/packages/semi-ui/locale/localeProvider.tsx index 85bdbd86de..54a103145a 100644 --- a/packages/semi-ui/locale/localeProvider.tsx +++ b/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 { constructor(props: LocaleProviderProps) { super(props); this.state = {}; + changeConfirmLocale(props.locale?.Modal); + } + + componentDidUpdate(prevProps: Readonly): void { + if (prevProps.locale?.Modal !== this.props.locale?.Modal) { + changeConfirmLocale(this.props.locale.Modal); + } + } + + componentWillUnmount(): void { + changeConfirmLocale(); } render() { diff --git a/packages/semi-ui/modal/_story/modal.stories.jsx b/packages/semi-ui/modal/_story/modal.stories.jsx index 1658260da9..a1f1fc52a3 100644 --- a/packages/semi-ui/modal/_story/modal.stories.jsx +++ b/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'; @@ -88,7 +88,7 @@ function info() { } function error() { - Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...' }); + Modal.error({ title: 'Unfortunately, there is an error', content: 'bla bla bla...', okText: '好的' }); } function warning() { @@ -100,13 +100,13 @@ function confirm() { } export const ConfirmModal = () => ( -
+ -
+ ); ConfirmModal.story = { diff --git a/packages/semi-ui/modal/confirm.tsx b/packages/semi-ui/modal/confirm.tsx index e03ccf5604..3b93d5ae06 100644 --- a/packages/semi-ui/modal/confirm.tsx +++ b/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(props: ConfirmProps) { function render(renderProps: ConfirmProps) { - ReactDOM.render(, div); + const runtimeLocale = getConfirmLocale(); + ReactDOM.render( + , + div + ); } function close() { diff --git a/packages/semi-ui/modal/local.ts b/packages/semi-ui/modal/local.ts new file mode 100644 index 0000000000..46da4bf1e0 --- /dev/null +++ b/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; +}