fix tab error

src/components/editor_panel.jsx

@@ -1,4 +1,4 @@
-import { React, useState } from "react";
+import { React, useContext } from "react";
 import CodeMirror from "@uiw/react-codemirror";
 import { createTheme } from "@uiw/codemirror-themes";
 import { sql } from "@codemirror/lang-sql";
@@ -10,6 +10,8 @@ import TableOverview from "./table_overview";
 import ReferenceOverview from "./reference_overview";
 import AreaOverview from "./area_overview";
 // import { TableContext } from "../pages/editor";
+import { Tab } from "../data/data";
+import { TabContext } from "../pages/editor";
 
 const myTheme = createTheme({
   dark: "light",
@@ -26,16 +28,15 @@ const myTheme = createTheme({
 });
 
 const EditorPanel = (props) => {
-  const [tab, setTab] = useState("1");
   // const map = useRef(new Map());
-  // const {tables, setTables} = useContext(TableContext);
+  const {tab, setTab} = useContext(TabContext);
 
   const tabList = [
-    { tab: "Tables", itemKey: "1" },
+    { tab: "Tables", itemKey: Tab.tables },
-    { tab: "Relationships", itemKey: "2" },
+    { tab: "Relationships", itemKey: Tab.relationships },
-    { tab: "Subject Areas", itemKey: "3" },
+    { tab: "Subject Areas", itemKey: Tab.subject_areas },
-    { tab: "Shapes", itemKey: "4" },
+    { tab: "Shapes", itemKey: Tab.shapes },
-    { tab: "Editor", itemKey: "5" },
+    { tab: "Editor", itemKey: Tab.editor },
   ];
   const contentList = [
     <TableOverview
@@ -61,6 +62,7 @@ const EditorPanel = (props) => {
       <div style={{ width: `${props.width}px` }} className="overflow-y-auto">
         <Tabs
           type="card"
+          activeKey={tab}
           tabList={tabList}
           onChange={(key) => {
             setTab(key);

src/components/table.jsx

@@ -1,5 +1,10 @@
 import { React, useState, useContext } from "react";
-import { sqlDataTypes, tableThemes, defaultTableTheme } from "../data/data";
+import {
+  sqlDataTypes,
+  tableThemes,
+  defaultTableTheme,
+  Tab,
+} from "../data/data";
 import {
   IconEdit,
   IconPlus,
@@ -24,7 +29,7 @@ import {
   SideSheet,
   Toast,
 } from "@douyinfe/semi-ui";
-import { LayoutContext, TableContext } from "../pages/editor";
+import { LayoutContext, TabContext, TableContext } from "../pages/editor";
 
 export default function Table(props) {
   const [isHovered, setIsHovered] = useState(false);
@@ -32,6 +37,7 @@ export default function Table(props) {
   const [visible, setVisible] = useState(false);
   const { layout } = useContext(LayoutContext);
   const { setTables } = useContext(TableContext);
+  const { tab, setTab } = useContext(TabContext);
 
   const height = props.tableData.fields.length * 36 + 50 + 3;
 
@@ -112,6 +118,8 @@ export default function Table(props) {
                     if (!layout.sidebar) {
                       setVisible(true);
                     } else {
+                      setTab(Tab.tables);
+                      if (tab !== Tab.tables) return;
                       props.setSelectedTable(`${props.tableData.id}`);
                       document
                         .getElementById(`scroll_table_${props.tableData.id}`)

src/data/data.js

@@ -57,6 +57,14 @@ const Constraint = {
   setDefault: "Set default",
 };
 
+const Tab = {
+  tables: "1",
+  relationships: "2",
+  subject_areas: "3",
+  shapes: "4",
+  editor: "5",
+};
+
 export {
   bgBlue,
   sqlDataTypes,
@@ -64,4 +72,5 @@ export {
   defaultTableTheme,
   Cardinality,
   Constraint,
+  Tab
 };

src/pages/editor.jsx

@@ -5,10 +5,12 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import Canvas from "../components/canvas";
 import EditorPanel from "../components/editor_panel";
+import { Tab } from "../data/data";
 
 export const LayoutContext = createContext();
 export const TableContext = createContext();
 export const AreaContext = createContext();
+export const TabContext = createContext();
 
 export default function Editor(props) {
   const [code, setCode] = useState("");
@@ -18,6 +20,7 @@ export default function Editor(props) {
   const [resize, setResize] = useState(false);
   const [width, setWidth] = useState(340);
   const [selectedTable, setSelectedTable] = useState("");
+  const [tab, setTab] = useState(Tab.tables);
   const [layout, setLayout] = useState({
     header: true,
     sidebar: true,
@@ -37,9 +40,9 @@ export default function Editor(props) {
     if (w > 340) setWidth(w);
   };
 
-  useEffect(()=>{
+  useEffect(() => {
     document.title = "Editor";
-  }, [])
+  }, []);
 
   return (
     <LayoutContext.Provider value={{ layout, setLayout }}>
@@ -47,39 +50,41 @@ export default function Editor(props) {
         value={{ tables, setTables, relationships, setRelationships }}
       >
         <AreaContext.Provider value={{ areas, setAreas }}>
-          <div className="h-[100vh] overflow-hidden">
+          <TabContext.Provider value={{ tab, setTab }}>
-            <ControlPanel />
+            <div className="h-[100vh] overflow-hidden">
-            <div
+              <ControlPanel />
-              className={
+              <div
-                layout.header
+                className={
-                  ? `flex h-[calc(100vh-123.93px)]`
+                  layout.header
-                  : `flex h-[calc(100vh-51.97px)]`
+                    ? `flex h-[calc(100vh-123.93px)]`
-              }
+                    : `flex h-[calc(100vh-51.97px)]`
-              onMouseUp={() => setResize(false)}
+                }
-              onMouseMove={dragHandler}
+                onMouseUp={() => setResize(false)}
-            >
+                onMouseMove={dragHandler}
-              <DndProvider backend={HTML5Backend}>
+              >
-                {layout.sidebar && (
+                <DndProvider backend={HTML5Backend}>
-                  <EditorPanel
+                  {layout.sidebar && (
+                    <EditorPanel
+                      code={code}
+                      setCode={setCode}
+                      resize={resize}
+                      setResize={setResize}
+                      width={width}
+                      selectedTable={selectedTable}
+                      setSelectedTable={setSelectedTable}
+                    />
+                  )}
+                  <Canvas
                     code={code}
                     setCode={setCode}
-                    resize={resize}
-                    setResize={setResize}
-                    width={width}
                     selectedTable={selectedTable}
                     setSelectedTable={setSelectedTable}
                   />
-                )}
+                </DndProvider>
-                <Canvas
+                {layout.services && <Sidebar />}
-                  code={code}
+              </div>
-                  setCode={setCode}
-                  selectedTable={selectedTable}
-                  setSelectedTable={setSelectedTable}
-                />
-              </DndProvider>
-              {layout.services && <Sidebar />}
             </div>
-          </div>{" "}
+          </TabContext.Provider>
         </AreaContext.Provider>
       </TableContext.Provider>
     </LayoutContext.Provider>