feat: 增加runtimeLocale函数 对Modal，Pagination，RichEditor，VideoViewer完成多语言改造

source/components/Config/Locale/Consumer.tsx

@@ -2,16 +2,23 @@ import React from 'react';
 import { Consumer } from './Context';
 import LocaleList from '../../Locale/index';
 
+export function getLocale(Locale: string, componentName?: string) {
+  let currentLocale = LocaleList[Locale] && LocaleList[Locale];
+  if (componentName) {
+    currentLocale = currentLocale[componentName];
+  }
+  return currentLocale || {};
+}
+
 export default function LocaleConsumer({ componentName, children }: {
   componentName: string,
-  children: (params: object) => React.ReactNode 
+  children: (params: object) => React.ReactNode
 }) {
   return <Consumer>
     {
       (value) => {
         const { Locale } = value;
-        const ComponentLocal = LocaleList[Locale] && LocaleList[Locale][componentName]
-        // console.log(Locale, ComponentLocal);
+        const ComponentLocal = getLocale(Locale, componentName);
         return children(ComponentLocal || {});
       }
     }

source/components/Config/Locale/Provider.tsx

@@ -1,14 +1,32 @@
 import React from 'react'
 
 import { Provider } from './Context';
+import { getLocale } from './Consumer';
+
+let runtimeLocale = {};
+
+export function getRuntimeLocale(componentName) {
+  return runtimeLocale[componentName] || {};
+}
+
+// 部分组件如Modal 可以通过函数式调用  所以需要runtimeLocale提供支撑
+export function changeRuntimeLocale(LocaleValue = 'en_US') {
+  runtimeLocale = getLocale(LocaleValue);
+};
 
 export default (props: {
   value: {
     Locale: string,
   }
   children?: React.ReactNode
 }) => {
+  const renderProvider = () => {
+    changeRuntimeLocale(props.value && props.value.Locale);
+    return props.children
+  }
   return <Provider value={props.value}>
-    {props.children}
+    {
+      renderProvider()
+    }
   </Provider>
 };

source/components/Locale/en_US.ts

@@ -14,6 +14,30 @@ const LocaleValue: LocaleProperties = {
   },
   Table: {
     filterTitle: 'filters',
+  },
+  Modal: {
+    okText: 'ok',
+    cancelText: 'cancel',
+  },
+  Pagination: {
+    items_per_page: '/ page',
+    jump_to: 'Go to',
+    jump_to_confirm: 'confirm',
+    page: '',
+
+    // Pagination.jsx
+    prev_page: 'Previous Page',
+    next_page: 'Next Page',
+    prev_5: 'Previous 5 Pages',
+    next_5: 'Next 5 Pages',
+    prev_3: 'Previous 3 Pages',
+    next_3: 'Next 3 Pages'
+  },
+  VideoViewer: {
+    fullScreen: 'fullScreen',
+    cancelFullScreen: 'cancelFullScreen',
+    download: 'download',
+    retry: 'retry'
   }
 }
 

source/components/Locale/index.ts

@@ -2,22 +2,22 @@ import zh_CN from "./zh_CN";
 import en_US from './en_US';
 
 
-type keyStringObj = {
-  [propName: string]: string | object,
+type keyString = {
+  [propName: string]: string,
 }
 
 
 export interface LocaleProperties {
   locale: string,
-  AudioPlayer?: keyStringObj,
-  AutoComplete?: keyStringObj,
-  Cascader?: keyStringObj,
-  global?: keyStringObj,
-  Table?: keyStringObj,
-  Modal?: keyStringObj,
-  Form?: keyStringObj & {
-    defaultValidateMessages: keyStringObj,
-  }
+  AudioPlayer?: keyString,
+  AutoComplete?: keyString,
+  Cascader?: keyString,
+  global?: keyString,
+  Table?: keyString,
+  Modal?: keyString,
+  RichEditor?: keyString,
+  Pagination?: keyString,
+  VideoViewer?: keyString,
 };
 
 const Locale = {

source/components/Locale/zh_CN.ts

@@ -33,17 +33,85 @@ const localeValues: LocaleProperties = {
   Modal: {
     okText: '确定',
     cancelText: '取消',
-    justOkText: '知道了',
+    // justOkText: '知道了',
   },
-  Form: {
-    optional: '（可选）',
-    defaultValidateMessages: {
-      default: '字段验证错误${label}',
-      required: '请输入${label}',
-      enum: '${label}必须是其中一个[${enum}]',
-      whitespace: '${label}不能为空字符',
-    },
+  Pagination: {
+    items_per_page: '条/页',
+    jump_to: '跳至',
+    jump_to_confirm: '确定',
+    page: '页',
+
+    // Pagination.js
+    prev_page: '上一页',
+    next_page: '下一页',
+    prev_5: '向前 5 页',
+    next_5: '向后 5 页',
+    prev_3: '向前 3 页',
+    next_3: '向后 3 页',
+  },
+  RichEditor: {
+    // editor 
+    insertImageTip: '支持jpg、jpeg、png、gif、bmp格式的图片，最佳显示高度不超过400px，宽度不超过270px。',
+    rule1: '1、单个视频不超过10M，支持MP4、3GP格式视频。',
+    rule2: '2、最佳显示高度不超过400px',
+    PleaseEnterTheVideolinkURL: "请输入视频链接URL",
+    selectLocalVideo: '选择本地视频',
+    videoLink: '视频链接',
+    localVideo: "本地视频",
+    insertVideo: '插入视频',
+    selectLocalImage: "选择本地图片",
+    insertAttachment: "插入附件",
+    selectLocalFile: "选择本地文件",
+    HyperlinkAddress: '超链接地址',
+    insertPicture: '插入图片',
+    noVideoLinkErrorTip: '请设置视频源地址',
+    VideoCantPlayTip: '视频无法播放',
+    file: '[文件]',
+    noFileInfoTip: '文件信息读取失败',
+    noPicSrcTip: '请设置图片源地址',
+    noVideoUrlErrorTip: '视频链接URL不得为空',
+    videoUrlFormattingError: '视频链接URL格式错误',
+    videoLinkTooLongError: '视频链接不得超过1000个字',
+    linkEmptyTip: '链接地址不得为空',
+    linkToolongError: '链接地址不得超过1000个字',
+    noSelectionText: '没有选中文本',
+    insertLink: '插入超链接',
+    editLink: '编辑超链接',
+
+    //toolbar
+    backgroundColor: '背景色',
+    textDirection: '文字方向',
+    increaseIndent: '增加缩进',
+    decreaseIndent: '减少缩进',
+    subScript: '下脚标',
+    superSciprt: '上脚标',
+    codeBlock: '代码块',
+    blockquote: '块引用',
+    strike: '删除线',
+    brushFormat: '格式刷',
+    clearFormat: '清除格式',
+    fontSize: '文字大小',
+    insertEmoji: '插入表情',
+    defaultEmoji: '默认表情',
+    orderedList: '有序列表',
+    unOrderedList: '无序列表',
+    alignJustified: '两端对齐',
+    alignCenter: '居中',
+    alignRight: '居右',
+    alignLeft: '居左',
+    fontColor: '文字颜色',
+    underline: '下划线',
+    italic: '斜体',
+    bold: '粗体',
+    temporarilyNoData: '暂无数据',
+    enterKeyWordPlease: '请输入关键字',
   },
+  VideoViewer: {
+    fullScreen: '全屏',
+    cancelFullScreen: '取消全屏',
+    download: '下载',
+    retry: '重试'
+  }
 };
 
 export default localeValues;

source/components/Modal/Modal.tsx

@@ -4,6 +4,8 @@ import * as PropTypes from 'prop-types';
 import { addEventListener } from '../../utils/index';
 import Button from '../Button';
 import { ButtonType, NativeButtonProps } from '../Button/Button';
+import ConfigConsumer from '../Config/Consumer';
+import { LocaleProperties } from '../Locale';
 
 let mousePosition: { x: number; y: number } | null;
 let mousePositionEventBinded: boolean;
@@ -108,9 +110,9 @@ export default class Modal extends React.Component<ModalProps, {}> {
     draggable: false,
     maskClosable: false,
     esc: false,
-    okText: '确定',
-    cancelText: '取消',
-    justOkText: '知道了'
+    // okText: '确定',
+    // cancelText: '取消',
+    // justOkText: '知道了'
   };
 
   static propTypes = {
@@ -174,30 +176,36 @@ export default class Modal extends React.Component<ModalProps, {}> {
       cancelButtonProps,
       okButtonProps
     } = this.props;
-    const defaultFooter = (
-      <div>
-        <Button onClick={this.handleCancel} disabled={cancelButtonDisabled} {...cancelButtonProps}>
-          {cancelText}
-        </Button>
-        <Button
-          type={okType}
-          loading={confirmLoading}
-          onClick={this.handleOk}
-          disabled={okButtonDisabled}
-          {...okButtonProps}
-        >
-          {okText}
-        </Button>
-      </div>
-    );
     return (
-      <Dialog
-        {...this.props}
-        footer={footer === undefined ? defaultFooter : footer}
-        visible={visible}
-        mousePosition={mousePosition}
-        onClose={this.handleCancel}
-      />
+      <ConfigConsumer componentName="Modal">
+        {
+          (Locale: LocaleProperties['Modal']) => {
+            const defaultFooter = (
+              <div>
+                <Button onClick={this.handleCancel} disabled={cancelButtonDisabled} {...cancelButtonProps}>
+                  {cancelText || Locale.cancelText}
+                </Button>
+                <Button
+                  type={okType}
+                  loading={confirmLoading}
+                  onClick={this.handleOk}
+                  disabled={okButtonDisabled}
+                  {...okButtonProps}
+                >
+                  {okText || Locale.okText}
+                </Button>
+              </div>);
+
+            return <Dialog
+              {...this.props}
+              footer={footer === undefined ? defaultFooter : footer}
+              visible={visible}
+              mousePosition={mousePosition}
+              onClose={this.handleCancel}
+            />
+          }
+        }
+      </ConfigConsumer>
     );
   }
 }

source/components/Modal/confirm.tsx

@@ -4,6 +4,9 @@ import classNames from 'classnames';
 import Icon from '../Icon/index';
 import Dialog, { ModalFuncProps } from './Modal';
 import ActionButton from './ActionButton';
+import { getRuntimeLocale } from '../Config/Locale/Provider';
+import { LocaleProperties } from '../Locale';
+
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -13,6 +16,8 @@ interface ConfirmDialogProps extends ModalFuncProps {
 const IS_REACT_16 = !!ReactDOM.createPortal;
 
 const ConfirmDialog = (props: ConfirmDialogProps) => {
+  const runtimeLocale: LocaleProperties['Modal'] = getRuntimeLocale('Modal');
+
   const { onCancel, onOk, close, zIndex, afterClose, visible, esc } = props;
   const iconType = props.iconType || 'hints-descriptions';
   const okType = props.okType || 'primary';
@@ -23,8 +28,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
   const style = props.style || {};
   // 默认为 false，保持旧版默认行为
   const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
-  const okText = props.okText || '确定';
-  const cancelText = props.cancelText || '取消';
+  const okText = props.okText || runtimeLocale.okText;
+  const cancelText = props.cancelText || runtimeLocale.cancelText;
 
   const classString = classNames(prefixCls, `${prefixCls}-${props.type}`, props.className);
 
@@ -33,7 +38,6 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
       {cancelText}
     </ActionButton>
   );
-
   return (
     <Dialog
       className={classString}
@@ -59,7 +63,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
         <div className={`${prefixCls}-btns`}>
           {cancelButton}
           <ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus>
-            {okText}
+            {okText || runtimeLocale.okText}
           </ActionButton>
         </div>
       </div>