fix #260 and release version patch

infinite-table · Nov 1, 2024 · e6fce90 · e6fce90
1 parent c267f59
commit e6fce90
Show file tree

Hide file tree

Showing 14 changed files with 557 additions and 18 deletions.
diff --git a/examples/src/pages/tests/table/treegrid/remove-children-of-collapsed-node.page.tsx b/examples/src/pages/tests/table/treegrid/remove-children-of-collapsed-node.page.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+import { TreeDataSource, TreeGrid } from '@infinite-table/infinite-react';
+import {
+  DataSourceApi,
+  type InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+
+export type FileSystemNode = {
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileSystemNode[] | null;
+  sizeKB?: number;
+  id: string;
+  collapsed?: boolean;
+};
+
+const nodes: FileSystemNode[] = [
+  {
+    name: 'Documents',
+    type: 'folder',
+    id: '1',
+    children: [
+      {
+        name: 'report.doc',
+        type: 'file',
+        sizeKB: 100,
+        id: '2',
+      },
+      {
+        type: 'folder',
+        name: 'pictures',
+        id: '3',
+        collapsed: true,
+        children: [
+          {
+            name: 'mountain.jpg',
+            type: 'file',
+            sizeKB: 302,
+            id: '5',
+          },
+        ],
+      },
+
+      {
+        type: 'file',
+        name: 'last.txt',
+        id: '7',
+      },
+    ],
+  },
+];
+
+const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
+  name: {
+    field: 'name',
+    renderTreeIcon: true,
+
+    renderValue: ({ value, data }) => {
+      return (
+        <>
+          {value} - {data!.id}
+        </>
+      );
+    },
+  },
+  type: { field: 'type' },
+  sizeKB: { field: 'sizeKB' },
+};
+export default function App() {
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<FileSystemNode> | null>(null);
+
+  const removeRowsByPrimaryKey = async () => {
+    if (!dataSourceApi) {
+      return;
+    }
+
+    dataSourceApi.removeDataArray([{ id: '3' }, { id: '7' }]);
+  };
+
+  return (
+    <>
+      <button type="button" onClick={removeRowsByPrimaryKey}>
+        Click to remove children
+      </button>
+      <TreeDataSource<FileSystemNode>
+        onReady={setDataSourceApi}
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+      >
+        <TreeGrid<FileSystemNode>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </>
+  );
+}
diff --git a/examples/src/pages/tests/table/treegrid/remove-children-of-collapsed-node.spec.ts b/examples/src/pages/tests/table/treegrid/remove-children-of-collapsed-node.spec.ts
@@ -0,0 +1,28 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('TreeDataSourceApi', () => {
+  test('removeDataArray - with ids of collapsed children', async ({
+    page,
+    rowModel,
+    treeModel,
+  }) => {
+    await page.waitForInfinite();
+
+    let rowCount = await rowModel.getRenderedRowCount();
+
+    expect(rowCount).toBe(5);
+
+    await treeModel.toggleParentNode(0);
+
+    rowCount = await rowModel.getRenderedRowCount();
+
+    expect(rowCount).toBe(1);
+
+    await page.click('button:text("Click to remove children")');
+    await treeModel.toggleParentNode(0);
+
+    rowCount = await rowModel.getRenderedRowCount();
+
+    expect(rowCount).toBe(2);
+  });
+});
diff --git a/examples/src/pages/tests/table/treegrid/test-isNodeExpanded.page.tsx b/examples/src/pages/tests/table/treegrid/test-isNodeExpanded.page.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+
+import {
+  DataSourcePropIsNodeExpanded,
+  InfiniteTableColumn,
+  TreeDataSource,
+  TreeExpandState,
+  TreeGrid,
+} from '@infinite-table/infinite-react';
+import { useState } from 'react';
+
+export type FileSystemNode = {
+  name: string;
+  type: 'file' | 'folder';
+  children?: FileSystemNode[] | null;
+  sizeKB?: number;
+  id: string;
+  collapsed?: boolean;
+};
+
+export const nodes: FileSystemNode[] = [
+  {
+    name: 'Documents',
+    type: 'folder',
+    id: '1',
+    children: [
+      {
+        name: 'report.doc',
+        type: 'file',
+        sizeKB: 100,
+        id: '2',
+      },
+      {
+        type: 'folder',
+        name: 'pictures',
+        id: '3',
+        children: [
+          {
+            name: 'mountain.jpg',
+            type: 'file',
+            sizeKB: 302,
+            id: '5',
+          },
+        ],
+      },
+      {
+        type: 'folder',
+        name: 'diverse',
+        id: '4',
+        children: [
+          {
+            name: 'beach.jpg',
+            type: 'file',
+            sizeKB: 2024,
+            id: '6',
+          },
+        ],
+      },
+      {
+        type: 'file',
+        name: 'last.txt',
+        id: '7',
+      },
+    ],
+  },
+];
+
+const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
+  name: {
+    field: 'name',
+    renderTreeIcon: true,
+
+    renderValue: ({ value, data }) => {
+      return (
+        <>
+          {value} - {data!.id}
+        </>
+      );
+    },
+  },
+  type: { field: 'type' },
+  sizeKB: { field: 'sizeKB' },
+};
+
+export default function DataTestPage() {
+  const [treeExpandState] = useState<TreeExpandState>(() => {
+    return new TreeExpandState({
+      defaultExpanded: false,
+      expandedPaths: [['1', '4', '5'], ['1']],
+    });
+  });
+  const [key, setKey] = useState(0);
+  const isNodeExpanded = React.useCallback<
+    DataSourcePropIsNodeExpanded<FileSystemNode>
+  >(
+    (rowInfo) => {
+      return rowInfo.data.id === '3'
+        ? false
+        : treeExpandState.isNodeExpanded(rowInfo.nodePath);
+    },
+    [key],
+  );
+
+  return (
+    <React.StrictMode>
+      <button
+        onClick={() => {
+          treeExpandState.expandAll();
+          setKey((k) => k + 1);
+        }}
+      >
+        expand all
+      </button>
+      <TreeDataSource<FileSystemNode>
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+        treeExpandState={treeExpandState}
+        onTreeExpandStateChange={(treeExpandStateValue) => {
+          treeExpandState.update(treeExpandStateValue);
+          setKey((k) => k + 1);
+        }}
+        isNodeExpanded={isNodeExpanded}
+      >
+        <TreeGrid<FileSystemNode>
+          wrapRowsHorizontally
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </React.StrictMode>
+  );
+}
diff --git a/examples/src/pages/tests/table/treegrid/test-isNodeExpanded.spec.ts b/examples/src/pages/tests/table/treegrid/test-isNodeExpanded.spec.ts
@@ -0,0 +1,27 @@
+import { test, expect } from '@testing';
+
+export default test.describe('isNodeExpanded', () => {
+  test('works as expected', async ({ page, rowModel, tableModel }) => {
+    await page.waitForInfinite();
+
+    const cell = tableModel.withCell({
+      rowIndex: 2,
+      colIndex: 0,
+    });
+
+    const collapsedNode = tableModel.withCell({
+      rowIndex: 3,
+      colIndex: 0,
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(5);
+    expect(await cell.isTreeIconExpanded()).toBe(false);
+    expect(await collapsedNode.isTreeIconExpanded()).toBe(false);
+
+    await page.click('button:text("expand all")');
+
+    expect(await rowModel.getRenderedRowCount()).toBe(6);
+    expect(await cell.isTreeIconExpanded()).toBe(false);
+    expect(await collapsedNode.isTreeIconExpanded()).toBe(true);
+  });
+});
diff --git a/examples/src/pages/tests/testUtils/TableTestingModel.ts b/examples/src/pages/tests/testUtils/TableTestingModel.ts
@@ -138,6 +138,13 @@ export class TableTestingModel {
         );
       },
 
+      isTreeIconExpanded: async () => {
+        const cellLocator = this.rowModel.getCellLocator(cellLocation);
+
+        const icon = cellLocator.locator('[data-name="expand-collapse-icon"]');
+        return (await icon.getAttribute('data-state')) === 'expanded';
+      },
+
       getLocator: () => {
         return this.rowModel.getCellLocator(cellLocation);
       },

diff --git a/source/src/components/DataSource/TreeApi.ts b/source/src/components/DataSource/TreeApi.ts
@@ -159,10 +159,10 @@ export class TreeApiImpl<T> implements TreeApi<T> {
         return false;
       }
       if (isNodeCollapsed) {
-        return !isNodeExpanded!(rowInfo);
+        return !isNodeExpanded!(rowInfo, treeExpandState);
       }
       if (isNodeExpanded) {
-        return isNodeExpanded!(rowInfo);
+        return isNodeExpanded!(rowInfo, treeExpandState);
       }
     }
 

diff --git a/source/src/components/DataSource/getDataSourceApi.ts b/source/src/components/DataSource/getDataSourceApi.ts
@@ -178,18 +178,18 @@ class DataSourceApiImpl<T> implements DataSourceApi<T> {
         case 'delete':
           if (operation.primaryKeys) {
             operation.primaryKeys.forEach((key) => {
-              const rowInfo = this.getRowInfoByPrimaryKey(key);
-              if (rowInfo && !rowInfo.isGroupRow) {
-                cache.delete(key, rowInfo.data, operation.metadata);
+              const originalData = this.getDataByPrimaryKey(key);
+              if (originalData) {
+                cache.delete(key, originalData, operation.metadata);
               }
             });
           } else if (operation.nodePaths) {
             operation.nodePaths.forEach((nodePath) => {
-              const rowInfo = this.getRowInfoByNodePath(nodePath);
-              if (rowInfo && !rowInfo.isGroupRow) {
+              const originalData = this.getDataByNodePath(nodePath);
+              if (originalData) {
                 cache.deleteNodePath(
                   nodePath,
-                  rowInfo.data,
+                  originalData,
                   operation.metadata,
                 );
               }

diff --git a/source/src/components/DataSource/state/reducer.ts b/source/src/components/DataSource/state/reducer.ts
@@ -528,17 +528,22 @@ export function concludeReducer<T>(params: {
 
   let isNodeExpanded:
     | ((rowInfo: InfiniteTable_Tree_RowInfoParentNode<T>) => boolean)
-    | undefined = state.isNodeExpanded;
+    | undefined;
+
+  if (state.isNodeExpanded) {
+    isNodeExpanded = (rowInfo) =>
+      state.isNodeExpanded!(rowInfo, treeExpandState!);
+  }
 
   if (state.isNodeCollapsed) {
-    isNodeExpanded = (rowInfo) => !state.isNodeExpanded!(rowInfo);
+    isNodeExpanded = (rowInfo) =>
+      !state.isNodeExpanded!(rowInfo, treeExpandState!);
   }
 
   if (!isNodeExpanded) {
-    const defaultIsRowExpanded = (rowInfo: InfiniteTableRowInfo<T>) => {
-      if (!rowInfo.isTreeNode || !rowInfo.isParentNode) {
-        return false;
-      }
+    const defaultIsRowExpanded = (
+      rowInfo: InfiniteTable_Tree_RowInfoParentNode<T>,
+    ) => {
       return treeExpandState!.isNodeExpanded(rowInfo.nodePath);
     };
 

diff --git a/source/src/components/DataSource/types.ts b/source/src/components/DataSource/types.ts
@@ -488,6 +488,7 @@ export type DataSourcePropIsNodeSelectable<T> = (
 
 export type DataSourcePropIsNodeExpanded<T> = (
   rowInfo: InfiniteTable_Tree_RowInfoParentNode<T>,
+  treeExpandState: TreeExpandState,
 ) => boolean;
 
 // export type DataSourcePropIsCellSelected<T> = ( // TODO implement this