Skip to content

Commit be40cc0

Browse files
PlopixPlopix
committed
🧑‍💻 Make the Grid Renderer actually working with correct position in the grid
1 parent c6c8a5b commit be40cc0

File tree

9 files changed

+258
-175
lines changed

9 files changed

+258
-175
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@crystallize/reactjs-components",
33
"license": "MIT",
4-
"version": "0.2.2",
4+
"version": "0.3.0",
55
"author": "Crystallize <[email protected]> (https://crystallize.com)",
66
"contributors": [
77
"Håkon Krogh <[email protected]>",

‎src/grid/CSSGrid.tsx‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { FunctionComponent } from 'react';
2-
import { getPositionnableCellClassNames } from './GridRenderer';
3-
import { CSSGridProps, GridPositionnable } from './types';
2+
import { getPositionnableCellClassNames } from './grid-renderer-utils';
3+
import { CSSGridProps, GridCell } from './types';
44

55
export const CSSGrid: FunctionComponent<CSSGridProps> = ({
66
cellComponent,
77
cells,
88
children,
9-
totalColSpan = 4,
9+
dimensions,
1010
style,
1111
styleForCell,
1212
...props
@@ -16,38 +16,32 @@ export const CSSGrid: FunctionComponent<CSSGridProps> = ({
1616
<div
1717
style={{
1818
display: 'grid',
19-
gridTemplateColumns: `repeat(${totalColSpan}, 1fr)`,
19+
gridTemplateColumns: `repeat(${dimensions.cols}, 1fr)`,
2020
...style,
2121
}}
2222
className="crystallize-grid crystallize-grid--css-grid"
2323
{...props}
2424
>
25-
{children
26-
? children({ cells, totalColSpan, styleForCell })
27-
: cells.map((cell: any, i: number) => {
28-
const defaultStyles = {
29-
gridColumn: `span ${cell.layout.colspan}`,
30-
gridRow: `span ${cell.layout.rowspan}`,
31-
};
32-
const positionInfos: GridPositionnable = {
33-
rowIndex: cell.position[0],
34-
colIndex: cell.position[1],
35-
rowLength: cell.position[2],
36-
colLength: cell.position[3],
37-
};
38-
const cellStyles = styleForCell
39-
? styleForCell(cell, positionInfos, defaultStyles) || defaultStyles
40-
: defaultStyles;
41-
return (
42-
<div
43-
key={`cell-${i}`}
44-
className={`crystallize-grid__cell ${getPositionnableCellClassNames(positionInfos)}`}
45-
style={cellStyles}
46-
>
47-
<CellComponent cell={cell} totalColSpan={totalColSpan} />
48-
</div>
49-
);
50-
})}
25+
{children && children({ cells, dimensions })}
26+
{!children &&
27+
cells.map((cell: GridCell, i: number) => {
28+
const defaultStyles = {
29+
gridColumn: `span ${cell.layout.colspan}`,
30+
gridRow: `span ${cell.layout.rowspan}`,
31+
};
32+
const cellStyles = styleForCell
33+
? styleForCell(cell, defaultStyles) || defaultStyles
34+
: defaultStyles;
35+
return (
36+
<div
37+
key={`cell-${i}`}
38+
className={`crystallize-grid__cell ${getPositionnableCellClassNames(cell, dimensions)}`}
39+
style={cellStyles}
40+
>
41+
<CellComponent cell={cell} dimensions={dimensions} />
42+
</div>
43+
);
44+
})}
5145
</div>
5246
);
5347
};

‎src/grid/GridRenderer.tsx‎

Lines changed: 14 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,9 @@
11
import { FunctionComponent } from 'react';
22
import { CSSGrid } from './CSSGrid';
3+
import { getGridDimensions, wrapCellsInRows } from './grid-renderer-utils';
34
import { RowCol } from './RowCol';
45
import { Table } from './Table';
5-
import { GridPositionnable, GridRendererProps, GridRenderingType } from './types';
6-
7-
const getTotalGridDimensions = (rows: any[]): number => {
8-
const totalColSpan = rows[0].columns.reduce((acc: number, col: any) => acc + col.layout.colspan, 0);
9-
return totalColSpan;
10-
};
11-
12-
export function getPositionnableCellClassNames({
13-
rowIndex,
14-
colIndex,
15-
rowLength,
16-
colLength,
17-
}: GridPositionnable): string {
18-
return `cell-${rowIndex}-${colIndex} ${rowIndex == 0 ? 'first-row' : ''} ${colIndex == 0 ? 'first-col' : ''} ${
19-
rowIndex === rowLength - 1 ? 'last-row' : ''
20-
} ${colIndex === colLength - 1 ? 'last-col' : ''}`.replace(/\s+/g, ' ');
21-
}
22-
23-
export function getPositionnablRowClassNames({
24-
rowIndex,
25-
rowLength,
26-
}: Omit<GridPositionnable, 'colIndex' | 'colLength'>): string {
27-
return `row-${rowIndex} ${rowIndex == 0 ? 'first-row' : ''} ${rowIndex == rowLength - 1 ? 'last-row' : ''}`.replace(
28-
/\s+/g,
29-
' ',
30-
);
31-
}
6+
import { GridCell, GridRendererProps, GridRenderingType } from './types';
327

338
export const GridRenderer: FunctionComponent<GridRendererProps> = ({
349
cellComponent,
@@ -42,16 +17,16 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
4217
console.error('@crystallize/grid-renderer: missing ´cellComponent` or children function');
4318
return null;
4419
}
45-
const { rows } = grid;
20+
if (!grid.rows.length) return null;
21+
const dimensions = getGridDimensions(grid.rows);
22+
const rows = wrapCellsInRows(grid.rows);
4623

47-
if (!rows.length) return null;
48-
const totalColSpan = getTotalGridDimensions(rows);
4924
if (type === GridRenderingType.Table) {
5025
return (
5126
<Table
5227
cellComponent={cellComponent}
53-
rows={rows}
54-
totalColSpan={totalColSpan}
28+
grid={rows}
29+
dimensions={dimensions}
5530
styleForCell={styleForCell}
5631
{...props}
5732
>
@@ -63,29 +38,27 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
6338
return (
6439
<RowCol
6540
cellComponent={cellComponent}
66-
rows={rows}
67-
totalColSpan={totalColSpan}
41+
grid={rows}
42+
dimensions={dimensions}
6843
styleForCell={styleForCell}
6944
{...props}
7045
>
7146
{children}
7247
</RowCol>
7348
);
7449
}
75-
const cells = rows.reduce((accumulator: any[], row: { columns: any }, rowIndex: number) => {
76-
row.columns.forEach((col: any, colIndex: number) => {
77-
accumulator.push({
78-
...col,
79-
position: [rowIndex, colIndex, rows.length, row.columns.length],
80-
});
50+
51+
const cells = rows.reduce((accumulator: GridCell[], row: GridCell[], rowIndex: number) => {
52+
row.forEach((cell: GridCell) => {
53+
accumulator.push(cell);
8154
});
8255
return accumulator;
8356
}, []);
8457
return (
8558
<CSSGrid
8659
cellComponent={cellComponent}
8760
cells={cells}
88-
totalColSpan={totalColSpan}
61+
dimensions={dimensions}
8962
styleForCell={styleForCell}
9063
{...props}
9164
>

‎src/grid/RowCol.tsx‎

Lines changed: 31 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,45 @@
11
import { FunctionComponent } from 'react';
2-
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
3-
import { GridPositionnable, RowColGridProps } from './types';
2+
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './grid-renderer-utils';
3+
import { GridCell, RowColGridProps } from './types';
44

55
export const RowCol: FunctionComponent<RowColGridProps> = ({
66
cellComponent,
7-
rows,
7+
grid,
88
children,
9-
totalColSpan = 4,
9+
dimensions,
1010
styleForCell,
1111
...props
1212
}) => {
1313
const CellComponent = cellComponent;
1414
return (
1515
<div className="crystallize-grid crystallize-row-col-table" {...props}>
16-
{children
17-
? children({ rows, totalColSpan })
18-
: rows.map((row: any, i: number) => {
19-
return (
20-
<div
21-
className={`crystallize-grid-row row ${getPositionnablRowClassNames({
22-
rowIndex: i,
23-
rowLength: rows.length,
24-
})}`}
25-
key={`row-${i}`}
26-
>
27-
{row.columns.map((cell: any, j: number) => {
28-
const positionInfos: GridPositionnable = {
29-
rowIndex: i,
30-
colIndex: j,
31-
rowLength: row.length,
32-
colLength: row.columns.length,
33-
};
34-
const cellStyles = styleForCell ? styleForCell(cell, positionInfos, {}) || {} : {};
35-
return (
36-
<div
37-
className={`crystallize-grid-col crystallize-grid__cell col ${getPositionnableCellClassNames(
38-
positionInfos,
39-
)}`}
40-
style={cellStyles}
41-
key={`cell-${i}-${j}`}
42-
>
43-
<CellComponent cell={cell} totalColSpan={totalColSpan} />
44-
</div>
45-
);
46-
})}
47-
</div>
48-
);
49-
})}
16+
{children && children({ grid, dimensions })}
17+
{!children &&
18+
grid.map((row: GridCell[], rowIndex: number) => {
19+
return (
20+
<div
21+
key={`row-${rowIndex}`}
22+
className={`crystallize-grid-row row ${getPositionnablRowClassNames(
23+
{ rowIndex },
24+
dimensions,
25+
)}`}
26+
>
27+
{row.map((cell: GridCell, cellIndex: number) => {
28+
const cellStyles = styleForCell ? styleForCell(cell.data, {}) || {} : {};
29+
const classes = getPositionnableCellClassNames(cell, dimensions);
30+
return (
31+
<div
32+
key={`cell-${rowIndex}-${cellIndex}`}
33+
className={`crystallize-grid__cell col ${classes}`}
34+
style={cellStyles}
35+
>
36+
<CellComponent cell={cell} dimensions={dimensions} />
37+
</div>
38+
);
39+
})}
40+
</div>
41+
);
42+
})}
5043
</div>
5144
);
5245
};

‎src/grid/Table.tsx‎

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { FunctionComponent } from 'react';
2-
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
3-
import { GridPositionnable, TableGridProps } from './types';
2+
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './grid-renderer-utils';
3+
import { GridCell, TableGridProps } from './types';
44

55
export const Table: FunctionComponent<TableGridProps> = ({
66
cellComponent,
7-
rows,
7+
grid,
88
children,
9-
totalColSpan = 4,
9+
dimensions,
1010
styleForCell,
1111
...props
1212
}) => {
@@ -15,47 +15,38 @@ export const Table: FunctionComponent<TableGridProps> = ({
1515
<table className="crystallize-grid crystallize-grid--table" {...props}>
1616
<thead>
1717
<tr>
18-
{new Array(totalColSpan).fill(0).map((v, i) => (
18+
{new Array(dimensions.cols).fill(0).map((v, i) => (
1919
<th key={`th-${i}`} />
2020
))}
2121
</tr>
2222
</thead>
2323
<tbody>
24-
{children
25-
? children({ rows, totalColSpan })
26-
: rows.map((row: any, i: number) => {
27-
return (
28-
<tr
29-
key={`row-${i}`}
30-
className={getPositionnablRowClassNames({ rowIndex: i, rowLength: rows.length })}
31-
>
32-
{row.columns.map((cell: any, j: number) => {
33-
const positionInfos: GridPositionnable = {
34-
rowIndex: i,
35-
colIndex: j,
36-
rowLength: row.length,
37-
colLength: row.columns.length,
38-
};
39-
const cellStyles = styleForCell
40-
? styleForCell(cell, positionInfos, {}) || {}
41-
: {};
42-
return (
43-
<td
44-
key={`cell-${i}-${j}`}
45-
className={`crystallize-grid__cell ${getPositionnableCellClassNames(
46-
positionInfos,
47-
)}`}
48-
style={cellStyles}
49-
rowSpan={cell.layout.rowspan}
50-
colSpan={cell.layout.colspan}
51-
>
52-
<CellComponent cell={cell} totalColSpan={totalColSpan} />
53-
</td>
54-
);
55-
})}
56-
</tr>
57-
);
58-
})}
24+
{children && children({ grid, dimensions })}
25+
{!children &&
26+
grid.map((row: GridCell[], rowIndex: number) => {
27+
return (
28+
<tr
29+
key={`row-${rowIndex}`}
30+
className={getPositionnablRowClassNames({ rowIndex }, dimensions)}
31+
>
32+
{row.map((cell: GridCell, cellIndex: number) => {
33+
const cellStyles = styleForCell ? styleForCell(cell.data, {}) || {} : {};
34+
const classes = getPositionnableCellClassNames(cell, dimensions);
35+
return (
36+
<td
37+
key={`cell-${rowIndex}-${cellIndex}`}
38+
className={`crystallize-grid__cell ${classes}`}
39+
style={cellStyles}
40+
rowSpan={cell.layout.rowspan}
41+
colSpan={cell.layout.colspan}
42+
>
43+
<CellComponent cell={cell} dimensions={dimensions} />
44+
</td>
45+
);
46+
})}
47+
</tr>
48+
);
49+
})}
5950
</tbody>
6051
</table>
6152
);

0 commit comments

Comments
 (0)