feat: Remove logic to calculate colIndex/rowIndex

Author: nervetattoo

src/grid/GridRenderer.tsx

@@ -1,9 +1,9 @@
 import { FunctionComponent } from 'react';
 import { CSSGrid } from './CSSGrid';
-import { getGridDimensions, wrapCellsInRows } from './grid-renderer-utils';
+import { getGridDimensions } from './grid-renderer-utils';
 import { RowCol } from './RowCol';
 import { Table } from './Table';
-import { GridCell, GridRendererProps, GridRenderingType } from './types';
+import { GridRow, GridCell, GridRendererProps, GridRenderingType } from './types';
 
 export const GridRenderer: FunctionComponent<GridRendererProps> = ({
     cellComponent,
@@ -19,13 +19,12 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
     }
     if (!grid.rows.length) return null;
     const dimensions = getGridDimensions(grid.rows);
-    const rows = wrapCellsInRows(grid.rows);
 
     if (type === GridRenderingType.Table) {
         return (
             <Table
                 cellComponent={cellComponent}
-                grid={rows}
+                grid={grid.rows}
                 dimensions={dimensions}
                 styleForCell={styleForCell}
                 {...props}
@@ -38,7 +37,7 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
         return (
             <RowCol
                 cellComponent={cellComponent}
-                grid={rows}
+                grid={grid.rows}
                 dimensions={dimensions}
                 styleForCell={styleForCell}
                 {...props}
@@ -48,12 +47,8 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
         );
     }
 
-    const cells = rows.reduce((accumulator: GridCell[], row: GridCell[], rowIndex: number) => {
-        row.forEach((cell: GridCell) => {
-            accumulator.push(cell);
-        });
-        return accumulator;
-    }, []);
+    const cells = grid.rows.reduce<GridCell[]>((memo, row) => memo.concat(row.columns), []);
+
     return (
         <CSSGrid
             cellComponent={cellComponent}

src/grid/grid-renderer-utils.ts

@@ -1,4 +1,4 @@
-import { GridCell, GridDimensions, GridPosition } from './types';
+import { GridCell, GridDimensions } from './types';
 
 export const getGridDimensions = (rows: any[]): GridDimensions => {
     return {
@@ -8,8 +8,7 @@ export const getGridDimensions = (rows: any[]): GridDimensions => {
 };
 
 export function getPositionnableCellClassNames(cell: GridCell, { rows, cols }: GridDimensions): string {
-    const { rowIndex, colIndex } = cell.position;
-    const { colspan, rowspan } = cell.layout;
+    const { colspan, rowspan, rowIndex, colIndex } = cell.layout;
     const isLastRow = rowIndex + rowspan === rows;
     const isLastCol = colIndex + colspan === cols;
 
@@ -18,47 +17,9 @@ export function getPositionnableCellClassNames(cell: GridCell, { rows, cols }: G
     } ${isLastCol ? 'last-col' : ''}`.replace(/\s+/g, ' ');
 }
 
-export function getPositionnablRowClassNames(
-    { rowIndex }: Omit<GridPosition, 'colIndex'>,
-    { rows }: GridDimensions,
-): string {
+export function getPositionnablRowClassNames({ rowIndex }: { rowIndex: number }, { rows }: GridDimensions): string {
     return `row-${rowIndex} ${rowIndex == 0 ? 'first-row' : ''} ${rowIndex == rows - 1 ? 'last-row' : ''}`.replace(
         /\s+/g,
         ' ',
     );
 }
-
-export function wrapCellsInRows(rows: any[]): GridCell[][] {
-    const dimensions = getGridDimensions(rows);
-    let memoryMap: { colspan: number; rowspan: number }[] = new Array(dimensions.cols).fill({ colspan: 1, rowspan: 1 });
-
-    const grid = rows.map((row: any, rowIndex: number) => {
-        let colspanOffset = 0;
-        let rowspanOffset = 0;
-        return row.columns.map((cell: any) => {
-            if (memoryMap[colspanOffset]?.rowspan > 1) {
-                rowspanOffset = memoryMap[colspanOffset].colspan;
-                memoryMap[colspanOffset].rowspan--;
-            } else {
-                rowspanOffset = 0;
-            }
-            const positionInfos: GridPosition = {
-                rowIndex,
-                colIndex: colspanOffset + rowspanOffset,
-            };
-            memoryMap[positionInfos.colIndex] = {
-                ...cell.layout,
-            };
-            colspanOffset += cell.layout.colspan + rowspanOffset;
-            return {
-                ...cell,
-                position: positionInfos,
-                layout: {
-                    colspan: cell.layout.colspan,
-                    rowspan: cell.layout.rowspan,
-                },
-            };
-        });
-    });
-    return grid;
-}

src/grid/types.ts

@@ -13,25 +13,23 @@ export type GridDimensions = {
 };
 
 export type GridCell = {
-    position: GridPosition;
-    rowIndex: number;
-    colIndex: number;
     layout: {
         rowspan: number;
         colspan: number;
+        rowIndex: number;
+        colIndex: number;
     };
-} & any;
+};
 
-export type GridPosition = {
-    rowIndex: number;
-    colIndex: number;
+export type GridRow = {
+    columns: GridCell[];
 };
 
 export interface GridRendererProps {
     cellComponent: React.FunctionComponent<{ cell: any; dimensions: GridDimensions }>;
     type: GridRenderingType;
     grid: {
-        rows: any;
+        rows: GridRow[];
     };
     style?: React.CSSProperties;
     children?: FunctionComponent<any>;
@@ -49,7 +47,7 @@ export interface CSSGridProps {
 
 export interface TableGridProps {
     cellComponent: React.FunctionComponent<{ cell: any; dimensions: GridDimensions }>;
-    grid: GridCell[][];
+    grid: GridRow[];
     children?: FunctionComponent<any>;
     dimensions: GridDimensions;
     style?: React.CSSProperties;
@@ -58,7 +56,7 @@ export interface TableGridProps {
 
 export interface RowColGridProps {
     cellComponent: React.FunctionComponent<{ cell: any; dimensions: GridDimensions }>;
-    grid: GridCell[][];
+    grid: GridRow[];
     children?: FunctionComponent<any>;
     dimensions: GridDimensions;
     style?: React.CSSProperties;

tests/gridcellposition.test.js

@@ -1,5 +1,4 @@
 const { createCatalogueFetcher, createClient, catalogueFetcherGraphqlBuilder } = require('@crystallize/js-api-client');
-const { wrapCellsInRows } = require('../dist/grid/grid-renderer-utils');
 
 test('Get a Grid and check the position', async () => {
     const CrystallizeClient = createClient({
@@ -20,6 +19,8 @@ test('Get a Grid and check the position', async () => {
                     layout: {
                         rowspan: true,
                         colspan: true,
+                        rowIndex: true,
+                        colIndex: true,
                     },
                     item: {
                         __on: [builder.onItem()],
@@ -30,17 +31,12 @@ test('Get a Grid and check the position', async () => {
     };
     const grid = (await fetch(query)).grid;
 
-    expect(grid.rows[0].columns[0].layout.rowspan).toBe(1);
-    expect(grid.rows[1].columns[0].layout.rowspan).toBe(1);
-    expect(grid.rows[5].columns[0].layout.rowspan).toBe(2);
-    const gridCells = wrapCellsInRows(grid.rows);
-
-    const check = ([cellRowIndex, cellColIndex], [rowIndex, colIndex]) => {
-        expect(gridCells[cellRowIndex][cellColIndex].position.rowIndex).toBe(rowIndex);
-        expect(gridCells[cellRowIndex][cellColIndex].position.colIndex).toBe(colIndex);
-    };
-
-    check([1, 0], [1, 0]);
-    check([2, 0], [2, 0]);
-    check([6, 0], [6, 2]);
+    for (const row of grid.rows) {
+        for (const cell of row.columns) {
+            expect(typeof cell.layout.colspan).toBe('number');
+            expect(typeof cell.layout.rowspan).toBe('number');
+            expect(typeof cell.layout.colIndex).toBe('number');
+            expect(typeof cell.layout.rowIndex).toBe('number');
+        }
+    }
 });