From 4dc1add04e867c17041164bae11c0d0dd71838ce Mon Sep 17 00:00:00 2001 From: Serhii Kulykov Date: Wed, 4 Dec 2024 15:54:37 +0200 Subject: [PATCH] refactor: extract common sub-menu logic into reusable mixin (#8273) --- .../src/vaadin-lit-menu-bar-submenu.js | 42 ++-------------- .../src/vaadin-menu-bar-submenu-mixin.js | 49 +++++++++++++++++++ .../menu-bar/src/vaadin-menu-bar-submenu.js | 42 ++-------------- 3 files changed, 55 insertions(+), 78 deletions(-) create mode 100644 packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js diff --git a/packages/menu-bar/src/vaadin-lit-menu-bar-submenu.js b/packages/menu-bar/src/vaadin-lit-menu-bar-submenu.js index 7f52145360..f767b95260 100644 --- a/packages/menu-bar/src/vaadin-lit-menu-bar-submenu.js +++ b/packages/menu-bar/src/vaadin-lit-menu-bar-submenu.js @@ -8,22 +8,20 @@ import './vaadin-lit-menu-bar-list-box.js'; import './vaadin-lit-menu-bar-overlay.js'; import { css, html, LitElement } from 'lit'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; -import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js'; import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js'; -import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js'; import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; +import { SubMenuMixin } from './vaadin-menu-bar-submenu-mixin.js'; /** * An element used internally by ``. Not intended to be used separately. * * @customElement * @extends HTMLElement - * @mixes ContextMenuMixin - * @mixes OverlayClassMixin + * @mixes SubMenuMixin * @mixes ThemePropertyMixin * @protected */ -class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) { +class MenuBarSubmenu extends SubMenuMixin(ThemePropertyMixin(PolylitMixin(LitElement))) { static get is() { return 'vaadin-menu-bar-submenu'; } @@ -40,21 +38,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMix `; } - constructor() { - super(); - - this.openOn = 'opensubmenu'; - } - - /** - * Tag name prefix used by overlay, list-box and items. - * @protected - * @return {string} - */ - get _tagNamePrefix() { - return 'vaadin-menu-bar'; - } - /** @protected */ render() { return html``; @@ -69,25 +52,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMix root.appendChild(this._overlayElement); return root; } - - /** - * Overriding the observer to not add global "contextmenu" listener. - */ - _openedChanged(opened) { - this._overlayElement.opened = opened; - } - - /** - * Overriding the public method to reset expanded button state. - */ - close() { - super.close(); - - // Only handle 1st level submenu - if (this.hasAttribute('is-root')) { - this.getRootNode().host._close(); - } - } } defineCustomElement(MenuBarSubmenu); diff --git a/packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js b/packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js new file mode 100644 index 0000000000..3776e3b60c --- /dev/null +++ b/packages/menu-bar/src/vaadin-menu-bar-submenu-mixin.js @@ -0,0 +1,49 @@ +/** + * @license + * Copyright (c) 2019 - 2024 Vaadin Ltd. + * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/ + */ +import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js'; +import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js'; + +/** + * @polymerMixin + * @mixes ContextMenuMixin + * @mixes OverlayClassMixin + */ +export const SubMenuMixin = (superClass) => + class SubMenuMixinClass extends ContextMenuMixin(OverlayClassMixin(superClass)) { + constructor() { + super(); + + this.openOn = 'opensubmenu'; + } + + /** + * Tag name prefix used by overlay, list-box and items. + * @protected + * @return {string} + */ + get _tagNamePrefix() { + return 'vaadin-menu-bar'; + } + + /** + * Overriding the observer to not add global "contextmenu" listener. + */ + _openedChanged(opened) { + this._overlayElement.opened = opened; + } + + /** + * Overriding the public method to reset expanded button state. + */ + close() { + super.close(); + + // Only handle 1st level submenu + if (this.hasAttribute('is-root')) { + this.getRootNode().host._close(); + } + } + }; diff --git a/packages/menu-bar/src/vaadin-menu-bar-submenu.js b/packages/menu-bar/src/vaadin-menu-bar-submenu.js index eaf72a56ac..648b5f59b3 100644 --- a/packages/menu-bar/src/vaadin-menu-bar-submenu.js +++ b/packages/menu-bar/src/vaadin-menu-bar-submenu.js @@ -9,22 +9,20 @@ import './vaadin-menu-bar-overlay.js'; import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js'; import { defineCustomElement } from '@vaadin/component-base/src/define.js'; -import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js'; -import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js'; import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js'; +import { SubMenuMixin } from './vaadin-menu-bar-submenu-mixin.js'; /** * An element used internally by ``. Not intended to be used separately. * * @customElement * @extends HTMLElement - * @mixes ContextMenuMixin * @mixes ControllerMixin - * @mixes OverlayClassMixin + * @mixes SubMenuMixin * @mixes ThemePropertyMixin * @protected */ -class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin(ThemePropertyMixin(PolymerElement)))) { +class MenuBarSubmenu extends SubMenuMixin(ControllerMixin(ThemePropertyMixin(PolymerElement))) { static get is() { return 'vaadin-menu-bar-submenu'; } @@ -45,21 +43,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin( `; } - constructor() { - super(); - - this.openOn = 'opensubmenu'; - } - - /** - * Tag name prefix used by overlay, list-box and items. - * @protected - * @return {string} - */ - get _tagNamePrefix() { - return 'vaadin-menu-bar'; - } - /** * @param {DocumentFragment} dom * @return {ShadowRoot} @@ -72,25 +55,6 @@ class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ControllerMixin( root.appendChild(this._overlayElement); return root; } - - /** - * Overriding the observer to not add global "contextmenu" listener. - */ - _openedChanged(opened) { - this._overlayElement.opened = opened; - } - - /** - * Overriding the public method to reset expanded button state. - */ - close() { - super.close(); - - // Only handle 1st level submenu - if (this.hasAttribute('is-root')) { - this.getRootNode().host._close(); - } - } } defineCustomElement(MenuBarSubmenu);