release version patch with cellSelectionApi.getAllCellSelectionPositions

examples/src/pages/tests/table/props/cell-selection/get-selected-cells.page.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react';
+
+import {
+  InfiniteTable,
+  DataSource,
+  DataSourcePropCellSelection_MultiCell,
+  InfiniteTableApi,
+} from '@infinite-table/infinite-react';
+
+import type { InfiniteTablePropColumns } from '@infinite-table/infinite-react';
+
+import { useState } from 'react';
+
+type Developer = {
+  id: number;
+
+  firstName: string;
+  lastName: string;
+  country: string;
+  city: string;
+  currency: string;
+  preferredLanguage: string;
+  stack: string;
+  canDesign: 'yes' | 'no';
+  hobby: string;
+  salary: number;
+  age: number;
+};
+
+const dataSource = () => {
+  return fetch(process.env.NEXT_PUBLIC_BASE_URL + '/developers10')
+    .then((r) => r.json())
+    .then((data: Developer[]) => data);
+};
+
+const columns: InfiniteTablePropColumns<Developer> = {
+  id: { field: 'id' },
+
+  firstName: {
+    field: 'firstName',
+  },
+
+  preferredLanguage: { field: 'preferredLanguage' },
+  stack: { field: 'stack' },
+};
+
+const domProps = {
+  style: {
+    height: '80vh',
+    margin: 10,
+  },
+};
+
+export default function App() {
+  const [_api, setApi] = useState<InfiniteTableApi<Developer> | null>(null);
+  const [cellSelection, _setCellSelection] =
+    useState<DataSourcePropCellSelection_MultiCell>({
+      selectedCells: [
+        [2, 'id'],
+        [8, 'preferredLanguage'],
+        [5, 'stack'],
+      ],
+      deselectedCells: [[3, 'stack']],
+      defaultSelection: false,
+    });
+
+  return (
+    <>
+      <DataSource<Developer>
+        primaryKey="id"
+        data={dataSource}
+        selectionMode="multi-cell"
+        defaultCellSelection={cellSelection}
+      >
+        <InfiniteTable<Developer>
+          onReady={({ api }) => {
+            setApi(api);
+          }}
+          domProps={domProps}
+          columns={columns}
+          keyboardSelection={true}
+          keyboardNavigation={'cell'}
+          columnDefaultWidth={200}
+        />
+      </DataSource>
+    </>
+  );
+}

examples/src/pages/tests/table/props/cell-selection/get-selected-cells.spec.ts

@@ -0,0 +1,21 @@
+import { expect, test } from '@testing';
+
+export default test.describe
+  .parallel('Cell Selection - getAllCellSelectionPositions', () => {
+  test('should work', async ({ page, apiModel }) => {
+    await page.waitForInfinite();
+
+    const pos = await apiModel.evaluate((api) => {
+      return api.cellSelectionApi.getAllCellSelectionPositions();
+    });
+
+    expect(pos).toEqual({
+      columnIds: ['id', 'preferredLanguage', 'stack'],
+      positions: [
+        [[2, 'id'], null, null],
+        [null, null, [5, 'stack']],
+        [null, [8, 'preferredLanguage'], null],
+      ],
+    });
+  });
+});

source/src/components/InfiniteTable/api/getCellSelectionApi.ts

@@ -3,11 +3,28 @@ import {
   DataSourceState,
   CellSelectionState,
 } from '../../DataSource';
-import { getRowInfoAt } from '../../DataSource/dataSourceGetters';
+import { CellSelectionPosition } from '../../DataSource/CellSelectionState';
+import {
+  getRowInfoArray,
+  getRowInfoAt,
+} from '../../DataSource/dataSourceGetters';
 import { CellPositionByIndex } from '../../types/CellPositionByIndex';
-import { InfiniteTableComputedValues } from '../types';
+import { InfiniteTableComputedValues, InfiniteTableRowInfo } from '../types';
 import { CellPositionOptions } from './type';
 
+function ensureSortedPerOrder<T>(arr: T[], sortPattern: T[]) {
+  const arrSet = new Set(arr);
+
+  return sortPattern
+    .map((item: T) => {
+      if (arrSet.has(item)) {
+        return item;
+      }
+      return null;
+    })
+    .filter((x: T | null) => x != null) as T[];
+}
+
 export function ensureMinMaxCellPositionByIndex(
   start: CellPositionByIndex,
   end: CellPositionByIndex,
@@ -41,6 +58,10 @@ export type InfiniteTableCellSelectionApi = {
   deselectColumn(colId: string): void;
   selectRange(start: CellPositionOptions, end: CellPositionOptions): void;
   deselectRange(start: CellPositionOptions, end: CellPositionOptions): void;
+  getAllCellSelectionPositions(): {
+    columnIds: string[];
+    positions: (CellSelectionPosition | null)[][];
+  };
 };
 
 export type GetCellSelectionApiParam<T> = {
@@ -74,6 +95,55 @@ export function getCellSelectionApi<T>(
   };
 
   const cellSelectionApi = {
+    getAllCellSelectionPositions: () => {
+      const dataArray = getRowInfoArray(getDataSourceState);
+
+      const { computedVisibleColumns } = getComputed();
+
+      const computedVisibleColumnsIds = computedVisibleColumns.map((x) => x.id);
+
+      const colsInSelection = new Set<string>();
+      const rowsInSelection: InfiniteTableRowInfo<T>[] = [];
+      const rowIdsInSelection = new Set<any>();
+
+      dataArray.filter((rowInfo) => {
+        computedVisibleColumns.forEach((col) => {
+          if (
+            cellSelectionApi.isCellSelected({
+              rowId: rowInfo.id,
+              colId: col.id,
+            })
+          ) {
+            if (!colsInSelection.has(col.id)) {
+              colsInSelection.add(col.id);
+            }
+            if (!rowIdsInSelection.has(rowInfo.id)) {
+              rowIdsInSelection.add(rowInfo.id);
+              rowsInSelection.push(rowInfo);
+            }
+          }
+        });
+      });
+
+      const columnIds = ensureSortedPerOrder(
+        Array.from(colsInSelection),
+        computedVisibleColumnsIds,
+      );
+
+      const positions = rowsInSelection.map((rowInfo) => {
+        return columnIds.map((colId) => {
+          if (cellSelectionApi.isCellSelected({ rowId: rowInfo.id, colId })) {
+            return [rowInfo.id, colId] as CellSelectionPosition;
+          }
+          return null;
+        });
+      });
+
+      return {
+        columnIds: columnIds,
+        positions,
+      };
+    },
     deselectAll: () => {
       const dataSourceState = getDataSourceState();
       const cellSelection = dataSourceState.cellSelection;