feat(ui5-tree): introduce item-mouseover/item-mouseout events (#3990)

SAP · Oct 14, 2021 · e8b6145 · e8b6145
1 parent 81d7815
commit e8b6145
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 0 deletions.
diff --git a/packages/main/src/Tree.hbs b/packages/main/src/Tree.hbs
@@ -29,6 +29,8 @@
             @ui5-toggle="{{../_onListItemToggle}}"
             @ui5-step-in="{{../_onListItemStepIn}}"
             @ui5-step-out="{{../_onListItemStepOut}}"
+            @mouseover="{{../_onListItemMouseOver}}"
+            @mouseout="{{../_onListItemMouseOut}}"
         >
             {{> treeListItemContent}}
         </ui5-li-tree>

diff --git a/packages/main/src/Tree.js b/packages/main/src/Tree.js
@@ -158,6 +158,32 @@ const metadata = {
 			},
 		},
 
+		/**
+		 * Fired when the mouse cursor enters the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseover
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseover": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
+		/**
+		 * Fired when the mouse cursor leaves the tree item borders.
+		 * @event sap.ui.webcomponents.main.Tree#item-mouseout
+		 * @param {HTMLElement} item the hovered item.
+		 * @since 1.0.0-rc.16
+		 * @public
+		 */
+		"item-mouseout": {
+			detail: {
+				item: { type: HTMLElement },
+			},
+		},
+
 		/**
 		 * Fired when a tree item is activated.
 		 *
@@ -337,6 +363,18 @@ class Tree extends UI5Element {
 		this.fireEvent("item-delete", { item: treeItem });
 	}
 
+	_onListItemMouseOver(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseover", { item: treeItem });
+	}
+
+	_onListItemMouseOut(event) {
+		const treeItem = event.target.treeItem;
+
+		this.fireEvent("item-mouseout", { item: treeItem });
+	}
+
 	_onListSelectionChange(event) {
 		const previouslySelectedItems = event.detail.previouslySelectedItems.map(item => item.treeItem);
 		const selectedItems = event.detail.selectedItems.map(item => item.treeItem);

diff --git a/packages/main/test/pages/Tree.html b/packages/main/test/pages/Tree.html
@@ -98,6 +98,10 @@
 		</ui5-tree-item>
 
 	</ui5-tree>
+	Mouseover counter
+	<ui5-input id="mouseover-counter" value="0"></ui5-input>
+	Mouseout counter
+	<ui5-input id="mouseout-counter" value="0"></ui5-input>
 
 	<br><br>
 
@@ -119,6 +123,8 @@
 	</ui5-busy-indicator>
 
 	<script>
+		const mouseOverInput = document.getElementById("mouseover-counter");
+		const mouseOutInput = document.getElementById("mouseout-counter");
 
 		document.getElementById("density").addEventListener("selectionChange", function(event) {
 			var selectedButton = event.detail.selectedButton;
@@ -129,6 +135,15 @@
 			}
 		});
 
+		document.getElementById("tree").addEventListener("ui5-itemMouseover", function(event) {
+			console.log("Item mouseover: ", event.detail.item);
+			mouseOverInput.value++;
+		});
+		document.getElementById("tree").addEventListener("ui5-itemMouseout", function(event) {
+			console.log("Item mouseout: ", event.detail.item);
+			mouseOutInput.value++;
+		});
+
 		document.getElementById("tree").addEventListener("itemClick", function(event) {
 			console.log("Item clicked: ", event.detail.item);
 		});

diff --git a/packages/main/test/specs/Tree.spec.js b/packages/main/test/specs/Tree.spec.js
@@ -62,6 +62,20 @@ describe("Tree proxies properties to list", () => {
 		assert.strictEqual(await list.getAttribute("no-data-text"), "no data text", "no data text applied");
 	})
 
+	it("Mouseover/mouseout events", async () => {
+		const tree = await browser.$("#tree");
+		const treeItems = await tree.shadow$$("ui5-li-tree");
+		const inputMouseover = await browser.$("#mouseover-counter");
+		const inputMouseout = await browser.$("#mouseout-counter");
+
+		await treeItems[0].moveTo();
+
+		assert.strictEqual(await inputMouseover.getAttribute("value"), "1", "Mouseover event is fired when item is accessed");
+
+		await treeItems[1].moveTo();
+		assert.strictEqual(await inputMouseover.getAttribute("value"), "2", "Mouseover event is fired when other item is accessed result");
+		assert.strictEqual(await inputMouseout.getAttribute("value"), "1", "Mouseout event is fired when the first item is not hovered");
+	})
 });
 
 describe("Tree has screen reader support", () => {