From 79b616dd95dbcca426070a701e8696b5855adcf6 Mon Sep 17 00:00:00 2001 From: Madeorsk Date: Tue, 24 Sep 2024 22:43:22 +0200 Subject: [PATCH] Fix row removal and add a demo table to test it. --- demo/DemoApp.tsx | 3 ++ demo/RemoveDemoTable.tsx | 95 ++++++++++++++++++++++++++++++++++ package.json | 4 +- src/Smartable/AsyncManager.tsx | 15 +++++- yarn.lock | 10 ++-- 5 files changed, 119 insertions(+), 8 deletions(-) create mode 100644 demo/RemoveDemoTable.tsx diff --git a/demo/DemoApp.tsx b/demo/DemoApp.tsx index 5c2c65f..560a0a4 100644 --- a/demo/DemoApp.tsx +++ b/demo/DemoApp.tsx @@ -1,6 +1,7 @@ import React from "react"; import {Application} from "@kernelui/core"; import {DemoTable} from "./DemoTable"; +import {RemoveDemoTable} from "./RemoveDemoTable"; export function DemoApp() { @@ -9,6 +10,8 @@ export function DemoApp()

Random table

+ + ) } diff --git a/demo/RemoveDemoTable.tsx b/demo/RemoveDemoTable.tsx new file mode 100644 index 0000000..22c60a6 --- /dev/null +++ b/demo/RemoveDemoTable.tsx @@ -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([ + "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 ( + ({ + cells: { + name: { + data: row, + }, + actions: { + data: null, + element: ( + + + + ) + }, + }, + }))} /> + ); +} diff --git a/package.json b/package.json index ffe125c..7f0be0f 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.4", + "version": "1.0.5", "name": "@kernelui/smartable", "description": "Kernel UI Smartable.", "scripts": { @@ -17,7 +17,7 @@ "@kernelui:registry": "https://code.zeptotech.net/api/packages/UIKernel/npm/" }, "devDependencies": { - "@kernelui/core": "^1.2.5", + "@kernelui/core": "^1.3.3", "@phosphor-icons/react": "^2.1.7", "@types/node": "^22.0.0", "@types/react": "^18.3.3", diff --git a/src/Smartable/AsyncManager.tsx b/src/Smartable/AsyncManager.tsx index ed71872..a328ec4 100644 --- a/src/Smartable/AsyncManager.tsx +++ b/src/Smartable/AsyncManager.tsx @@ -91,6 +91,12 @@ class AsyncManager */ protected rowsLoaded: boolean = false; + /** + * Tells if rows need to be reinitialized or not. + * @protected + */ + protected reinitRows: boolean = false; + /** * Rows data. * @protected @@ -129,6 +135,9 @@ class AsyncManager // Ignore undefined value. if (rowsDefinitions == undefined) return; + // Rows have been reinitialized. + this.reinitRows = true; + // Initialize rows data and cells definitions. this.rowsData = []; this.cellsDefinitions = []; @@ -226,6 +235,7 @@ class AsyncManager { if (!( // Checking that there is at least one changed value. + this.reinitRows || this.rowsData.length > 0 || this.cellsDefinitions.some((rowCells) => ( Object.keys(rowCells).length > 0 )) @@ -235,11 +245,14 @@ class AsyncManager // Initialize new data. const newData = { - rows: !this.rowsLoaded ? undefined : [ + rows: !this.rowsLoaded ? undefined : this.reinitRows ? [] : [ ...(this.currentDataState?.rows ?? []) ], }; + // Rows have been reinitialized. + this.reinitRows = false; + for (const [rowId, newRow] of this.rowsData?.entries()) { // Update value of each new row. newData.rows[rowId] = { diff --git a/yarn.lock b/yarn.lock index 94bf5cd..e1af2ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -524,9 +524,9 @@ __metadata: languageName: node linkType: hard -"@kernelui/core@npm:^1.2.5": - version: 1.2.5 - 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" +"@kernelui/core@npm:^1.3.3": + version: 1.3.3 + 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: "@floating-ui/react": "npm:^0.26.17" "@fontsource-variable/jetbrains-mono": "npm:^5.0.21" @@ -539,7 +539,7 @@ __metadata: react: ^18.3.1 react-dom: ^18.3.1 react-router-dom: ^6.24.1 - checksum: 10c0/4b7c3eb0b501fbc9ec7ad0d3787423a461f24819b3cc94c58fba2e8269d3d45d8b05d444a63bf155aaa21be0a698fecbfe2796e90b14d233958b7236deb3b02d + checksum: 10c0/19e00303e752e937c2ced2f79eb8c189e9453e5b186c14a32fe621b460d367778b77ae659e7ff5262cdfe835e7cb7652084efe26cb388efaae1533f450fe25b3 languageName: node linkType: hard @@ -547,7 +547,7 @@ __metadata: version: 0.0.0-use.local resolution: "@kernelui/smartable@workspace:." dependencies: - "@kernelui/core": "npm:^1.2.5" + "@kernelui/core": "npm:^1.3.3" "@phosphor-icons/react": "npm:^2.1.7" "@types/node": "npm:^22.0.0" "@types/react": "npm:^18.3.3"