feat(configprovider): 3.x support locale provider for RC (#528)

* feat(configprovider): support provider for RC

* feat(configprovider): migrate locale type to useLocale

* fix(configprovider): change Locale path and remove sass_binary_site

* fix: change jest.config.js transform

* fix(configprovider): remove all cn add locale

* fix(configprovider): fix check-type error

* fix(configprovider): update en locale text

* feat(configprovider): change ConfigProvider value and getLocale return value

Author: LuckyFBB

jest.config.js

@@ -5,7 +5,7 @@ module.exports = {
     transformIgnorePatterns: ['/node_modules/', 'lib', 'dist'],
     testPathIgnorePatterns: ['/node_modules/'],
     transform: {
-        '^.+\\.[jt]s?(x)$': 'babel-jest',
+       '^.+\\.(ts|tsx|js|jsx)$': 'babel-jest',
     },
     testMatch: [
         '**/__tests__/**/(*.)+(spec|test).[jt]s?(x)',

src/components/blockHeader/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
+import useLocale from '../locale/useLocale';
 
 export interface BlockHeaderProps {
     // 标题
@@ -60,6 +61,9 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
     let bottomStyle;
     if (hasBottom) bottomStyle = { marginBottom: 16 };
     if (spaceBottom) bottomStyle = { marginBottom: spaceBottom };
+
+    const locale = useLocale('BlockHeader');
+
     const [expand, setExpand] = useState(defaultExpand);
 
     const handleExpand = (expand) => {
@@ -87,7 +91,7 @@ const BlockHeader: React.FC<BlockHeaderProps> = function (props) {
                 {addonAfter && <div className={`${prefixCls}-addonAfter-box`}>{addonAfter}</div>}
                 {children && (
                     <div className={`${prefixCls}-collapse-box`}>
-                        <div className="text">{expand ? '收起' : '展开'}</div>
+                        <div className="text">{expand ? locale.collapse : locale.expand}</div>
                         <UpOutlined className={`icon ${expand ? 'up' : 'down'}`} />
                     </div>
                 )}

src/components/chromeDownload/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { LocaleContext } from '../locale/useLocale';
+
+const ConfigProvider = ({ locale, children }) => {
+    return <LocaleContext.Provider value={{ locale }}>{children}</LocaleContext.Provider>;
+};
+
+export default ConfigProvider;

src/components/configProvider/index.tsx

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { Tooltip, message } from 'antd';
 import { CopyOutlined } from '@ant-design/icons';
+import useLocale, { Locale } from '../locale/useLocale';
 
 export interface CopyIconProps {
     text: string;
     style?: React.CSSProperties;
     title?: string;
     customRender?: React.ReactNode;
+    locale?: Locale['CopyIcon'];
 }
 
-export default class CopyIcon extends React.Component<any, any> {
+class CopyIcon extends React.Component<CopyIconProps, any> {
     fakeHandlerCallback: () => void;
     fakeHandler: EventListener | void;
     fakeElem: HTMLTextAreaElement;
@@ -82,15 +84,16 @@ export default class CopyIcon extends React.Component<any, any> {
     }
 
     handleResult(succeeded: any) {
+        const { locale } = this.props;
         if (succeeded) {
-            message.success('复制成功');
+            message.success(locale.copied);
         } else {
-            message.error('不支持');
+            message.error(locale.notSupport);
         }
     }
 
     render() {
-        let { customRender, text, style, title, ...rest } = this.props;
+        let { customRender, text, style, title, locale, ...rest } = this.props;
 
         style = {
             cursor: 'pointer',
@@ -101,7 +104,7 @@ export default class CopyIcon extends React.Component<any, any> {
         return customRender ? (
             <span onClick={this.copy.bind(this, text)}>{customRender}</span>
         ) : (
-            <Tooltip placement="right" title={title || '复制'}>
+            <Tooltip placement="right" title={title || locale.copy}>
                 <CopyOutlined
                     {...rest}
                     className="c-copyIcon"
@@ -112,3 +115,10 @@ export default class CopyIcon extends React.Component<any, any> {
         );
     }
 }
+
+const CopyIconWrapper = (props: Omit<CopyIconProps, 'locale'>) => {
+    const locale = useLocale('CopyIcon');
+    return <CopyIcon {...props} locale={locale} />;
+};
+
+export default CopyIconWrapper;

src/components/copyIcon/index.tsx

@@ -2,21 +2,23 @@ import React from 'react';
 import { Input } from 'antd';
 import EllipsisText from '../ellipsisText';
 import classNames from 'classnames';
+import useLocale, { Locale } from '../locale/useLocale';
 
 type EditType = string | number;
 export interface EditCellProps {
     className?: string;
     value: string;
     keyField: string;
     isView?: boolean;
+    locale?: Locale['EditCell'];
     onHandleEdit: (keyField: string, editValue: EditType) => void;
 }
 export interface EditCellStates {
     isEdit: boolean;
     editValue: EditType;
 }
 
-export default class EditCell extends React.PureComponent<EditCellProps, EditCellStates> {
+class EditCell extends React.PureComponent<EditCellProps, EditCellStates> {
     state: EditCellStates = {
         isEdit: false,
         editValue: '',
@@ -47,7 +49,7 @@ export default class EditCell extends React.PureComponent<EditCellProps, EditCel
 
     render() {
         const { isEdit, editValue } = this.state;
-        const { isView, className = '' } = this.props;
+        const { isView, className = '', locale } = this.props;
         return (
             <div className={classNames('dtc-edit-Cell', className)}>
                 {isEdit ? (
@@ -57,16 +59,23 @@ export default class EditCell extends React.PureComponent<EditCellProps, EditCel
                             style={{ width: 150, lineHeight: 24, height: 24 }}
                             onChange={this.onChangeEdit}
                         />
-                        <a onClick={this.onOkEdit}>完成</a>
-                        <a onClick={this.onCancelEdit}>取消</a>
+                        <a onClick={this.onOkEdit}>{locale.complete}</a>
+                        <a onClick={this.onCancelEdit}>{locale.cancel}</a>
                     </div>
                 ) : (
                     <>
                         <EllipsisText value={editValue} maxWidth={120} />
-                        {!isView && <a onClick={this.onEdit}>修改</a>}
+                        {!isView && <a onClick={this.onEdit}>{locale.modify}</a>}
                     </>
                 )}
             </div>
         );
     }
 }
+
+const EditCellWrapper = (props: Omit<EditCellProps, 'locale'>) => {
+    const locale = useLocale('EditCell');
+    return <EditCell {...props} locale={locale} />;
+};
+
+export default EditCellWrapper;

src/components/editCell/index.tsx

@@ -33,7 +33,7 @@ describe('test edit input', () => {
     });
     test('should render message when length more then max', () => {
         fireEvent.change(element, { target: { value: '12345678910' } });
-        expect(wrapper.getByText('字符长度不可超过10')).toBeInTheDocument();
+        expect(wrapper.getByText('字符长度不可超过${max}')).toBeInTheDocument();
         expect(element.value).toEqual('1234567891');
     });
 

src/components/editInput/__tests__/editInput.test.tsx

@@ -1,16 +1,18 @@
 import React from 'react';
 import { Input, message } from 'antd';
+import useLocale, { Locale } from '../locale/useLocale';
 export interface EditInputProps {
     value?: string | number;
     onChange?: (e) => void;
     max?: number;
+    locale?: Locale['EditInput'];
     [propName: string]: any;
 }
 
 export interface EditInputPropsStates {
     value: string | number;
 }
-export default class EditInput extends React.PureComponent<EditInputProps, EditInputPropsStates> {
+class EditInput extends React.PureComponent<EditInputProps, EditInputPropsStates> {
     constructor(props: EditInputProps) {
         super(props);
         this.state = {
@@ -34,10 +36,11 @@ export default class EditInput extends React.PureComponent<EditInputProps, EditI
         this.props.onChange(e);
     };
     onChangeValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { locale } = this.props;
         const value = e.target.value;
         const { max = 64 } = this.props;
         if (value && max && value.length > max) {
-            message.warning(`字符长度不可超过${max}`);
+            message.warning(locale.description);
             this.setState({
                 value: value.substring(0, max),
             });
@@ -61,3 +64,10 @@ export default class EditInput extends React.PureComponent<EditInputProps, EditI
         );
     }
 }
+
+const EditInputWrapper = (props: Omit<EditInputProps, 'locale'>) => {
+    const locale = useLocale('EditInput');
+    return <EditInput {...props} locale={locale} />;
+};
+
+export default EditInputWrapper;

src/components/editInput/index.tsx

@@ -3,6 +3,7 @@ import { Button } from 'antd';
 
 import MyIcon from './icon';
 import KeyEventListener from '../keyEventListener';
+import useLocale, { Locale } from '../locale/useLocale';
 
 const { KeyCombiner } = KeyEventListener;
 declare let document: any;
@@ -14,12 +15,13 @@ export interface FullscreenProps {
     iconStyle?: object;
     fullIcon?: React.ReactNode;
     exitFullIcon?: React.ReactNode;
+    locale?: Locale['Fullscreen'];
     [propName: string]: any;
 }
 export interface FullscreenState {
     isFullScreen: boolean;
 }
-export default class Fullscreen extends React.Component<FullscreenProps, FullscreenState> {
+class Fullscreen extends React.Component<FullscreenProps, FullscreenState> {
     state: FullscreenState = {
         isFullScreen: false,
     };
@@ -136,8 +138,8 @@ export default class Fullscreen extends React.Component<FullscreenProps, Fullscr
     };
 
     render() {
-        const { themeDark, fullIcon, exitFullIcon, iconStyle, ...other } = this.props;
-        const title = this.state.isFullScreen ? '退出全屏' : '全屏';
+        const { themeDark, fullIcon, exitFullIcon, iconStyle, locale, ...other } = this.props;
+        const title = this.state.isFullScreen ? locale.exitFull : locale.full;
         // const iconType = this.state.isFullScreen ? 'exit-fullscreen' : 'fullscreen';
         const customIcon = this.state.isFullScreen ? exitFullIcon : fullIcon;
         return (
@@ -167,3 +169,10 @@ export default class Fullscreen extends React.Component<FullscreenProps, Fullscr
         );
     }
 }
+
+const FullscreenWrapper = (props: Omit<FullscreenProps, 'locale'>) => {
+    const locale = useLocale('Fullscreen');
+    return <Fullscreen {...props} locale={locale} />;
+};
+
+export default FullscreenWrapper;

src/components/fullscreen/index.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
+import useLocale, { Locale } from '../locale/useLocale';
 
 export interface GlobalLoadingProps {
     className?: string;
@@ -8,19 +9,23 @@ export interface GlobalLoadingProps {
     mainBackground?: string;
     circleBackground?: string;
     titleColor?: string;
+    locale?: Locale['GlobalLoading'];
 }
 
-export default class GlobalLoading extends React.Component<GlobalLoadingProps, any> {
+class GlobalLoading extends React.Component<GlobalLoadingProps, any> {
     render() {
         const {
             prefix = '',
-            loadingTitle = '应用加载中，请等候～',
+            loadingTitle,
             mainBackground = '#F2F7FA',
             circleBackground = '#1D78FF',
             titleColor = '#3D446E',
             className = '',
+            locale,
         } = this.props;
 
+        const newLoadingTitle = loadingTitle || locale.loading;
+
         return (
             <div
                 className={classNames('dtc-loading-wrapper', className)}
@@ -31,7 +36,7 @@ export default class GlobalLoading extends React.Component<GlobalLoadingProps, a
                     <div
                         className="dtc-loading-title"
                         style={{ color: titleColor }}
-                    >{`${prefix}  ${loadingTitle}`}</div>
+                    >{`${prefix}  ${newLoadingTitle}`}</div>
                     <div className="dtc-bouncy-wrap">
                         <div className="dtc-dot-icon dtc-dc1">
                             <div className="dtc-dot" style={{ background: circleBackground }}></div>
@@ -48,3 +53,10 @@ export default class GlobalLoading extends React.Component<GlobalLoadingProps, a
         );
     }
 }
+
+const GlobalLoadingWrapper = (props: Omit<GlobalLoadingProps, 'locale'>) => {
+    const locale = useLocale('GlobalLoading');
+    return <GlobalLoading {...props} locale={locale} />;
+};
+
+export default GlobalLoadingWrapper;