feat(upload): 国际化支持upload,tree

Tencent · Jan 23, 2022 · 34ba53e · 34ba53e
1 parent 8a9f9a8
commit 34ba53e
Show file tree

Hide file tree

Showing 17 changed files with 145 additions and 59 deletions.
diff --git a/src/locale/en_US.ts b/src/locale/en_US.ts
@@ -91,6 +91,7 @@ export default {
   treeSelect: {
     empty: 'Empty Data',
     loadingText: 'loading...',
+    placeholder: '',
   },
   datePicker: {
     placeholder: {
@@ -120,7 +121,34 @@ export default {
   },
   upload: {
     sizeLimitMessage: 'File is too large to upload. {sizeLimit}',
-    cancelUploadText: 'Cancel',
+    trigger: {
+      file: 'Upload',
+      image: 'Click to upload',
+      cancel: 'Cancel',
+    },
+    dragger: {
+      drop: 'Drop hear',
+      click: 'Click',
+      drag: 'Drag file to this area to upload',
+      clickAndDrag: 'Click "Upload" or Drag file to this area to upload',
+    },
+    infoTable: {
+      name: 'filename',
+      size: 'size',
+      status: 'status',
+      operation: 'operation',
+      date: 'date',
+    },
+    progress: {
+      cancel: 'Cancel',
+      reupload: 'Reupload',
+      delete: 'Delete',
+      start: 'Upload',
+      uploading: 'Uploading',
+      waiting: 'Waiting',
+      fail: 'Failed',
+      success: 'Success',
+    },
   },
   tag: {
     closeIcon: undefined,

diff --git a/src/locale/zh_CN.ts b/src/locale/zh_CN.ts
@@ -65,6 +65,7 @@ export default {
   select: {
     empty: '暂无数据',
     loadingText: '加载中',
+    placeholder: '-请选择-',
     // 清除按钮
     clearIcon: null,
   },
@@ -76,6 +77,7 @@ export default {
   treeSelect: {
     empty: '暂无数据',
     loadingText: '加载中',
+    placeholder: '请选择',
   },
   datePicker: {
     placeholder: {
@@ -107,5 +109,42 @@ export default {
   steps: {},
   upload: {
     sizeLimitMessage: '图片大小不能超过 {sizeLimit}',
+    trigger: {
+      file: '选择文件',
+      image: '点击上传图片',
+      cancel: '取消',
+    },
+    dragger: {
+      drop: '释放鼠标',
+      click: '点击上传',
+      drag: '拖拽到此区域',
+      clickAndDrag: '点击上方“选择文件”或将文件拖拽到此区域',
+    },
+    infoTable: {
+      name: '文件名',
+      size: '文件大小',
+      status: '状态',
+      operation: '操作',
+      date: '上传日期',
+    },
+    progress: {
+      start: '点击上传',
+      cancel: '取消上传',
+      reupload: '重新上传',
+      delete: '删除',
+      uploading: '上传中',
+      waiting: '待上传',
+      fail: '上传失败',
+      success: '上传成功',
+    },
+  },
+  tag: {
+    closeIcon: undefined,
+  },
+  form: {
+    requiredMark: true,
+  },
+  input: {
+    placeholder: '',
   },
 };
diff --git a/src/select/base/Select.tsx b/src/select/base/Select.tsx
@@ -87,7 +87,7 @@ const Select = forwardRefWithStatics(
       panelTopContent,
     } = useDefaultValue(props);
 
-    const { classPrefix } = useConfig();
+    const { classPrefix, locale } = useConfig();
 
     const name = `${classPrefix}-select`; // t-select
 
@@ -268,7 +268,7 @@ const Select = forwardRefWithStatics(
           },
         )}
       >
-        {selectedLabel || placeholder || '-请选择-'}
+        {selectedLabel || placeholder || locale.select.placeholder}
       </span>
     );
 
@@ -320,7 +320,9 @@ const Select = forwardRefWithStatics(
     const renderInput = () => (
       <Input
         value={isString(inputVal) || multiple ? inputVal : selectedLabel}
-        placeholder={multiple && get(value, 'length') > 0 ? null : selectedLabel || placeholder || '-请选择-'}
+        placeholder={
+          multiple && get(value, 'length') > 0 ? null : selectedLabel || placeholder || locale.select.placeholder
+        }
         className={`${name}__input`}
         onChange={handleInputChange}
         onKeydown={handleInputKeyDown}

diff --git a/src/tree-select/TreeSelect.tsx b/src/tree-select/TreeSelect.tsx
@@ -27,6 +27,12 @@ export interface NodeOptions {
 }
 
 const TreeSelect = forwardRef((props: TreeSelectProps, ref: React.Ref<HTMLDivElement>) => {
+  // 国际化文本初始化
+  const [local, t] = useLocaleReceiver('treeSelect');
+  const emptyText = t(local.empty);
+  const placeholderText = t(local.placeholder);
+  const loadingTextLabel = t(local.loadingText);
+
   const {
     className: treeSelectClassName,
     style: treeSelectStyle,
@@ -36,6 +42,7 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref: React.Ref<HTMLDivEle
     valueType,
     loading,
     max,
+    placeholder = placeholderText,
     treeProps,
     empty,
     data,
@@ -232,11 +239,6 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref: React.Ref<HTMLDivEle
     }
   }
 
-  // 国际化文本初始化
-  const [local, t] = useLocaleReceiver('treeSelect');
-  const emptyText = t(local.empty);
-  const loadingTextLabel = t(local.loadingText);
-
   const treeItem = !loading && (
     <Tree
       ref={treeRef}
@@ -304,6 +306,7 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref: React.Ref<HTMLDivEle
             selectedSingle={selectedSingle}
             setFocusing={setFocusing}
             setFilterText={setFilterText}
+            placeholder={placeholder}
             {...props}
           />
 
@@ -332,7 +335,6 @@ TreeSelect.defaultProps = {
   loadingText: '',
   max: 0,
   multiple: false,
-  placeholder: '请输入',
   size: 'medium',
   valueType: 'value',
   minCollapsedNum: 0,

diff --git a/src/tree-select/_example/base.jsx b/src/tree-select/_example/base.jsx
@@ -31,7 +31,6 @@ export default function Example() {
       <TreeSelect
         data={options}
         clearable
-        placeholder="请选择"
         value={value}
         // defaultValue="guangdong"
         onChange={(val) => {

diff --git a/src/tree/TreeItem.tsx b/src/tree/TreeItem.tsx
@@ -27,7 +27,7 @@ const TreeItem = forwardRef((props: TreeItemProps, ref: React.Ref<HTMLDivElement
   } = props;
   const { level } = node;
 
-  const { treeClassNames } = useTreeConfig();
+  const { treeClassNames, locale } = useTreeConfig();
 
   const handleClick = (evt: MouseEvent<HTMLDivElement>) => {
     onClick?.(node, {
@@ -159,7 +159,7 @@ const TreeItem = forwardRef((props: TreeItemProps, ref: React.Ref<HTMLDivElement
   useRipple(labelRef);
 
   const renderLabel = () => {
-    const emptyView = '暂无数据';
+    const emptyView = locale.empty;
     let labelText: string | ReactNode = '';
     if (label instanceof Function) {
       labelText = label(node.getModel()) || emptyView;

diff --git a/src/tree/useTreeConfig.ts b/src/tree/useTreeConfig.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import useConfig from '../_util/useConfig';
 
 export function useTreeConfig() {
-  const { classPrefix: prefix } = useConfig();
+  const { classPrefix: prefix, locale } = useConfig();
 
   return useMemo(() => {
     const tree = `${prefix}-tree`;
@@ -54,6 +54,7 @@ export function useTreeConfig() {
       transitionNames,
       transitionClassNames,
       transitionDuration: 300,
+      locale: locale.tree,
     };
-  }, [prefix]);
+  }, [locale.tree, prefix]);
 }
diff --git a/src/upload/__tests__/__snapshots__/upload.test.tsx.snap b/src/upload/__tests__/__snapshots__/upload.test.tsx.snap
@@ -285,7 +285,7 @@ exports[`file-flow-list.jsx 1`] = `
                 文件名
               </th>
               <th>
-                大小
+                文件大小
               </th>
               <th>
                 状态
@@ -332,7 +332,7 @@ exports[`file-flow-list.jsx 1`] = `
             <span
               class="t-button__text"
             >
-              开始上传
+              点击上传
             </span>
           </button>
         </div>
@@ -620,7 +620,7 @@ exports[`img-flow-list.jsx 1`] = `
             <span
               class="t-button__text"
             >
-              开始上传
+              点击上传
             </span>
           </button>
         </div>

diff --git a/src/upload/dragger.tsx b/src/upload/dragger.tsx
@@ -22,9 +22,10 @@ export interface DraggerProps {
 
 const Dragger: FC<DraggerProps> = (props) => {
   const { file, display, onUpload, onRemove, customDraggerRender } = props;
-  const { classPrefix } = useConfig();
+  const { classPrefix, locale } = useConfig();
   const [dragActive, setDragActive] = useState(false);
   const target = React.useRef();
+  const draggerLocaleText = locale.upload.dragger;
 
   const classes = classNames(
     `${classPrefix}-upload__dragger`,
@@ -35,13 +36,13 @@ const Dragger: FC<DraggerProps> = (props) => {
   const defaultDragElement = React.useMemo(() => {
     const unActiveElement = (
       <div>
-        <span className={`${classPrefix}-upload--highlight`}>点击上传</span>
-        <span>&nbsp;&nbsp;/&nbsp;&nbsp;拖拽到此区域</span>
+        <span className={`${classPrefix}-upload--highlight`}>{draggerLocaleText.click}</span>
+        <span>&nbsp;&nbsp;/&nbsp;&nbsp;{draggerLocaleText.drag}</span>
       </div>
     );
-    const activeElement = <div>释放鼠标</div>;
+    const activeElement = <div>{draggerLocaleText.drop}</div>;
     return dragActive ? activeElement : unActiveElement;
-  }, [classPrefix, dragActive]);
+  }, [classPrefix, dragActive, draggerLocaleText]);
 
   const dragElement = React.useMemo(() => {
     let content: React.ReactNode;

diff --git a/src/upload/themes/dragger-progress.tsx b/src/upload/themes/dragger-progress.tsx
@@ -16,8 +16,9 @@ export interface DraggerProgressProps {
 
 const DraggerProgress: FC<DraggerProgressProps> = (props) => {
   const { file, onUpload, onRemove, display, onTrigger } = props;
-  const { classPrefix } = useConfig();
+  const { classPrefix, locale } = useConfig();
 
+  const { progress: progressText, infoTable: infoText } = locale.upload;
   const reUpload = (e) => {
     onRemove?.({ e, file, index: 0 });
     onTrigger?.();
@@ -54,8 +55,12 @@ const DraggerProgress: FC<DraggerProgressProps> = (props) => {
           {file?.status !== 'success' && renderUploading()}
           {file?.status === 'success' && <CheckCircleFilledIcon />}
         </div>
-        <small className={`${classPrefix}-size-s`}>文件大小：{returnFileSize(file?.size)}</small>
-        <small className={`${classPrefix}-size-s`}>上传日期：{getCurrentDate()}</small>
+        <small className={`${classPrefix}-size-s`}>
+          {infoText.size}：{returnFileSize(file?.size)}
+        </small>
+        <small className={`${classPrefix}-size-s`}>
+          {infoText.date}：{getCurrentDate()}
+        </small>
         {!['success', 'fail'].includes(file?.status) && (
           <div className={`${classPrefix}-upload__dragger-btns`}>
             <Button
@@ -64,20 +69,20 @@ const DraggerProgress: FC<DraggerProgressProps> = (props) => {
               className={`${classPrefix}-upload__dragger-progress-cancel`}
               onClick={handleRemove}
             >
-              取消上传
+              {progressText.cancel}
             </Button>
             <Button theme="primary" variant="text" onClick={onUpload}>
-              点击上传
+              {progressText.start}
             </Button>
           </div>
         )}
         {showResultOperate && (
           <div className="t-upload__dragger-btns">
             <Button theme="primary" variant="text" className="t-upload__dragger-progress-cancel" onClick={reUpload}>
-              重新上传
+              {progressText.reupload}
             </Button>
             <Button theme="primary" variant="text" onClick={handleRemove}>
-              删除
+              {progressText.delete}
             </Button>
           </div>
         )}

diff --git a/src/upload/themes/flow-list/file-list.tsx b/src/upload/themes/flow-list/file-list.tsx
@@ -10,25 +10,27 @@ type FileListProps = CommonListProps & Pick<FlowListProps, 'showUploadProgress'
 
 const FileList = (props: FileListProps) => {
   const { listFiles, showInitial, renderDragger, showUploadProgress, remove } = props;
-  const { classPrefix: prefix } = useConfig();
+  const { classPrefix: prefix, locale } = useConfig();
   const UPLOAD_NAME = `${prefix}-upload`;
+  const { progress: progressText, infoTable: infoText } = locale.upload;
+
   const renderStatus = (file: UploadFile) => {
     const STATUS_MAP = {
       success: {
         icon: <CheckCircleFilledIcon />,
-        text: '上传成功',
+        text: progressText.success,
       },
       fail: {
         icon: <ErrorCircleFilledIcon />,
-        text: '上传失败',
+        text: progressText.fail,
       },
       progress: {
         icon: <Loading />,
-        text: `上传中 ${Math.min(file.percent, 99)}%`,
+        text: `${progressText.uploading} ${Math.min(file.percent, 99)}%`,
       },
       waiting: {
         icon: <TimeFilledIcon />,
-        text: '待上传',
+        text: progressText.waiting,
       },
     };
 
@@ -45,10 +47,10 @@ const FileList = (props: FileListProps) => {
     <table className={`${UPLOAD_NAME}__flow-table`}>
       <thead>
         <tr>
-          <th>文件名</th>
-          <th>大小</th>
-          <th>状态</th>
-          <th>操作</th>
+          <th>{infoText.name}</th>
+          <th>{infoText.size}</th>
+          <th>{infoText.status}</th>
+          <th>{infoText.operation}</th>
         </tr>
       </thead>
       <tbody>
@@ -67,7 +69,7 @@ const FileList = (props: FileListProps) => {
                 className={`${UPLOAD_NAME}__flow-button`}
                 onClick={(e: MouseEvent<HTMLElement>) => remove({ e, index, file })}
               >
-                删除
+                {progressText.delete}
               </span>
             </td>
           </tr>