feat(ui5-list): added new param for selectionChange event (#798)

SAP · Sep 27, 2019 · 28c4181 · 28c4181
1 parent 8420492
commit 28c4181
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 8 deletions.
diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -167,12 +167,15 @@ const metadata = {
 		 * @event
 		 * @param {Array} selectedItems an array of the selected items.
 		 * @param {Array} previouslySelectedItems an array of the previously selected items.
+		 * @param {Boolean} selectionComponentPressed a boolean indicating if the user used the selection components
+		 * in SingleSelection(ui5-radiobutton) and MultiSelection(ui5-checkbox) modes to change the selection.
 		 * @public
 		 */
 		selectionChange: {
 			detail: {
 				selectedItems: { type: Array },
 				previouslySelectedItems: { type: Array },
+				selectionComponentPressed: { type: Boolean },
 			},
 		},
 	},
@@ -289,11 +292,15 @@ class List extends UI5Element {
 		this._selectionRequested = true;
 
 		if (this[`handle${this.mode}`]) {
-			selectionChange = this[`handle${this.mode}`](event.detail.item, event.selected);
+			selectionChange = this[`handle${this.mode}`](event.detail.item, event.detail.selected);
 		}
 
 		if (selectionChange) {
-			this.fireEvent("selectionChange", { selectedItems: this.getSelectedItems(), previouslySelectedItems });
+			this.fireEvent("selectionChange", {
+				selectedItems: this.getSelectedItems(),
+				previouslySelectedItems,
+				selectionComponentPressed: event.detail.selectionComponentPressed,
+			});
 		}
 	}
 
@@ -448,8 +455,9 @@ class List extends UI5Element {
 			this.onSelectionRequested({
 				detail: {
 					item: pressedItem,
+					selectionComponentPressed: false,
+					selected: !pressedItem.selected,
 				},
-				selected: !pressedItem.selected,
 			});
 		}
 

diff --git a/packages/main/src/ListItem.hbs b/packages/main/src/ListItem.hbs
@@ -33,15 +33,17 @@
 		<ui5-radiobutton
 				id="{{_id}}-singleSelectionElement"
 				class="ui5-li-singlesel-radiobtn"
-				?selected="{{selected}}">
+				?selected="{{selected}}"
+				@click="{{onSingleSelectionComponentPress}}">
 		</ui5-radiobutton>
 	{{/if}}
 
 	{{#if modeMultiSelect}}
 		<ui5-checkbox
 				id="{{_id}}-multiSelectionElement"
 				class="ui5-li-multisel-cb"
-				?checked="{{selected}}">
+				?checked="{{selected}}"
+				@click="{{onMultiSelectionComponentPress}}">
 		</ui5-checkbox>
 	{{/if}}
 
@@ -51,7 +53,7 @@
 				id="{{_id}}-deleteSelectionElement"
 				design="Transparent"
 				icon="sap-icon://decline"
-				@ui5-press="{{_onDelete}}"
+				@ui5-press="{{onDelete}}"
 			></ui5-button>
 		</div>
 	{{/if}}

diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js
@@ -182,14 +182,26 @@ class ListItem extends ListItemBase {
 		this.fireItemPress();
 	}
 
+	/*
+	 * Called when selection components in Single (ui5-radiobutton)
+	 * and Multi (ui5-checkbox) selection modes are used.
+	 */
+	onMultiSelectionComponentPress(event) {
+		this.fireEvent("_selectionRequested", { item: this, selected: !event.target.checked, selectionComponentPressed: true });
+	}
+
+	onSingleSelectionComponentPress(event) {
+		this.fireEvent("_selectionRequested", { item: this, selected: !event.target.selected, selectionComponentPressed: true });
+	}
+
 	activate() {
 		if (this.type === ListItemType.Active) {
 			this.active = true;
 		}
 	}
 
-	_onDelete(event) {
-		this.fireEvent("_selectionRequested", { item: this, selected: event.selected });
+	onDelete(event) {
+		this.fireEvent("_selectionRequested", { item: this, selectionComponentPressed: false });
 	}
 
 	fireItemPress() {

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html b/packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html
@@ -42,6 +42,14 @@
 		<ui5-li image="./img/HT-2002.jpg"  description="2GB RAM, Intel i7 4.5 GHz">DVD set</ui5-li>
 	</ui5-list>
 
+	<ui5-list id="listMultiSel" mode="MultiSelect">
+		<ui5-li id="option1">Option #1</ui5-li>
+		<ui5-li>Option #2</ui5-li>
+		<ui5-li>Option #3</ui5-li>
+	</ui5-list>
+
+	<ui5-input id="fieldMultiSelResult"></ui5-input>
+
 	<script>
 		'use strict';
 
@@ -68,6 +76,10 @@
 		listEvents.addEventListener("ui5-selectionChange", function(event) {
 			selectionChangeResultPreviousItemsParameter.value = event.detail.previouslySelectedItems[0].id;
 		})
+
+		listMultiSel.addEventListener("ui5-selectionChange", function(event) {
+			fieldMultiSelResult.value = event.detail.selectionComponentPressed;
+		})
 	</script>
 </body>
 </html>
diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js
@@ -28,6 +28,15 @@ describe("Date Picker Tests", () => {
 		assert.strictEqual(secondItem.getProperty("id"), selectionChangeResultPreviousItemsParameter.getProperty("value"));
 	});
 
+	it("selectionChange using selection component", () => {
+		const fieldResult = $("#fieldMultiSelResult");
+		const firstItemSelectionComponent = $("#listMultiSel #option1").shadow$(".ui5-li-multisel-cb");
+
+		firstItemSelectionComponent.click();
+
+		assert.strictEqual(fieldResult.getProperty("value"), "true");
+	});
+
 	it("header text", () => {
 		list.id = "#list1";