feat(configprovider): 4.x support locale provider for RC (#548)

* feat(configprovider): support provider for RC

* feat(configprovider): migrate locale type to useLocale

* fix(configprovider): fix unit test error

* fix(configprovier): update ConfigProvider ts and en locale text

* feat(configprovider): change localeFromContext

* feat(configprovider): update ConfigProvider ts and en locale text

Author: LuckyFBB

package.json

@@ -133,5 +133,6 @@
     },
     "resolutions": {
         "rc-motion": "2.6.2"
-    }
+    },
+    "packageManager": "[email protected]"
 }

src/blockHeader/index.tsx

@@ -3,6 +3,7 @@ import { QuestionCircleOutlined, UpOutlined } from '@ant-design/icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import useLocale from '../locale/useLocale';
 import './style.scss';
 
 export declare type SizeType = 'small' | 'middle' | undefined;
@@ -59,6 +60,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const [expand, setExpand] = useState(defaultExpand);
 
+    const locale = useLocale('BlockHeader');
+
     const preTitleRowCls = `${prefixCls}-title-row`;
 
     const questionTooltip = tooltip && (
@@ -103,7 +106,7 @@ const BlockHeader: React.FC<IBlockHeaderProps> = 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/configProvider/index.tsx

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

src/copy/index.tsx

@@ -4,6 +4,7 @@ import { message, Tooltip } from 'antd';
 import classNames from 'classnames';
 import useClippy from 'use-clippy';
 
+import useLocale from '../locale/useLocale';
 import './style.scss';
 
 export interface ICopyProps {
@@ -17,14 +18,15 @@ export interface ICopyProps {
 }
 
 const Copy: React.FC<ICopyProps> = (props) => {
+    const locale = useLocale('Copy');
     const {
         button = <CopyOutlined className="dtc-copy__default-icon" />,
         text,
-        title = '复制',
+        title = locale.copy,
         hideTooltip,
         style,
         className,
-        onCopy = () => message.success('复制成功'),
+        onCopy = () => message.success(locale.copied),
     } = props;
     const [_, setClipboard] = useClippy();
 

src/dropdown/select.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { isEqual } from 'lodash';
 import List from 'rc-virtual-list';
 
+import useLocale from '../locale/useLocale';
 import './style.scss';
 
 interface IDropdownSelectProps
@@ -31,6 +32,8 @@ export default function Select({
 }: IDropdownSelectProps) {
     const [visible, setVisible] = useState(false);
 
+    const locale = useLocale('Dropdown');
+
     const handleCheckedAll = (e: CheckboxChangeEvent) => {
         if (e.target.checked) {
             onChange?.(options?.map((i) => i.value) || []);
@@ -119,7 +122,7 @@ export default function Select({
                         checked={checkAll}
                         indeterminate={indeterminate}
                     >
-                        全选
+                        {locale.selectAll}
                     </Checkbox>
                 </Col>
                 <Col span={24} className={`${prefix}__menu`}>
@@ -158,10 +161,10 @@ export default function Select({
             </Row>
             <Space size={8} className={`${prefix}__btns`}>
                 <Button size="small" disabled={resetDisabled} onClick={handleReset}>
-                    重置
+                    {locale.resetText}
                 </Button>
                 <Button size="small" type="primary" onClick={handleSubmit}>
-                    确定
+                    {locale.okText}
                 </Button>
             </Space>
         </>

src/errorBoundary/loadError.tsx

@@ -1,22 +1,24 @@
 import React from 'react';
 
+import useLocale from '../locale/useLocale';
+
 const LoadError: React.FC = function () {
+    const locale = useLocale('LoadError');
     return (
         <div className="dtc-error" data-testid="test-error">
             <div>
-                
                 <h2 style={{ textAlign: 'center' }} data-testid="test-error">
-                    发现新版本，请
+                    {locale.please}
                     <a
                         onClick={() => {
                             location.reload();
                         }}
                     >
-                        刷新
+                        {locale.refresh}
                     </a>
-                    获取新版本。
+                    {locale.get}
                 </h2>
-                <h4 style={{ textAlign: 'center' }}>若该提示长时间存在，请联系管理员。</h4>
+                <h4 style={{ textAlign: 'center' }}>{locale.title}</h4>
             </div>
         </div>
     );

src/fullscreen/index.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, HTMLAttributes, ReactNode, useEffect, useState }
 import { Button } from 'antd';
 
 import KeyEventListener from '../keyEventListener';
+import useLocale from '../locale/useLocale';
 import MyIcon from './icon';
 
 const { KeyCombiner } = KeyEventListener;
@@ -44,7 +45,11 @@ export default function Fullscreen({
     ...other
 }: IFullscreenProps) {
     const [isFullScreen, setIsFullScreen] = useState(false);
+
+    const locale = useLocale('Fullscreen');
+
     const customIcon = isFullScreen ? exitFullIcon : fullIcon;
+
     useEffect(() => {
         const propsDom = document.getElementById(target);
         const domEle = propsDom || document.body;
@@ -188,7 +193,7 @@ export default function Fullscreen({
             ) : (
                 <Button onClick={handleFullScreen}>
                     <MyIcon style={iconStyle} type={isFullScreen} themeDark={themeDark} />
-                    {isFullScreen ? '退出全屏' : '全屏'}
+                    {isFullScreen ? locale.exitFull : locale.full}
                 </Button>
             )}
         </KeyCombiner>

src/globalLoading/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 
+import useLocale from '../locale/useLocale';
 import './style.scss';
 
 export interface IGlobalLoadingProps {
@@ -12,8 +13,10 @@ export interface IGlobalLoadingProps {
 }
 
 const GlobalLoading: React.FC<IGlobalLoadingProps> = function (props) {
+    const locale = useLocale('GlobalLoading');
+
     const {
-        loadingTitle = '应用加载中，请等候～',
+        loadingTitle = locale.loading,
         mainBackground = '#F2F7FA',
         circleBackground = '#1D78FF',
         titleColor = '#3D446E',

src/index.ts

@@ -1,5 +1,6 @@
 export { default as BlockHeader } from './blockHeader';
 export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as ConfigProvider } from './configProvider';
 export { default as ContextMenu } from './contextMenu';
 export { default as useCookieListener } from './cookies';
 export { default as Copy } from './copy';
@@ -13,6 +14,8 @@ export { default as Fullscreen } from './fullscreen';
 export { default as GlobalLoading } from './globalLoading';
 export { default as Input } from './input';
 export { default as KeyEventListener } from './keyEventListener';
+export { default as enUS } from './locale/en-US';
+export { default as zhCN } from './locale/zh-CN';
 export { default as MarkdownRender } from './markdownRender';
 export { default as Modal } from './modal';
 export { default as MxGraphContainer, WIDGETS_PREFIX } from './mxGraph';

src/input/match.tsx

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Input, type InputProps, Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import useLocale from '../locale/useLocale';
 import { CaseSensitiveIcon, FrontIcon, PreciseIcon, TailIcon } from './icons';
 import './match.scss';
 
@@ -29,30 +30,11 @@ interface IMatchProps extends Omit<InputProps, 'suffix'> {
     onSearch?: (value: string, searchType: SearchType) => void;
 }
 
-const searchTypeList = [
-    {
-        key: 'caseSensitive',
-        tip: '区分大小写匹配',
-    },
-    {
-        key: 'precise',
-        tip: '精确匹配',
-    },
-    {
-        key: 'front',
-        tip: '头部匹配',
-    },
-    {
-        key: 'tail',
-        tip: '尾部匹配',
-    },
-] as const;
-
 export default function Match({
     className,
     value,
     searchType,
-    filterOptions = searchTypeList.map((i) => i.key),
+    filterOptions: propFilterOptions,
     onTypeChange,
     onSearch,
     onChange,
@@ -62,12 +44,35 @@ export default function Match({
     const [internalValue, setValue] = useState<string>('');
     const [internalSearchType, setSearchType] = useState<SearchType>('fuzzy');
 
+    const locale = useLocale('Input');
+
     const handleTypeChange = (key: SearchType) => {
         const next = realSearchType === key ? 'fuzzy' : key;
         onTypeChange?.(next);
         setSearchType(next);
     };
 
+    const searchTypeList = [
+        {
+            key: 'caseSensitive',
+            tip: locale.case,
+        },
+        {
+            key: 'precise',
+            tip: locale.precise,
+        },
+        {
+            key: 'front',
+            tip: locale.front,
+        },
+        {
+            key: 'tail',
+            tip: locale.tail,
+        },
+    ] as const;
+
+    const filterOptions = propFilterOptions || searchTypeList.map((i) => i.key);
+
     const options = searchTypeList.filter((i) => filterOptions.includes(i.key));
 
     const realSearchType = searchType || internalSearchType;