fix: update title on mounted

This commit is contained in:
Huy Bui 2024-07-21 14:26:29 +07:00
parent 9393f5c933
commit 1bff574d56
2 changed files with 13 additions and 10 deletions

View File

@ -76,7 +76,6 @@ export default function ControlPanel({
}) { }) {
const [modal, setModal] = useState(MODAL.NONE); const [modal, setModal] = useState(MODAL.NONE);
const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE); const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE);
const [prevTitle, setPrevTitle] = useState(title);
const [showEditName, setShowEditName] = useState(false); const [showEditName, setShowEditName] = useState(false);
const [importDb, setImportDb] = useState(""); const [importDb, setImportDb] = useState("");
const [exportData, setExportData] = useState({ const [exportData, setExportData] = useState({
@ -728,7 +727,6 @@ export default function ControlPanel({
rename: { rename: {
function: () => { function: () => {
setModal(MODAL.RENAME); setModal(MODAL.RENAME);
setPrevTitle(title);
}, },
}, },
delete_diagram: { delete_diagram: {
@ -1309,10 +1307,8 @@ export default function ControlPanel({
setExportData={setExportData} setExportData={setExportData}
title={title} title={title}
setTitle={setTitle} setTitle={setTitle}
setPrevTitle={setPrevTitle}
setDiagramId={setDiagramId} setDiagramId={setDiagramId}
setModal={setModal} setModal={setModal}
prevTitle={prevTitle}
importDb={importDb} importDb={importDb}
/> />
<Sidesheet <Sidesheet

View File

@ -6,7 +6,7 @@ import {
Modal as SemiUIModal, Modal as SemiUIModal,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { DB, MODAL, STATUS } from "../../../data/constants"; import { DB, MODAL, STATUS } from "../../../data/constants";
import { useState } from "react"; import { useEffect, useState } from "react";
import { db } from "../../../data/db"; import { db } from "../../../data/db";
import { import {
useAreas, useAreas,
@ -48,8 +48,6 @@ export default function Modal({
setModal, setModal,
title, title,
setTitle, setTitle,
prevTitle,
setPrevTitle,
setDiagramId, setDiagramId,
exportData, exportData,
setExportData, setExportData,
@ -65,6 +63,7 @@ export default function Modal({
const { setTasks } = useTasks(); const { setTasks } = useTasks();
const { setTransform } = useTransform(); const { setTransform } = useTransform();
const { setUndoStack, setRedoStack } = useUndoRedo(); const { setUndoStack, setRedoStack } = useUndoRedo();
const [uncontrolledTitle, setUncontrolledTitle] = useState(title);
const [importSource, setImportSource] = useState({ const [importSource, setImportSource] = useState({
src: "", src: "",
overwrite: true, overwrite: true,
@ -78,6 +77,12 @@ export default function Modal({
const [selectedDiagramId, setSelectedDiagramId] = useState(0); const [selectedDiagramId, setSelectedDiagramId] = useState(0);
const [saveAsTitle, setSaveAsTitle] = useState(title); const [saveAsTitle, setSaveAsTitle] = useState(title);
useEffect(() => {
if (title !== uncontrolledTitle) {
setUncontrolledTitle(title);
}
}, [title]);
const overwriteDiagram = () => { const overwriteDiagram = () => {
setTables(importData.tables); setTables(importData.tables);
setRelationships(importData.relationships); setRelationships(importData.relationships);
@ -212,7 +217,7 @@ export default function Modal({
setModal(MODAL.NONE); setModal(MODAL.NONE);
return; return;
case MODAL.RENAME: case MODAL.RENAME:
setPrevTitle(title); setTitle(uncontrolledTitle);
setModal(MODAL.NONE); setModal(MODAL.NONE);
return; return;
case MODAL.SAVEAS: case MODAL.SAVEAS:
@ -256,7 +261,9 @@ export default function Modal({
/> />
); );
case MODAL.RENAME: case MODAL.RENAME:
return <Rename title={title} setTitle={setTitle} />; return (
<Rename title={uncontrolledTitle} setTitle={setUncontrolledTitle} />
);
case MODAL.OPEN: case MODAL.OPEN:
return ( return (
<Open <Open
@ -339,7 +346,7 @@ export default function Modal({
}); });
}} }}
onCancel={() => { onCancel={() => {
if (modal === MODAL.RENAME) setTitle(prevTitle); if (modal === MODAL.RENAME) setUncontrolledTitle(title);
setModal(MODAL.NONE); setModal(MODAL.NONE);
}} }}
centered centered