Fix row removal and add a demo table to test it.
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful

This commit is contained in:
Madeorsk 2024-09-24 22:43:22 +02:00
parent 649d608c89
commit 79b616dd95
Signed by: Madeorsk
GPG key ID: 677E51CA765BB79F
5 changed files with 119 additions and 8 deletions

View file

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import {Application} from "@kernelui/core"; import {Application} from "@kernelui/core";
import {DemoTable} from "./DemoTable"; import {DemoTable} from "./DemoTable";
import {RemoveDemoTable} from "./RemoveDemoTable";
export function DemoApp() export function DemoApp()
{ {
@ -9,6 +10,8 @@ export function DemoApp()
<h1>Random table</h1> <h1>Random table</h1>
<DemoTable /> <DemoTable />
<RemoveDemoTable />
</Application> </Application>
) )
} }

95
demo/RemoveDemoTable.tsx Normal file
View file

@ -0,0 +1,95 @@
import React, {useState} from "react";
import {createSmartable} from "../src/Smartable/Smartable";
import {createColumn, createColumns} from "../src/Smartable/Column";
import {StringFilter} from "../src/Smartable/Filters/StringFilter";
import { Cell } from "../src/Smartable/Cell";
// Create main table.
const Smartable = createSmartable({
columns: createColumns(
createColumn("name", {
title: "Name",
filter: StringFilter,
}),
createColumn("actions", {
title: "Actions",
}),
),
});
export function RemoveDemoTable()
{
const [rows, setRows] = useState<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",
]);
return (
<Smartable.Table data={rows.map((row, rowIndex) => ({
cells: {
name: {
data: row,
},
actions: {
data: null,
element: (
<Cell>
<button className={"remove"}
onClick={() => setRows(rows.toSpliced(rowIndex, 1))}>
Remove
</button>
</Cell>
)
},
},
}))} />
);
}

View file

@ -1,5 +1,5 @@
{ {
"version": "1.0.4", "version": "1.0.5",
"name": "@kernelui/smartable", "name": "@kernelui/smartable",
"description": "Kernel UI Smartable.", "description": "Kernel UI Smartable.",
"scripts": { "scripts": {
@ -17,7 +17,7 @@
"@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/" "@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/"
}, },
"devDependencies": { "devDependencies": {
"@kernelui/core": "^1.2.5", "@kernelui/core": "^1.3.3",
"@phosphor-icons/react": "^2.1.7", "@phosphor-icons/react": "^2.1.7",
"@types/node": "^22.0.0", "@types/node": "^22.0.0",
"@types/react": "^18.3.3", "@types/react": "^18.3.3",

View file

@ -91,6 +91,12 @@ class AsyncManager<CK extends ColumnKey>
*/ */
protected rowsLoaded: boolean = false; protected rowsLoaded: boolean = false;
/**
* Tells if rows need to be reinitialized or not.
* @protected
*/
protected reinitRows: boolean = false;
/** /**
* Rows data. * Rows data.
* @protected * @protected
@ -129,6 +135,9 @@ class AsyncManager<CK extends ColumnKey>
// Ignore undefined value. // Ignore undefined value.
if (rowsDefinitions == undefined) return; if (rowsDefinitions == undefined) return;
// Rows have been reinitialized.
this.reinitRows = true;
// Initialize rows data and cells definitions. // Initialize rows data and cells definitions.
this.rowsData = []; this.rowsData = [];
this.cellsDefinitions = []; this.cellsDefinitions = [];
@ -226,6 +235,7 @@ class AsyncManager<CK extends ColumnKey>
{ {
if (!( if (!(
// Checking that there is at least one changed value. // Checking that there is at least one changed value.
this.reinitRows ||
this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => ( this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => (
Object.keys(rowCells).length > 0 Object.keys(rowCells).length > 0
)) ))
@ -235,11 +245,14 @@ class AsyncManager<CK extends ColumnKey>
// Initialize new data. // Initialize new data.
const newData = { const newData = {
rows: !this.rowsLoaded ? undefined : [ rows: !this.rowsLoaded ? undefined : this.reinitRows ? [] : [
...(this.currentDataState?.rows ?? []) ...(this.currentDataState?.rows ?? [])
], ],
}; };
// Rows have been reinitialized.
this.reinitRows = false;
for (const [rowId, newRow] of this.rowsData?.entries()) for (const [rowId, newRow] of this.rowsData?.entries())
{ // Update value of each new row. { // Update value of each new row.
newData.rows[rowId] = { newData.rows[rowId] = {

View file

@ -524,9 +524,9 @@ __metadata:
languageName: node languageName: node
linkType: hard linkType: hard
"@kernelui/core@npm:^1.2.5": "@kernelui/core@npm:^1.3.3":
version: 1.2.5 version: 1.3.3
resolution: "@kernelui/core@npm:1.2.5::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.2.5%2Fcore-1.2.5.tgz" resolution: "@kernelui/core@npm:1.3.3::__archiveUrl=https%3A%2F%2Fcode.zeptotech.net%2Fapi%2Fpackages%2FUIKernel%2Fnpm%2F%2540kernelui%252Fcore%2F-%2F1.3.3%2Fcore-1.3.3.tgz"
dependencies: dependencies:
"@floating-ui/react": "npm:^0.26.17" "@floating-ui/react": "npm:^0.26.17"
"@fontsource-variable/jetbrains-mono": "npm:^5.0.21" "@fontsource-variable/jetbrains-mono": "npm:^5.0.21"
@ -539,7 +539,7 @@ __metadata:
react: ^18.3.1 react: ^18.3.1
react-dom: ^18.3.1 react-dom: ^18.3.1
react-router-dom: ^6.24.1 react-router-dom: ^6.24.1
checksum: 10c0/4b7c3eb0b501fbc9ec7ad0d3787423a461f24819b3cc94c58fba2e8269d3d45d8b05d444a63bf155aaa21be0a698fecbfe2796e90b14d233958b7236deb3b02d checksum: 10c0/19e00303e752e937c2ced2f79eb8c189e9453e5b186c14a32fe621b460d367778b77ae659e7ff5262cdfe835e7cb7652084efe26cb388efaae1533f450fe25b3
languageName: node languageName: node
linkType: hard linkType: hard
@ -547,7 +547,7 @@ __metadata:
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@kernelui/smartable@workspace:." resolution: "@kernelui/smartable@workspace:."
dependencies: dependencies:
"@kernelui/core": "npm:^1.2.5" "@kernelui/core": "npm:^1.3.3"
"@phosphor-icons/react": "npm:^2.1.7" "@phosphor-icons/react": "npm:^2.1.7"
"@types/node": "npm:^22.0.0" "@types/node": "npm:^22.0.0"
"@types/react": "npm:^18.3.3" "@types/react": "npm:^18.3.3"