Added some notes on grid wrapper regarding dummy cells having the nor…

…mal row/cell style

Renamed row to cell class on theme and added comments

src/core/GridWrapper.tsx

@@ -13,14 +13,14 @@ import {HeadersData} from "../column-grid/types/header.type"
 import {GridData, GridRow} from "../types/row.interface"
 import {IGridApi} from "../types/grid-api.type"
 import {NavigationCoords} from "../navigation/types/navigation-coords.type"
-import {SelectCellFn, useNavigation} from "../navigation/useNavigation"
+import {SelectCellFn } from "../navigation/useNavigation"
 import TextEditor from "../editors/TextEditor"
 import {createPortal} from "react-dom"
 import {ClickAwayListener} from "@material-ui/core"
 import {GridTheme} from "../types/grid-theme"
 import clsx from "clsx"
 import {GridCellProps} from "react-virtualized/dist/es/Grid"
-import {useEditorManager} from "../editors/useEditorManager";
+import {useEditorManager} from "../editors/useEditorManager"
 
 export interface ICellMountedRegisterData {
 	colIndex: number;
@@ -281,7 +281,7 @@ const GridWrapper = forwardRef((props: Props, componentRef: any) => {
 			  style.border = "1px solid blue"
 		  } else {
 			  //Bind default border
-			  if (!props.theme || !props.theme.rowClass) {
+			  if (!props.theme || !props.theme.cellClass) {
 				  style.border = "1px solid rgb(204, 204, 204)"
 			  }
 		  }
@@ -303,10 +303,14 @@ const GridWrapper = forwardRef((props: Props, componentRef: any) => {
 
 		  return (
 			<div
+			  /**
+			  *  @todo Removing most of the custom styling on dummy cells! it is applying borders and other things
+			  that must not be on dummies, dummies are supposed to be invisible
+				*/
 			  className={
 				  isRowSelected && props.theme?.currentRowClass
-					? clsx(props.theme?.rowClass, props.theme?.currentRowClass)
-					: props.theme?.rowClass
+					? clsx(props.theme?.cellClass, props.theme?.currentRowClass)
+					: props.theme?.cellClass
 			  }
 			  style={{
 				  display: "flex",

src/core/dummy-buffer.ts

@@ -1,10 +1,10 @@
-import React from "react"
+import React from 'react'
 
 interface IGenerateDummyData {
 	parent: any
 	index: number
 	totalDummies: number
-	dummyFor: "rowSpan" | "colSpan"
+	dummyFor: 'rowSpan' | 'colSpan'
 }
 
 /**
@@ -13,14 +13,20 @@ interface IGenerateDummyData {
 export class DummyBuffer {
 	private readonly _buffer = new Map<number, any>()
 
+	/**
+	 * @param parent
+	 * @param index
+	 * @param totalDummies
+	 * @param dummyFor
+	 */
 	generateDummy({ parent, index, totalDummies, dummyFor }: IGenerateDummyData) {
 		const style: React.CSSProperties = {}
 		const first = index === 0
 		const last = index === totalDummies - 1
 
 		/** @todo Review this part, we might only provide a className with theme to indicate whether its the last
 		 * column or last row or even for spanns, the user might want to do something about it **/
-		if (dummyFor === "colSpan") {
+		if (dummyFor === 'colSpan') {
 			style.borderLeft = 0
 			if (!last) {
 				style.borderRight = 0
@@ -36,7 +42,7 @@ export class DummyBuffer {
 			...parent,
 			colSpan: 1,
 			rowSpan: 1,
-			children: "",
+			children: '',
 			dummy: true,
 			dummyFor,
 			first,
@@ -48,34 +54,34 @@ export class DummyBuffer {
 			parentRow: parent /** @todo We might only need the id in the future or the index */,
 		}
 	}
-	
+
 	insert(key: number, arr) {
 		if (this._buffer.has(key)) {
 			this._buffer.get(key).push(...arr)
 		} else {
 			this._buffer.set(key, arr)
 		}
 	}
-	
+
 	extract(index: number) {
 		const arr: any[] = []
 
 		if (!this._buffer.has(index) || this._buffer.get(index).length === 0) {
 			return arr
 		}
 
-		this._buffer.get(index).forEach((item) => {
+		this._buffer.get(index).forEach(item => {
 			if (!item.remainingRows) {
 				return
 			}
 
 			arr.push(
-			  this.generateDummy({
-				  parent: item.parent,
-				  totalDummies: item.parent.rowSpan - 1,
-				  index: item.parent.rowSpan - 1 - item.remainingRows,
-				  dummyFor: "rowSpan",
-			  })
+				this.generateDummy({
+					parent: item.parent,
+					totalDummies: item.parent.rowSpan - 1,
+					index: item.parent.rowSpan - 1 - item.remainingRows,
+					dummyFor: 'rowSpan',
+				}),
 			)
 
 			// eslint-disable-next-line no-param-reassign
@@ -84,4 +90,4 @@ export class DummyBuffer {
 
 		return arr
 	}
-}
+}

src/stories/Basic.stories.tsx

@@ -90,14 +90,14 @@ const MainTable = () => {
 		currentColumnClass: classes.currentColumnClassDark,
 		currentRowClass: classes.currentRowClassDark,
 		headerClass: classes.headerClassDark,
-		rowClass: classes.rowClassDark,
+		cellClass: classes.rowClassDark,
 	}
 
 	const topLightGridTheme: GridTheme = {
 		currentColumnClass: classes.currentColumnClass,
 		currentRowClass: classes.currentRowClass,
 		headerClass: classes.headerClass,
-		rowClass: classes.rowClass,
+		cellClass: classes.rowClass,
 	}
 
 	const onCellChange = useCallback(

src/types/grid-theme.ts

@@ -1,6 +1,12 @@
 export interface GridTheme {
+	/**
+	 * Styles the whole row where the cell is selected and also applies styling to the highligted cell
+	 */
 	currentRowClass?: string
+	/**
+	 * Styles the active highlighted column
+	 */
 	currentColumnClass?: string
 	headerClass?: string
-	rowClass?: string
+	cellClass?: string
 }