Skip to content

Commit

Permalink
refactor: remove ready state and *-ready event
Browse files Browse the repository at this point in the history
  • Loading branch information
@sun-mota
sun-mota committed Dec 2, 2024
1 parent a641134 commit f7ab282
Show file tree
Hide file tree
Showing 29 changed files with 534 additions and 1,380 deletions.
279 changes: 139 additions & 140 deletions components/combobox/demo/api.md
View file

Large diffs are not rendered by default.

171 changes: 20 additions & 151 deletions components/combobox/demo/api.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2948,7 +2948,6 @@ if (!customElements.get("auro-dropdownbib")) {
* @csspart helpText - The helpText content container.
* @csspart popover - The bib content container.
* @event auroDropdown-triggerClick - Notifies that the trigger has been clicked.
* @event auroDropdown-ready - Notifies that the component has finished initializing.
* @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed.
*/
class AuroDropdown extends r$1 {
Expand All @@ -2974,7 +2973,6 @@ class AuroDropdown extends r$1 {
this.inset = false;
this.placement = 'bottom-start';
this.rounded = false;
this.ready = false;
this.tabIndex = 0;
this.noToggle = false;

Expand Down Expand Up @@ -3073,7 +3071,6 @@ class AuroDropdown extends r$1 {
reflect: true
},
isPopoverVisible: { type: Boolean },
ready: { type: Boolean },
onSlotChange: {
type: Function,
reflect: false
Expand Down Expand Up @@ -3137,23 +3134,6 @@ class AuroDropdown extends r$1 {
this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib');

document.body.append(this.bibContent);

this.notifyReady();
}

/**
* Marks the component as ready and sends event.
* @private
* @returns {void}
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroDropdown-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

/**
Expand Down Expand Up @@ -3235,7 +3215,7 @@ class AuroDropdown extends r$1 {
<div class="triggerContent">
<slot
name="trigger"
@slotchange="${() => {if (this.ready) this.floater.handleTriggerTabIndex(); }}"></slot>
@slotchange="${() => {this.floater.handleTriggerTabIndex(); }}"></slot>
</div>
</div>
${this.chevron || this.common ? u$3`
Expand Down Expand Up @@ -5001,7 +4981,6 @@ var Cleave_1 = Cleave;
* @attr {String} name - Populates the `name` attribute on the input.
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
* @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically.
* @prop {Boolean} ready - When false the component API should not be called.
* @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
* @attr {String} pattern - Specifies a regular expression the form control's value should match.
* @attr {String} placeholder - Define custom placeholder text, only supported by date input formats.
Expand Down Expand Up @@ -5048,7 +5027,6 @@ class BaseInput extends r$5 {
this.maxLength = undefined;
this.minLength = undefined;
this.label = 'Input label is undefined';
this.ready = false;
this.activeLabel = false;

this.setCustomValidityForType = undefined;
Expand Down Expand Up @@ -5155,7 +5133,6 @@ class BaseInput extends r$5 {
showPassword: { state: true },
validateOnInput: { type: Boolean },
readonly: { type: Boolean },
ready: { type: Boolean },
error: {
type: String,
reflect: true
Expand Down Expand Up @@ -5394,8 +5371,6 @@ class BaseInput extends r$5 {
}
}
});

this.notifyReady();
}

/**
Expand Down Expand Up @@ -5500,20 +5475,6 @@ class BaseInput extends r$5 {
}));
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroInput-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

/**
* @private
* @returns {string}
Expand Down Expand Up @@ -6905,7 +6866,6 @@ var styleCss$2 = i$b`.util_displayInline{display:inline}.util_displayInlineBlock
* @slot - Default slot for the menu content.
* @slot label - Defines the content of the label.
* @slot helpText - Defines the content of the helpText.
* @event auroCombobox-ready - Notifies that the component has finished initializing.
* @event auroCombobox-valueSet - Notifies that the component has a new value set.
* @event auroFormElement-validated - Notifies that the component value(s) have been validated.
*/
Expand Down Expand Up @@ -7159,9 +7119,6 @@ class AuroCombobox extends r$5 {
this.menuWrapper.append(this.menu);

this.dropdown.setAttribute('role', 'combobox');
this.dropdown.addEventListener('auroDropdown-ready', () => {
this.auroDropdownReady = true;
});

this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
this.showBib();
Expand Down Expand Up @@ -7198,15 +7155,6 @@ class AuroCombobox extends r$5 {
this.menu.setAttribute('nocheckmark', '');
}

if (this.noFilter) {
this.auroMenuReady = true;
} else {
this.menu.addEventListener('auroMenu-ready', () => {
this.auroMenuReady = true;
});
}


// handle the menu event for an option selection
this.menu.addEventListener('auroMenu-selectedOption', () => {
// dropdown bib should hide when making a selection
Expand Down Expand Up @@ -7267,10 +7215,6 @@ class AuroCombobox extends r$5 {
* @returns {void}
*/
configureInput() {
this.input.addEventListener('auroInput-ready', () => {
this.auroInputReady = true;
});

this.input.addEventListener('keyup', (evt) => {
if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') {
this.showBib();
Expand All @@ -7294,22 +7238,20 @@ class AuroCombobox extends r$5 {
this.menu.matchWord = this.input.value;
this.optionActive = null;

if (this.ready) {
if (this.value !== this.input.value) {
this.value = this.input.value;
}

if (this.value !== this.menu.value) {
this.menu.value = this.value;
}
if (this.value !== this.input.value) {
this.value = this.input.value;
}

if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
this.optionSelected = undefined;
}
if (this.value !== this.menu.value) {
this.menu.value = this.value;
}

this.menu.resetOptionsStates();
if (this.optionSelected && this.input.value !== this.optionSelected.innerText) {
this.optionSelected = undefined;
}

this.menu.resetOptionsStates();

this.handleMenuOptions();

this.handleInputValueChange();
Expand Down Expand Up @@ -7443,57 +7385,6 @@ class AuroCombobox extends r$5 {
this.configureDropdown();
this.configureCombobox();

this.checkReadiness();
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroCombobox-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

/**
* Monitors readiness of peer dependencies and begins work that should only start when ready.
* @private
* @returns {void}
*/
checkReadiness() {
if (this.auroDropdownReady && this.auroInputReady && this.auroMenuReady) {
this.readyActions();
this.notifyReady();
} else {
// Start a retry counter to limit the retry count
if (!this.readyRetryCount && this.readyRetryCount !== 0) {
this.readyRetryCount = 0;
} else {
this.readyRetryCount += 1;
}

const readyTimer = 0;
const readyRetryLimit = 200;

if (this.readyRetryCount <= readyRetryLimit) {
setTimeout(() => {
this.checkReadiness();
}, readyTimer);
}
}
}

/**
* Functionality that should not be performed until the combobox is in a ready state.
* @private
* @returns {void}
*/
readyActions() {
// Set the initial value in auro-menu if defined
if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {
this.menu.value = this.value;
Expand All @@ -7510,7 +7401,7 @@ class AuroCombobox extends r$5 {

updated(changedProperties) {
// After the component is ready, send direct value changes to auro-menu.
if (this.ready && changedProperties.has('value')) {
if (changedProperties.has('value')) {
if (this.value) {
if (this.optionSelected && this.optionSelected.value === this.value) {
// If value updates and the previously selected option already matches the new value
Expand Down Expand Up @@ -7548,16 +7439,14 @@ class AuroCombobox extends r$5 {
* @returns {void}
*/
handleSlotChange() {
if (this.auroMenuReady) {
this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
this.options.forEach((opt) => {
if (this.checkmark) {
opt.removeAttribute('nocheckmark');
} else {
opt.setAttribute('nocheckmark', '');
}
});
}
this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]');
this.options.forEach((opt) => {
if (this.checkmark) {
opt.removeAttribute('nocheckmark');
} else {
opt.setAttribute('nocheckmark', '');
}
});

this.handleMenuOptions();
}
Expand Down Expand Up @@ -7762,7 +7651,6 @@ class AuroMenuOption extends r$5 {
* @attr {Boolean} disabled - When true, the entire menu and all options are disabled;
* @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark.
* @attr {String} value - Value selected for the menu.
* @prop {Boolean} ready - When false the component API should not be called.
* @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 @@ -7771,7 +7659,6 @@ class AuroMenuOption extends r$5 {
* @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
* @event auroMenu-customEventFired - Notifies that a custom event has been fired.
* @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
* @event auroMenu-ready - Notifies that the component has finished initializing.
* @event auroMenu-selectValueReset - Notifies that the component value has been reset.
* @slot Slot for insertion of menu options.
*/
Expand All @@ -7785,7 +7672,6 @@ class AuroMenu extends r$5 {
this.optionSelected = undefined;
this.matchWord = undefined;
this.noCheckmark = false;
this.ready = false;
this.optionActive = undefined;

/**
Expand Down Expand Up @@ -7817,7 +7703,6 @@ class AuroMenu extends r$5 {
optionSelected: { type: Object },
optionActive: { type: Object },
matchWord: { type: String },
ready: { type: Boolean },
value: { type: String }
};
}
Expand Down Expand Up @@ -8251,28 +8136,12 @@ class AuroMenu extends r$5 {
this.index = this.items.indexOf(evt.target);
this.updateActiveOption(this.index);
});

this.notifyReady();
} else {
// make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed
this.handleNoCheckmarkAttr();
}
}

/**
* @private
* @returns {void} Marks the component as ready and sends event.
*/
notifyReady() {
this.ready = true;

this.dispatchEvent(new CustomEvent('auroMenu-ready', {
bubbles: true,
cancelable: false,
composed: true,
}));
}

render() {
return x$1`
<slot @slotchange=${this.handleSlotItems}></slot>
Expand Down
Loading

0 comments on commit f7ab282

Please sign in to comment.