fix deleting tables

src/components/canvas.jsx

@@ -294,7 +294,6 @@ export default function Canvas(props) {
               onMouseDown={(e) =>
                 handleMouseDownRect(e, table.id, ObjectType.TABLE)
               }
-              handleDelete={props.handleDelete}
             />
           ))}
           {linking && (

src/components/editor_panel.jsx

@@ -1,4 +1,4 @@
-import { React, useState, useRef } from "react";
+import { React, useState, useRef, memo } from "react";
 import { ResizableBox } from "react-resizable";
 import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
@@ -28,7 +28,7 @@ const myTheme = createTheme({
   ],
 });
 
-export default function EditorPanel(props) {
+const EditorPanel = memo(function EditorPanel(props) {
   const [tab, setTab] = useState("1");
   const map = useRef(new Map());
 
@@ -40,7 +40,7 @@ export default function EditorPanel(props) {
   ];
   const contentList = [
     <div>
-      <TableOverview tables={props.tables} setTables={props.setTables} handleDelete={props.handleDelete}/>
+      <TableOverview tables={props.tables} setTables={props.setTables}/>
     </div>,
     <div>
       <ReferenceOverview
@@ -176,4 +176,6 @@ export default function EditorPanel(props) {
       </div>
     </ResizableBox>
   );
-}
+});
+
+export default EditorPanel;

src/components/table.jsx

@@ -21,7 +21,7 @@ import {
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
   const [hoveredField, setHoveredField] = useState(-1);
-  const [name, setName] = useState(props.tableData.name);
+  // const [name, setName] = useState(props.tableData.name);
   const [visible, setVisible] = useState(false);
   const [editFieldVisible, setEditFieldVisible] = useState(-1);
 
@@ -127,16 +127,16 @@ export default function Table(props) {
                   })
                 }
               >
-                <input
+                <div
-                  type="text"
+                  // type="text"
-                  value={name}
+                  // value={name}
-                  onChange={(e) => setName(e.target.value)}
+                  // onChange={(e) => setName(e.target.value)}
                   className={`p-1 select-text w-[100px] bg-gray-400 focus:bg-gray-200 ${
-                    name < 1
+                    false
                       ? "ring-2 ring-red-600"
                       : "focus:ring-2 focus:ring-sky-500 "
                   }`}
-                />
+                >{props.tableData.name}</div>
               </form>
             }
             {isHovered && (
@@ -157,7 +157,7 @@ export default function Table(props) {
                   okText="Delete"
                   onConfirm={() => {
                     Toast.success(`Table deleted!`);
-                    props.handleDelete(props.id);
+                    console.log("table.jsx ", props.id);
                   }}
                   onCancel={() => {}}
                 >

src/components/table_overview.jsx

@@ -1,8 +1,7 @@
-import { React, useState } from "react";
+import { React, useState, memo } from "react";
 import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
 import {
   Collapse,
-  Input,
   Row,
   Col,
   Form,
@@ -12,7 +11,7 @@ import {
   Checkbox,
   Select,
   AutoComplete,
-  Toast
+  Toast,
 } from "@douyinfe/semi-ui";
 import {
   IconMore,
@@ -24,9 +23,9 @@ import {
   IconSearch,
 } from "@douyinfe/semi-icons";
 
-export default function TableOverview(props) {
+const TableOverview = memo(function TableOverView(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
-  const [indexActiveKeyTable, setIndexActiveKeyTable] = useState([]);
+  const [tableActiveKey, setTableActiveKey] = useState("");
 
   const updateColor = (id, c) => {
     const updatedTables = [...props.tables];
@@ -71,7 +70,7 @@ export default function TableOverview(props) {
               onChange={(v) => handleChange(v)}
               onSelect={(v) => {
                 const { id, name } = props.tables.find((t) => t.name === v);
-                setIndexActiveKeyTable([`${id}`]);
+                setTableActiveKey(`${id}`);
                 document
                   .getElementById(`${name}_scroll_id`)
                   .scrollIntoView({ behavior: "smooth" });
@@ -122,29 +121,32 @@ export default function TableOverview(props) {
         </Row>
       </div>
       <Collapse
-        activeKey={indexActiveKeyTable}
+        activeKey={tableActiveKey}
-        onChange={(k) => setIndexActiveKeyTable(k)}
+        onChange={(k) => setTableActiveKey(k)}
+        accordion
       >
         {props.tables.map((t, i) => (
           <div id={`${t.name}_scroll_id`} key={t.id}>
-            <Collapse.Panel
+            <Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
-              header={
-                <div>
-                  <Input defaultValue={t.name} borderless />
-                </div>
-              }
-              itemKey={`${t.id}`}
-            >
               {t.fields.map((f, j) => (
                 <Form
                   key={j}
                   onChange={(value) => {
-                    const updatedTables = [...props.tables];
+                    props.setTables((prev) => {
-                    updatedTables[i].fields = updatedTables[i].fields.map(
+                      return prev.map((p, idx) => {
-                      (field, index) =>
+                        if (idx === i) {
-                        index === j ? { ...field, ...value.values } : field
+                          return {
-                    );
+                            ...p,
-                    props.setTables(updatedTables);
+                            fields: p.fields.map((field, index) =>
+                              index === j
+                                ? { ...field, ...value.values }
+                                : field
+                            ),
+                          };
+                        }
+                        return p;
+                      });
+                    });
                   }}
                 >
                   <Row
@@ -176,6 +178,7 @@ export default function TableOverview(props) {
                         })}
                         filter
                         initValue={f.type}
+                        placeholder="Type"
                       ></Form.Select>
                     </Col>
                     <Col span={3}>
@@ -583,7 +586,12 @@ export default function TableOverview(props) {
                     type="danger"
                     onClick={() => {
                       Toast.success(`Table deleted!`);
-                      props.handleDelete(i);
+                      props.setTables((prev) => {
+                        return prev
+                          .filter((e) => e.id !== i)
+                          .map((e, idx) => ({ ...e, id: idx }));
+                      });
+                      setTableActiveKey("");
                     }}
                   ></Button>
                 </Col>
@@ -594,4 +602,6 @@ export default function TableOverview(props) {
       </Collapse>
     </>
   );
-}
+});
+
+export default TableOverview;

src/pages/editor.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import Header from "../components/header";
 import Sidebar from "../components/sidebar";
 import ControlPanel from "../components/control_panel";
@@ -13,14 +13,13 @@ export default function Editor(props) {
   const [relationships, setRelationships] = useState([]);
   const [areas, setAreas] = useState([]);
 
-  const deleteTable = (id) => {
+  useEffect(() => {
-    let updatedTables = [...tables];
+    console.log("changed: ", tables);
-    updatedTables.splice(id, 1);
+  }, [tables]);
-    updatedTables = updatedTables.length>0? updatedTables.map((t, i) => ({ ...t, id: i })):[];
-    setTables(updatedTables);
-    console.log(tables);
-  };
 
+  // const handleDelete = useCallback((id)=>{
+  //   setTables(prev=>prev.filter(e=>e.id!==id).map((e, i)=>({...e, id: i})))
+  // }, [])
 
   return (
     <>
@@ -37,7 +36,7 @@ export default function Editor(props) {
             setRelationships={setRelationships}
             areas={areas}
             setAreas={setAreas}
-            handleDelete={deleteTable}
+            // handleDelete={handleDelete}
           />
           <Canvas
             tables={tables}
@@ -48,7 +47,6 @@ export default function Editor(props) {
             setRelationships={setRelationships}
             areas={areas}
             setAreas={setAreas}
-            handleDelete={deleteTable}
           />
         </DndProvider>
         <Sidebar />