0.2.1. (#5)

Author: b4rtaz

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.2.1
+
+Fixed bug with removing a message about an empty list.
+
 ## 0.2.0
 
 **Breaking changes:**

demos/webpack-app/package.json

@@ -18,8 +18,8 @@
 		"sequential-workflow-model": "^0.1.3",
 		"sequential-workflow-designer": "^0.13.0",
 		"sequential-workflow-machine": "^0.2.0",
-		"sequential-workflow-editor-model": "^0.2.0",
-		"sequential-workflow-editor": "^0.2.0"
+		"sequential-workflow-editor-model": "^0.2.1",
+		"sequential-workflow-editor": "^0.2.1"
 	},
 	"devDependencies": {
 		"ts-loader": "^9.4.2",

editor/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"type": "module",
 	"main": "./lib/esm/index.js",
 	"types": "./lib/index.d.ts",
@@ -46,11 +46,11 @@
 		"prettier:fix": "prettier --write ./src ./css"
 	},
 	"dependencies": {
-		"sequential-workflow-editor-model": "^0.2.0",
+		"sequential-workflow-editor-model": "^0.2.1",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"peerDependencies": {
-		"sequential-workflow-editor-model": "^0.2.0",
+		"sequential-workflow-editor-model": "^0.2.1",
 		"sequential-workflow-model": "^0.1.3"
 	},
 	"devDependencies": {

editor/src/components/dynamic-list-component.spec.ts

@@ -27,4 +27,23 @@ describe('DynamicListComponent', () => {
 
 		expect(component.view.children.length).toBe(0);
 	});
+
+	it('shows empty message, when items appear, then message disappears', () => {
+		const component = dynamicListComponent({
+			emptyMessage: 'List is empty'
+		});
+
+		expect(component.view.children.length).toBe(0);
+
+		component.set([]);
+
+		expect(component.view.children.length).toBe(1);
+		expect(component.view.children[0].textContent).toBe('List is empty');
+
+		const item = Html.element('div');
+		component.set([{ view: item }]);
+
+		expect(component.view.children.length).toBe(1);
+		expect(component.view.children[0]).toBe(item);
+	});
 });

editor/src/components/dynamic-list-component.ts

@@ -14,6 +14,10 @@ export function dynamicListComponent<TComponent extends Component>(
 	configuration?: DynamicListComponentConfiguration
 ): DynamicListComponent<TComponent> {
 	function set(set: TComponent[]) {
+		if (emptyRow) {
+			view.removeChild(emptyRow);
+			emptyRow = null;
+		}
 		components.forEach(component => view.removeChild(component.view));
 		components.length = 0;
 
@@ -23,14 +27,15 @@ export function dynamicListComponent<TComponent extends Component>(
 				view.appendChild(component.view);
 			});
 		} else if (configuration?.emptyMessage) {
-			const message = Html.element('div', {
+			emptyRow = Html.element('div', {
 				class: 'swe-dynamic-list-empty-row'
 			});
-			message.innerText = configuration.emptyMessage;
-			view.appendChild(message);
+			emptyRow.innerText = configuration.emptyMessage;
+			view.appendChild(emptyRow);
 		}
 	}
 
+	let emptyRow: HTMLElement | null = null;
 	const components: TComponent[] = [];
 	const view = Html.element('div', {
 		class: 'swe-dynamic-list'

model/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sequential-workflow-editor-model",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"homepage": "https://nocode-js.com/",
 	"author": {
 		"name": "NoCode JS",