Configure i18n and add simplified chinese (#99)

This commit is contained in:
1ilit
2024-05-16 06:44:39 +03:00
parent 9de091c990
commit 2b4b01c358
52 changed files with 1339 additions and 528 deletions

View File

@@ -5,11 +5,13 @@ import {
import { Upload, Banner } from "@douyinfe/semi-ui";
import { STATUS } from "../../../data/constants";
import { useAreas, useNotes, useTables } from "../../../hooks";
import { useTranslation } from "react-i18next";
export default function ImportDiagram({ setImportData, error, setError }) {
const { areas } = useAreas();
const { notes } = useNotes();
const { tables, relationships } = useTables();
const { t } = useTranslation();
const diagramIsEmpty = () => {
return (
@@ -84,8 +86,8 @@ export default function ImportDiagram({ setImportData, error, setError }) {
};
}}
draggable={true}
dragMainText="Drag and drop the file here or click to upload."
dragSubText="Support json and ddb"
dragMainText={t("drag_and_drop_files")}
dragSubText={t("support_json_and_ddb")}
accept="application/json,.ddb"
onRemove={() =>
setError({

View File

@@ -1,5 +1,6 @@
import { Upload, Checkbox, Banner } from "@douyinfe/semi-ui";
import { STATUS } from "../../../data/constants";
import { useTranslation } from "react-i18next";
export default function ImportSource({
importData,
@@ -7,6 +8,8 @@ export default function ImportSource({
error,
setError,
}) {
const { t } = useTranslation();
return (
<div>
<Upload
@@ -30,8 +33,8 @@ export default function ImportSource({
};
}}
draggable={true}
dragMainText="Drag and drop the file here or click to upload."
dragSubText="Upload an sql file to autogenerate your tables and columns."
dragMainText={t("drag_and_drop_files")}
dragSubText={t("upload_sql_to_generate_diagrams")}
accept=".sql"
onRemove={() => {
setError({
@@ -50,7 +53,7 @@ export default function ImportSource({
/>
<div>
<div className="text-xs mb-3 mt-1 opacity-80">
* For the time being loading only MySQL scripts is supported.
{t("only_mysql_supported")}
</div>
<Checkbox
aria-label="overwrite checkbox"
@@ -63,7 +66,7 @@ export default function ImportSource({
}))
}
>
Overwrite existing diagram
{t("overwrite_existing_diagram")}
</Checkbox>
<div className="mt-2">
{error.type === STATUS.ERROR ? (

View File

@@ -0,0 +1,30 @@
import { useTranslation } from "react-i18next";
import { useSettings } from "../../../hooks";
import { languages } from "../../../i18n/i18n";
export default function Language() {
const { settings } = useSettings();
const { i18n } = useTranslation();
return (
<div className="grid grid-cols-3 gap-4">
{languages.map((l) => (
<button
key={l.code}
onClick={() => i18n.changeLanguage(l.code)}
className={`space-y-1 py-3 px-4 rounded-md border-2 ${
settings.mode === "dark"
? "bg-zinc-700 hover:bg-zinc-600"
: "bg-zinc-100 hover:bg-zinc-200"
} ${i18n.resolvedLanguage === l.code ? "border-zinc-400" : "border-transparent"}`}
>
<div className="flex justify-between items-center">
<div className="font-semibold">{l.native_name}</div>
<div className="opacity-60">{l.code}</div>
</div>
<div className="text-start">{l.name}</div>
</button>
))}
</div>
);
}

View File

@@ -27,11 +27,13 @@ import New from "./New";
import ImportDiagram from "./ImportDiagram";
import ImportSource from "./ImportSource";
import SetTableWidth from "./SetTableWidth";
import Language from "./Language";
import CodeMirror from "@uiw/react-codemirror";
import { sql } from "@codemirror/lang-sql";
import { vscodeDark } from "@uiw/codemirror-theme-vscode";
import { json } from "@codemirror/lang-json";
import { githubLight } from "@uiw/codemirror-theme-github";
import { useTranslation } from "react-i18next";
const languageExtension = {
sql: [sql()],
@@ -49,6 +51,7 @@ export default function Modal({
exportData,
setExportData,
}) {
const { t } = useTranslation();
const { setTables, setRelationships } = useTables();
const { setNotes } = useNotes();
const { setAreas } = useAreas();
@@ -239,7 +242,7 @@ export default function Modal({
case MODAL.SAVEAS:
return (
<Input
placeholder="Diagram name"
placeholder={t("name")}
value={saveAsTitle}
onChange={(v) => setSaveAsTitle(v)}
/>
@@ -261,10 +264,10 @@ export default function Modal({
theme={settings.mode === "dark" ? vscodeDark : githubLight}
/>
)}
<div className="text-sm font-semibold mt-2">Filename:</div>
<div className="text-sm font-semibold mt-2">{t("filename")}:</div>
<Input
value={exportData.filename}
placeholder="Filename"
placeholder={t("filename")}
suffix={<div className="p-2">{`.${exportData.extension}`}</div>}
onChange={(value) =>
setExportData((prev) => ({ ...prev, filename: value }))
@@ -276,12 +279,14 @@ export default function Modal({
} else {
return (
<div className="text-center my-3">
<Spin tip="Loading..." size="large" />
<Spin tip={t("loading")} size="large" />
</div>
);
}
case MODAL.TABLE_WIDTH:
return <SetTableWidth />;
case MODAL.LANGUAGE:
return <Language />;
default:
return <></>;
}
@@ -326,7 +331,7 @@ export default function Modal({
(modal === MODAL.SAVEAS && saveAsTitle === "") ||
(modal === MODAL.IMPORT_SRC && importSource.src === ""),
}}
cancelText="Cancel"
cancelText={t("cancel")}
width={modal === MODAL.NEW ? 740 : 600}
>
{getModalBody()}

View File

@@ -2,9 +2,11 @@ import { db } from "../../../data/db";
import { useSettings } from "../../../hooks";
import { useLiveQuery } from "dexie-react-hooks";
import Thumbnail from "../../Thumbnail";
import { useTranslation } from "react-i18next";
export default function New({ selectedTemplateId, setSelectedTemplateId }) {
const { settings } = useSettings();
const { t } = useTranslation();
const templates = useLiveQuery(() => db.templates.toArray());
return (
@@ -17,7 +19,7 @@ export default function New({ selectedTemplateId, setSelectedTemplateId }) {
>
<Thumbnail i={0} diagram={{}} zoom={0.24} theme={settings.mode} />
</div>
<div className="text-center mt-1">Blank</div>
<div className="text-center mt-1">{t("blank")}</div>
</div>
{templates?.map((temp, i) => (
<div key={i} onClick={() => setSelectedTemplateId(temp.id)}>

View File

@@ -1,9 +1,11 @@
import { db } from "../../../data/db";
import { Banner } from "@douyinfe/semi-ui";
import { useLiveQuery } from "dexie-react-hooks";
import { useTranslation } from "react-i18next";
export default function Open({ selectedDiagramId, setSelectedDiagramId }) {
const diagrams = useLiveQuery(() => db.diagrams.toArray());
const { t } = useTranslation();
const getDiagramSize = (d) => {
const size = JSON.stringify(d).length;
@@ -32,9 +34,9 @@ export default function Open({ selectedDiagramId, setSelectedDiagramId }) {
<table className="w-full text-left border-separate border-spacing-x-0">
<thead>
<tr>
<th>Name</th>
<th>Last Modified</th>
<th>Size</th>
<th>{t("name")}</th>
<th>{t("last_modified")}</th>
<th>{t("size")}</th>
</tr>
</thead>
<tbody>

View File

@@ -1,9 +1,12 @@
import { Input } from "@douyinfe/semi-ui";
import { useTranslation } from "react-i18next";
export default function Rename({ title, setTitle }) {
const { t } = useTranslation();
return (
<Input
placeholder="Diagram name"
placeholder={t("name")}
value={title}
onChange={(v) => setTitle(v)}
/>