Merge pull request #137 from huyjs9/feat/search-nested-fields-tables

Search nested fields in tables

Author: 1ilit

src/components/EditorSidePanel/TablesTab/SearchBar.jsx

@@ -1,40 +1,64 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useSelect } from "../../../hooks";
-import { AutoComplete } from "@douyinfe/semi-ui";
+import { TreeSelect } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 import { ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
 export default function SearchBar({ tables }) {
   const { setSelectedElement } = useSelect();
-  const [searchText, setSearchText] = useState("");
   const { t } = useTranslation();
-  const filteredTable = useMemo(
-    () => tables.map((t) => t.name).filter((i) => i.includes(searchText)),
-    [tables, searchText],
-  );
+
+  const treeData = useMemo(() => {
+    return tables.map(({ id, name: parentName, fields }, i) => {
+      const children = fields.map(({ name }, j) => ({
+        tableId: id,
+        id: `${j}`,
+        label: name,
+        value: name,
+        key: `${i}-${j}`,
+      }));
+
+      return {
+        tableId: id,
+        id: `${i}`,
+        label: parentName,
+        value: parentName,
+        key: `${i}`,
+        children,
+      };
+    });
+  }, [tables]);
 
   return (
-    <AutoComplete
-      data={filteredTable}
-      value={searchText}
-      showClear
+    <TreeSelect
+      searchPosition="trigger"
+      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+      treeData={treeData}
       prefix={<IconSearch />}
-      placeholder={t("search")}
       emptyContent={<div className="p-3 popover-theme">{t("not_found")}</div>}
-      onChange={(v) => setSearchText(v)}
-      onSelect={(v) => {
-        const { id } = tables.find((t) => t.name === v);
+      filterTreeNode
+      placeholder={t("search")}
+      onChange={(node) => {
+        const { tableId, id, children } = node;
+
         setSelectedElement((prev) => ({
           ...prev,
-          id: id,
+          id: tableId,
           open: true,
           element: ObjectType.TABLE,
         }));
         document
-          .getElementById(`scroll_table_${id}`)
+          .getElementById(`scroll_table_${tableId}`)
           .scrollIntoView({ behavior: "smooth" });
+
+        if (!children) {
+          document
+            .getElementById(`scroll_table_${tableId}_input_${id}`)
+            .focus();
+        }
       }}
+      onChangeWithObject
       className="w-full"
     />
   );

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -19,6 +19,7 @@ export default function TableField({ data, tid, index }) {
     <Row gutter={6} className="hover-1 my-2">
       <Col span={7}>
         <Input
+          id={`scroll_table_${tid}_input_${index}`}
           value={data.name}
           validateStatus={data.name.trim() === "" ? "error" : "default"}
           placeholder="Name"