fix some tests

examples/src/pages/tests/table/treegrid/is-node-read-only.page.tsx

@@ -0,0 +1,95 @@
+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',
+        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 DataTestPage() {
+  return (
+    <React.StrictMode>
+      <TreeDataSource<FileSystemNode>
+        data={nodes}
+        primaryKey="id"
+        isNodeReadOnly={(rowInfo) => rowInfo.data.id === '1'}
+        defaultTreeExpandState={{
+          defaultExpanded: true,
+          collapsedPaths: [['1']],
+        }}
+      >
+        <TreeGrid<FileSystemNode>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </React.StrictMode>
+  );
+}

examples/src/pages/tests/table/treegrid/is-node-read-only.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@testing';
+
+export default test.describe('isNodeReadOnly', () => {
+  test('should work ', async ({ page, rowModel, treeModel, apiModel }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    await treeModel.toggleParentNode(0);
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.toggleNode(['1']);
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(1);
+
+    // force: true should be respected
+    await apiModel.evaluateDataSource((api) => {
+      api.treeApi.toggleNode(['1'], { force: true });
+    });
+
+    expect(await rowModel.getRenderedRowCount()).toBe(5);
+  });
+});

examples/src/pages/tests/table/treegrid/is-node-selectable.page.tsx

@@ -0,0 +1,96 @@
+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',
+        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,
+    renderSelectionCheckBox: 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"
+        isNodeSelectable={(rowInfo) => rowInfo.data.id !== '3'}
+        defaultTreeSelection={{
+          defaultSelection: false,
+          selectedPaths: [],
+        }}
+      >
+        <TreeGrid<FileSystemNode>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </React.StrictMode>
+  );
+}

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+
+import { TreeDataSource, TreeGrid } from '@infinite-table/infinite-react';
+import {
+  InfiniteTablePropRowStyle,
+  InfiniteTableRowInfo,
+  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;
+    }
+    const getAllData = dataSourceApi.getRowInfoArray();
+    console.log('data source before remove', getAllData);
+
+    const listOfPrimaryKeys = getAllData.map((row: any) => row.data.id);
+    console.log('listOfPrimaryKeys', listOfPrimaryKeys);
+
+    await dataSourceApi.removeDataArrayByPrimaryKeys(listOfPrimaryKeys);
+    console.log('data source after remove', dataSourceApi.getRowInfoArray());
+  };
+
+  const removeRowsByDataRow = async () => {
+    if (!dataSourceApi) {
+      return;
+    }
+    const getAllData = dataSourceApi.getRowInfoArray();
+    console.log('data source before remove', getAllData);
+
+    const listOfRows = getAllData.map((row: any) => row.data);
+    console.log('listOfRows', listOfRows);
+    await dataSourceApi.removeDataArray(listOfRows);
+    console.log('data source after remove', dataSourceApi.getRowInfoArray());
+  };
+
+  const removeById = async () => {
+    if (!dataSourceApi) {
+      return;
+    }
+    await dataSourceApi.removeDataByPrimaryKey('3');
+  };
+
+  return (
+    <>
+      <button type="button" onClick={removeRowsByPrimaryKey}>
+        Click to removeRowsByPrimaryKey
+      </button>
+      <button type="button" onClick={removeRowsByDataRow}>
+        Click to removeRowsByDataRow
+      </button>
+      <button type="button" onClick={removeById}>
+        Click to remove one by id
+      </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>
+    </>
+  );
+}