implement repeatGroupRows in tree horizontal layout

infinite-table · Oct 25, 2024 · 298e034 · 298e034
1 parent 1f1deb9
commit 298e034
Show file tree

Hide file tree

Showing 20 changed files with 865 additions and 105 deletions.
diff --git a/examples/src/pages/tests/horizontal-layout/example.page.tsx b/examples/src/pages/tests/horizontal-layout/example.page.tsx
@@ -203,7 +203,7 @@ const columns: InfiniteTablePropColumns<Developer> = {
   //   columnGroup: 'colgroup',
   // },
   // currency: { field: 'currency', style, columnGroup: 'colgroup' },
-  // country: { field: 'country', style, columnGroup: 'colgroup' },
+  country: { field: 'country' },
 };
 
 // const render: InfiniteTableColumn<Developer>['render'] = ({
@@ -296,7 +296,7 @@ export default () => {
   const [cols, setCols] = React.useState(columns);
   const [wrapRowsHorizontally, setWrapRowsHorizontally] = React.useState(true);
   return (
-    <>
+    <div className="bg-black flex flex-col gap-2">
       {Object.keys(columns).map((colId) => {
         return (
           <label key={colId}>
@@ -321,13 +321,15 @@ export default () => {
         );
       })}
       <button
+        className="bg-white text-black"
         onClick={() => {
           setWrapRowsHorizontally((x) => !x);
         }}
       >
         toggle
       </button>
       <button
+        className="bg-white text-black"
         onClick={() => {
           dataSourceApi?.updateData({
             id: 16,
@@ -373,9 +375,18 @@ export default () => {
             //   },
             // }}
             wrapRowsHorizontally={wrapRowsHorizontally}
+            repeatWrappedGroupRows={(rowInfo) => {
+              if (!rowInfo.isGroupRow) {
+                return false;
+              }
+              // return true;
+              const res = rowInfo.groupNesting === 2;
+              console.log('repeatWrappedGroupRows', res);
+              return res;
+            }}
             columnDefaultWidth={200}
             columnDefaultEditable
-            defaultActiveRowIndex={168}
+            // defaultActiveRowIndex={168}
             keyboardNavigation="row"
             domProps={{
               style: {
@@ -386,6 +397,6 @@ export default () => {
           />
         </DataSource>
       </React.StrictMode>
-    </>
+    </div>
   );
 };
diff --git a/examples/src/pages/tests/table/treegrid/custom-collapsed.page.tsx b/examples/src/pages/tests/table/treegrid/custom-collapsed.page.tsx
@@ -0,0 +1,117 @@
+import * as React from 'react';
+
+import {
+  InfiniteTableColumn,
+  TreeDataSource,
+  TreeGrid,
+} from '@infinite-table/infinite-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',
+        collapsed: true,
+        children: [
+          {
+            name: 'mountain.jpg',
+            type: 'file',
+            sizeKB: 302,
+            id: '5',
+          },
+        ],
+      },
+      {
+        type: 'folder',
+        name: 'misc',
+        id: '4',
+        collapsed: true,
+        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() {
+  return (
+    <React.StrictMode>
+      <TreeDataSource<FileSystemNode>
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+        isNodeExpanded={({ data }) => data.collapsed !== true}
+        onTreeExpandStateChange={(
+          _treeExpandState,
+          { dataSourceApi, nodePath, nodeState },
+        ) => {
+          if (nodePath) {
+            const data = dataSourceApi.treeApi.getNodeDataByPath(nodePath)!;
+
+            data.collapsed = nodeState === 'collapsed' ? true : false;
+          }
+        }}
+      >
+        <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/custom-collapsed.spec.ts b/examples/src/pages/tests/table/treegrid/custom-collapsed.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@testing';
+
+export default test.describe('Custom collapse', () => {
+  test('should work when passing an isNodeCollapsed fn', async ({
+    page,
+    rowModel,
+  }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.getRenderedRowCount()).toBe(5);
+
+    await rowModel.toggleGroupRow(2);
+    expect(await rowModel.getRenderedRowCount()).toBe(6);
+
+    await rowModel.toggleGroupRow(2);
+    expect(await rowModel.getRenderedRowCount()).toBe(5);
+  });
+});
diff --git a/examples/src/pages/tests/table/treegrid/default.page.tsx b/examples/src/pages/tests/table/treegrid/default.page.tsx
@@ -35,7 +35,7 @@ export default function DataTestPage() {
         selectionMode="multi-row"
         defaultTreeSelection={{
           defaultSelection: false,
-          selectedNodes: [
+          selectedPaths: [
             ['1', '4', '5'],
             ['1', '3'],
           ],

diff --git a/examples/src/pages/tests/table/treegrid/expand-collapse.page.tsx b/examples/src/pages/tests/table/treegrid/expand-collapse.page.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react';
+
+import {
+  InfiniteTableColumn,
+  TreeDataSource,
+  TreeGrid,
+  TreeSelectionValue,
+} from '@infinite-table/infinite-react';
+import { useState } from 'react';
+import { TreeExpandStateValue } from '@infinite-table/infinite-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,
+    renderSelectionCheckBox: true,
+    renderValue: ({ value, data }) => {
+      return (
+        <>
+          {value} - {data!.id}
+        </>
+      );
+    },
+  },
+  type: { field: 'type' },
+  sizeKB: { field: 'sizeKB' },
+};
+
+export default function DataTestPage() {
+  const [treeSelectionState, setTreeSelectionState] =
+    useState<TreeSelectionValue>({
+      defaultSelection: false,
+      selectedPaths: [
+        ['1', '4', '5'],
+        ['1', '3'],
+      ],
+    });
+  const [treeExpandState, setTreeExpandState] = useState<TreeExpandStateValue>({
+    defaultExpanded: true,
+    collapsedPaths: [],
+  });
+  return (
+    <React.StrictMode>
+      <TreeDataSource<FileSystemNode>
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+        selectionMode="multi-row"
+        treeSelection={treeSelectionState}
+        onTreeSelectionChange={setTreeSelectionState}
+        treeExpandState={treeExpandState}
+        onTreeExpandStateChange={(expandState) => {
+          console.log('expandState', expandState);
+          debugger;
+          setTreeExpandState(expandState);
+        }}
+      >
+        <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/expand-collapse.spec.ts b/examples/src/pages/tests/table/treegrid/expand-collapse.spec.ts
@@ -0,0 +1,39 @@
+import { test, expect } from '@testing';
+
+export default test.describe('Controlled collapse and expand', () => {
+  test('should work via the api', async ({ page, apiModel, rowModel }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.getRenderedRowCount()).toBe(7);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.collapseAll();
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.expandAll();
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(7);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.collapseNode(['1', '3']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(6);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.collapseNode(['1']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.expandNode(['1']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(6);
+  });
+});