✨ React JS Components - Add Positionnable classes on Grid

Author: Plopix

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@crystallize/reactjs-components",
     "license": "MIT",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "author": "Crystallize <[email protected]> (https://crystallize.com)",
     "contributors": [
         "Håkon Krogh <[email protected]>",

src/grid/CSSGrid.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import { getPositionnableCellClassNames } from './GridRenderer';
 import { CSSGridProps } from './types';
 
 export const CSSGrid: FunctionComponent<CSSGridProps> = ({
@@ -25,7 +26,12 @@ export const CSSGrid: FunctionComponent<CSSGridProps> = ({
                 : cells.map((cell: any, i: number) => (
                       <div
                           key={`cell-${i}`}
-                          className="crystallize-grid__cell"
+                          className={`crystallize-grid__cell ${getPositionnableCellClassNames(
+                              cell.position[0],
+                              cell.position[1],
+                              cell.position[2],
+                              cell.position[3],
+                          )}`}
                           style={{
                               gridColumn: `span ${cell.layout.colspan}`,
                               gridRow: `span ${cell.layout.rowspan}`,

src/grid/GridRenderer.tsx

@@ -1,5 +1,6 @@
 import { FunctionComponent } from 'react';
 import { CSSGrid } from './CSSGrid';
+import { RowCol } from './RowCol';
 import { Table } from './Table';
 import { GridRendererProps, GridRenderingType } from './types';
 
@@ -8,6 +9,24 @@ const getTotalGridDimensions = (rows: any[]): number => {
     return totalColSpan;
 };
 
+export function getPositionnableCellClassNames(
+    rowIndex: number,
+    colIndex: number,
+    rowLength: number,
+    colLength: number,
+): string {
+    return `cell-${rowIndex}-${colIndex} ${rowIndex == 0 ? 'first-row' : ''} ${colIndex == 0 ? 'first-col' : ''} ${
+        rowIndex === rowLength - 1 ? 'last-row' : ''
+    } ${colIndex === colLength - 1 ? 'last-col' : ''}`.replace(/\s+/g, ' ');
+}
+
+export function getPositionnablRowClassNames(rowIndex: number, rowLength: number): string {
+    return `row-${rowIndex} ${rowIndex == 0 ? 'first-row' : ''} ${rowIndex == rowLength - 1 ? 'last-row' : ''}`.replace(
+        /\s+/g,
+        ' ',
+    );
+}
+
 export const GridRenderer: FunctionComponent<GridRendererProps> = ({
     cellComponent,
     children,
@@ -23,19 +42,29 @@ export const GridRenderer: FunctionComponent<GridRendererProps> = ({
 
     if (!rows.length) return null;
     const totalColSpan = getTotalGridDimensions(rows);
-    if (type === 'table') {
+    if (type === GridRenderingType.Table) {
         return (
             <Table cellComponent={cellComponent} rows={rows} totalColSpan={totalColSpan} {...props}>
                 {children}
             </Table>
         );
     }
-    // Currently the data is only returned in a nested array of rows and
-    // columns. To make use of CSS Grid we need a flat array of all of the
-    // individual cells.
-    const columns = rows.map((row: { columns: any }) => row.columns);
-    const cells = [].concat.apply([], columns);
-
+    if (type === GridRenderingType.RowCol) {
+        return (
+            <RowCol cellComponent={cellComponent} rows={rows} totalColSpan={totalColSpan} {...props}>
+                {children}
+            </RowCol>
+        );
+    }
+    const cells = rows.reduce((accumulator: any[], row: { columns: any }, rowIndex: number) => {
+        row.columns.forEach((col: any, colIndex: number) => {
+            accumulator.push({
+                ...col,
+                position: [rowIndex, colIndex, rows.length, row.columns.length],
+            });
+        });
+        return accumulator;
+    }, []);
     return (
         <CSSGrid cellComponent={cellComponent} cells={cells} totalColSpan={totalColSpan} {...props}>
             {children}

src/grid/RowCol.tsx

@@ -0,0 +1,41 @@
+import { FunctionComponent } from 'react';
+import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
+import { RowColGridProps } from './types';
+
+export const RowCol: FunctionComponent<RowColGridProps> = ({
+    cellComponent,
+    rows,
+    children,
+    totalColSpan = 4,
+    ...props
+}) => {
+    const CellComponent = cellComponent;
+    return (
+        <div className="crystallize-grid crystallize-row-col-table" {...props}>
+            {children
+                ? children({ rows, totalColSpan })
+                : rows.map((row: any, i: number) => {
+                      return (
+                          <div
+                              className={`crystallize-grid-row row ${getPositionnablRowClassNames(i, rows.length)}`}
+                              key={`row-${i}`}
+                          >
+                              {row.columns.map((col: any, j: number) => (
+                                  <div
+                                      className={`crystallize-grid-col crystallize-grid__cell col ${getPositionnableCellClassNames(
+                                          i,
+                                          j,
+                                          row.length,
+                                          row.columns.length,
+                                      )}`}
+                                      key={`cell-${i}-${j}`}
+                                  >
+                                      <CellComponent cell={col} totalColSpan={totalColSpan} />
+                                  </div>
+                              ))}
+                          </div>
+                      );
+                  })}
+        </div>
+    );
+};

src/grid/Table.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react';
+import { getPositionnableCellClassNames, getPositionnablRowClassNames } from './GridRenderer';
 import { TableGridProps } from './types';
 
 export const Table: FunctionComponent<TableGridProps> = ({
@@ -23,11 +24,16 @@ export const Table: FunctionComponent<TableGridProps> = ({
                     ? children({ rows, totalColSpan })
                     : rows.map((row: any, i: number) => {
                           return (
-                              <tr key={`row-${i}`}>
+                              <tr key={`row-${i}`} className={getPositionnablRowClassNames(i, rows.length)}>
                                   {row.columns.map((col: any, j: number) => (
                                       <td
                                           key={`cell-${i}-${j}`}
-                                          className="crystallize-grid__cell"
+                                          className={`crystallize-grid__cell ${getPositionnableCellClassNames(
+                                              i,
+                                              j,
+                                              row.length,
+                                              row.columns.length,
+                                          )}`}
                                           rowSpan={col.layout.rowspan}
                                           colSpan={col.layout.colspan}
                                       >

src/grid/types.ts

@@ -3,6 +3,7 @@ import React, { FunctionComponent } from 'react';
 export enum GridRenderingType {
     Table = 'table',
     Div = 'div',
+    RowCol = 'row-col',
 }
 
 export interface CSSGridProps {
@@ -21,6 +22,13 @@ export interface TableGridProps {
     style?: React.CSSProperties;
 }
 
+export interface RowColGridProps {
+    cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
+    rows: any;
+    children?: FunctionComponent<any>;
+    totalColSpan: number;
+    style?: React.CSSProperties;
+}
 export interface GridRendererProps {
     cellComponent: React.FunctionComponent<{ cell: any; totalColSpan: number }>;
     type: GridRenderingType;