add search table functionality

src/components/editor_panel.jsx

@@ -105,44 +105,6 @@ export default function EditorPanel(props) {
           add area
         </button>
         <br />
-        <button
-          onClick={() => {
-            const newTable = {
-              id: props.tables.length,
-              name: `table_${props.tables.length}`,
-              x: 0,
-              y: 0,
-              fields: [
-                {
-                  name: "id",
-                  type: "UUID",
-                  default: "",
-                  check: "",
-                  primary: true,
-                  unique: true,
-                  notNull: true,
-                  increment: true,
-                  comment: "",
-                },
-              ],
-              comment: "",
-              indices: [],
-              color: defaultTableTheme,
-            };
-            props.setTables((prev) => {
-              const updatedTables = [...prev, newTable];
-              return updatedTables;
-            });
-            props.setCode((prev) =>
-              prev === ""
-                ? `CREATE TABLE \`${newTable.name}\`;`
-                : `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
-            );
-          }}
-        >
-          add
-        </button>
-        <br />
         <button
           onClick={() => {
             const blob = new Blob([props.code], {

src/components/table_overview.jsx

@@ -11,6 +11,7 @@ import {
   Popover,
   Checkbox,
   Select,
+  AutoComplete,
 } from "@douyinfe/semi-ui";
 import {
   IconMore,
@@ -18,10 +19,13 @@ import {
   IconColorPalette,
   IconDeleteStroked,
   IconCheckboxTick,
+  IconPlus,
+  IconSearch,
 } from "@douyinfe/semi-icons";
 
 export default function TableOverview(props) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
+  const [indexActiveKeyTable, setIndexActiveKeyTable] = useState("");
 
   const updateColor = (id, c) => {
     const updatedTables = [...props.tables];
@@ -29,17 +33,102 @@ export default function TableOverview(props) {
     props.setTables(updatedTables);
   };
 
+  const [value, setValue] = useState("");
+  const [filteredResult, setFilteredResult] = useState(
+    props.tables.map((t) => {
+      return t.name;
+    })
+  );
+
+  const handleStringSearch = (value) => {
+    setFilteredResult(
+      props.tables
+        .map((t) => {
+          return t.name;
+        })
+        .filter((i) => i.includes(value))
+    );
+  };
+
+  const handleChange = (value) => {
+    setValue(value);
+  };
+
   return (
-    <Collapse>
+    <>
+      <div className="p-2">
+        <Row gutter={6}>
+          <Col span={16}>
+            <AutoComplete
+              data={filteredResult}
+              value={value}
+              showClear
+              prefix={<IconSearch />}
+              placeholder="Search..."
+              emptyContent={<div className="p-3">No tables found</div>}
+              onSearch={(v) => handleStringSearch(v)}
+              onChange={(v) => handleChange(v)}
+              onSelect={(v) => {
+                const { id, name } = props.tables.find((t) => t.name === v);
+                setIndexActiveKeyTable(`${id}`);
+                document
+                  .getElementById(`${name}_scroll_id`)
+                  .scrollIntoView({ behavior: "smooth" });
+              }}
+              className="w-full"
+            />
+          </Col>
+          <Col span={8}>
+            <Button
+              icon={<IconPlus />}
+              block
+              onClick={() => {
+                const newTable = {
+                  id: props.tables.length,
+                  name: `table_${props.tables.length}`,
+                  x: 0,
+                  y: 0,
+                  fields: [
+                    {
+                      name: "id",
+                      type: "UUID",
+                      default: "",
+                      check: "",
+                      primary: true,
+                      unique: true,
+                      notNull: true,
+                      increment: true,
+                      comment: "",
+                    },
+                  ],
+                  comment: "",
+                  indices: [],
+                  color: defaultTableTheme,
+                };
+                props.setTables((prev) => {
+                  const updatedTables = [...prev, newTable];
+                  return updatedTables;
+                });
+              }}
+            >
+              Add table
+            </Button>
+          </Col>
+        </Row>
+      </div>
+      <Collapse
+        activeKey={indexActiveKeyTable}
+        onChange={(i) => setIndexActiveKeyTable(i)}
+      >
         {props.tables.map((t, i) => (
+          <div id={`${t.name}_scroll_id`} key={i}>
             <Collapse.Panel
-          key={i}
               header={
                 <div>
                   <Input defaultValue={t.name} borderless />
                 </div>
               }
-          itemKey={`${i}`}
+              itemKey={`${t.id}`}
             >
               {t.fields.map((f, j) => (
                 <Form
@@ -179,7 +268,10 @@ export default function TableOverview(props) {
                                 ></Checkbox>
                               </div>
                               <div className="flex justify-between items-center my-3">
-                            <label htmlFor="increment" className="font-medium">
+                                <label
+                                  htmlFor="increment"
+                                  className="font-medium"
+                                >
                                   Autoincrement
                                 </label>
                                 <Checkbox
@@ -392,7 +484,9 @@ export default function TableOverview(props) {
                                   onClick={() => updateColor(i, c)}
                                 >
                                   {t.color === c ? (
-                                <IconCheckboxTick style={{ color: "white" }} />
+                                    <IconCheckboxTick
+                                      style={{ color: "white" }}
+                                    />
                                   ) : (
                                     <IconCheckboxTick style={{ color: c }} />
                                   )}
@@ -410,7 +504,9 @@ export default function TableOverview(props) {
                                   onClick={() => updateColor(i, c)}
                                 >
                                   {t.color === c ? (
-                                <IconCheckboxTick style={{ color: "white" }} />
+                                    <IconCheckboxTick
+                                      style={{ color: "white" }}
+                                    />
                                   ) : (
                                     <IconCheckboxTick style={{ color: c }} />
                                   )}
@@ -424,7 +520,10 @@ export default function TableOverview(props) {
                     position="bottomLeft"
                     showArrow
                   >
-                <Button type="tertiary" icon={<IconColorPalette />}></Button>
+                    <Button
+                      type="tertiary"
+                      icon={<IconColorPalette />}
+                    ></Button>
                   </Popover>
                 </Col>
                 <Col span={8}>
@@ -472,7 +571,9 @@ export default function TableOverview(props) {
                 </Col>
               </Row>
             </Collapse.Panel>
+          </div>
         ))}
       </Collapse>
+    </>
   );
 }

src/index.css

@@ -6,10 +6,6 @@
   outline: none !important;
 }
 
-body {
-  overflow: hidden;
-}
-
 .bg-blue {
   background-color: #124559;
 }