From 7fa190894b76968e9fbaeb59e8295deef784f9e9 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Mon, 25 Nov 2024 11:26:33 +0200 Subject: [PATCH] chore: use fireDecoratorEvent over fireEvent --- packages/main/src/Menu.ts | 29 +++++++++----- packages/main/src/MenuItem.ts | 73 ++++++++++++++++++++++++++++++++--- 2 files changed, 87 insertions(+), 15 deletions(-) diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts index bb636dea29a0..5ff7bb3b5c3d 100644 --- a/packages/main/src/Menu.ts +++ b/packages/main/src/Menu.ts @@ -132,6 +132,7 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; type: String, }, }, + cancelable: true, }) /** @@ -153,6 +154,8 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; type: HTMLElement, }, }, + bubbles: true, + cancelable: true, }) /** @@ -160,7 +163,13 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; * @public * @since 1.10.0 */ -@event("open") +@event("open", { bubbles: true }) + +/** + * Fired when the menu is being closed. + * @private + */ +@event("close-menu") /** * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.** @@ -178,6 +187,8 @@ type MenuBeforeCloseEventDetail = { escPressed: boolean }; type: Boolean, }, }, + bubbles: true, + cancelable: true, }) /** @@ -290,9 +301,9 @@ class Menu extends UI5Element { return; } - this.fireEvent("before-open", { + this.fireDecoratorEvent("before-open", { item, - }, false, false); + }); item._popover.opener = item; item._popover.open = true; item.selected = true; @@ -342,13 +353,13 @@ class Menu extends UI5Element { const item = e.detail.item as MenuItem; if (!item._popover) { - const prevented = !this.fireEvent("item-click", { + const prevented = !this.fireDecoratorEvent("item-click", { "item": item, "text": item.text || "", - }, true, false); + }); if (!prevented && this._popover) { - item.fireEvent("close-menu", {}); + item.fireDecoratorEvent("close-menu", {}); } } else { this._openItemSubMenu(item); @@ -378,7 +389,7 @@ class Menu extends UI5Element { } _beforePopoverOpen(e: CustomEvent) { - const prevented = !this.fireEvent("before-open", {}, true, true); + const prevented = !this.fireDecoratorEvent("before-open", {}); if (prevented) { this.open = false; @@ -388,11 +399,11 @@ class Menu extends UI5Element { _afterPopoverOpen() { this._menuItems[0]?.focus(); - this.fireEvent("open", {}, false, true); + this.fireDecoratorEvent("open", {}); } _beforePopoverClose(e: CustomEvent) { - const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, true); + const prevented = !this.fireDecoratorEvent("before-close", { escPressed: e.detail.escPressed }); if (prevented) { this.open = true; diff --git a/packages/main/src/MenuItem.ts b/packages/main/src/MenuItem.ts index 8c47629bd6ae..9c80912ae72f 100644 --- a/packages/main/src/MenuItem.ts +++ b/packages/main/src/MenuItem.ts @@ -1,6 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import AriaHasPopup from "@ui5/webcomponents-base/dist/types/AriaHasPopup.js"; @@ -60,6 +61,66 @@ type MenuItemAccessibilityAttributes = Pick("before-open", { + detail: { + /** + * @public + * @since 1.14.0 + */ + item: { + type: HTMLElement, + }, + }, + cancelable: true, +}) + +/** + * Fired after the menu is opened. **This event does not bubble.** + * @public + */ +@event("open") + +/** + * Fired when the menu is being closed. + * @private + */ +@event("close-menu") + +/** + * Fired before the menu is closed. This event can be cancelled, which will prevent the menu from closing. **This event does not bubble.** + * @public + * @allowPreventDefault + * @param {boolean} escPressed Indicates that `ESC` key has triggered the event. + * @since 1.10.0 + */ +@event("before-close", { + detail: { + /** + * @public + */ + escPressed: { + type: Boolean, + }, + }, + cancelable: true, +}) + +/** + * Fired after the menu is closed. **This event does not bubble.** + * @public + * @since 1.10.0 + */ +@event("close") class MenuItem extends ListItem implements IMenuItem { /** * Defines the text of the tree item. @@ -289,7 +350,7 @@ class MenuItem extends ListItem implements IMenuItem { this._popover.open = false; } this.selected = false; - this.fireEvent("close-menu", {}); + this.fireDecoratorEvent("close-menu", {}); } _close() { @@ -300,7 +361,7 @@ class MenuItem extends ListItem implements IMenuItem { } _beforePopoverOpen(e: CustomEvent) { - const prevented = !this.fireEvent("before-open", {}, true, false); + const prevented = !this.fireDecoratorEvent("before-open", {}); if (prevented) { e.preventDefault(); @@ -309,11 +370,11 @@ class MenuItem extends ListItem implements IMenuItem { _afterPopoverOpen() { this.items[0]?.focus(); - this.fireEvent("open", {}, false, false); + this.fireDecoratorEvent("open"); } _beforePopoverClose(e: CustomEvent) { - const prevented = !this.fireEvent("before-close", { escPressed: e.detail.escPressed }, true, false); + const prevented = !this.fireDecoratorEvent("before-close", { escPressed: e.detail.escPressed }); if (prevented) { e.preventDefault(); @@ -324,13 +385,13 @@ class MenuItem extends ListItem implements IMenuItem { if (e.detail.escPressed) { this.focus(); if (isPhone()) { - this.fireEvent("close-menu", {}); + this.fireDecoratorEvent("close-menu", {}); } } } _afterPopoverClose() { - this.fireEvent("close", {}, false, false); + this.fireDecoratorEvent("close", {}); } }