Skip to content

Commit 002e240

Browse files
1ilit1ilit
authored
Merge pull request #110 from drawdb-io/i18n
Configure i18n and add simplified Chinese (#99)
2 parents 0366bb8 + 4e93212 commit 002e240

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1835
-594
lines changed

‎package-lock.json

+73-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,16 @@
2424
"file-saver": "^2.0.5",
2525
"framer-motion": "^10.18.0",
2626
"html-to-image": "^1.11.11",
27+
"i18next": "^23.11.4",
28+
"i18next-browser-languagedetector": "^8.0.0",
2729
"jsonschema": "^1.4.1",
2830
"jspdf": "^2.5.1",
2931
"lexical": "^0.12.5",
3032
"node-sql-parser": "^5.0.0",
3133
"react": "^18.2.0",
3234
"react-dom": "^18.2.0",
3335
"react-hotkeys-hook": "^4.4.1",
36+
"react-i18next": "^14.1.1",
3437
"react-router-dom": "^6.21.0",
3538
"url": "^0.11.1"
3639
},

‎src/components/ColorPalette.jsx renamed to ‎src/components/ColorPicker.jsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { Button } from "@douyinfe/semi-ui";
22
import { IconCheckboxTick } from "@douyinfe/semi-icons";
33
import { tableThemes } from "../data/constants";
4+
import { useTranslation } from "react-i18next";
45

56
export default function ColorPalette({
67
currentColor,
78
onClearColor,
89
onPickColor,
910
}) {
11+
const { t } = useTranslation();
1012
return (
1113
<div>
1214
<div className="flex justify-between items-center p-2">
13-
<div className="font-medium">Theme</div>
15+
<div className="font-medium">{t("theme")}</div>
1416
<Button type="tertiary" size="small" onClick={onClearColor}>
15-
Clear
17+
{t("clear")}
1618
</Button>
1719
</div>
1820
<hr />

‎src/components/EditorCanvas/Area.jsx

+16-11
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from "react";
2-
import { Button, Popover, Input, Toast } from "@douyinfe/semi-ui";
2+
import { Button, Popover, Input } from "@douyinfe/semi-ui";
33
import { IconEdit, IconDeleteStroked } from "@douyinfe/semi-icons";
44
import {
55
Tab,
@@ -17,7 +17,8 @@ import {
1717
useSaveState,
1818
useTransform,
1919
} from "../../hooks";
20-
import ColorPalette from "../ColorPalette";
20+
import ColorPalette from "../ColorPicker";
21+
import { useTranslation } from "react-i18next";
2122

2223
export default function Area({ data, onMouseDown, setResize, setInitCoords }) {
2324
const [hovered, setHovered] = useState(false);
@@ -191,14 +192,15 @@ function EditPopoverContent({ data }) {
191192
const { setSaveState } = useSaveState();
192193
const { updateArea, deleteArea } = useAreas();
193194
const { setUndoStack, setRedoStack } = useUndoRedo();
195+
const { t } = useTranslation();
194196

195197
return (
196198
<div className="popover-theme">
197-
<div className="font-semibold mb-2 ms-1">Edit subject area</div>
199+
<div className="font-semibold mb-2 ms-1">{t("edit")}</div>
198200
<div className="w-[280px] flex items-center mb-2">
199201
<Input
200202
value={data.name}
201-
placeholder="Name"
203+
placeholder={t("name")}
202204
className="me-2"
203205
onChange={(value) => updateArea(data.id, { name: value })}
204206
onFocus={(e) => setEditField({ name: e.target.value })}
@@ -212,7 +214,10 @@ function EditPopoverContent({ data }) {
212214
aid: data.id,
213215
undo: editField,
214216
redo: { name: e.target.value },
215-
message: `Edit area name to ${e.target.value}`,
217+
message: t("edit_area", {
218+
areaName: e.target.value,
219+
extra: "[name]",
220+
}),
216221
},
217222
]);
218223
setRedoStack([]);
@@ -232,7 +237,10 @@ function EditPopoverContent({ data }) {
232237
aid: data.id,
233238
undo: { color: data.color },
234239
redo: { color: c },
235-
message: `Edit area color to ${c}`,
240+
message: t("edit_area", {
241+
areaName: data.name,
242+
extra: "[color]",
243+
}),
236244
},
237245
]);
238246
setRedoStack([]);
@@ -263,12 +271,9 @@ function EditPopoverContent({ data }) {
263271
icon={<IconDeleteStroked />}
264272
type="danger"
265273
block
266-
onClick={() => {
267-
Toast.success(`Area deleted!`);
268-
deleteArea(data.id);
269-
}}
274+
onClick={() => deleteArea(data.id, true)}
270275
>
271-
Delete
276+
{t("delete")}
272277
</Button>
273278
</div>
274279
</div>

‎src/components/EditorCanvas/Canvas.jsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ import {
2020
useNotes,
2121
useLayout,
2222
} from "../../hooks";
23+
import { useTranslation } from "react-i18next";
24+
import { diagram } from "../../data/heroDiagram";
2325

2426
export default function Canvas() {
27+
const { t } = useTranslation();
2528
const { tables, updateTable, relationships, addRelationship } = useTables();
2629
const { areas, updateArea } = useAreas();
2730
const { notes, updateNote } = useNotes();
@@ -278,7 +281,10 @@ export default function Canvas() {
278281
toX: info.x,
279282
toY: info.y,
280283
id: dragging.id,
281-
message: `Move ${info.name} to (${info.x}, ${info.y})`,
284+
message: t("move_element", {
285+
coords: `(${info.x}, ${info.y})`,
286+
name: info.name,
287+
}),
282288
},
283289
]);
284290
setRedoStack([]);
@@ -291,7 +297,10 @@ export default function Canvas() {
291297
action: Action.PAN,
292298
undo: { x: panning.x, y: panning.y },
293299
redo: transform.pan,
294-
message: `Move diagram to (${transform.pan?.x}, ${transform.pan?.y})`,
300+
message: t("move_element", {
301+
coords: `(${transform?.pan.x}, ${transform?.pan.y})`,
302+
name: diagram,
303+
}),
295304
},
296305
]);
297306
setRedoStack([]);
@@ -321,7 +330,10 @@ export default function Canvas() {
321330
height: initCoords.height,
322331
},
323332
redo: areas[areaResize.id],
324-
message: `Resize area`,
333+
message: t("edit_area", {
334+
areaName: areas[areaResize.id].name,
335+
extra: "[resize]",
336+
}),
325337
},
326338
]);
327339
setRedoStack([]);
@@ -350,7 +362,7 @@ export default function Canvas() {
350362
tables[linkingLine.startTableId].fields[linkingLine.startFieldId].type !==
351363
tables[hoveredTable.tableId].fields[hoveredTable.field].type
352364
) {
353-
Toast.info("Cannot connect");
365+
Toast.info(t("connot_connect"));
354366
return;
355367
}
356368
if (

‎src/components/EditorCanvas/Note.jsx

+22-12
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
State,
77
noteThemes,
88
} from "../../data/constants";
9-
import { Input, Button, Popover, Toast } from "@douyinfe/semi-ui";
9+
import { Input, Button, Popover } from "@douyinfe/semi-ui";
1010
import {
1111
IconEdit,
1212
IconDeleteStroked,
@@ -19,6 +19,7 @@ import {
1919
useNotes,
2020
useSaveState,
2121
} from "../../hooks";
22+
import { useTranslation } from "react-i18next";
2223

2324
export default function Note({ data, onMouseDown }) {
2425
const w = 180;
@@ -27,6 +28,7 @@ export default function Note({ data, onMouseDown }) {
2728
const [editField, setEditField] = useState({});
2829
const [hovered, setHovered] = useState(false);
2930
const { layout } = useLayout();
31+
const { t } = useTranslation();
3032
const { setSaveState } = useSaveState();
3133
const { updateNote, deleteNote } = useNotes();
3234
const { setUndoStack, setRedoStack } = useUndoRedo();
@@ -54,7 +56,10 @@ export default function Note({ data, onMouseDown }) {
5456
nid: data.id,
5557
undo: editField,
5658
redo: { content: e.target.value, height: newHeight },
57-
message: `Edit note content to "${e.target.value}"`,
59+
message: t("edit_note", {
60+
noteTitle: e.target.value,
61+
extra: "[content]",
62+
}),
5863
},
5964
]);
6065
setRedoStack([]);
@@ -168,11 +173,11 @@ export default function Note({ data, onMouseDown }) {
168173
stopPropagation
169174
content={
170175
<div className="popover-theme">
171-
<div className="font-semibold mb-2 ms-1">Edit note</div>
176+
<div className="font-semibold mb-2 ms-1">{t("edit")}</div>
172177
<div className="w-[280px] flex items-center mb-2">
173178
<Input
174179
value={data.title}
175-
placeholder="Title"
180+
placeholder={t("title")}
176181
className="me-2"
177182
onChange={(value) =>
178183
updateNote(data.id, { title: value })
@@ -190,7 +195,10 @@ export default function Note({ data, onMouseDown }) {
190195
nid: data.id,
191196
undo: editField,
192197
redo: { title: e.target.value },
193-
message: `Edit note title to "${e.target.value}"`,
198+
message: t("edit_note", {
199+
noteTitle: e.target.value,
200+
extra: "[title]",
201+
}),
194202
},
195203
]);
196204
setRedoStack([]);
@@ -199,7 +207,9 @@ export default function Note({ data, onMouseDown }) {
199207
<Popover
200208
content={
201209
<div className="popover-theme">
202-
<div className="font-medium mb-1">Theme</div>
210+
<div className="font-medium mb-1">
211+
{t("theme")}
212+
</div>
203213
<hr />
204214
<div className="py-3">
205215
{noteThemes.map((c) => (
@@ -216,7 +226,10 @@ export default function Note({ data, onMouseDown }) {
216226
nid: data.id,
217227
undo: { color: data.color },
218228
redo: { color: c },
219-
message: `Edit note color to ${c}`,
229+
message: t("edit_note", {
230+
noteTitle: data.title,
231+
extra: "[color]",
232+
}),
220233
},
221234
]);
222235
setRedoStack([]);
@@ -249,12 +262,9 @@ export default function Note({ data, onMouseDown }) {
249262
icon={<IconDeleteStroked />}
250263
type="danger"
251264
block
252-
onClick={() => {
253-
Toast.success(`Note deleted!`);
254-
deleteNote(data.id);
255-
}}
265+
onClick={() => deleteNote(data.id, true)}
256266
>
257-
Delete
267+
{t("delete")}
258268
</Button>
259269
</div>
260270
</div>

0 commit comments

Comments
 (0)