move data to data.js

src/components/control_panel.jsx

@@ -1,5 +1,5 @@
 import { React, useState } from "react";
-import menu from "./menu";
+import {menu} from "../data/data";
 import {
   IconCaretUp,
   IconCaretDown,

src/components/editor_panel.jsx

@@ -8,6 +8,7 @@ import Shape from "./shape";
 import { saveAs } from "file-saver";
 import html2canvas from "html2canvas";
 import { Parser } from "node-sql-parser";
+import { Tabs } from "@douyinfe/semi-ui";
 import "react-resizable/css/styles.css";
 
 const myTheme = createTheme({
@@ -25,9 +26,32 @@ const myTheme = createTheme({
 });
 
 export default function EditorPanel(props) {
-  const [editor, setEditor] = useState(true);
+  const [tab, setTab] = useState(1);
   const map = useRef(new Map());
 
+  const tabList = [
+    { tab: "Overview", itemKey: 1 },
+    { tab: "Shapes", itemKey: 2 },
+    { tab: "Editor", itemKey: 3 },
+  ];
+  const contentList = [
+    <div>Overview</div>,
+    <div>
+      <Shape />
+    </div>,
+    <div>
+      <CodeMirror
+        value={props.code}
+        height="100%"
+        theme={myTheme}
+        extensions={[sql()]}
+        onChange={(e) => {
+          props.setCode(e);
+        }}
+      />
+    </div>,
+  ];
+
   return (
     <ResizableBox
       width={window.innerWidth * 0.2}
@@ -37,15 +61,17 @@ export default function EditorPanel(props) {
       maxConstraints={[Infinity, Infinity]}
       axis="x"
     >
-      <div className="overflow-auto h-full">
+      <div className="overflow-auto h-full mt-2">
-        <button
+        <Tabs
-          onClick={() => {
+          type="card"
-            setEditor(!editor);
+          tabList={tabList}
+          onChange={(key) => {
+            setTab(key);
           }}
         >
-          change view
+          {contentList[tab -1]}
-        </button>
+        </Tabs>
-        <br />
+
         <button
           onClick={() => {
             const newTable = {
@@ -65,7 +91,7 @@ export default function EditorPanel(props) {
                 },
               ],
             };
-            props.setTables(prev => {
+            props.setTables((prev) => {
               const updatedTables = [...prev, newTable];
               return updatedTables;
             });
@@ -120,7 +146,7 @@ export default function EditorPanel(props) {
                       },
                     ],
                   };
-                  props.setTables((prev)=>[...prev, newTable]);
+                  props.setTables((prev) => [...prev, newTable]);
                 });
               });
             } catch (e) {
@@ -142,19 +168,6 @@ export default function EditorPanel(props) {
         >
           export img
         </button>
-        {editor ? (
-          <CodeMirror
-            value={props.code}
-            height="100%"
-            theme={myTheme}
-            extensions={[sql()]}
-            onChange={(e) => {
-              props.setCode(e);
-            }}
-          />
-        ) : (
-          <Shape />
-        )}
       </div>
     </ResizableBox>
   );

src/components/menu.js

@@ -1,59 +0,0 @@
-const menu = {
-  File: {
-    New: [],
-    "New window": [],
-    Save: [],
-    "Save as": [],
-    Share: [],
-    Rename: [],
-    Import: [],
-    "Export as": [".png", ".jpg", ".pdf", ".xml"],
-    "Export source": ["MySQL", "PostgreSQL", "DBML"],
-    Properties: [],
-    Close: [],
-  },
-  Edit: {
-    Undo: [],
-    Redo: [],
-    Cut: [],
-    Copy: [],
-    "Copy as image": [],
-    Paste: [],
-    Delete: [],
-    "Edit table": [],
-  },
-  View: {
-    Toolbar: [],
-    Grid: [],
-    Sidebar: [],
-    Editor: [],
-    "Reset view": [],
-    "View schema": [],
-    Theme: ["Light", "Dark"],
-    "Zoom in": [],
-    "Zoom out": [],
-    Fullscreen: [],
-  },
-  Insert: {
-    "New table": [],
-    "New relationship": [],
-    Note: [],
-    Image: [],
-    Textbox: [],
-    Shape: ["Rhombus", "Rectangle"],
-  },
-  Logs: {
-    "Open logs": [],
-    "Commit changes": [],
-    "Revert changes": [],
-    "View commits": [],
-  },
-  Help: {
-    Shortcuts: [],
-    "Ask us on discord": [],
-    "Tweet us": [],
-    "Found a bug": [],
-  },
-};
-
-export default menu;

src/components/sql_types.js

@@ -1,27 +0,0 @@
-const sqlDataTypes = [
-  "INT",
-  "SMALLINT",
-  "BIGINT",
-  "DECIMAL",
-  "NUMERIC",
-  "FLOAT",
-  "REAL",
-  "DOUBLE PRECISION",
-  "CHAR",
-  "VARCHAR",
-  "TEXT",
-  "DATE",
-  "TIME",
-  "TIMESTAMP",
-  "INTERVAL",
-  "BOOLEAN",
-  "BINARY",
-  "VARBINARY",
-  "BLOB",
-  "CLOB",
-  "UUID",
-  "XML",
-  "JSON",
-];
-
-export default sqlDataTypes;

src/components/table.jsx

@@ -1,5 +1,5 @@
 import { React, useState } from "react";
-import sqlDataTypes from "./sql_types";
+import {sqlDataTypes} from "../data/data";
 import {
   IconEdit,
   IconDelete,
@@ -16,7 +16,6 @@ import {
   Tag,
   Popconfirm,
   Toast,
-  SideSheet,
 } from "@douyinfe/semi-ui";
 
 export default function Table(props) {
@@ -24,7 +23,6 @@ export default function Table(props) {
   const [hoveredField, setHoveredField] = useState(-1);
   const [name, setName] = useState(props.tableData.name);
   const [visible, setVisible] = useState(false);
-  const [sideSheetOn, setSideSheetOn] = useState(false);
   const [editFieldVisible, setEditFieldVisible] = useState(-1);
 
   const [field, setField] = useState({
@@ -139,7 +137,7 @@ export default function Table(props) {
               <div className="flex justify-end items-center">
                 <button
                   className="btn bg-sky-800 text-white text-xs py-1 px-2 me-2 opacity-80"
-                  onClick={() => setSideSheetOn(true)}
+                  // onClick={() => setSideSheetOn(true)}
                 >
                   <IconEdit />
                 </button>
@@ -475,11 +473,6 @@ export default function Table(props) {
           </Row>
         </Form>
       </Modal>
-      <SideSheet title="Sidesheet" visible={sideSheetOn} onCancel={() => setSideSheetOn
-      (false)}>
-        <p>This is the content of a basic sidesheet.</p>
-        <p>Here is more content...</p>
-      </SideSheet>
     </g>
   );
 }

src/data/data.js

@@ -0,0 +1,87 @@
+const menu = {
+    File: {
+      New: [],
+      "New window": [],
+      Save: [],
+      "Save as": [],
+      Share: [],
+      Rename: [],
+      Import: [],
+      "Export as": [".png", ".jpg", ".pdf", ".xml"],
+      "Export source": ["MySQL", "PostgreSQL", "DBML"],
+      Properties: [],
+      Close: [],
+    },
+    Edit: {
+      Undo: [],
+      Redo: [],
+      Cut: [],
+      Copy: [],
+      "Copy as image": [],
+      Paste: [],
+      Delete: [],
+      "Edit table": [],
+    },
+    View: {
+      Toolbar: [],
+      Grid: [],
+      Sidebar: [],
+      Editor: [],
+      "Reset view": [],
+      "View schema": [],
+      Theme: ["Light", "Dark"],
+      "Zoom in": [],
+      "Zoom out": [],
+      Fullscreen: [],
+    },
+    Insert: {
+      "New table": [],
+      "New relationship": [],
+      Note: [],
+      Image: [],
+      Textbox: [],
+      Shape: ["Rhombus", "Rectangle"],
+    },
+    Logs: {
+      "Open logs": [],
+      "Commit changes": [],
+      "Revert changes": [],
+      "View commits": [],
+    },
+    Help: {
+      Shortcuts: [],
+      "Ask us on discord": [],
+      "Tweet us": [],
+      "Found a bug": [],
+    },
+};
+  
+const sqlDataTypes = [
+    "INT",
+    "SMALLINT",
+    "BIGINT",
+    "DECIMAL",
+    "NUMERIC",
+    "FLOAT",
+    "REAL",
+    "DOUBLE PRECISION",
+    "CHAR",
+    "VARCHAR",
+    "TEXT",
+    "DATE",
+    "TIME",
+    "TIMESTAMP",
+    "INTERVAL",
+    "BOOLEAN",
+    "BINARY",
+    "VARBINARY",
+    "BLOB",
+    "CLOB",
+    "UUID",
+    "XML",
+    "JSON",
+  ];
+
+  
+export {menu, sqlDataTypes};
+