Configure i18n and add simplified chinese (#99)

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -8,16 +8,17 @@ import {
   Button,
   Card,
   Popover,
-  Toast,
 } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { useTables, useUndoRedo } from "../../../hooks";
 import { Action, ObjectType, defaultBlue } from "../../../data/constants";
-import ColorPalette from "../../ColorPalette";
+import ColorPalette from "../../ColorPicker";
 import TableField from "./TableField";
 import IndexDetails from "./IndexDetails";
+import { useTranslation } from "react-i18next";
 
 export default function TableInfo({ data }) {
+  const { t } = useTranslation();
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const { deleteTable, updateTable, updateField, setRelationships } =
     useTables();
@@ -31,11 +32,11 @@ export default function TableInfo({ data }) {
   return (
     <div>
       <div className="flex items-center mb-2.5">
-        <div className="text-md font-semibold">Name: </div>
+        <div className="text-md font-semibold break-keep">{t("name")}: </div>
         <Input
           value={data.name}
           validateStatus={data.name === "" ? "error" : "default"}
-          placeholder="Name"
+          placeholder={t("name")}
           className="ms-2"
           onChange={(value) => updateTable(data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
@@ -50,7 +51,10 @@ export default function TableInfo({ data }) {
                 tid: data.id,
                 undo: editField,
                 redo: { name: e.target.value },
-                message: `Edit table name to ${e.target.value}`,
+                message: t("edit_table", {
+                  tableName: e.target.value,
+                  extra: "[name]",
+                }),
               },
             ]);
             setRedoStack([]);
@@ -149,7 +153,7 @@ export default function TableInfo({ data }) {
             onChange={(itemKey) => setIndexActiveKey(itemKey)}
             accordion
           >
-            <Collapse.Panel header="Indices" itemKey="1">
+            <Collapse.Panel header={t("indices")} itemKey="1">
               {data.indices.map((idx, k) => (
                 <IndexDetails
                   key={"index_" + k}
@@ -172,12 +176,12 @@ export default function TableInfo({ data }) {
         headerLine={false}
       >
         <Collapse keepDOM lazyRender>
-          <Collapse.Panel header="Comment" itemKey="1">
+          <Collapse.Panel header={t("comment")} itemKey="1">
             <TextArea
               field="comment"
               value={data.comment}
               autosize
-              placeholder="Add comment"
+              placeholder={t("comment")}
               rows={1}
               onChange={(value) =>
                 updateTable(data.id, { comment: value }, false)
@@ -194,7 +198,10 @@ export default function TableInfo({ data }) {
                     tid: data.id,
                     undo: editField,
                     redo: { comment: e.target.value },
-                    message: `Edit table comment to ${e.target.value}`,
+                    message: t("edit_table", {
+                      tableName: e.target.value,
+                      extra: "[comment]",
+                    }),
                   },
                 ]);
                 setRedoStack([]);
@@ -220,7 +227,10 @@ export default function TableInfo({ data }) {
                         tid: data.id,
                         undo: { color: data.color },
                         redo: { color: defaultBlue },
-                        message: `Edit table color to default`,
+                        message: t("edit_table", {
+                          tableName: data.name,
+                          extra: "[color]",
+                        }),
                       },
                     ]);
                     setRedoStack([]);
@@ -236,7 +246,10 @@ export default function TableInfo({ data }) {
                         tid: data.id,
                         undo: { color: data.color },
                         redo: { color: c },
-                        message: `Edit table color to ${c}`,
+                        message: t("edit_table", {
+                          tableName: data.name,
+                          extra: "[color]",
+                        }),
                       },
                     ]);
                     setRedoStack([]);
@@ -267,7 +280,10 @@ export default function TableInfo({ data }) {
                   element: ObjectType.TABLE,
                   component: "index_add",
                   tid: data.id,
-                  message: `Add index`,
+                  message: t("edit_table", {
+                    tableName: data.name,
+                    extra: "[add index]",
+                  }),
                 },
               ]);
               setRedoStack([]);
@@ -284,7 +300,7 @@ export default function TableInfo({ data }) {
               });
             }}
           >
-            Add index
+            {t("add_index")}
           </Button>
         </Col>
         <Col span={6}>
@@ -297,7 +313,10 @@ export default function TableInfo({ data }) {
                   element: ObjectType.TABLE,
                   component: "field_add",
                   tid: data.id,
-                  message: `Add field`,
+                  message: t("edit_table", {
+                    tableName: data.name,
+                    extra: "[add field]",
+                  }),
                 },
               ]);
               setRedoStack([]);
@@ -321,17 +340,14 @@ export default function TableInfo({ data }) {
             }}
             block
           >
-            Add field
+            {t("add_field")}
           </Button>
         </Col>
         <Col span={3}>
           <Button
             icon={<IconDeleteStroked />}
             type="danger"
-            onClick={() => {
-              Toast.success(`Table deleted!`);
-              deleteTable(data.id);
-            }}
+            onClick={() => deleteTable(data.id)}
           />
         </Col>
       </Row>