Edit relationship on double click (#68)

src/components/EditorSidePanel/RelationshipsTab/RelationshipsTab.jsx

@@ -1,20 +1,32 @@
-import { useState } from "react";
 import { Collapse } from "@douyinfe/semi-ui";
-import { useTables } from "../../../hooks";
+import { useSelect, useTables } from "../../../hooks";
 import Empty from "../Empty";
 import SearchBar from "./SearchBar";
 import RelationshipInfo from "./RelationshipInfo";
+import { ObjectType } from "../../../data/constants";
 
 export default function RelationshipsTab() {
   const { relationships } = useTables();
-  const [refActiveIndex, setRefActiveIndex] = useState("");
+  const { selectedElement, setSelectedElement } = useSelect();
 
   return (
     <>
-      <SearchBar setRefActiveIndex={setRefActiveIndex} />
+      <SearchBar />
       <Collapse
-        activeKey={refActiveIndex}
-        onChange={(k) => setRefActiveIndex(k)}
+        activeKey={
+          selectedElement.open &&
+          selectedElement.element === ObjectType.RELATIONSHIP
+            ? `${selectedElement.id}`
+            : ""
+        }
+        onChange={(k) =>
+          setSelectedElement((prev) => ({
+            ...prev,
+            open: true,
+            id: parseInt(k),
+            element: ObjectType.RELATIONSHIP,
+          }))
+        }
         accordion
       >
         {relationships.length <= 0 ? (

src/components/EditorSidePanel/RelationshipsTab/SearchBar.jsx

@@ -1,18 +1,20 @@
 import { useState } from "react";
-import { useTables } from "../../../hooks";
+import { useSelect, useTables } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
+import { ObjectType } from "../../../data/constants";
 
-export default function SearchBar({ setRefActiveIndex }) {
+export default function SearchBar() {
   const { relationships } = useTables();
   const [searchText, setSearchText] = useState("");
+  const { setSelectedElement } = useSelect();
   const [filteredResult, setFilteredResult] = useState(
-    relationships.map((t) => t.name)
+    relationships.map((t) => t.name),
   );
 
   const handleStringSearch = (value) => {
     setFilteredResult(
-      relationships.map((t) => t.name).filter((i) => i.includes(value))
+      relationships.map((t) => t.name).filter((i) => i.includes(value)),
     );
   };
 
@@ -30,7 +32,12 @@ export default function SearchBar({ setRefActiveIndex }) {
       onChange={(v) => setSearchText(v)}
       onSelect={(v) => {
         const { id } = relationships.find((t) => t.name === v);
-        setRefActiveIndex(`${id}`);
+        setSelectedElement((prev) => ({
+          ...prev,
+          id: id,
+          open: true,
+          element: ObjectType.RELATIONSHIP,
+        }));
         document
           .getElementById(`scroll_ref_${id}`)
           .scrollIntoView({ behavior: "smooth" });