From f25ca0cc2e327e811242c13baf9ab2e938ff0ad5 Mon Sep 17 00:00:00 2001
From: Madeorsk <madeorsk@protonmail.com>
Date: Sat, 27 Jul 2024 20:01:07 +0200
Subject: [PATCH] Add clickable cells and allow customizations on cells.

---
 demo/DemoTable.tsx                    | 15 ++++++++++++++-
 src/Smartable/Cell.tsx                |  5 ++---
 src/Smartable/Cells/ClickableCell.tsx | 17 +++++++++++++++++
 src/styles/_cells.less                | 11 +++++++++++
 src/styles/smartable.less             |  1 +
 5 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 src/Smartable/Cells/ClickableCell.tsx
 create mode 100644 src/styles/_cells.less

diff --git a/demo/DemoTable.tsx b/demo/DemoTable.tsx
index 51acfea..76f7785 100644
--- a/demo/DemoTable.tsx
+++ b/demo/DemoTable.tsx
@@ -3,6 +3,8 @@ import {createSmartable, SmartableColumns, SmartableData} from "../src/Smartable
 import {createColumn, createColumns} from "../src/Smartable/Column";
 import {RowDefinition} from "../src/Smartable/Row";
 import {CellDefinition} from "../src/Smartable/Cell";
+import {ClickableCell} from "../src/Smartable/Cells/ClickableCell";
+import {Buttons, Modal, ModalType, useModals} from "@kernelui/core";
 
 /**
  * Some ants names.
@@ -111,12 +113,15 @@ export function randomComputationTime(): number
 
 export function DemoTable()
 {
+	const modals = useModals();
+
 	const demoDataPromise = useMemo<SmartableData<SmartableColumns<typeof Smartable>>>(() => (
 		new Promise((resolve) => {
 			// Resolving promise in 2s.
 			window.setTimeout(() => {
 				resolve(Array.from({ length: 15 }).map(() => {
 					// Compute random quantity and unit price.
+					const name = randomName();
 					const quantity = randomQuantity();
 					const price = randomPrice();
 
@@ -132,7 +137,15 @@ export function DemoTable()
 					return {
 						cells: {
 							name: {
-								data: randomName(),
+								data: name,
+								element: <ClickableCell onClick={() => {
+									const uuid = modals.open(<Modal type={ModalType.INFO} title={name}>
+										A great description about these ants.
+										<Buttons>
+											<button onClick={() => modals.close(uuid)}>OK</button>
+										</Buttons>
+									</Modal>);
+								}} />,
 							},
 							quantity: {
 								data: quantity,
diff --git a/src/Smartable/Cell.tsx b/src/Smartable/Cell.tsx
index 70e77f2..8dff04c 100644
--- a/src/Smartable/Cell.tsx
+++ b/src/Smartable/Cell.tsx
@@ -2,7 +2,6 @@ import React, {useContext} from "react";
 import {ColumnKey, useColumn} from "./Column";
 import {Smartable} from "./Smartable";
 import {useRow} from "./Row";
-import {SpinningLoader} from "@kernelui/core";
 
 /**
  * Smartable cell definition.
@@ -23,14 +22,14 @@ export interface CellDefinition<T = any>
 /**
  * Default cell component.
  */
-export function Cell({children}: React.PropsWithChildren<{}>)
+export function Cell({children, ...props}: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>)
 {
 	// Get cell data.
 	const {data} = useCell();
 
 	// Try to render cell data to string when no children given.
 	return (
-		<td>{children ?? String(data)}</td>
+		<td {...props}>{children ?? String(data)}</td>
 	);
 }
 
diff --git a/src/Smartable/Cells/ClickableCell.tsx b/src/Smartable/Cells/ClickableCell.tsx
new file mode 100644
index 0000000..0a25ce2
--- /dev/null
+++ b/src/Smartable/Cells/ClickableCell.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import {Cell} from "../Cell";
+import {Modify} from "@kernelui/core";
+
+/**
+ * Clickable cell component.
+ */
+export function ClickableCell({role, children, ...props}: React.PropsWithChildren<Modify<React.TdHTMLAttributes<HTMLTableCellElement>, {
+	role?: never;
+}>>)
+{
+	return (
+		<Cell role={"button"} {...props}>
+			{children}
+		</Cell>
+	)
+}
diff --git a/src/styles/_cells.less b/src/styles/_cells.less
new file mode 100644
index 0000000..b74e813
--- /dev/null
+++ b/src/styles/_cells.less
@@ -0,0 +1,11 @@
+td[role="button"]
+{
+	transition: background 0.2s ease;
+
+	&:hover
+	{
+		background: rgba(0, 0, 0, 0.1);
+	}
+
+	cursor: pointer;
+}
diff --git a/src/styles/smartable.less b/src/styles/smartable.less
index b1d009f..bf1d56c 100644
--- a/src/styles/smartable.less
+++ b/src/styles/smartable.less
@@ -1,5 +1,6 @@
 table.smartable
 {
+	@import "_cells";
 	@import "_headings";
 	@import "_loaders";
 }