Merge pull request #52 from HaecheonLee/enh/open-note-when-note-title-is-clicked-in-search-in-note-tab

Open note when a note's title is clicked in search in note tab

Author: 1ilit

src/components/EditorSidePanel/TypesTab/SearchBar.jsx

@@ -1,19 +1,20 @@
 import { useState } from "react";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
-import { useTypes } from "../../../hooks";
+import { useSelect, useTypes } from "../../../hooks";
 
 export default function Searchbar() {
   const { types } = useTypes();
   const [value, setValue] = useState("");
+  const { setSelectedElement } = useSelect();
 
   const [filteredResult, setFilteredResult] = useState(
-    types.map((t) => t.name)
+    types.map((t) => t.name),
   );
 
   const handleStringSearch = (value) => {
     setFilteredResult(
-      types.map((t) => t.name).filter((i) => i.includes(value))
+      types.map((t) => t.name).filter((i) => i.includes(value)),
     );
   };
 
@@ -29,6 +30,11 @@ export default function Searchbar() {
       onChange={(v) => setValue(v)}
       onSelect={(v) => {
         const i = types.findIndex((t) => t.name === v);
+        setSelectedElement((prev) => ({
+          ...prev,
+          id: parseInt(i),
+          open: true,
+        }));
         document
           .getElementById(`scroll_type_${i}`)
           .scrollIntoView({ behavior: "smooth" });

src/components/EditorSidePanel/TypesTab/TypesTab.jsx

@@ -2,11 +2,12 @@ import { Collapse, Row, Col, Button, Popover } from "@douyinfe/semi-ui";
 import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
 import Searchbar from "./SearchBar";
 import Empty from "../Empty";
-import { useTypes } from "../../../hooks";
+import { useSelect, useTypes } from "../../../hooks";
 import TypeInfo from "./TypeInfo";
 
 export default function TypesTab() {
   const { types, addType } = useTypes();
+  const { selectedElement, setSelectedElement } = useSelect();
 
   return (
     <>
@@ -52,7 +53,17 @@ export default function TypesTab() {
       {types.length <= 0 ? (
         <Empty title="No types" text="Make your own custom data types" />
       ) : (
-        <Collapse accordion>
+        <Collapse
+          activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
+          onChange={(id) =>
+            setSelectedElement((prev) => ({
+              ...prev,
+              id: parseInt(id),
+              open: true,
+            }))
+          }
+          accordion
+        >
           {types.map((t, i) => (
             <TypeInfo data={t} key={i} index={i} />
           ))}