From 5cfd6f46b8c5f4f0301e837090fa6cec026cc874 Mon Sep 17 00:00:00 2001 From: Konstantin Kondov Date: Fri, 28 May 2021 14:52:54 +0300 Subject: [PATCH 1/2] refactor(ui5-responsive-popover): API enhancements Part of #3107 BREAKING_CHANGE: open method renamed to openBy --- packages/fiori/src/SideNavigation.js | 2 +- packages/fiori/src/Wizard.js | 2 +- packages/main/src/ComboBox.js | 2 +- packages/main/src/DatePicker.js | 4 ++-- packages/main/src/Input.js | 2 +- packages/main/src/MultiComboBox.js | 4 ++-- packages/main/src/ResponsivePopover.js | 7 +++---- packages/main/src/Select.js | 2 +- packages/main/src/TabContainer.js | 2 +- packages/main/src/TimePickerBase.js | 2 +- packages/main/src/Tokenizer.js | 2 +- packages/main/src/features/InputSuggestions.js | 2 +- packages/main/test/pages/ColorPalette.html | 2 +- packages/main/test/pages/ResponsivePopover.html | 6 +++--- packages/main/test/samples/ResponsivePopover.sample.html | 4 ++-- 15 files changed, 22 insertions(+), 23 deletions(-) diff --git a/packages/fiori/src/SideNavigation.js b/packages/fiori/src/SideNavigation.js index effcf7b6554f6..87cf690519479 100644 --- a/packages/fiori/src/SideNavigation.js +++ b/packages/fiori/src/SideNavigation.js @@ -241,7 +241,7 @@ class SideNavigation extends UI5Element { async openPicker(opener) { const responsivePopover = await this.getPicker(); - responsivePopover.open(opener); + responsivePopover.openBy(opener); } async closePicker(opener) { diff --git a/packages/fiori/src/Wizard.js b/packages/fiori/src/Wizard.js index 12ebf0204b8db..a99c1473a95a6 100644 --- a/packages/fiori/src/Wizard.js +++ b/packages/fiori/src/Wizard.js @@ -588,7 +588,7 @@ class Wizard extends UI5Element { } const responsivePopover = await this._respPopover(); - responsivePopover.open(oDomTarget); + responsivePopover.openBy(oDomTarget); } async _onGroupedTabClick(event) { diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js index 084dc25c82268..2a6f1ed0971a5 100644 --- a/packages/main/src/ComboBox.js +++ b/packages/main/src/ComboBox.js @@ -646,7 +646,7 @@ class ComboBox extends UI5Element { } _openRespPopover() { - this.responsivePopover.open(this); + this.responsivePopover.openBy(this); } _filterItems(str) { diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js index 8f46f89230863..b687aab82620f 100644 --- a/packages/main/src/DatePicker.js +++ b/packages/main/src/DatePicker.js @@ -551,7 +551,7 @@ class DatePicker extends DateComponentBase { _click(event) { if (isPhone()) { - this.responsivePopover.open(this); + this.responsivePopover.openBy(this); event.preventDefault(); // prevent immediate selection of any item } } @@ -713,7 +713,7 @@ class DatePicker extends DateComponentBase { this._calendarCurrentPicker = "day"; this.responsivePopover = await this._respPopover(); - this.responsivePopover.open(this); + this.responsivePopover.openBy(this); } togglePicker() { diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js index cb67488de88c4..e4aa2e0991f0a 100644 --- a/packages/main/src/Input.js +++ b/packages/main/src/Input.js @@ -675,7 +675,7 @@ class Input extends UI5Element { _click(event) { if (isPhone() && !this.readonly && this.Suggestions) { - this.Suggestions.open(this); + this.Suggestions.openBy(this); this.isRespPopoverOpen = true; } } diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index b613be10dd40b..e114774d7544f 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -501,7 +501,7 @@ class MultiComboBox extends UI5Element { if (filteredItems.length === 0) { this.allItemsPopover.close(); } else { - this.allItemsPopover.open(this); + this.allItemsPopover.openBy(this); } } @@ -662,7 +662,7 @@ class MultiComboBox extends UI5Element { _click(event) { if (isPhone() && !this.readonly && !this._showMorePressed) { - this.allItemsPopover.open(this); + this.allItemsPopover.openBy(this); } this._showMorePressed = false; diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js index 80e14de3cb0fe..330d39f906592 100644 --- a/packages/main/src/ResponsivePopover.js +++ b/packages/main/src/ResponsivePopover.js @@ -120,7 +120,7 @@ class ResponsivePopover extends Popover { * @async * @returns {Promise} Resolves when the responsive popover is open */ - async open(opener) { + async openBy(opener) { this.style.display = this._isPhone ? "contents" : ""; if (this.isOpen() || (this._dialog && this._dialog.isOpen())) { @@ -132,8 +132,7 @@ class ResponsivePopover extends Popover { if (!this.noStretch) { this._minWidth = Math.max(POPOVER_MIN_WIDTH, opener.getBoundingClientRect().width); } - - await this.openBy(opener); + await super.openBy(opener); } else { this.style.zIndex = getNextZIndex(); await this._dialog.open(); @@ -157,7 +156,7 @@ class ResponsivePopover extends Popover { return this.close(); } - this.open(opener); + this.openBy(opener); } /** diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js index 2a5c7732a09cd..f53745471839c 100644 --- a/packages/main/src/Select.js +++ b/packages/main/src/Select.js @@ -372,7 +372,7 @@ class Select extends UI5Element { if (this._isPickerOpen) { this.responsivePopover.close(); } else { - this.responsivePopover.open(this); + this.responsivePopover.openBy(this); } } diff --git a/packages/main/src/TabContainer.js b/packages/main/src/TabContainer.js index a9f81fe2d9497..afa01c69c8ea1 100644 --- a/packages/main/src/TabContainer.js +++ b/packages/main/src/TabContainer.js @@ -497,7 +497,7 @@ class TabContainer extends UI5Element { if (this.responsivePopover.opened) { this.responsivePopover.close(); } else { - this.responsivePopover.open(button); + this.responsivePopover.openBy(button); } } diff --git a/packages/main/src/TimePickerBase.js b/packages/main/src/TimePickerBase.js index 69f0653210734..ddd5a90aecb19 100644 --- a/packages/main/src/TimePickerBase.js +++ b/packages/main/src/TimePickerBase.js @@ -302,7 +302,7 @@ class TimePickerBase extends UI5Element { async openPicker() { this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); const responsivePopover = await this._getPopover(); - responsivePopover.open(this); + responsivePopover.openBy(this); this._isPickerOpen = true; } diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js index c14d2ec8804f7..9b1531be33e7d 100644 --- a/packages/main/src/Tokenizer.js +++ b/packages/main/src/Tokenizer.js @@ -169,7 +169,7 @@ class Tokenizer extends UI5Element { if (this.showPopover) { const popover = await this.getPopover(); - popover.open(this.morePopoverOpener || this); + popover.openBy(this.morePopoverOpener || this); } this.fireEvent("show-more-items-press"); diff --git a/packages/main/src/features/InputSuggestions.js b/packages/main/src/features/InputSuggestions.js index a9bd909a620a0..1d890bc59ecbf 100644 --- a/packages/main/src/features/InputSuggestions.js +++ b/packages/main/src/features/InputSuggestions.js @@ -123,7 +123,7 @@ class Suggestions { this._beforeOpen(); if (this._getItems().length) { - this.responsivePopover.open(this._getComponent()); + this.responsivePopover.openBy(this._getComponent()); } } diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html index 66ed4333bc2c8..b38ac95a06c0f 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -129,7 +129,7 @@ changeResult.value = event.detail.color; }); colorPaletteBtn.addEventListener("click", function(event) { - respPopover.open(colorPaletteBtn); + respPopover.openBy(colorPaletteBtn); }); btnClose.addEventListener("click", function(event) { respPopover.close(); diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html index e74a75e33515e..ccdb26708c565 100644 --- a/packages/main/test/pages/ResponsivePopover.html +++ b/packages/main/test/pages/ResponsivePopover.html @@ -101,21 +101,21 @@

Inputs based component that opens popover/dialog within dialog