Skip to content

Commit 9031988

Browse files
authored
Add ids to enums (#713)
* Add ids to enums * Add enum deleted translation
1 parent ab5307c commit 9031988

File tree

8 files changed

+91
-43
lines changed

8 files changed

+91
-43
lines changed

src/components/EditorHeader/ControlPanel.jsx

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ export default function ControlPanel({
167167
} else if (a.element === ObjectType.TYPE) {
168168
deleteType(a.data.type.id, false);
169169
} else if (a.element === ObjectType.ENUM) {
170-
deleteEnum(enums.length - 1, false);
170+
deleteEnum(a.data.enum.id, false);
171171
}
172172
setRedoStack((prev) => [...prev, a]);
173173
} else if (a.action === Action.MOVE) {
@@ -201,7 +201,7 @@ export default function ControlPanel({
201201
} else if (a.element === ObjectType.TYPE) {
202202
addType(a.data, false);
203203
} else if (a.element === ObjectType.ENUM) {
204-
addEnum({ id: a.id, ...a.data }, false);
204+
addEnum(a.data, false);
205205
}
206206
setRedoStack((prev) => [...prev, a]);
207207
} else if (a.action === Action.EDIT) {
@@ -339,7 +339,7 @@ export default function ControlPanel({
339339
} else if (a.element === ObjectType.TYPE) {
340340
addType(a.data, false);
341341
} else if (a.element === ObjectType.ENUM) {
342-
addEnum(null, false);
342+
addEnum(a.data, false);
343343
}
344344
setUndoStack((prev) => [...prev, a]);
345345
} else if (a.action === Action.MOVE) {
@@ -372,7 +372,7 @@ export default function ControlPanel({
372372
} else if (a.element === ObjectType.TYPE) {
373373
deleteType(a.data.type.id, false);
374374
} else if (a.element === ObjectType.ENUM) {
375-
deleteEnum(a.id, false);
375+
deleteEnum(a.data.enum.id, false);
376376
}
377377
setUndoStack((prev) => [...prev, a]);
378378
} else if (a.action === Action.EDIT) {
@@ -781,11 +781,24 @@ export default function ControlPanel({
781781
setUndoStack([]);
782782
setRedoStack([]);
783783
if (databases[database].hasTypes) {
784-
setTypes(diagram.types ?? []);
785-
}
786-
if (databases[database].hasEnums) {
787-
setEnums(diagram.enums ?? []);
784+
setTypes(
785+
diagram.types.map((t) =>
786+
t.id
787+
? t
788+
: {
789+
...t,
790+
id: nanoid(),
791+
fields: t.fields.map((f) =>
792+
f.id ? f : { ...f, id: nanoid() },
793+
),
794+
},
795+
),
796+
);
788797
}
798+
setEnums(
799+
diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
800+
[],
801+
);
789802
window.name = `d ${diagram.id}`;
790803
} else {
791804
window.name = "";

src/components/EditorHeader/Modal/Modal.jsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import Rename from "./Rename";
4141
import SetTableWidth from "./SetTableWidth";
4242
import Share from "./Share";
4343
import { IdContext } from "../../Workspace";
44+
import { nanoid } from "nanoid";
4445

4546
const extensionToLanguage = {
4647
md: "markdown",
@@ -129,11 +130,24 @@ export default function Modal({
129130
setUndoStack([]);
130131
setRedoStack([]);
131132
if (databases[database].hasTypes) {
132-
setTypes(diagram.types ?? []);
133-
}
134-
if (databases[database].hasEnums) {
135-
setEnums(diagram.enums ?? []);
133+
setTypes(
134+
diagram.types.map((t) =>
135+
t.id
136+
? t
137+
: {
138+
...t,
139+
id: nanoid(),
140+
fields: t.fields.map((f) =>
141+
f.id ? f : { ...f, id: nanoid() },
142+
),
143+
},
144+
),
145+
);
136146
}
147+
setEnums(
148+
diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
149+
[],
150+
);
137151
window.name = `d ${diagram.id}`;
138152
setSaveState(State.SAVING);
139153
} else {

src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useDiagram, useEnums, useLayout, useUndoRedo } from "../../../hooks";
55
import { Action, ObjectType } from "../../../data/constants";
66
import { useTranslation } from "react-i18next";
77

8-
export default function EnumDetails({ data, i }) {
8+
export default function EnumDetails({ data }) {
99
const { t } = useTranslation();
1010
const { layout } = useLayout();
1111
const { deleteEnum, updateEnum } = useEnums();
@@ -23,7 +23,7 @@ export default function EnumDetails({ data, i }) {
2323
placeholder={t("name")}
2424
validateStatus={data.name.trim() === "" ? "error" : "default"}
2525
onChange={(value) => {
26-
updateEnum(i, { name: value });
26+
updateEnum(data.id, { name: value });
2727
tables.forEach((table) => {
2828
table.fields.forEach((field) => {
2929
if (field.type.toLowerCase() === data.name.toLowerCase()) {
@@ -52,7 +52,7 @@ export default function EnumDetails({ data, i }) {
5252
{
5353
action: Action.EDIT,
5454
element: ObjectType.ENUM,
55-
id: i,
55+
id: data.id,
5656
undo: editField,
5757
redo: { name: e.target.value },
5858
updatedFields,
@@ -75,8 +75,7 @@ export default function EnumDetails({ data, i }) {
7575
validateStatus={data.values.length === 0 ? "error" : "default"}
7676
onChange={(v) => {
7777
if (layout.readOnly) return;
78-
79-
updateEnum(i, { values: v });
78+
updateEnum(data.id, { values: v });
8079
}}
8180
onFocus={() => setEditField({ values: data.values })}
8281
onBlur={() => {
@@ -87,7 +86,7 @@ export default function EnumDetails({ data, i }) {
8786
{
8887
action: Action.EDIT,
8988
element: ObjectType.ENUM,
90-
id: i,
89+
id: data.id,
9190
undo: editField,
9291
redo: { values: data.values },
9392
message: t("edit_enum", {
@@ -104,7 +103,7 @@ export default function EnumDetails({ data, i }) {
104103
type="danger"
105104
icon={<IconDeleteStroked />}
106105
disabled={layout.readOnly}
107-
onClick={() => deleteEnum(i, true)}
106+
onClick={() => deleteEnum(data.id, true)}
108107
>
109108
{t("delete")}
110109
</Button>

src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,18 @@ export default function EnumsTab() {
3030
<Empty title={t("no_enums")} text={t("no_enums_text")} />
3131
) : (
3232
<Collapse accordion>
33-
{enums.map((e, i) => (
33+
{enums.map((e) => (
3434
<Collapse.Panel
35-
key={`enum_${i}`}
36-
id={`scroll_enum_${i}`}
35+
key={`enum_${e.id}`}
36+
id={`scroll_enum_${e.id}`}
3737
header={
3838
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
3939
{e.name}
4040
</div>
4141
}
42-
itemKey={`${i}`}
42+
itemKey={e.id}
4343
>
44-
<EnumDetails data={e} i={i} />
44+
<EnumDetails data={e} />
4545
</Collapse.Panel>
4646
))}
4747
</Collapse>

src/components/EditorSidePanel/EnumsTab/SearchBar.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ export default function SearchBar() {
3030
emptyContent={<div className="p-3 popover-theme">{t("not_found")}</div>}
3131
onChange={(v) => setValue(v)}
3232
onSelect={(v) => {
33-
const i = enums.findIndex((t) => t.name === v);
33+
const e = enums.find((t) => t.name === v);
3434
document
35-
.getElementById(`scroll_enum_${i}`)
35+
.getElementById(`scroll_enum_${e.id}`)
3636
.scrollIntoView({ behavior: "smooth" });
3737
}}
3838
className="w-full"

src/components/Workspace.jsx

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,9 @@ export default function WorkSpace() {
216216
}
217217
}
218218
if (databases[database].hasEnums) {
219-
setEnums(d.enums ?? []);
219+
setEnums(
220+
d.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ?? [],
221+
);
220222
}
221223
window.name = `d ${d.id}`;
222224
} else {
@@ -274,7 +276,11 @@ export default function WorkSpace() {
274276
}
275277
}
276278
if (databases[database].hasEnums) {
277-
setEnums(diagram.enums ?? []);
279+
setEnums(
280+
diagram.enums.map((e) =>
281+
!e.id ? { ...e, id: nanoid() } : e,
282+
) ?? [],
283+
);
278284
}
279285
window.name = `d ${diagram.id}`;
280286
} else {
@@ -329,7 +335,11 @@ export default function WorkSpace() {
329335
}
330336
}
331337
if (databases[database].hasEnums) {
332-
setEnums(diagram.enums ?? []);
338+
setEnums(
339+
diagram.enums.map((e) =>
340+
!e.id ? { ...e, id: nanoid() } : e,
341+
) ?? [],
342+
);
333343
}
334344
} else {
335345
if (selectedDb === "") setShowSelectDbModal(true);
@@ -376,7 +386,11 @@ export default function WorkSpace() {
376386
}
377387
}
378388
if (databases[parsedDiagram.database].hasEnums) {
379-
setEnums(parsedDiagram.enums ?? []);
389+
setEnums(
390+
parsedDiagram.enums.map((e) =>
391+
!e.id ? { ...e, id: nanoid() } : e,
392+
) ?? [],
393+
);
380394
}
381395
} catch (e) {
382396
console.log(e);

src/context/EnumsContext.jsx

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Action, ObjectType } from "../data/constants";
33
import { Toast } from "@douyinfe/semi-ui";
44
import { useTranslation } from "react-i18next";
55
import { useUndoRedo } from "../hooks";
6+
import { nanoid } from "nanoid";
67

78
export const EnumsContext = createContext(null);
89

@@ -12,26 +13,29 @@ export default function EnumsContextProvider({ children }) {
1213
const { setUndoStack, setRedoStack } = useUndoRedo();
1314

1415
const addEnum = (data, addToHistory = true) => {
16+
const newEnum = {
17+
id: nanoid(),
18+
name: `enum_${enums.length}`,
19+
values: [],
20+
};
1521
if (data) {
1622
setEnums((prev) => {
1723
const temp = prev.slice();
18-
temp.splice(data.id, 0, data);
24+
temp.splice(data.index, 0, data.enum);
1925
return temp;
2026
});
2127
} else {
22-
setEnums((prev) => [
23-
...prev,
24-
{
25-
name: `enum_${prev.length}`,
26-
values: [],
27-
},
28-
]);
28+
setEnums((prev) => [...prev, newEnum]);
2929
}
3030
if (addToHistory) {
3131
setUndoStack((prev) => [
3232
...prev,
3333
{
3434
action: Action.ADD,
35+
data: {
36+
index: enums.length,
37+
enum: data?.enum ?? newEnum,
38+
},
3539
element: ObjectType.ENUM,
3640
message: t("add_enum"),
3741
},
@@ -41,28 +45,31 @@ export default function EnumsContextProvider({ children }) {
4145
};
4246

4347
const deleteEnum = (id, addToHistory = true) => {
48+
const enumIndex = enums.findIndex((e) => e.id === id);
4449
if (addToHistory) {
4550
Toast.success(t("enum_deleted"));
4651
setUndoStack((prev) => [
4752
...prev,
4853
{
4954
action: Action.DELETE,
5055
element: ObjectType.ENUM,
51-
id: id,
52-
data: enums[id],
56+
data: {
57+
index: enumIndex,
58+
enum: enums[enumIndex],
59+
},
5360
message: t("delete_enum", {
54-
enumName: enums[id].name,
61+
enumName: enums[enumIndex].name,
5562
}),
5663
},
5764
]);
5865
setRedoStack([]);
5966
}
60-
setEnums((prev) => prev.filter((_, i) => i !== id));
67+
setEnums((prev) => prev.filter((e) => e.id !== id));
6168
};
6269

6370
const updateEnum = (id, values) => {
6471
setEnums((prev) =>
65-
prev.map((e, i) => (i === id ? { ...e, ...values } : e)),
72+
prev.map((e) => (e.id === id ? { ...e, ...values } : e)),
6673
);
6774
};
6875

src/i18n/locales/en.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ const en = {
238238
enum_w_no_name: "Found enum with no name",
239239
enum_w_no_values: "Found enum '{{enumName}}' with no values",
240240
duplicate_enums: "Duplicate enums with the name '{{enumName}}'",
241+
enum_deleted: "Enum deleted",
241242
no_enums: "No enums",
242243
no_enums_text: "Define enums here",
243244
declare_array: "Declare array",

0 commit comments

Comments
 (0)