mirror of
https://github.com/drawdb-io/drawdb.git
synced 2025-10-22 11:23:54 +00:00
Configure i18n and add simplified chinese (#99)
This commit is contained in:
@@ -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({
|
||||
|
@@ -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 ? (
|
||||
|
30
src/components/EditorHeader/Modal/Language.jsx
Normal file
30
src/components/EditorHeader/Modal/Language.jsx
Normal 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>
|
||||
);
|
||||
}
|
@@ -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()}
|
||||
|
@@ -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)}>
|
||||
|
@@ -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>
|
||||
|
@@ -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)}
|
||||
/>
|
||||
|
Reference in New Issue
Block a user