Enhance TreeApi with getSelectedLeafNodePaths and related methods and release version patch

examples/src/pages/tests/table/treegrid/selection-api.page.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+
+import {
+  DataSourceApi,
+  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',
+          },
+          {
+            name: 'mountain2.jpg',
+            type: 'file',
+            sizeKB: 352,
+            id: '6',
+          },
+        ],
+      },
+      {
+        type: 'folder',
+        name: 'misc',
+        id: '4',
+        collapsed: true,
+        children: [
+          {
+            name: 'beach.jpg',
+            type: 'file',
+            sizeKB: 2024,
+            id: '7',
+          },
+        ],
+      },
+      {
+        type: 'file',
+        name: 'last.txt',
+        id: '8',
+      },
+    ],
+  },
+];
+
+const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
+  name: {
+    field: 'name',
+    defaultWidth: 300,
+    renderTreeIcon: true,
+    renderSelectionCheckBox: true,
+    renderValue: ({ value, data }) => {
+      return (
+        <>
+          {value} - {data!.id}
+        </>
+      );
+    },
+  },
+  type: { field: 'type' },
+  sizeKB: { field: 'sizeKB' },
+};
+
+export default function DataTestPage() {
+  const [dataSourceApi, setDataSourceApi] =
+    React.useState<DataSourceApi<FileSystemNode> | null>(null);
+  return (
+    <React.StrictMode>
+      <button onClick={() => dataSourceApi!.treeApi.selectAll()}>
+        Select all
+      </button>
+      <TreeDataSource<FileSystemNode>
+        onReady={setDataSourceApi}
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+        defaultTreeSelection={{
+          defaultSelection: true,
+          deselectedPaths: [['1', '3']],
+          selectedPaths: [['1', '3', '6']],
+        }}
+      >
+        <TreeGrid<FileSystemNode>
+          wrapRowsHorizontally
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/treegrid/selection-api.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@testing';
+
+export default test.describe('TreeApi', () => {
+  test('getSelectedLeafNodePaths works', async ({ page, apiModel }) => {
+    await page.waitForInfinite();
+
+    const paths = await apiModel.evaluateTreeApi((treeApi) => {
+      return treeApi.getSelectedLeafNodePaths();
+    });
+
+    expect(paths).toEqual([
+      ['1', '2'],
+      ['1', '3', '6'],
+      ['1', '4', '7'],
+      ['1', '8'],
+    ]);
+  });
+});

examples/src/pages/tests/table/treegrid/selection4.page.tsx

@@ -0,0 +1,162 @@
+import {
+  DataSourceApi,
+  InfiniteTableColumn,
+  TreeDataSource,
+  TreeGrid,
+  TreeSelectionValue,
+} from '@infinite-table/infinite-react';
+import { useState } from 'react';
+
+type FileSystemNode = {
+  id: string;
+  name: string;
+  children?: FileSystemNode[];
+};
+const nodes: FileSystemNode[] = [
+  {
+    id: '1',
+    name: 'Documents',
+    children: [
+      {
+        id: '10',
+        name: 'Private',
+        children: [
+          {
+            id: '100',
+            name: 'Report.docx',
+          },
+          {
+            id: '101',
+            name: 'Vacation.docx',
+          },
+          {
+            id: '102',
+            name: 'CV.pdf',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    name: 'Desktop',
+    children: [
+      {
+        id: '20',
+        name: 'unknown.txt',
+      },
+    ],
+  },
+  {
+    id: '3',
+    name: 'Media',
+    children: [
+      {
+        id: '30',
+        name: 'Music',
+      },
+      {
+        id: '31',
+        name: 'Videos',
+        children: [
+          {
+            id: '310',
+            name: 'Vacation.mp4',
+          },
+          {
+            id: '311',
+            name: 'Youtube',
+            children: [
+              {
+                id: '3110',
+                name: 'Infinity',
+              },
+              {
+                id: '3111',
+                name: 'Infinity 2',
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const columns: Record<string, InfiniteTableColumn<FileSystemNode>> = {
+  name: {
+    field: 'name',
+    header: 'Name',
+    defaultWidth: 500,
+    renderValue: ({ value, rowInfo }) => {
+      return (
+        <div style={{ color: 'red', display: 'inline-block' }}>
+          {rowInfo.id} - {value}
+        </div>
+      );
+    },
+    renderTreeIcon: true,
+    renderSelectionCheckBox: true,
+  },
+};
+
+const defaultTreeSelection: TreeSelectionValue = {
+  defaultSelection: false,
+  selectedPaths: [['3']],
+  deselectedPaths: [['3', '31', '311', '3110']],
+};
+
+export default function App() {
+  const [dataSourceApi, setDataSourceApi] =
+    useState<DataSourceApi<FileSystemNode> | null>();
+
+  return (
+    <>
+      <TreeDataSource
+        onReady={setDataSourceApi}
+        nodesKey="children"
+        primaryKey="id"
+        data={dataSource}
+        defaultTreeSelection={defaultTreeSelection}
+        selectionMode="multi-row"
+        onTreeSelectionChange={(e, { treeSelectionState }) => {
+          console.log(
+            'onTreeSelectionChange',
+            e,
+            treeSelectionState.getSelectedLeafNodePaths(),
+          );
+        }}
+      >
+        <div
+          style={{
+            color: 'var(--infinite-cell-color)',
+            padding: 10,
+            display: 'flex',
+            gap: 10,
+          }}
+        >
+          <button
+            onClick={() => {
+              dataSourceApi!.treeApi.selectAll();
+            }}
+          >
+            Select all
+          </button>
+          <button
+            onClick={() => {
+              dataSourceApi!.treeApi.deselectAll();
+            }}
+          >
+            Deselect all
+          </button>
+        </div>
+
+        <TreeGrid columns={columns} domProps={{ style: { height: '100%' } }} />
+      </TreeDataSource>
+    </>
+  );
+}
+
+const dataSource = () => {
+  return Promise.resolve(nodes);
+};

examples/src/pages/tests/table/treegrid/selection4.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@testing';
+
+export default test.describe('TreeSelectionProp', () => {
+  test('when defined, makes selectionMode default to multi-row', async ({
+    page,
+  }) => {
+    await page.waitForInfinite();
+
+    const headerCheckbox = await page.locator(
+      '.InfiniteHeader input[type="checkbox"]',
+    );
+    expect(
+      await headerCheckbox?.evaluate((el) => {
+        return {
+          checked: (el as HTMLInputElement).checked,
+          indeterminate: (el as HTMLInputElement).indeterminate,
+        };
+      }),
+    ).toEqual({ checked: false, indeterminate: true });
+  });
+});