Merge remote-tracking branch 'upstream/4.x-stable' into feat_merge_4.x

Author: LuckyFBB

src/blockHeader/index.tsx

@@ -3,6 +3,7 @@ import { QuestionOutlined, UpOutlined } from '@dtinsight/react-icons';
 import { Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import useLocale from '../locale/useLocale';
 import { LabelTooltipType, toTooltipProps } from '../utils';
 import './style.scss';
 
@@ -77,6 +78,8 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
 
     const [internalExpand, setInternalExpand] = useState(defaultExpand);
 
+    const locale = useLocale('BlockHeader');
+
     const currentExpand = isControlled(props) ? expand : internalExpand;
 
     // 只有在有了 children 并且设置了 expand/defaultExpand 的时候才能够展开收起
@@ -124,7 +127,9 @@ const BlockHeader: React.FC<IBlockHeaderProps> = function (props) {
                 {addonAfter && <div className={`title__addon-after`}>{addonAfter}</div>}
                 {showCollapse && (
                     <div className={`title__collapse`}>
-                        <div className="collapse__text">{currentExpand ? '收起' : '展开'}</div>
+                        <div className="collapse__text">
+                            {currentExpand ? locale.collapse : locale.expand}
+                        </div>
                         <UpOutlined
                             className={classNames('collapse__icon', {
                                 'collapse__icon--up': currentExpand,

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 { CopyOutlined } from '@dtinsight/react-icons';
 import { message, Tooltip } from 'antd';
 import classNames from 'classnames';
 
+import useLocale from '../locale/useLocale';
 import { LabelTooltipType, toTooltipProps } from '../utils';
 import './style.scss';
 
@@ -18,14 +19,15 @@ export interface ICopyProps {
 }
 
 const Copy: React.FC<ICopyProps> = (props) => {
+    const locale = useLocale('Copy');
     const {
         button = <CopyOutlined className="dtc-copy__default-icon" />,
         text,
-        tooltip = '复制',
+        tooltip = locale.copy,
         style,
         className,
         disabled = false,
-        onCopy = () => message.success('复制成功'),
+        onCopy = () => message.success(locale.copied),
     } = props;
 
     const handleCopy = () => {

src/dropdown/select.tsx

@@ -10,6 +10,7 @@ import classNames from 'classnames';
 import { isEqual } from 'lodash-es';
 import List from 'rc-virtual-list';
 
+import useLocale from '../locale/useLocale';
 import './style.scss';
 
 interface IDropdownSelectProps
@@ -35,6 +36,8 @@ export default function Select({
     const [visible, setVisible] = useState(false);
     const [selected, setSelected] = useState<CheckboxValueType[]>(value || defaultValue || []);
 
+    const locale = useLocale('Dropdown');
+
     const handleCheckedAll = (e: CheckboxChangeEvent) => {
         if (e.target.checked) {
             setSelected(options?.map((i) => i.value) || []);
@@ -130,7 +133,7 @@ export default function Select({
                         checked={checkAll}
                         indeterminate={indeterminate}
                     >
-                        全选
+                        {locale.selectAll}
                     </Checkbox>
                 </Col>
                 <Col span={24} className={`${prefix}__menu`}>
@@ -169,10 +172,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/ellipsisText/index.tsx

@@ -78,6 +78,9 @@ const EllipsisText = (props: IEllipsisTextProps) => {
      * @return {*}
      */
     const getStyle = (dom: NewHTMLElement, attr: string) => {
+        if (!dom) {
+            return null;
+        }
         // Compatible width IE8
         // @ts-ignore
         return window.getComputedStyle(dom)[attr] || dom.currentStyle[attr];
@@ -203,7 +206,11 @@ const EllipsisText = (props: IEllipsisTextProps) => {
      * @return {*}
      */
     const onResize = () => {
-        const ellipsisNode = ellipsisRef.current!;
+        if (!ellipsisRef.current) {
+            return;
+        }
+
+        const ellipsisNode = ellipsisRef.current;
         const parentElement = ellipsisNode.parentElement!;
         const rangeWidth = getRangeWidth(ellipsisNode);
         const containerWidth = getContainerWidth(parentElement);

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 {
@@ -13,8 +14,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

@@ -5,6 +5,7 @@ export { default as Button } from './button';
 export { default as Catalogue } from './catalogue';
 export { default as Chat } from './chat';
 export { default as CollapsibleActionItems } from './collapsibleActionItems';
+export { default as ConfigProvider } from './configProvider';
 export { default as ContentLayout } from './contentLayout';
 export { default as ContextMenu } from './contextMenu';
 export { default as Copy } from './copy';
@@ -24,6 +25,8 @@ export { default as GlobalLoading } from './globalLoading';
 export { default as Image } from './image';
 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/modal';
 export { default as NotFound } from './notFound';

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;