Add clickable cells and allow customizations on cells.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
a82da6541d
commit
c5ac9d3098
5 changed files with 47 additions and 4 deletions
|
@ -3,6 +3,8 @@ import {createSmartable, SmartableColumns, SmartableData} from "../src/Smartable
|
||||||
import {createColumn, createColumns} from "../src/Smartable/Column";
|
import {createColumn, createColumns} from "../src/Smartable/Column";
|
||||||
import {RowDefinition} from "../src/Smartable/Row";
|
import {RowDefinition} from "../src/Smartable/Row";
|
||||||
import {CellDefinition} from "../src/Smartable/Cell";
|
import {CellDefinition} from "../src/Smartable/Cell";
|
||||||
|
import {ClickableCell} from "../src/Smartable/Cells/ClickableCell";
|
||||||
|
import {Buttons, Modal, ModalType, useModals} from "@kernelui/core";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Some ants names.
|
* Some ants names.
|
||||||
|
@ -111,12 +113,15 @@ export function randomComputationTime(): number
|
||||||
|
|
||||||
export function DemoTable()
|
export function DemoTable()
|
||||||
{
|
{
|
||||||
|
const modals = useModals();
|
||||||
|
|
||||||
const demoDataPromise = useMemo<SmartableData<SmartableColumns<typeof Smartable>>>(() => (
|
const demoDataPromise = useMemo<SmartableData<SmartableColumns<typeof Smartable>>>(() => (
|
||||||
new Promise((resolve) => {
|
new Promise((resolve) => {
|
||||||
// Resolving promise in 2s.
|
// Resolving promise in 2s.
|
||||||
window.setTimeout(() => {
|
window.setTimeout(() => {
|
||||||
resolve(Array.from({ length: 15 }).map(() => {
|
resolve(Array.from({ length: 15 }).map(() => {
|
||||||
// Compute random quantity and unit price.
|
// Compute random quantity and unit price.
|
||||||
|
const name = randomName();
|
||||||
const quantity = randomQuantity();
|
const quantity = randomQuantity();
|
||||||
const price = randomPrice();
|
const price = randomPrice();
|
||||||
|
|
||||||
|
@ -132,7 +137,15 @@ export function DemoTable()
|
||||||
return {
|
return {
|
||||||
cells: {
|
cells: {
|
||||||
name: {
|
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: {
|
quantity: {
|
||||||
data: quantity,
|
data: quantity,
|
||||||
|
|
|
@ -2,7 +2,6 @@ import React, {useContext} from "react";
|
||||||
import {ColumnKey, useColumn} from "./Column";
|
import {ColumnKey, useColumn} from "./Column";
|
||||||
import {Smartable} from "./Smartable";
|
import {Smartable} from "./Smartable";
|
||||||
import {useRow} from "./Row";
|
import {useRow} from "./Row";
|
||||||
import {SpinningLoader} from "@kernelui/core";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Smartable cell definition.
|
* Smartable cell definition.
|
||||||
|
@ -23,14 +22,14 @@ export interface CellDefinition<T = any>
|
||||||
/**
|
/**
|
||||||
* Default cell component.
|
* Default cell component.
|
||||||
*/
|
*/
|
||||||
export function Cell({children}: React.PropsWithChildren<{}>)
|
export function Cell({children, ...props}: React.PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>)
|
||||||
{
|
{
|
||||||
// Get cell data.
|
// Get cell data.
|
||||||
const {data} = useCell();
|
const {data} = useCell();
|
||||||
|
|
||||||
// Try to render cell data to string when no children given.
|
// Try to render cell data to string when no children given.
|
||||||
return (
|
return (
|
||||||
<td>{children ?? String(data)}</td>
|
<td {...props}>{children ?? String(data)}</td>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
19
src/Smartable/Cells/ClickableCell.tsx
Normal file
19
src/Smartable/Cells/ClickableCell.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
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;
|
||||||
|
}>>)
|
||||||
|
{
|
||||||
|
console.log(props);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Cell role={"button"} {...props}>
|
||||||
|
{children}
|
||||||
|
</Cell>
|
||||||
|
)
|
||||||
|
}
|
11
src/styles/_cells.less
Normal file
11
src/styles/_cells.less
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
td[role="button"]
|
||||||
|
{
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
{
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
table.smartable
|
table.smartable
|
||||||
{
|
{
|
||||||
|
@import "_cells";
|
||||||
@import "_headings";
|
@import "_headings";
|
||||||
@import "_loaders";
|
@import "_loaders";
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue