release version patch and improve isNodeReadOnly

Author: radubrehar

examples/src/pages/tests/table/treegrid/test-isNodeReadOnly.page.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react';
+
+import {
+  InfiniteTableColumn,
+  TreeDataSource,
+  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 - empty',
+        id: '3',
+        children: [],
+      },
+      {
+        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' },
+};
+
+const returnFalse = () => false;
+export default function DataTestPage() {
+  const [allowExpandEmptyNodes, setAllowExpandEmptyNodes] = useState(false);
+
+  const isNodeReadOnly = allowExpandEmptyNodes ? returnFalse : undefined;
+  return (
+    <React.StrictMode>
+      <button
+        onClick={() => {
+          setAllowExpandEmptyNodes((v) => !v);
+        }}
+      >
+        toggle
+      </button>
+      <TreeDataSource<FileSystemNode>
+        data={nodes}
+        primaryKey="id"
+        nodesKey="children"
+        isNodeReadOnly={isNodeReadOnly}
+      >
+        <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/test-isNodeReadOnly.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@testing';
+
+export default test.describe('isNodeReadOnly', () => {
+  test('works as expected', async ({ page, tableModel }) => {
+    await page.waitForInfinite();
+
+    const cell = tableModel.withCell({
+      rowIndex: 2,
+      colIndex: 0,
+    });
+
+    expect(await cell.isTreeIconExpanded()).toBe(true);
+    expect(await cell.isTreeIconDisabled()).toBe(true);
+
+    await page.click('button:text("toggle")');
+
+    expect(await cell.isTreeIconExpanded()).toBe(true);
+    expect(await cell.isTreeIconDisabled()).toBe(false);
+  });
+});

examples/src/pages/tests/testUtils/TableTestingModel.ts

@@ -130,6 +130,12 @@ export class TableTestingModel {
   }
 
   withCell(cellLocation: CellLocation) {
+    const getTreeIcon = () => {
+      return this.rowModel
+        .getCellLocator(cellLocation)
+        .locator('[data-name="expand-collapse-icon"]');
+    };
+
     return {
       getComputedStyleProperty: async (styleName: string) => {
         return await this.columnModel.getCellComputedStyleProperty(
@@ -138,13 +144,20 @@ export class TableTestingModel {
         );
       },
 
-      isTreeIconExpanded: async () => {
-        const cellLocator = this.rowModel.getCellLocator(cellLocation);
+      getTreeIcon: () => {
+        return getTreeIcon();
+      },
 
-        const icon = cellLocator.locator('[data-name="expand-collapse-icon"]');
+      isTreeIconExpanded: async () => {
+        const icon = getTreeIcon();
         return (await icon.getAttribute('data-state')) === 'expanded';
       },
 
+      isTreeIconDisabled: async () => {
+        const icon = getTreeIcon();
+        return (await icon.getAttribute('data-disabled')) === 'true';
+      },
+
       getLocator: () => {
         return this.rowModel.getCellLocator(cellLocation);
       },

source/src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx

@@ -335,7 +335,7 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
     [rowIndex, rowDisabled, column.computedVisibleIndex, keyboardNavigation],
   );
 
-  const { selectionMode, cellSelection } = dataSourceState;
+  const { selectionMode, cellSelection, isNodeReadOnly } = dataSourceState;
 
   const cellSelected = renderParam.cellSelected;
 
@@ -585,6 +585,9 @@ function InfiniteTableColumnCellFn<T>(props: InfiniteTableColumnCellProps<T>) {
       hidden,
       inEdit,
       rowDetailState,
+      column.renderTreeIcon || column.renderTreeIconForParentNode
+        ? isNodeReadOnly
+        : false,
       ...objectValuesExcept(renderParam, {
         renderBag: true,
         selectCell: true,

source/src/components/InfiniteTable/components/icons/ExpandCollapseIcon.tsx

@@ -47,6 +47,7 @@ export function ExpandCollapseIcon(props: ExpandCollapseIconProps) {
     <svg
       data-name="expand-collapse-icon"
       data-state={currentState}
+      data-disabled={disabled}
       xmlns="http://www.w3.org/2000/svg"
       height={`${size}px`}
       viewBox="0 0 24 24"

source/src/components/InfiniteTable/hooks/useCellRendering.tsx

@@ -66,7 +66,7 @@ export function useCellRendering<T>(
     api: dataSourceApi,
   } = useDataSourceContextValue<T>();
 
-  const { dataArray } = dataSourceState;
+  const { dataArray, isNodeReadOnly } = dataSourceState;
 
   const getData = useLatest(dataArray);
   const {
@@ -286,6 +286,7 @@ export function useCellRendering<T>(
       showZebraRows,
       brain,
       repaintId,
+      isNodeReadOnly,
       rowStyle,
       rowClassName,
       cellClassName,