From 27f1608b9bc28066c4c24c4abdcaf418c204013f Mon Sep 17 00:00:00 2001
From: gpedro <gpedro831@gmail.com>
Date: Fri, 17 Feb 2023 00:51:02 -0400
Subject: [PATCH] feat: row and cell style generator

---
 src/config.ts                     |  6 +++--
 src/view/table/td.tsx             |  9 ++++++-
 src/view/table/tr.tsx             |  9 ++++++-
 tests/jest/view/table/td.test.tsx | 42 +++++++++++++++++++++++++++++++
 tests/jest/view/table/tr.test.tsx | 26 +++++++++++++++++++
 5 files changed, 88 insertions(+), 4 deletions(-)

diff --git a/src/config.ts b/src/config.ts
index 71e07a43..3c041910 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -16,6 +16,8 @@ import { GridEvents } from './events';
 import { PluginManager, PluginPosition, Plugin } from './plugin';
 import Grid from './grid';
 import { Store } from './state/store';
+import Row from './row';
+import Cell from './cell';
 
 export const ConfigContext = createContext(null);
 
@@ -67,8 +69,8 @@ export interface Config {
     th: string;
     thead: string;
     tbody: string;
-    tr: string;
-    td: string;
+    tr: string | ((row: Row, header: boolean) => string);
+    td: string | ((cell: Cell, column: string, row: Row) => string);
     container: string;
     footer: string;
     header: string;
diff --git a/src/view/table/td.tsx b/src/view/table/td.tsx
index 7464c47c..bfdee10b 100644
--- a/src/view/table/td.tsx
+++ b/src/view/table/td.tsx
@@ -66,6 +66,13 @@ export function TD(
     }
   };
 
+  let tdClassName: string = "";
+  if (typeof config.className.td === 'function') {
+    tdClassName = config.className.td(props.cell, props.column?.id, props.row)
+  } else {
+    tdClassName = config.className.td
+  }
+
   return (
     <td
       role={props.role}
@@ -74,7 +81,7 @@ export function TD(
       className={classJoin(
         className('td'),
         props.className,
-        config.className.td,
+        tdClassName,
       )}
       style={{
         ...props.style,
diff --git a/src/view/table/tr.tsx b/src/view/table/tr.tsx
index 11f37209..11977032 100644
--- a/src/view/table/tr.tsx
+++ b/src/view/table/tr.tsx
@@ -50,9 +50,16 @@ export function TR(props: {
     });
   };
 
+  let trClassName: string = "";
+  if (typeof config.className.tr === 'function') {
+    trClassName = config.className.tr(props.row, this.header)
+  } else {
+    trClassName = config.className.tr
+  }
+
   return (
     <tr
-      className={classJoin(className('tr'), config.className.tr)}
+      className={classJoin(className('tr'), trClassName)}
       onClick={handleClick}
     >
       {getChildren()}
diff --git a/tests/jest/view/table/td.test.tsx b/tests/jest/view/table/td.test.tsx
index db8aa0c4..07d9a4ee 100644
--- a/tests/jest/view/table/td.test.tsx
+++ b/tests/jest/view/table/td.test.tsx
@@ -38,4 +38,46 @@ describe('TD component', () => {
     expect(cells.length).toEqual(1);
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('should attach the custom td className', async () => {
+    const td = mount(
+      <ConfigContext.Provider
+        value={{
+          ...config,
+          ...{
+            className: {
+              td: 'custom-td-classname',
+            },
+          },
+        }}
+      >
+        <TD cell={new Cell('boo')} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(td.find('td.custom-td-classname')).toHaveLength(1);
+  });
+
+  it('should attach the custom td className callback', async () => {
+    const cellStyleGenerator = jest.fn();
+
+    const td = mount(
+      <ConfigContext.Provider value={{
+        ...config,
+        ...{
+          className: {
+            td: () => {
+              cellStyleGenerator()
+              return 'custom-td-classname-callback'
+            }
+          },
+        },
+      }}>
+        <TD cell={new Cell('boo')} />
+      </ConfigContext.Provider>,
+    );
+
+    expect(cellStyleGenerator).toHaveBeenCalledTimes(1);
+    expect(td.find('td.custom-td-classname-callback')).toHaveLength(1);
+  });
 });
diff --git a/tests/jest/view/table/tr.test.tsx b/tests/jest/view/table/tr.test.tsx
index 20349506..a5e83b07 100644
--- a/tests/jest/view/table/tr.test.tsx
+++ b/tests/jest/view/table/tr.test.tsx
@@ -64,4 +64,30 @@ describe('TR component', () => {
 
     expect(tr.find('tr.custom-tr-classname')).toHaveLength(1);
   });
+
+  it('should attach the custom tr className callback', async () => {
+    const rowStyleGenerator = jest.fn();
+    const tr = mount(
+      <ConfigContext.Provider
+        value={{
+          ...config,
+          ...{
+            className: {
+              tr: () => {
+                rowStyleGenerator()
+                return 'custom-tr-classname-callback'
+              }
+            },
+          },
+        }}
+      >
+        <TR>
+          <TD cell={new Cell('boo')} />
+        </TR>
+      </ConfigContext.Provider>,
+    );
+
+    expect(rowStyleGenerator).toHaveBeenCalledTimes(1);
+    expect(tr.find('tr.custom-tr-classname-callback')).toHaveLength(1);
+  });
 });