feat(flat-component): add CloudStorage i18n (#640)

Co-authored-by: Black-Hole <158blackhole@gmail.com>
netless-io · May 17, 2021 · 6903937 · 6903937
1 parent 031282c
commit 6903937
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 17 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -16,10 +16,14 @@
     "vite",
     "vitejs"
   ],
-  "i18n-ally.localesPaths": ["./packages/flat-i18n/locales/"],
+  "i18n-ally.localesPaths": [
+    "./packages/flat-i18n/locales/"
+  ],
   "i18n-ally.enabledFrameworks": [
     "react",
     "i18next"
   ],
-  "i18n-ally.keystyle": "flat"
-}
+  "i18n-ally.keystyle": "flat",
+  "i18n-ally.sourceLanguage": "zh-CN",
+  "i18n-ally.displayLanguage": "zh-CN",
+}
diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/index.tsx
@@ -12,6 +12,7 @@ import {
     CloudStorageFileListFileName,
     CloudStorageFileListFileNameProps,
 } from "./CloudStorageFileListFileName";
+import { useTranslation } from "react-i18next";
 
 export interface CloudStorageFileListProps
     extends Pick<
@@ -45,6 +46,7 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
     renamingFileUUID,
     onRename,
 }) => {
+    const { t } = useTranslation();
     const popupContainerRef = useRef<HTMLDivElement>(null);
     const getPopupContainer = useCallback(() => popupContainerRef.current || document.body, []);
 
@@ -53,9 +55,9 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
             {
                 title: (
                     <>
-                        <span className="cloud-storage-file-list-title">文件名称</span>
+                        <span className="cloud-storage-file-list-title">{t("file-name")}</span>
                         <CloudStorageFileListHeadTip
-                            title="支持上传 PPT、PPTX、DOC、DOCX、PDF、PNG、JPG、GIF 文件格式"
+                            title={t("supported-file-types")}
                             placement="right"
                             getPopupContainer={getPopupContainer}
                         />
@@ -80,7 +82,7 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
                 },
             },
             {
-                title: <span className="cloud-storage-file-list-title">大小</span>,
+                title: <span className="cloud-storage-file-list-title">{t("file-size")}</span>,
                 dataIndex: "fileSize",
                 ellipsis: true,
                 width: 100,
@@ -94,7 +96,7 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
                 },
             },
             {
-                title: <span className="cloud-storage-file-list-title">修改日期</span>,
+                title: <span className="cloud-storage-file-list-title">{t("edit-date")}</span>,
                 dataIndex: "createAt",
                 ellipsis: true,
                 width: 170,
@@ -116,6 +118,7 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
             onRename,
             renamingFileUUID,
             titleClickable,
+            t,
         ],
     );
 
@@ -139,7 +142,7 @@ export const CloudStorageFileList: React.FC<CloudStorageFileListProps> = ({
                 <div className="cloud-storage-file-list-empty">
                     <div className="cloud-storage-file-list-empty-content">
                         <img width={124} height={124} src={emptyFileSVG} />
-                        <div className="cloud-storage-file-list-empty-text">暂无数据</div>
+                        <div className="cloud-storage-file-list-empty-text">{t("no-data")}</div>
                     </div>
                 </div>
             )}

diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageFileTitle/index.tsx
@@ -13,6 +13,7 @@ import React from "react";
 import classNames from "classnames";
 import { CloudStorageConvertStatusType, CloudStorageFileName } from "../types";
 import { CloudStorageFileTitleRename } from "./CloudStorageFileTitleRename";
+import { useTranslation } from "react-i18next";
 
 export interface CloudStorageFileTitleProps
     extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
@@ -46,14 +47,14 @@ export const CloudStorageFileTitle = React.memo<CloudStorageFileTitleProps>(
         onRename,
         ...restProps
     }) {
+        const { t } = useTranslation();
         const isConverting = convertStatus === "converting";
         const isConvertError = !isConverting && convertStatus === "error";
 
         return (
             <span
-                title={`${
-                    isConvertError ? "（转码失败）" : isConverting ? "（转码中...）" : ""
-                }${fileName}`}
+                title={`${isConvertError ? t('transcoding-failure') : isConverting ? t('transcoding-in-progress') : ""
+                    }${fileName}`}
                 {...restProps}
                 className={classNames(restProps.className, "cloud-storage-file-title", {
                     "is-convert-ready": !isConverting && !isConvertError,

diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadItem/index.tsx
@@ -8,6 +8,7 @@ import { Button } from "antd";
 import classNames from "classnames";
 import { CloudStorageFileTitle } from "../CloudStorageFileTitle";
 import { CloudStorageUploadTask } from "../types";
+import { useTranslation } from "react-i18next";
 
 export interface CloudStorageUploadItemProps
     extends Pick<CloudStorageUploadTask, "uploadID" | "fileName" | "percent" | "status"> {
@@ -29,6 +30,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
     onRetry,
     onCancel,
 }) => {
+    const { t } = useTranslation();
     return (
         <div className="cloud-storage-upload-item">
             <CloudStorageFileTitle fileUUID={uploadID} fileName={fileName} />
@@ -62,7 +64,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "error": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-error">上传失败</span>
+                        <span className="cloud-storage-upload-status is-error">{t('upload-fail')}</span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"
@@ -77,7 +79,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             case "success": {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status is-success">上传成功</span>
+                        <span className="cloud-storage-upload-status is-success">{t('upload-success')}</span>
                         <div className="cloud-storage-upload-status-btn">
                             <img width={22} height={22} src={checkSVG} aria-hidden />
                         </div>
@@ -87,7 +89,7 @@ export const CloudStorageUploadItem: React.FC<CloudStorageUploadItemProps> = ({
             default: {
                 return (
                     <>
-                        <span className="cloud-storage-upload-status">待上传</span>
+                        <span className="cloud-storage-upload-status">{t('pending-upload')}</span>
                         <Button
                             className="cloud-storage-upload-status-btn"
                             shape="circle"

diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageUploadTitle/index.tsx
@@ -3,6 +3,7 @@ import "./style.less";
 import { ExclamationCircleOutlined } from "@ant-design/icons";
 import { Progress } from "antd";
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 export interface CloudStorageUploadTitleProps {
     finishWithError?: boolean;
@@ -12,6 +13,7 @@ export interface CloudStorageUploadTitleProps {
 
 export const CloudStorageUploadTitle = React.memo<CloudStorageUploadTitleProps>(
     function CloudStorageUploadTitle({ finishWithError, finished, total }) {
+        const { t } = useTranslation();
         const percent = finished && total ? (finished / total) * 100 : 0;
         const isFinish = percent >= 100;
 
@@ -29,7 +31,7 @@ export const CloudStorageUploadTitle = React.memo<CloudStorageUploadTitleProps>(
                     />
                 )}
                 <h1 className="cloud-storage-upload-title-content">
-                    {finishWithError ? "上传异常" : isFinish ? "上传完成" : "传输列表"}
+                    {finishWithError ? t('upload-exception') : isFinish ? t('upload-completed') : t('transfer-list')}
                 </h1>
                 {!isFinish && !finishWithError && total && !Number.isNaN(finished) && (
                     <span className="cloud-storage-upload-title-count">

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -1 +1,15 @@
-{}
+{
+  "file-name": "File Name",
+  "file-size": "File Size",
+  "edit-date": "Last Updated",
+  "no-data": "No data",
+  "pending-upload": "To be uploaded",
+  "supported-file-types": "Support uploading PPT, PPTX, DOC, DOCX, PDF, PNG, JPG, GIF file formats",
+  "transcoding-failure": "(Transcoding failed)",
+  "transcoding-in-progress": "(Transcoding...)",
+  "transfer-list": "Transmission list",
+  "upload-completed": "Upload complete",
+  "upload-exception": "Uploading exception",
+  "upload-fail": "Upload failed",
+  "upload-success": "Successful"
+}
diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -1 +1,15 @@
-{}
+{
+  "edit-date": "修改日期",
+  "file-name": "文件名称",
+  "file-size": "大小",
+  "no-data": "暂无数据",
+  "pending-upload": "待上传",
+  "supported-file-types": "支持上传PPT，PPTX，DOC，DOCX，PDF，PNG，JPG，GIF文件格式",
+  "transcoding-failure": "（转码失败）",
+  "transcoding-in-progress": "（转码中...）",
+  "transfer-list": "传输列表",
+  "upload-completed": "上传完成",
+  "upload-exception": "上传异常",
+  "upload-fail": "上传失败",
+  "upload-success": "上传成功"
+}