Skip to content

Commit

Permalink
feat: hide bib while loading when there is no loading placeholder to …
Browse files Browse the repository at this point in the history 
…show
  • Loading branch information
@sun-mota
sun-mota committed Dec 17, 2024
1 parent 2640aff commit 72e9cab
Show file tree
Hide file tree
Showing 14 changed files with 388 additions and 106 deletions.
71 changes: 57 additions & 14 deletions components/combobox/demo/api.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7383,6 +7383,11 @@ class AuroCombobox extends r$6 {
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();

/**
* @private
*/
this.isHiddenWhileLoading = false;

/**
* Generate unique names for dependency components.
*/
Expand Down Expand Up @@ -7595,7 +7600,11 @@ class AuroCombobox extends r$6 {
}
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
this.dropdown.show();
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
this.isHiddenWhileLoading = true;
} else {
this.dropdown.show();
}
}
}
}
Expand Down Expand Up @@ -7627,7 +7636,7 @@ class AuroCombobox extends r$6 {
*/
configureMenu() {
this.menu = this.querySelector('auro-menu, [auro-menu]');

this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));

// a racing condition on custom-combobox with custom-menu
if (!this.menu) {
Expand Down Expand Up @@ -7778,6 +7787,22 @@ class AuroCombobox extends r$6 {
});
}

/**
* @private
* @method handleMenuLoadingChange
* @param {CustomEvent} event - The event object containing details about the loading state change.
* @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
* @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
*/
handleMenuLoadingChange(event) {
if (!event.detail.loading && this.isHiddenWhileLoading) {
if (this.contains(document.activeElement)) {
this.dropdown.show();
}
this.isHiddenWhileLoading = false;
}
}

/**
* Handle changes to the input value and trigger changes that should result.
* @private
Expand Down Expand Up @@ -7824,7 +7849,7 @@ class AuroCombobox extends r$6 {
*/
if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
if (this.availableOptions.length > 0) {
this.dropdown.show();
this.showBib();
}

if (this.dropdown.isPopoverVisible) {
Expand Down Expand Up @@ -8014,6 +8039,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
* @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
* @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
* @attr {String} value - Value selected for the menu.
* @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
* @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
* @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
* @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
Expand All @@ -8023,6 +8049,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
* @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
* @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
* @slot loadingText - text to show while loading attribute is set
* @slot loadingIcon - icon to show while loading attribute is set
* @slot Slot for insertion of menu options.
Expand Down Expand Up @@ -8058,7 +8085,7 @@ class AuroMenu extends r$6 {
/**
* @private
*/
this.loadingSlots = new Map();
this.loadingSlots = null;
}

static get properties() {
Expand Down Expand Up @@ -8128,6 +8155,8 @@ class AuroMenu extends r$6 {
this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');

this.addEventListener('keydown', this.handleKeyDown);

this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
}

updated(changedProperties) {
Expand All @@ -8146,6 +8175,16 @@ class AuroMenu extends r$6 {
element.disabled = this.disabled;
}
}

if (changedProperties.has('loading')) {
const event = new Event("auroMenu-loadingChange");
event.detail = {
loading: this.loading,
hasLoadingPlaceholder:
this.hasLoadingPlaceholder
};
this.dispatchEvent(event);
}
}

/**
Expand Down Expand Up @@ -8485,14 +8524,18 @@ class AuroMenu extends r$6 {
}

/**
* Used for @slotchange event on slotted loading placeholder element./**
* @private
* @method handleLoadingSlotItems
* @param {Event} event - The event object containing information about the slot change.
* Checks if there are any loading placeholders in the component.
*
* This getter evaluates the `loadingSlots` collection to determine if it contains any items.
* If the size of the collection is greater than zero, it indicates the presence of loading
* placeholders, returning true; otherwise, it returns false.
*
* @getter hasLoadingPlaceholder
* @type {boolean}
* @returns {boolean} Returns true if loading placeholders exist; false otherwise.
*/
handleLoadingSlotItems(event) {
this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
this.requestUpdate();
get hasLoadingPlaceholder() {
return this.loadingSlots.length > 0;
}

/**
Expand Down Expand Up @@ -8530,10 +8573,10 @@ class AuroMenu extends r$6 {
render() {
if (this.loading) {
return x$2`
<auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
<div>
<slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
<slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
<slot name="loadingIcon"></slot>
<slot name="loadingText"></slot>
</div>
</auro-menuoption>
`;
Expand Down
71 changes: 57 additions & 14 deletions components/combobox/demo/index.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7252,6 +7252,11 @@ class AuroCombobox extends r$6 {
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();

/**
* @private
*/
this.isHiddenWhileLoading = false;

/**
* Generate unique names for dependency components.
*/
Expand Down Expand Up @@ -7464,7 +7469,11 @@ class AuroCombobox extends r$6 {
}
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
this.dropdown.show();
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
this.isHiddenWhileLoading = true;
} else {
this.dropdown.show();
}
}
}
}
Expand Down Expand Up @@ -7496,7 +7505,7 @@ class AuroCombobox extends r$6 {
*/
configureMenu() {
this.menu = this.querySelector('auro-menu, [auro-menu]');

this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));

// a racing condition on custom-combobox with custom-menu
if (!this.menu) {
Expand Down Expand Up @@ -7647,6 +7656,22 @@ class AuroCombobox extends r$6 {
});
}

/**
* @private
* @method handleMenuLoadingChange
* @param {CustomEvent} event - The event object containing details about the loading state change.
* @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
* @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
*/
handleMenuLoadingChange(event) {
if (!event.detail.loading && this.isHiddenWhileLoading) {
if (this.contains(document.activeElement)) {
this.dropdown.show();
}
this.isHiddenWhileLoading = false;
}
}

/**
* Handle changes to the input value and trigger changes that should result.
* @private
Expand Down Expand Up @@ -7693,7 +7718,7 @@ class AuroCombobox extends r$6 {
*/
if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
if (this.availableOptions.length > 0) {
this.dropdown.show();
this.showBib();
}

if (this.dropdown.isPopoverVisible) {
Expand Down Expand Up @@ -7883,6 +7908,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
* @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
* @attr {Boolean} loading - When true, displays a loading state using the loadingIcon and loadingText slots if provided.
* @attr {String} value - Value selected for the menu.
* @property {Boolean} hasLoadingPlaceholder - indicator if menu has loadingIcon or loadingText to render while loading
* @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
* @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
* @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
Expand All @@ -7892,6 +7918,7 @@ var tokensCss$1 = i$c`:host{--ds-auro-menu-divider-color: var(--ds-color-border-
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
* @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
* @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
* @slot loadingText - text to show while loading attribute is set
* @slot loadingIcon - icon to show while loading attribute is set
* @slot Slot for insertion of menu options.
Expand Down Expand Up @@ -7927,7 +7954,7 @@ class AuroMenu extends r$6 {
/**
* @private
*/
this.loadingSlots = new Map();
this.loadingSlots = null;
}

static get properties() {
Expand Down Expand Up @@ -7997,6 +8024,8 @@ class AuroMenu extends r$6 {
this.runtimeUtils.handleComponentTagRename(this, 'auro-menu');

this.addEventListener('keydown', this.handleKeyDown);

this.loadingSlots = this.querySelectorAll("[slot='loadingText'], [slot='loadingIcon']");
}

updated(changedProperties) {
Expand All @@ -8015,6 +8044,16 @@ class AuroMenu extends r$6 {
element.disabled = this.disabled;
}
}

if (changedProperties.has('loading')) {
const event = new Event("auroMenu-loadingChange");
event.detail = {
loading: this.loading,
hasLoadingPlaceholder:
this.hasLoadingPlaceholder
};
this.dispatchEvent(event);
}
}

/**
Expand Down Expand Up @@ -8354,14 +8393,18 @@ class AuroMenu extends r$6 {
}

/**
* Used for @slotchange event on slotted loading placeholder element./**
* @private
* @method handleLoadingSlotItems
* @param {Event} event - The event object containing information about the slot change.
* Checks if there are any loading placeholders in the component.
*
* This getter evaluates the `loadingSlots` collection to determine if it contains any items.
* If the size of the collection is greater than zero, it indicates the presence of loading
* placeholders, returning true; otherwise, it returns false.
*
* @getter hasLoadingPlaceholder
* @type {boolean}
* @returns {boolean} Returns true if loading placeholders exist; false otherwise.
*/
handleLoadingSlotItems(event) {
this.loadingSlots.set(event.target.getAttribute("name"), event.target.assignedNodes);
this.requestUpdate();
get hasLoadingPlaceholder() {
return this.loadingSlots.length > 0;
}

/**
Expand Down Expand Up @@ -8399,10 +8442,10 @@ class AuroMenu extends r$6 {
render() {
if (this.loading) {
return x$2`
<auro-menuoption disabled loadingplaceholder class="${this.loadingSlots.size ? '' : 'empty'}">
<auro-menuoption disabled loadingplaceholder class="${this.hasLoadingPlaceholder ? '' : 'empty'}">
<div>
<slot name="loadingIcon" @slotchange="${this.handleLoadingSlotItems}"></slot>
<slot name="loadingText" @slotchange="${this.handleLoadingSlotItems}"></slot>
<slot name="loadingIcon"></slot>
<slot name="loadingText"></slot>
</div>
</auro-menuoption>
`;
Expand Down
31 changes: 28 additions & 3 deletions components/combobox/src/auro-combobox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ export class AuroCombobox extends LitElement {
*/
this.runtimeUtils = new AuroLibraryRuntimeUtils();

/**
* @private
*/
this.isHiddenWhileLoading = false;

/**
* Generate unique names for dependency components.
*/
Expand Down Expand Up @@ -277,7 +282,11 @@ export class AuroCombobox extends LitElement {
}
if (!this.dropdown.isPopoverVisible && this.input.value && this.input.value.length > 0) {
if (this.menu.getAttribute('loading') || (this.availableOptions && this.availableOptions.length > 0) || this.noMatchOption !== undefined) { // eslint-disable-line no-extra-parens
this.dropdown.show();
if (this.menu.hasAttribute('loading') && !this.menu.hasLoadingPlaceholder) {
this.isHiddenWhileLoading = true;
} else {
this.dropdown.show();
}
}
}
}
Expand Down Expand Up @@ -309,7 +318,7 @@ export class AuroCombobox extends LitElement {
*/
configureMenu() {
this.menu = this.querySelector('auro-menu, [auro-menu]');

this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));

// a racing condition on custom-combobox with custom-menu
if (!this.menu) {
Expand Down Expand Up @@ -460,6 +469,22 @@ export class AuroCombobox extends LitElement {
});
}

/**
* @private
* @method handleMenuLoadingChange
* @param {CustomEvent} event - The event object containing details about the loading state change.
* @param {boolean} event.detail.loading - Indicates whether the menu is currently loading.
* @param {boolean} event.detail.hasLoadingPlaceholder - Indicates if there are loading placeholders present.
*/
handleMenuLoadingChange(event) {
if (!event.detail.loading && this.isHiddenWhileLoading) {
if (this.contains(document.activeElement)) {
this.dropdown.show();
}
this.isHiddenWhileLoading = false;
}
}

/**
* Handle changes to the input value and trigger changes that should result.
* @private
Expand Down Expand Up @@ -506,7 +531,7 @@ export class AuroCombobox extends LitElement {
*/
if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
if (this.availableOptions.length > 0) {
this.dropdown.show();
this.showBib();
}

if (this.dropdown.isPopoverVisible) {
Expand Down
Loading

0 comments on commit 72e9cab

Please sign in to comment.