From defe0679208f74027db09120ff6794d56bfe23bb Mon Sep 17 00:00:00 2001 From: XC <603550500@qq.com> Date: Wed, 4 Dec 2024 15:40:18 +0800 Subject: [PATCH] Detach SelectDbModal components to avoid useless rendering - add locales zh: pick_db generic generic_description --- src/components/Modal/SelectDbModal.jsx | 58 ++++++++++++++++++ src/components/Workspace.jsx | 81 +++++++------------------- src/context/DiagramContext.jsx | 2 +- src/i18n/locales/zh.js | 3 + 4 files changed, 83 insertions(+), 61 deletions(-) create mode 100644 src/components/Modal/SelectDbModal.jsx diff --git a/src/components/Modal/SelectDbModal.jsx b/src/components/Modal/SelectDbModal.jsx new file mode 100644 index 0000000..9972e41 --- /dev/null +++ b/src/components/Modal/SelectDbModal.jsx @@ -0,0 +1,58 @@ +import { memo, useState } from "react"; +import { Modal } from "@douyinfe/semi-ui"; +import { useTranslation } from "react-i18next"; +import { useSettings } from "../../hooks"; +import { databases } from "../../data/databases"; + +const SelectDbModal = (props) => { + const { showSelectDbModal, onOk } = props; + const { t } = useTranslation(); + const { settings } = useSettings(); + const [selectedDb, setSelectedDb] = useState(""); + if (!showSelectDbModal) return null; + return ( + { + setSelectedDb(selectedDb); + onOk(selectedDb); + }} + okButtonProps={{ disabled: selectedDb === "" }} + > +
+ {Object.values(databases).map((x) => ( +
setSelectedDb(x.label)} + className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${ + settings.mode === "dark" + ? "bg-zinc-700 hover:bg-zinc-600" + : "bg-zinc-100 hover:bg-zinc-200" + } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`} + > +
{x.name}
+ {x.image && ( + + )} +
{x.description}
+
+ ))} +
+ + ); +}; + +export default memo(SelectDbModal); diff --git a/src/components/Workspace.jsx b/src/components/Workspace.jsx index 1797851..0e32d29 100644 --- a/src/components/Workspace.jsx +++ b/src/components/Workspace.jsx @@ -19,7 +19,7 @@ import { useEnums, } from "../hooks"; import FloatingControls from "./FloatingControls"; -import { Modal } from "@douyinfe/semi-ui"; +import SelectDbModal from "./Modal/SelectDbModal"; import { useTranslation } from "react-i18next"; import { databases } from "../data/databases"; import { isRtl } from "../i18n/utils/rtl"; @@ -37,7 +37,6 @@ export default function WorkSpace() { const [width, setWidth] = useState(340); const [lastSaved, setLastSaved] = useState(""); const [showSelectDbModal, setShowSelectDbModal] = useState(false); - const [selectedDb, setSelectedDb] = useState(""); const { layout } = useLayout(); const { settings } = useSettings(); const { types, setTypes } = useTypes(); @@ -56,7 +55,7 @@ export default function WorkSpace() { setDatabase, } = useDiagram(); const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo(); - const { t, i18n } = useTranslation(); + const { i18n } = useTranslation(); let [searchParams, setSearchParams] = useSearchParams(); const handleResize = (e) => { if (!resize) return; @@ -163,8 +162,8 @@ export default function WorkSpace() { loadedFromGistId, saveState ]); - const load = useCallback(async () => { + let initDatabase = database; const loadLatestDiagram = async () => { await db.diagrams .orderBy("lastModified") @@ -195,24 +194,20 @@ export default function WorkSpace() { window.name = `d ${d.id}`; } else { window.name = ""; - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); } }) .catch((error) => { console.log(error); }); }; - const loadDiagram = async (id) => { await db.diagrams .get(id) .then((diagram) => { if (diagram) { - if (diagram.database) { - setDatabase(diagram.database); - } else { - setDatabase(DB.GENERIC); - } + initDatabase = diagram.database || DB.GENERIC; + setDatabase(initDatabase); setId(diagram.id); setGistId(diagram.gistId); setLoadedFromGistId(diagram.loadedFromGistId); @@ -228,10 +223,10 @@ export default function WorkSpace() { }); setUndoStack([]); setRedoStack([]); - if (databases[database].hasTypes) { + if (databases[initDatabase].hasTypes) { setTypes(diagram.types ?? []); } - if (databases[database].hasEnums) { + if (databases[initDatabase].hasEnums) { setEnums(diagram.enums ?? []); } window.name = `d ${diagram.id}`; @@ -267,19 +262,19 @@ export default function WorkSpace() { }); setUndoStack([]); setRedoStack([]); - if (databases[database].hasTypes) { + if (databases[initDatabase].hasTypes) { setTypes(diagram.types ?? []); } - if (databases[database].hasEnums) { + if (databases[initDatabase].hasEnums) { setEnums(diagram.enums ?? []); } } else { - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); } }) .catch((error) => { console.log(error); - if (selectedDb === "") setShowSelectDbModal(true); + if (initDatabase === "") setShowSelectDbModal(true); }); }; @@ -365,7 +360,6 @@ export default function WorkSpace() { setDatabase, database, setEnums, - selectedDb, setSaveState, searchParams, ]); @@ -409,6 +403,11 @@ export default function WorkSpace() { load(); }, [load]); + const handleSelectedDb = useCallback((selectedDb) => { + if (selectedDb === "") return; + setDatabase(selectedDb); + setShowSelectDbModal(false); + }, []); return (
@@ -447,48 +446,10 @@ export default function WorkSpace() { )}
- { - if (selectedDb === "") return; - setDatabase(selectedDb); - setShowSelectDbModal(false); - }} - okButtonProps={{ disabled: selectedDb === "" }} - > -
- {Object.values(databases).map((x) => ( -
setSelectedDb(x.label)} - className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${ - settings.mode === "dark" - ? "bg-zinc-700 hover:bg-zinc-600" - : "bg-zinc-100 hover:bg-zinc-200" - } ${selectedDb === x.label ? "border-zinc-400" : "border-transparent"}`} - > -
{x.name}
- {x.image && ( - - )} -
{x.description}
-
- ))} -
- + ); } diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx index ffa4997..d37702c 100644 --- a/src/context/DiagramContext.jsx +++ b/src/context/DiagramContext.jsx @@ -8,7 +8,7 @@ export const DiagramContext = createContext(null); export default function DiagramContextProvider({ children }) { const { t } = useTranslation(); - const [database, setDatabase] = useState(DB.GENERIC); + const [database, setDatabase] = useState(""); const [tables, setTables] = useState([]); const [relationships, setRelationships] = useState([]); const { transform } = useTransform(); diff --git a/src/i18n/locales/zh.js b/src/i18n/locales/zh.js index 9c8fb81..2e4a5c9 100644 --- a/src/i18n/locales/zh.js +++ b/src/i18n/locales/zh.js @@ -207,6 +207,9 @@ const zh = { edit_relationship: "{{extra}} 编辑关系 {{refName}}", delete_relationship: "删除关系 {{refName}}", not_found: "未找到", + pick_db: "选择数据库", + generic: "通用的", + generic_description: "通用的图表可以导出为任何SQL风格，但支持的数据类型较少。", }, };