From 2695e5b8a2ebf54ef6fc34ed29ff0c3debe908f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?liao=E6=96=87=E7=A6=A7?= <1219585136@qq.com>
Date: Mon, 13 May 2024 11:14:51 +0800
Subject: [PATCH] Optimize the rendering logic for the Collapse and Tabs child
 components(#101)

---
 src/components/EditorSidePanel/Issues.jsx     |  2 +-
 .../EditorSidePanel/NotesTab/NotesTab.jsx     |  2 ++
 .../RelationshipsTab/RelationshipsTab.jsx     |  2 ++
 src/components/EditorSidePanel/SidePanel.jsx  | 32 ++++++++-----------
 .../EditorSidePanel/TablesTab/TableInfo.jsx   |  4 ++-
 .../EditorSidePanel/TablesTab/TablesTab.jsx   |  2 ++
 .../EditorSidePanel/TypesTab/TypeInfo.jsx     |  2 +-
 .../EditorSidePanel/TypesTab/TypesTab.jsx     |  2 ++
 8 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/EditorSidePanel/Issues.jsx b/src/components/EditorSidePanel/Issues.jsx
index 7f02c03..b0e2265 100644
--- a/src/components/EditorSidePanel/Issues.jsx
+++ b/src/components/EditorSidePanel/Issues.jsx
@@ -27,7 +27,7 @@ export default function Issues() {
   }, [tables, relationships, issues, types]);
 
   return (
-    <Collapse style={{ width: "100%" }}>
+    <Collapse keepDOM lazyRender style={{ width: "100%" }}>
       <Collapse.Panel
         header={
           <Badge
diff --git a/src/components/EditorSidePanel/NotesTab/NotesTab.jsx b/src/components/EditorSidePanel/NotesTab/NotesTab.jsx
index 5b9bf5b..ee4fca2 100644
--- a/src/components/EditorSidePanel/NotesTab/NotesTab.jsx
+++ b/src/components/EditorSidePanel/NotesTab/NotesTab.jsx
@@ -33,6 +33,8 @@ export default function NotesTab() {
       ) : (
         <Collapse
           activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
+          keepDOM
+          lazyRender
           onChange={(activeKey) => {
             setSelectedElement((prev) => ({
               ...prev,
diff --git a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
index ee23bd2..27139a9 100644
--- a/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
+++ b/src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx
@@ -19,6 +19,8 @@ export default function RelationshipsTab() {
             ? `${selectedElement.id}`
             : ""
         }
+        keepDOM
+        lazyRender
         onChange={(k) =>
           setSelectedElement((prev) => ({
             ...prev,
diff --git a/src/components/EditorSidePanel/SidePanel.jsx b/src/components/EditorSidePanel/SidePanel.jsx
index 2a3aaa9..8ac1d90 100644
--- a/src/components/EditorSidePanel/SidePanel.jsx
+++ b/src/components/EditorSidePanel/SidePanel.jsx
@@ -1,4 +1,4 @@
-import { Tabs } from "@douyinfe/semi-ui";
+import { Tabs, TabPane } from "@douyinfe/semi-ui";
 import { Tab } from "../../data/constants";
 import { useLayout, useSelect } from "../../hooks";
 import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
@@ -13,19 +13,11 @@ export default function SidePanel({ width, resize, setResize }) {
   const { selectedElement, setSelectedElement } = useSelect();
 
   const tabList = [
-    { tab: "Tables", itemKey: Tab.TABLES },
-    { tab: "Relationships", itemKey: Tab.RELATIONSHIPS },
-    { tab: "Subject Areas", itemKey: Tab.AREAS },
-    { tab: "Notes", itemKey: Tab.NOTES },
-    { tab: "Types", itemKey: Tab.TYPES },
-  ];
-
-  const contentList = [
-    <TablesTab key="tables" />,
-    <RelationshipsTab key="relationships" />,
-    <AreasTab key="areas" />,
-    <NotesTab key="notes" />,
-    <TypesTab key="types" />,
+    { tab: "Tables", itemKey: Tab.TABLES, component: <TablesTab />  },
+    { tab: "Relationships", itemKey: Tab.RELATIONSHIPS, component: <RelationshipsTab />  },
+    { tab: "Subject Areas", itemKey: Tab.AREAS, component: <AreasTab />  },
+    { tab: "Notes", itemKey: Tab.NOTES, component: <NotesTab />  },
+    { tab: "Types", itemKey: Tab.TYPES, component: <TypesTab />  },
   ];
 
   return (
@@ -38,15 +30,19 @@ export default function SidePanel({ width, resize, setResize }) {
           <Tabs
             type="card"
             activeKey={selectedElement.currentTab}
-            tabList={tabList}
+            lazyRender
             onChange={(key) =>
               setSelectedElement((prev) => ({ ...prev, currentTab: key }))
             }
             collapsible
           >
-            <div className="p-2">
-              {contentList[parseInt(selectedElement.currentTab) - 1]}
-            </div>
+            {tabList.length && tabList.map(tab => 
+              <TabPane tab={tab.tab} itemKey={tab.itemKey} key={tab.itemKey}>
+                <div className="p-2">
+                  {tab.component}
+                </div>
+              </TabPane>
+            )}
           </Tabs>
         </div>
         {layout.issues && (
diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index 7d8e6b8..1b06af0 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -144,6 +144,8 @@ export default function TableInfo({ data }) {
         >
           <Collapse
             activeKey={indexActiveKey}
+            keepDOM
+            lazyRender
             onChange={(itemKey) => setIndexActiveKey(itemKey)}
             accordion
           >
@@ -169,7 +171,7 @@ export default function TableInfo({ data }) {
         style={{ marginTop: "12px", marginBottom: "12px" }}
         headerLine={false}
       >
-        <Collapse>
+        <Collapse keepDOM lazyRender>
           <Collapse.Panel header="Comment" itemKey="1">
             <TextArea
               field="comment"
diff --git a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
index 453999d..d673c86 100644
--- a/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TablesTab.jsx
@@ -31,6 +31,8 @@ export default function TablesTab() {
               ? `${selectedElement.id}`
               : ""
           }
+          keepDOM
+          lazyRender
           onChange={(k) =>
             setSelectedElement((prev) => ({
               ...prev,
diff --git a/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx b/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
index b81e643..2b1253f 100644
--- a/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
+++ b/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
@@ -64,7 +64,7 @@ export default function TypeInfo({ index, data }) {
           style={{ marginTop: "12px", marginBottom: "12px" }}
           headerLine={false}
         >
-          <Collapse>
+          <Collapse keepDOM lazyRender>
             <Collapse.Panel header="Comment" itemKey="1">
               <TextArea
                 field="comment"
diff --git a/src/components/EditorSidePanel/TypesTab/TypesTab.jsx b/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
index ac6a9a2..2c84151 100644
--- a/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
+++ b/src/components/EditorSidePanel/TypesTab/TypesTab.jsx
@@ -60,6 +60,8 @@ export default function TypesTab() {
               ? `${selectedElement.id}`
               : ""
           }
+          keepDOM
+          lazyRender
           onChange={(id) =>
             setSelectedElement((prev) => ({
               ...prev,