fix: headless-tree package closure error

l1xnan · Jun 17, 2024 · a35257d · a35257d
1 parent cd1325c
commit a35257d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 35 deletions.
diff --git a/src/components/custom/TreeView3.tsx b/src/components/custom/TreeView3.tsx
@@ -1,6 +1,6 @@
 import { Tooltip } from '@/components/custom/tooltip';
 import { cn } from '@/lib/utils';
-import { DBType, selectedNodeAtom, useDBListStore } from '@/stores/dbList';
+import { DBType, NodeContextType, selectedNodeAtom } from '@/stores/dbList';
 import { TableContextType, useTabsStore } from '@/stores/tabs';
 import { NodeElementType } from '@/types';
 import { Node3Type, convertId, convertTreeToMap, filterTree } from '@/utils';
@@ -232,49 +232,37 @@ export const TreeView3 = forwardRef(
     },
     ref,
   ) => {
-    const treeData = useMemo(
-      () =>
-        ({
-          id: ROOT,
-          children: dbList.map((db) => ({
-            ...convertId(db.data, db.id, db.displayName),
-            icon: db.dialect,
-          })),
-        }) as NodeElementType,
-      [dbList],
-    );
-
-    const filterData = useMemo(
-      () => filterTree(treeData, search),
-      [treeData, search],
-    );
     const updateTab = useTabsStore((s) => s.update);
-    const tableMap = useDBListStore((s) => s.tableMap);
-
-    const data = useMemo(
-      () => convertTreeToMap(filterData as NodeElementType),
-      [filterData],
-    );
-
     const [, setSelectedNode] = useAtom(selectedNodeAtom);
 
-    console.log('filterData', filterData, data);
+    const treeData = useMemo(() => {
+      const _treeData = {
+        id: ROOT,
+        children: dbList.map((db) => ({
+          ...convertId(db.data, db.id, db.displayName),
+          icon: db.dialect,
+        })),
+      };
+      return convertTreeToMap(
+        filterTree(_treeData as NodeElementType, search) as NodeElementType,
+      );
+    }, [dbList, search]);
 
     const handleSelectNode = (item: ItemInstance<Node3Type>) => {
-      const data = item.getItemData()?.data;
-      setSelectedNode(data);
+      const itemData = item.getItemData()?.data;
+      setSelectedNode(itemData as unknown as NodeContextType);
     };
+
+    // BUG: 闭包存在问题，只能获取上一次的外部变量值
     const handleDoubleClickNode = (item: ItemInstance<Node3Type>) => {
-      const data = item.getItemData()?.data;
+      const node = item.getItemData()?.data;
 
-      if (!data) {
+      if (!node) {
         console.warn('doubleClick data is null!');
         return;
       }
 
-      const { dbId, path } = data;
-
-      const node = tableMap?.get(dbId)?.get(path as string);
+      const { dbId, path } = node;
 
       const nodeContext = {
         dbId,
@@ -285,7 +273,7 @@ export const TreeView3 = forwardRef(
       if (node && !noDataTypes.includes(node.type ?? '')) {
         const item: TableContextType = {
           ...nodeContext,
-          id: data.id,
+          id: node.id,
           dbId,
           displayName: node?.name as string,
           type: 'table',
@@ -300,7 +288,7 @@ export const TreeView3 = forwardRef(
 
     return (
       <TreeView
-        data={data}
+        data={treeData}
         ref={ref}
         onSelectNode={handleSelectNode}
         onDoubleClickNode={handleDoubleClickNode}

diff --git a/src/utils.ts b/src/utils.ts
@@ -93,10 +93,10 @@ export function convertId(
 ): NodeElementType {
   data.children = data?.children?.map((item) => convertId(item, dbId));
   return {
+    ...data,
     id: `${dbId}:${data.path}`,
     dbId,
     icon: data.type ?? 'file',
-    ...data,
     displayName,
   } as NodeElementType;
 }