Remove tab context

src/components/SidePanel.jsx

@@ -1,18 +1,17 @@
-import { useContext } from "react";
 import { Tabs } from "@douyinfe/semi-ui";
+import { Tab } from "../data/data";
 import TableOverview from "./TableOverview";
 import ReferenceOverview from "./ReferenceOverview";
 import AreaOverview from "./AreaOverview";
-import { Tab } from "../data/data";
-import { TabContext } from "../pages/Editor";
 import NotesOverview from "./NotesOverview";
-import Issues from "./Issues";
 import TypesOverview from "./TypesOverview";
+import Issues from "./Issues";
 import useLayout from "../hooks/useLayout";
+import useSelect from "../hooks/useSelect";
 
-const SidePanel = (props) => {
-  const { tab, setTab } = useContext(TabContext);
+export default function SidePanel({ width, resize, setResize }) {
   const { layout } = useLayout();
+  const { selectedElement, setSelectedElement } = useSelect();
 
   const tabList = [
     { tab: "Tables", itemKey: Tab.tables },
@@ -22,30 +21,32 @@ const SidePanel = (props) => {
     { tab: "Types", itemKey: Tab.types },
   ];
   const contentList = [
-    <TableOverview key={1}/>,
-    <ReferenceOverview key={2}/>,
-    <AreaOverview key={3}/>,
-    <NotesOverview key={4}/>,
-    <TypesOverview key={5}/>,
+    <TableOverview key={1} />,
+    <ReferenceOverview key={2} />,
+    <AreaOverview key={3} />,
+    <NotesOverview key={4} />,
+    <TypesOverview key={5} />,
   ];
 
   return (
     <div className="flex h-full">
       <div
         className="flex flex-col h-full relative border-r border-color"
-        style={{ width: `${props.width}px` }}
+        style={{ width: `${width}px` }}
       >
         <div className="h-full flex-1 overflow-y-auto">
           <Tabs
             type="card"
-            activeKey={tab}
+            activeKey={selectedElement.currentTab}
             tabList={tabList}
-            onChange={(key) => {
-              setTab(key);
-            }}
+            onChange={(key) =>
+              setSelectedElement((prev) => ({ ...prev, currentTab: key }))
+            }
             collapsible
           >
-            <div className="p-2">{contentList[parseInt(tab) - 1]}</div>
+            <div className="p-2">
+              {contentList[parseInt(selectedElement.currentTab) - 1]}
+            </div>
           </Tabs>
         </div>
         {layout.issues && (
@@ -56,14 +57,12 @@ const SidePanel = (props) => {
       </div>
       <div
         className={`flex justify-center items-center p-1 h-auto hover-2 cursor-col-resize ${
-          props.resize ? "bg-semi-grey-2" : ""
+          resize ? "bg-semi-grey-2" : ""
         }`}
-        onMouseDown={() => props.setResize(true)}
+        onMouseDown={() => setResize(true)}
       >
         <div className="w-1 border-x border-color h-1/6" />
       </div>
     </div>
   );
-};
-
-export default SidePanel;
+}