Implement disabled rows and release version patch

Author: radubrehar

examples/src/pages/tests/table/props/active-row-index/with-disabled-rows.page.tsx

@@ -0,0 +1,84 @@
+import {
+  InfiniteTable,
+  DataSource,
+  DataSourceData,
+  type InfiniteTablePropColumns,
+} from '@infinite-table/infinite-react';
+
+import * as React from 'react';
+import { useState } from 'react';
+
+type Developer = {
+  id: number;
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+
+  email: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+
+const dataSource: DataSourceData<Developer> = ({}) => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + `/developers10-sql`)
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  preferredLanguage: { field: 'preferredLanguage' },
+  id: { field: 'id' },
+  country: { field: 'country' },
+  salary: {
+    field: 'salary',
+    type: 'number',
+  },
+  age: { field: 'age' },
+  canDesign: { field: 'canDesign' },
+  firstName: { field: 'firstName' },
+  stack: { field: 'stack' },
+
+  hobby: { field: 'hobby' },
+  city: { field: 'city' },
+  currency: { field: 'currency' },
+};
+
+export default function KeyboardNavigationForRows() {
+  const [activeRowIndex, setActiveRowIndex] = useState(0);
+
+  (globalThis as any).activeRowIndex = activeRowIndex;
+  return (
+    <DataSource<Developer>
+      primaryKey="id"
+      data={dataSource}
+      selectionMode="multi-row"
+      rowDisabledState={{
+        enabledRows: true,
+        disabledRows: [3, 5, 6],
+      }}
+      defaultRowSelection={{
+        selectedRows: [5, 6, 7, 8],
+        defaultSelection: false,
+      }}
+    >
+      <InfiniteTable<Developer>
+        columns={columns}
+        activeRowIndex={activeRowIndex}
+        onActiveRowIndexChange={setActiveRowIndex}
+        keyboardNavigation="row"
+        domProps={{
+          autoFocus: true,
+          style: {
+            height: 800,
+          },
+        }}
+      />
+    </DataSource>
+  );
+}

examples/src/pages/tests/table/props/active-row-index/with-disabled-rows.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@testing';
+
+export default test.describe('Disabled rows', () => {
+  test('should work fine', async ({ page, rowModel }) => {
+    await page.waitForInfinite();
+
+    expect(await rowModel.isRowDisabled(0)).toBe(false);
+    expect(await rowModel.isRowDisabled(3)).toBe(true);
+
+    await rowModel.clickRow(2);
+    expect(await page.evaluate(() => (globalThis as any).activeRowIndex)).toBe(
+      2,
+    );
+
+    // clicking a disabled row should not change the active row
+    await rowModel.clickRow(3);
+    expect(await page.evaluate(() => (globalThis as any).activeRowIndex)).toBe(
+      2,
+    );
+
+    // arrow down should skip over disabled row
+    await page.keyboard.press('ArrowDown');
+    expect(await page.evaluate(() => (globalThis as any).activeRowIndex)).toBe(
+      4,
+    );
+
+    // again, arrow down should skip over disabled rows
+    await page.keyboard.press('ArrowDown');
+    expect(await page.evaluate(() => (globalThis as any).activeRowIndex)).toBe(
+      7,
+    );
+  });
+});

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

@@ -11,6 +11,7 @@ import {
   getSelectedRowIds,
   isNodeExpanded,
   isNodeGroupRow,
+  isRowDisabled,
   toggleGroupRow,
 } from '.';
 
@@ -87,6 +88,15 @@ export class RowTestingModel {
     return await isNodeGroupRow(node);
   }
 
+  async isRowDisabled(rowIndex: number) {
+    const node = this.getCellLocator({
+      rowIndex,
+      colIndex: 0,
+    });
+
+    return await isRowDisabled(node);
+  }
+
   async getCellComputedStylePropertyValue(
     cellLocation: CellLocation,
     propertyName: string,

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

@@ -112,12 +112,18 @@ export const getCellNodeLocator = (
 
 export const isNodeExpanded = async (node: Locator) => {
   return await node.evaluate((n) =>
-    n.classList.contains('.InfiniteColumnCell--group-row-expanded'),
+    n.classList.contains('InfiniteColumnCell--group-row-expanded'),
   );
 };
 export const isNodeGroupRow = async (node: Locator) => {
   return await node.evaluate((n) =>
-    n.classList.contains('.InfiniteColumnCell--group-row'),
+    n.classList.contains('InfiniteColumnCell--group-row'),
+  );
+};
+
+export const isRowDisabled = async (node: Locator) => {
+  return await node.evaluate((n) =>
+    n.classList.contains('InfiniteColumnCell--disabled'),
   );
 };
 

source/src/components/DataSource/RowDisabledState.ts

@@ -0,0 +1,73 @@
+import { BooleanCollectionState } from './BooleanCollectionState';
+import { RowDisabledStateObject } from './types';
+
+export class RowDisabledState<KeyType = any> extends BooleanCollectionState<
+  RowDisabledStateObject<KeyType>,
+  KeyType
+> {
+  constructor(
+    state: RowDisabledStateObject<KeyType> | RowDisabledState<KeyType>,
+  ) {
+    //@ts-ignore
+    super(state);
+  }
+  public getState(): RowDisabledStateObject<KeyType> {
+    const enabledRows = this.allPositive
+      ? true
+      : [...(this.positiveMap?.keys() ?? [])];
+
+    const disabledRows = this.allNegative
+      ? true
+      : [...(this.negativeMap?.keys() ?? [])];
+
+    return {
+      enabledRows,
+      disabledRows,
+    } as RowDisabledStateObject<KeyType>;
+  }
+
+  getPositiveFromState(state: RowDisabledStateObject<KeyType>) {
+    return state.enabledRows;
+  }
+  getNegativeFromState(state: RowDisabledStateObject<KeyType>) {
+    return state.disabledRows;
+  }
+
+  public areAllDisabled() {
+    return this.areAllNegative();
+  }
+  public areAllEnabled() {
+    return this.areAllPositive();
+  }
+
+  public disableAll() {
+    this.makeAllNegative();
+  }
+
+  public enableAll() {
+    this.makeAllPositive();
+  }
+
+  public isRowEnabled = (key: KeyType) => {
+    return !!this.isItemPositive(key);
+  };
+
+  public isRowDisabled(key: KeyType) {
+    return !this.isRowEnabled(key);
+  }
+
+  public setRowEnabled(key: KeyType, shouldExpand: boolean) {
+    return this.setItemValue(key, shouldExpand);
+  }
+
+  public disableRow(key: KeyType) {
+    this.setRowEnabled(key, false);
+  }
+  public enableRow(key: KeyType) {
+    this.setRowEnabled(key, true);
+  }
+
+  public toggleRow(key: KeyType) {
+    this.toggleItem(key);
+  }
+}

source/src/components/DataSource/state/getInitialState.ts

@@ -6,6 +6,7 @@ import {
   DataSourcePropOnCellSelectionChange_MultiCell,
   DataSourcePropOnCellSelectionChange_SingleCell,
   DataSourceRowInfoReducer,
+  RowDisabledStateObject,
   RowSelectionState,
 } from '..';
 import { dbg } from '../../../utils/debug';
@@ -47,6 +48,7 @@ import {
 } from '../types';
 
 import { normalizeSortInfo } from './normalizeSortInfo';
+import { RowDisabledState } from '../RowDisabledState';
 
 const DataSourceLogger = dbg('DataSource') as DebugLogger;
 
@@ -101,6 +103,7 @@ export function initSetupState<T>(): DataSourceSetupState<T> {
 
     propsCache: new Map<keyof DataSourceProps<T>, WeakMap<any, any>>([
       ['sortInfo', new WeakMap()],
+      ['rowDisabledState', new WeakMap()],
     ]),
 
     rowInfoReducerResults: undefined,
@@ -202,6 +205,35 @@ export const forwardProps = <T>(
     },
     batchOperationDelay: 1,
     isRowSelected: 1,
+    isRowDisabled: 1,
+    rowDisabledState: (
+      rowDisabledState:
+        | RowDisabledState<T>
+        | RowDisabledStateObject<T>
+        | undefined,
+    ) => {
+      if (!rowDisabledState) {
+        return null;
+      }
+      if (rowDisabledState instanceof RowDisabledState) {
+        return rowDisabledState;
+      }
+
+      const wMap = setupState.propsCache.get('rowDisabledState') ?? weakMap;
+
+      let cachedRowDisabledState = wMap.get(
+        rowDisabledState,
+      ) as RowDisabledState<T>;
+
+      if (!cachedRowDisabledState) {
+        cachedRowDisabledState = new RowDisabledState<T>(rowDisabledState);
+        wMap.set(rowDisabledState, cachedRowDisabledState);
+      }
+
+      rowDisabledState = cachedRowDisabledState;
+
+      return rowDisabledState ?? null;
+    },
     onDataArrayChange: 1,
     onDataMutations: 1,
     aggregationReducers: 1,
@@ -441,6 +473,22 @@ export function deriveStateFromProps<T extends any>(params: {
 
   const pivotMode = shouldReloadData.pivotBy ? 'remote' : 'local';
 
+  const rowDisabledState = state.rowDisabledState;
+
+  let isRowDisabled = props.isRowDisabled;
+
+  if (!isRowDisabled && rowDisabledState) {
+    const cachedIsRowDisabled = weakMap.get(rowDisabledState);
+    if (cachedIsRowDisabled) {
+      isRowDisabled = cachedIsRowDisabled;
+    } else {
+      isRowDisabled = (rowInfo) => {
+        return rowDisabledState.isRowDisabled(rowInfo.id);
+      };
+      weakMap.set(rowDisabledState, isRowDisabled);
+    }
+  }
+
   const result: DataSourceDerivedState<T> = {
     selectionMode,
     groupRowsState,
@@ -459,6 +507,7 @@ export function deriveStateFromProps<T extends any>(params: {
       groupBy: props.shouldReloadData?.groupBy ?? groupMode === 'remote',
       pivotBy: props.shouldReloadData?.pivotBy ?? pivotMode === 'remote',
     },
+    isRowDisabled,
     rowSelection: rowSelectionState,
     cellSelection: cellSelectionState,
     groupMode,

source/src/components/DataSource/state/reducer.ts

@@ -80,6 +80,7 @@ function toRowInfo<T>(
   id: any,
   index: number,
   isRowSelected?: (rowInfo: InfiniteTableRowInfo<T>) => boolean | null,
+  isRowDisabled?: (rowInfo: InfiniteTableRowInfo<T>) => boolean,
   cellSelectionState?: CellSelectionState,
 ): InfiniteTable_NoGrouping_RowInfoNormal<T> {
   const rowInfo: InfiniteTable_NoGrouping_RowInfoNormal<T> = {
@@ -90,12 +91,16 @@ function toRowInfo<T>(
     isGroupRow: false,
     selfLoaded: true,
     rowSelected: false,
+    rowDisabled: false,
     isCellSelected: returnFalse,
     hasSelectedCells: returnFalse,
   };
   if (isRowSelected) {
     rowInfo.rowSelected = isRowSelected(rowInfo);
   }
+  if (isRowDisabled) {
+    rowInfo.rowDisabled = isRowDisabled(rowInfo);
+  }
 
   if (cellSelectionState) {
     rowInfo.isCellSelected = (colId: string) => {
@@ -425,6 +430,7 @@ export function concludeReducer<T>(params: {
         }
       : undefined;
 
+  const isRowDisabled = state.isRowDisabled || returnFalse;
   if (state.isRowSelected && state.selectionMode === 'multi-row') {
     isRowSelected = (rowInfo) =>
       state.isRowSelected!(
@@ -588,6 +594,7 @@ export function concludeReducer<T>(params: {
           data ? toPrimaryKey(data) : index,
           index,
           isRowSelected,
+          isRowDisabled,
           cellSelectionState,
         );