Add a random table as demo table.
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
c8601aaa30
commit
e71d0aa446
3 changed files with 163 additions and 0 deletions
|
@ -1,10 +1,14 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import {Application} from "@kernelui/core";
|
import {Application} from "@kernelui/core";
|
||||||
|
import {DemoTable} from "./DemoTable";
|
||||||
|
|
||||||
export function DemoApp()
|
export function DemoApp()
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<Application>
|
<Application>
|
||||||
|
<h1>Random table</h1>
|
||||||
|
|
||||||
|
<DemoTable />
|
||||||
</Application>
|
</Application>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
154
demo/DemoTable.tsx
Normal file
154
demo/DemoTable.tsx
Normal file
|
@ -0,0 +1,154 @@
|
||||||
|
import React, {useMemo} from "react";
|
||||||
|
import {createSmartable, SmartableColumns, SmartableData} from "../src/Smartable/Smartable";
|
||||||
|
import {createColumn, createColumns} from "../src/Smartable/Column";
|
||||||
|
import {RowDefinition} from "../src/Smartable/Row";
|
||||||
|
import {CellDefinition} from "../src/Smartable/Cell";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Some ants names.
|
||||||
|
*/
|
||||||
|
const names: string[] = [
|
||||||
|
"Formica rufa",
|
||||||
|
"Lasius niger",
|
||||||
|
"Camponotus pennsylvanicus",
|
||||||
|
"Solenopsis invicta",
|
||||||
|
"Atta cephalotes",
|
||||||
|
"Pogonomyrmex barbatus",
|
||||||
|
"Myrmica rubra",
|
||||||
|
"Dorymyrmex insanus",
|
||||||
|
"Pheidole megacephala",
|
||||||
|
"Crematogaster scutellaris",
|
||||||
|
"Tetramorium caespitum",
|
||||||
|
"Tapinoma sessile",
|
||||||
|
"Linepithema humile",
|
||||||
|
"Monomorium pharaonis",
|
||||||
|
"Odontomachus bauri",
|
||||||
|
"Paraponera clavata",
|
||||||
|
"Oecophylla smaragdina",
|
||||||
|
"Pseudomyrmex gracilis",
|
||||||
|
"Eciton burchellii",
|
||||||
|
"Anoplolepis gracilipes",
|
||||||
|
"Acromyrmex octospinosus",
|
||||||
|
"Acanthomyops claviger",
|
||||||
|
"Dorylus nigricans",
|
||||||
|
"Neivamyrmex nigrescens",
|
||||||
|
"Hypoponera punctatissima",
|
||||||
|
"Solenopsis geminata",
|
||||||
|
"Camponotus chromaiodes",
|
||||||
|
"Brachymyrmex depilis",
|
||||||
|
"Ectatomma ruidum",
|
||||||
|
"Proceratium silaceum",
|
||||||
|
"Cephalotes atratus",
|
||||||
|
"Neoponera villosa",
|
||||||
|
"Dinoponera gigantea",
|
||||||
|
"Prenolepis imparis",
|
||||||
|
"Lasius flavus",
|
||||||
|
"Formica fusca",
|
||||||
|
"Myrmecia gulosa",
|
||||||
|
"Solenopsis molesta",
|
||||||
|
"Camponotus herculeanus",
|
||||||
|
"Cataulacus granulatus",
|
||||||
|
"Daceton armigerum",
|
||||||
|
"Polyrhachis dives",
|
||||||
|
"Pheidole dentata",
|
||||||
|
"Tetramorium immigrans",
|
||||||
|
"Messor barbarus",
|
||||||
|
"Cardiocondyla obscurior",
|
||||||
|
"Nylanderia flavipes",
|
||||||
|
"Forelius pruinosus",
|
||||||
|
"Amblyopone pallipes"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Create main table.
|
||||||
|
const Smartable = createSmartable({
|
||||||
|
columns: createColumns(
|
||||||
|
createColumn("name", {
|
||||||
|
title: "Name",
|
||||||
|
}),
|
||||||
|
createColumn("quantity", {
|
||||||
|
title: "Quantity",
|
||||||
|
}),
|
||||||
|
createColumn("unit-price", {
|
||||||
|
title: "Unit price",
|
||||||
|
}),
|
||||||
|
createColumn("total-price", {
|
||||||
|
title: "Total",
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a random quantity.
|
||||||
|
*/
|
||||||
|
export function randomQuantity(): number
|
||||||
|
{
|
||||||
|
return Math.floor(Math.random() * 8) + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a random unit price.
|
||||||
|
*/
|
||||||
|
export function randomPrice(): number
|
||||||
|
{
|
||||||
|
return Math.floor(Math.random() * 25) + 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get a random name from `names` array.
|
||||||
|
*/
|
||||||
|
export function randomName(): string
|
||||||
|
{
|
||||||
|
return names[Math.floor(Math.random() * names.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate a random computation time between 0 and 10s.
|
||||||
|
*/
|
||||||
|
export function randomComputationTime(): number
|
||||||
|
{
|
||||||
|
return Math.random() * 1000 * 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DemoTable()
|
||||||
|
{
|
||||||
|
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 quantity = randomQuantity();
|
||||||
|
const price = randomPrice();
|
||||||
|
|
||||||
|
// Fake long computation of total price for each row.
|
||||||
|
const totalPricePromise = new Promise<CellDefinition<number>>((resolve) => {
|
||||||
|
window.setTimeout(() => {
|
||||||
|
return resolve({
|
||||||
|
data: quantity * price,
|
||||||
|
});
|
||||||
|
}, randomComputationTime());
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
cells: {
|
||||||
|
name: {
|
||||||
|
data: randomName(),
|
||||||
|
},
|
||||||
|
quantity: {
|
||||||
|
data: quantity,
|
||||||
|
},
|
||||||
|
"unit-price": {
|
||||||
|
data: price,
|
||||||
|
},
|
||||||
|
"total-price": totalPricePromise,
|
||||||
|
},
|
||||||
|
} as RowDefinition<SmartableColumns<typeof Smartable>>;
|
||||||
|
}));
|
||||||
|
}, 2000);
|
||||||
|
})
|
||||||
|
), []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Smartable.Table data={demoDataPromise} />
|
||||||
|
);
|
||||||
|
}
|
|
@ -45,6 +45,11 @@ export type Smartable<CK extends ColumnKey> = {
|
||||||
Table: React.FunctionComponent<SmartableProperties<CK>>;
|
Table: React.FunctionComponent<SmartableProperties<CK>>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Smartable columns infered type.
|
||||||
|
*/
|
||||||
|
export type SmartableColumns<CK> = CK extends Smartable<infer CK> ? CK : never;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Define a new Smartable.
|
* Define a new Smartable.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue