Skip to content

Commit f5897db

Browse files
PlopixPlopix
committed
🧑‍💻 Provide access to the cell from outside
1 parent d412e34 commit f5897db

File tree

7 files changed

+128
-63
lines changed

7 files changed

+128
-63
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.0",
4+
"version": "0.2.1",
55
"author": "Crystallize <[email protected]> (https://crystallize.com)",
66
"contributors": [
77
"Håkon Krogh <[email protected]>",

‎src/grid/CSSGrid.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import { FunctionComponent } from 'react';
22
import { getPositionnableCellClassNames } from './GridRenderer';
3-
import { CSSGridProps } from './types';
3+
import { CSSGridProps, GridPositionnable } from './types';
44

55
export const CSSGrid: FunctionComponent<CSSGridProps> = ({
66
cellComponent,
77
cells,
88
children,
99
totalColSpan = 4,
1010
style,
11+
styleForCell,
1112
...props
1213
}) => {
1314
const CellComponent = cellComponent;
@@ -22,24 +23,31 @@ export const CSSGrid: FunctionComponent<CSSGridProps> = ({
2223
{...props}
2324
>
2425
{children
25-
? children({ cells, totalColSpan })
26-
: cells.map((cell: any, i: number) => (
27-
<div
28-
key={`cell-${i}`}
29-
className={`crystallize-grid__cell ${getPositionnableCellClassNames(
30-
cell.position[0],
31-
cell.position[1],
32-
cell.position[2],
33-
cell.position[3],
34-
)}`}
35-
style={{
36-
gridColumn: `span ${cell.layout.colspan}`,
37-
gridRow: `span ${cell.layout.rowspan}`,
38-
}}
39-
>
40-
<CellComponent cell={cell} totalColSpan={totalColSpan} />
41-
</div>
42-
))}
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+
})}
4351
</div>
4452
);
4553
};

‎src/grid/GridRenderer.tsx‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,28 @@ import { FunctionComponent } from 'react';
22
import { CSSGrid } from './CSSGrid';
33
import { RowCol } from './RowCol';
44
import { Table } from './Table';
5-
import { GridRendererProps, GridRenderingType } from './types';
5+
import { GridPositionnable, GridRendererProps, GridRenderingType } from './types';
66

77
const getTotalGridDimensions = (rows: any[]): number => {
88
const totalColSpan = rows[0].columns.reduce((acc: number, col: any) => acc + col.layout.colspan, 0);
99
return totalColSpan;
1010
};
1111

12-
export function getPositionnableCellClassNames(
13-
rowIndex: number,
14-
colIndex: number,
15-
rowLength: number,
16-
colLength: number,
17-
): string {
12+
export function getPositionnableCellClassNames({
13+
rowIndex,
14+
colIndex,
15+
rowLength,
16+
colLength,
17+
}: GridPositionnable): string {
1818
return `cell-${rowIndex}-${colIndex} ${rowIndex == 0 ? 'first-row' : ''} ${colIndex == 0 ? 'first-col' : ''} ${
1919
rowIndex === rowLength - 1 ? 'last-row' : ''
2020
} ${colIndex === colLength - 1 ? 'last-col' : ''}`.replace(/\s+/g, ' ');
2121
}
2222

23-
export function getPositionnablRowClassNames(rowIndex: number, rowLength: number): string {
23+
export function getPositionnablRowClassNames({
24+
rowIndex,
25+
rowLength,
26+
}: Omit<GridPositionnable, 'colIndex' | 'colLength'>): string {
2427
return `row-${rowIndex} ${rowIndex == 0 ? 'first-row' : ''} ${rowIndex == rowLength - 1 ? 'last-row' : ''}`.replace(
2528
/\s+/g,
2629
' ',
@@ -32,6 +35,7 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
3235
children,
3336
grid,
3437
type = GridRenderingType.Div,
38+
styleForCell,
3539
...props
3640
}) => {
3741
if (!cellComponent && !children) {
@@ -44,14 +48,26 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
4448
const totalColSpan = getTotalGridDimensions(rows);
4549
if (type === GridRenderingType.Table) {
4650
return (
47-
<Table cellComponent={cellComponent} rows={rows} totalColSpan={totalColSpan} {...props}>
51+
<Table
52+
cellComponent={cellComponent}
53+
rows={rows}
54+
totalColSpan={totalColSpan}
55+
styleForCell={styleForCell}
56+
{...props}
57+
>
4858
{children}
4959
</Table>
5060
);
5161
}
5262
if (type === GridRenderingType.RowCol) {
5363
return (
54-
<RowCol cellComponent={cellComponent} rows={rows} totalColSpan={totalColSpan} {...props}>
64+
<RowCol
65+
cellComponent={cellComponent}
66+
rows={rows}
67+
totalColSpan={totalColSpan}
68+
styleForCell={styleForCell}
69+
{...props}
70+
>
5571
{children}
5672
</RowCol>
5773
);
@@ -66,7 +82,13 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
6682
return accumulator;
6783
}, []);
6884
return (
69-
<CSSGrid cellComponent={cellComponent} cells={cells} totalColSpan={totalColSpan} {...props}>
85+
<CSSGrid
86+
cellComponent={cellComponent}
87+
cells={cells}
88+
totalColSpan={totalColSpan}
89+
styleForCell={styleForCell}
90+
{...props}
91+
>
7092
{children}
7193
</CSSGrid>
7294
);

‎src/grid/RowCol.tsx‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { FunctionComponent } from 'react';
22
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
3-
import { RowColGridProps } from './types';
3+
import { GridPositionnable, RowColGridProps } from './types';
44

55
export const RowCol: FunctionComponent<RowColGridProps> = ({
66
cellComponent,
77
rows,
88
children,
99
totalColSpan = 4,
10+
styleForCell,
1011
...props
1112
}) => {
1213
const CellComponent = cellComponent;
@@ -17,22 +18,32 @@ export const RowCol: FunctionComponent<RowColGridProps> = ({
1718
: rows.map((row: any, i: number) => {
1819
return (
1920
<div
20-
className={`crystallize-grid-row row ${getPositionnablRowClassNames(i, rows.length)}`}
21+
className={`crystallize-grid-row row ${getPositionnablRowClassNames({
22+
rowIndex: i,
23+
rowLength: rows.length,
24+
})}`}
2125
key={`row-${i}`}
2226
>
23-
{row.columns.map((col: any, j: number) => (
24-
<div
25-
className={`crystallize-grid-col crystallize-grid__cell col ${getPositionnableCellClassNames(
26-
i,
27-
j,
28-
row.length,
29-
row.columns.length,
30-
)}`}
31-
key={`cell-${i}-${j}`}
32-
>
33-
<CellComponent cell={col} totalColSpan={totalColSpan} />
34-
</div>
35-
))}
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+
})}
3647
</div>
3748
);
3849
})}

‎src/grid/Table.tsx‎

Lines changed: 30 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { FunctionComponent } from 'react';
22
import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
3-
import { TableGridProps } from './types';
3+
import { GridPositionnable, TableGridProps } from './types';
44

55
export const Table: FunctionComponent<TableGridProps> = ({
66
cellComponent,
77
rows,
88
children,
99
totalColSpan = 4,
10+
styleForCell,
1011
...props
1112
}) => {
1213
const CellComponent = cellComponent;
@@ -24,22 +25,34 @@ export const Table: FunctionComponent<TableGridProps> = ({
2425
? children({ rows, totalColSpan })
2526
: rows.map((row: any, i: number) => {
2627
return (
27-
<tr key={`row-${i}`} className={getPositionnablRowClassNames(i, rows.length)}>
28-
{row.columns.map((col: any, j: number) => (
29-
<td
30-
key={`cell-${i}-${j}`}
31-
className={`crystallize-grid__cell ${getPositionnableCellClassNames(
32-
i,
33-
j,
34-
row.length,
35-
row.columns.length,
36-
)}`}
37-
rowSpan={col.layout.rowspan}
38-
colSpan={col.layout.colspan}
39-
>
40-
<CellComponent cell={col} totalColSpan={totalColSpan} />
41-
</td>
42-
))}
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+
})}
4356
</tr>
4457
);
4558
})}

‎src/grid/component.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export * from './CSSGrid';
22
export * from './Table';
3+
export * from './RowCol';

‎src/grid/types.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,19 @@ export enum GridRenderingType {
66
RowCol = 'row-col',
77
}
88

9+
export type GridPositionnable = {
10+
rowIndex: number;
11+
colIndex: number;
12+
rowLength: number;
13+
colLength: number;
14+
};
915
export interface CSSGridProps {
1016
cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
1117
cells: any;
1218
children?: FunctionComponent<any>;
1319
totalColSpan: number;
1420
style?: React.CSSProperties;
21+
styleForCell?: (cell: any, positionInfos: GridPositionnable, styles: React.CSSProperties) => React.CSSProperties;
1522
}
1623

1724
export interface TableGridProps {
@@ -20,6 +27,7 @@ export interface TableGridProps {
2027
children?: FunctionComponent<any>;
2128
totalColSpan: number;
2229
style?: React.CSSProperties;
30+
styleForCell?: (cell: any, positionInfos: GridPositionnable, styles: React.CSSProperties) => React.CSSProperties;
2331
}
2432

2533
export interface RowColGridProps {
@@ -28,6 +36,7 @@ export interface RowColGridProps {
2836
children?: FunctionComponent<any>;
2937
totalColSpan: number;
3038
style?: React.CSSProperties;
39+
styleForCell?: (cell: any, positionInfos: GridPositionnable, styles: React.CSSProperties) => React.CSSProperties;
3140
}
3241
export interface GridRendererProps {
3342
cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
@@ -36,4 +45,5 @@ export interface GridRendererProps {
3645
rows: any;
3746
};
3847
children?: FunctionComponent<any>;
48+
styleForCell?: (cell: any, positionInfos: GridPositionnable, styles: React.CSSProperties) => React.CSSProperties;
3949
}

0 commit comments

Comments
 (0)