Add updateChildrenByNodePath to DataSourceAPI and release version patch

Author: radubrehar

examples/src/pages/tests/table/datasource-api/getRowInfoByIndex.page.tsx

@@ -0,0 +1,142 @@
+import {
+  InfiniteTable,
+  DataSource,
+  type InfiniteTableColumn,
+} from '@infinite-table/infinite-react';
+import * as React from 'react';
+
+export type Employee = {
+  id: number;
+  companyName: string;
+  companySize: string;
+  firstName: string;
+  lastName: string;
+  country: string;
+  countryCode: string;
+  city: string;
+  streetName: string;
+  streetNo: string;
+  department: string;
+  team: string;
+  salary: number;
+  age: number;
+  email: string;
+};
+
+const data: Employee[] = [
+  {
+    id: 1,
+    firstName: 'John',
+    lastName: 'Doe',
+    country: 'USA',
+    city: 'New York',
+    salary: 100000,
+    department: 'Engineering',
+    team: 'Team A',
+    companyName: 'Company A',
+    companySize: 'Large',
+    countryCode: 'US',
+    streetName: 'Main St',
+    streetNo: '123',
+    age: 30,
+    email: '[email protected]',
+  },
+  {
+    id: 2,
+    firstName: 'Jane',
+    lastName: 'Smith',
+    country: 'Canada',
+    city: 'Toronto',
+    salary: 90000,
+    department: 'Marketing',
+    team: 'Team B',
+    companyName: 'Company B',
+    companySize: 'Medium',
+    countryCode: 'CA',
+    streetName: 'Maple Ave',
+    streetNo: '456',
+    age: 28,
+    email: '[email protected]',
+  },
+  {
+    id: 3,
+    firstName: 'Alice',
+    lastName: 'Johnson',
+    country: 'UK',
+    city: 'London',
+    salary: 120000,
+    department: 'Finance',
+    team: 'Team C',
+    companyName: 'Company C',
+    companySize: 'Small',
+    countryCode: 'UK',
+    streetName: 'Baker St',
+    streetNo: '789',
+    age: 35,
+    email: '[email protected]',
+  },
+  {
+    id: 4,
+    firstName: 'Bob',
+    lastName: 'Brown',
+    country: 'Australia',
+    city: 'Sydney',
+    salary: 110000,
+    department: 'Human Resources',
+    team: 'Team D',
+    companyName: 'Company D',
+    companySize: 'Medium',
+    countryCode: 'AU',
+    streetName: 'Collins St',
+    streetNo: '101',
+    age: 40,
+    email: '[email protected]',
+  },
+];
+
+export const columns: Record<string, InfiniteTableColumn<Employee>> = {
+  firstName: {
+    field: 'firstName',
+    header: 'First Name',
+  },
+  country: {
+    field: 'country',
+    header: 'Country',
+    columnGroup: 'location',
+  },
+  city: {
+    field: 'city',
+    header: 'City',
+    columnGroup: 'address',
+  },
+  salary: {
+    field: 'salary',
+    type: 'number',
+    header: 'Salary',
+  },
+  department: {
+    field: 'department',
+    header: 'Department',
+  },
+  team: {
+    field: 'team',
+    header: 'Team',
+  },
+  company: { field: 'companyName', header: 'Company' },
+  companySize: { field: 'companySize', header: 'Company Size' },
+};
+
+export default function App() {
+  return (
+    <>
+      <DataSource<Employee> data={data} primaryKey="id">
+        <InfiniteTable<Employee>
+          columns={columns}
+          domProps={{
+            style: { height: '80vh' },
+          }}
+        />
+      </DataSource>
+    </>
+  );
+}

examples/src/pages/tests/table/datasource-api/getRowInfoByIndex.spec.ts

@@ -0,0 +1,41 @@
+import { test, expect } from '@testing';
+
+export default test.describe.parallel('DataSourceApi', () => {
+  test('getRowInfoByIndex', async ({ page, apiModel }) => {
+    await page.waitForInfinite();
+
+    const rowInfo = await apiModel.evaluateDataSource((api) => {
+      return api.getRowInfoByIndex(0);
+    });
+
+    expect(rowInfo).toMatchObject({
+      indexInAll: 0,
+      data: {
+        id: 1,
+      },
+      dataSourceHasGrouping: false,
+      isGroupRow: false,
+      isTreeNode: false,
+    });
+
+    expect(
+      await apiModel.evaluateDataSource((api) => {
+        return api.getRowInfoArray().length;
+      }),
+    ).toBe(4);
+
+    const rowInfoLast = await apiModel.evaluateDataSource((api) => {
+      return api.getRowInfoByIndex(3);
+    });
+
+    expect(rowInfoLast).toMatchObject({
+      indexInAll: 3,
+      data: {
+        id: 4,
+      },
+      dataSourceHasGrouping: false,
+      isGroupRow: false,
+      isTreeNode: false,
+    });
+  });
+});

examples/src/pages/tests/table/treegrid/update-children-of-collapsed-node.page.tsx

@@ -0,0 +1,135 @@
+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',
+        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 update = async () => {
+    if (!dataSourceApi) {
+      return;
+    }
+
+    dataSourceApi.updateChildrenByNodePath(
+      (current) => {
+        return [
+          ...(current || []),
+          {
+            name: 'new.txt',
+            type: 'file',
+            id: '8',
+          },
+        ];
+      },
+      ['1', '3'],
+    );
+  };
+
+  const remove = async () => {
+    if (!dataSourceApi) {
+      return;
+    }
+
+    dataSourceApi.updateChildrenByNodePath(() => {
+      return undefined;
+    }, ['1', '3']);
+  };
+
+  return (
+    <>
+      <button type="button" onClick={update}>
+        update
+      </button>
+      <button type="button" onClick={remove}>
+        remove
+      </button>
+      <TreeDataSource<FileSystemNode>
+        onReady={setDataSourceApi}
+        defaultTreeExpandState={{
+          defaultExpanded: true,
+          collapsedPaths: [['1', '3']],
+        }}
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+      >
+        <TreeGrid<FileSystemNode>
+          domProps={{
+            style: {
+              margin: '5px',
+              height: 900,
+              border: '1px solid gray',
+              position: 'relative',
+            },
+          }}
+          columns={columns}
+        />
+      </TreeDataSource>
+    </>
+  );
+}

examples/src/pages/tests/table/treegrid/update-children-of-collapsed-node.spec.ts

@@ -0,0 +1,36 @@
+import { test, expect } from '@testing';
+
+export default test.describe('TreeApi updateChildrenByNodePath', () => {
+  test('works as expected', async ({ page, tableModel, treeModel }) => {
+    await page.waitForInfinite();
+
+    const treeCol = tableModel.withColumn('name');
+
+    await page.click('button:text("update")');
+
+    await treeModel.toggleParentNode(2);
+
+    let treeData = await treeCol.getValues();
+
+    expect(treeData).toEqual([
+      'Documents - 1',
+      'report.doc - 2',
+      'pictures - 3',
+      'mountain.jpg - 5',
+      'new.txt - 8',
+      'last.txt - 7',
+    ]);
+
+    await page.click('button:text("remove")');
+
+    treeData = await treeCol.getValues();
+
+    expect(treeData).toEqual([
+      'Documents - 1',
+      'report.doc - 2',
+      'pictures - 3',
+
+      'last.txt - 7',
+    ]);
+  });
+});