feat(ui5-list): selectionChange event provides previousSelection items (#418)

BREAKING CHANGE: the "selectionChange" event param "items" is renamed to "selectedItems".

Author: fifoosid

lib/documentation/templates/api-events-section.js

@@ -23,8 +23,10 @@ module.exports = {
 
           {{#each this.parameters}}
             <tr class="api-table-event-param" >
-            <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
-            <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} </br> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
+              <div class="api-table-content-event-params-wrapper">
+                <div class="cell api-table-param-name api-table-content-cell api-table-content-cell-bold">{{this.name}}</div>
+                <div class="cell api-table-event-param-cell api-table-content-cell api-table-content-cell-description"><strong class="bold" >type:</strong> {{this.type}} </br> <strong class="api-table-event-description bold">description:</strong> {{{this.description}}}</div>
+              </div>
             </tr>
           {{/each}}
         {{/each}}

packages/main/src/List.js

@@ -171,12 +171,14 @@ const metadata = {
 		 * in <code>SingleSelect</code> and <code>MultiSelect</code> modes.
 		 *
 		 * @event
-		 * @param {Array} items an array of the selected items.
+		 * @param {Array} selectedItems an array of the selected items.
+		 * @param {Array} previouslySelectedItems an array of the previously selected items.
 		 * @public
 		 */
 		selectionChange: {
 			detail: {
-				items: { type: Array },
+				selectedItems: { type: Array },
+				previouslySelectedItems: { type: Array },
 			},
 		},
 	},
@@ -284,6 +286,7 @@ class List extends UI5Element {
 	* ITEM SELECTION BASED ON THE CURRENT MODE
 	*/
 	onSelectionRequested(event) {
+		const previouslySelectedItems = this.getSelectedItems();
 		let selectionChange = false;
 		this._selectionRequested = true;
 
@@ -292,7 +295,7 @@ class List extends UI5Element {
 		}
 
 		if (selectionChange) {
-			this.fireEvent("selectionChange", { items: this.getSelectedItems() });
+			this.fireEvent("selectionChange", { selectedItems: this.getSelectedItems(), previouslySelectedItems });
 		}
 	}
 

packages/main/test/playground/css/api.css

@@ -263,6 +263,12 @@ pre.prettyprint>xmp {
 	padding: 1rem 0.8rem 1rem 1rem;
 }
 
+.api-table-content-event-params-wrapper {
+	width: 100%;
+    display: flex;
+    align-items: flex-start;
+}
+
 .cell.api-table-content-cell.api-table-content-cell-description {
 	font-size: 14px;
 	flex: 1 50%;

packages/main/test/sap/ui/webcomponents/main/pages/List.html

@@ -223,7 +223,7 @@ <h3 id="infoLbl">Items 3/3</h3>
 		resetBtn.addEventListener("ui5-press", resetList);
 
 		singleSelectList.addEventListener("ui5-selectionChange", function (event) {
-			var selectedItems = event.detail.items;
+			var selectedItems = event.detail.selectedItems;
 
 			alert("Selection changed: " + selectedItems.map(item => item.id).join("/"));
 		});
@@ -234,7 +234,7 @@ <h3 id="infoLbl">Items 3/3</h3>
 		});
 
 		singleSelectEndList.addEventListener("ui5-selectionChange", function (event) {
-			var selectedItems = event.detail.items;
+			var selectedItems = event.detail.selectedItems;
 			lblSelectionChange.innerHTML = "|Event] selectionChange :: " + selectedItems.map(item => item.id).join("/");
 		});
 
@@ -244,7 +244,7 @@ <h3 id="infoLbl">Items 3/3</h3>
 		});
 
 		multiSelectList.addEventListener("ui5-selectionChange", function (event) {
-			var selectedItems = event.detail.items;
+			var selectedItems = event.detail.selectedItems;
 			lblSelectionChange2.innerHTML = "Event] selectionChange :: " + selectedItems.map(item => item.id).join("/");
 		});
 	</script>

packages/main/test/sap/ui/webcomponents/main/pages/List_test_page.html

@@ -20,6 +20,7 @@
 	</ui5-list>
 	<ui5-input id="itemPressResultField" placeholder="itemPress result"></ui5-input>
 	<ui5-input id="selectionChangeResultField" placeholder="selectionChange result"></ui5-input>
+	<ui5-input id="selectionChangeResultPreviousItemsParameter" placeholder="selectionChange previousSelection result"></ui5-input>
 
 	<ui5-list id="list1" header-text="API: GroupHeaderListItem">
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
@@ -63,6 +64,10 @@
 			selectionChangeCounter += 1;
 			selectionChangeResultField.value = selectionChangeCounter;
 		});
+
+		listEvents.addEventListener("ui5-selectionChange", function(event) {
+			selectionChangeResultPreviousItemsParameter.value = event.detail.previouslySelectedItems[0].id;
+		})
 	</script>
 </body>
 </html>

packages/main/test/sap/ui/webcomponents/main/samples/List.sample.html

@@ -69,7 +69,7 @@ <h3>List in Single-selection Mode</h3>
 
 			<script>
 				document.getElementById('country-selector').addEventListener("selectionChange", function (event) {
-					var selectedItems = event.detail.items;
+					var selectedItems = event.detail.selectedItems;
 
 					alert("The selected item:  " + selectedItems[0].textContent);
 				});
@@ -85,7 +85,7 @@ <h3>List in Single-selection Mode</h3>
 
 <script>
 	document.getElementById('country-selector').addEventListener("selectionChange", function (event) {
-		var selectedItems = event.detail.items;
+		var selectedItems = event.detail.selectedItems;
 
 		alert("The selected item:  " + selectedItems[0].textContent);
 	});

packages/main/test/specs/List.spec.js

@@ -17,6 +17,17 @@ describe("Date Picker Tests", () => {
 		assert.strictEqual(selectionChangeResultField.getProperty("value"), "1", "selectionChange event has been fired.");
 	});
 
+	it("selectionChange events provides previousSelection item", () => {
+		const list = $("#listEvents");
+		const selectionChangeResultPreviousItemsParameter = $("#selectionChangeResultPreviousItemsParameter");
+		const firstItem = $("#listEvents #country1");
+		const secondItem = $("#listEvents #country2");
+
+		firstItem.click();
+
+		assert.strictEqual(secondItem.getProperty("id"), selectionChangeResultPreviousItemsParameter.getProperty("value"));
+	});
+
 	it("header text", () => {
 		list.id = "#list1";