-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
IBX-2622: As a developer I want to have dynamic Dropdown #381
Conversation
@@ -283,6 +289,65 @@ | |||
return this.itemsContainer; | |||
} | |||
|
|||
hasChangedOptions(mutationList) { | |||
return mutationList.reduce( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
some()
?
if (this.canSelectOnlyOne) { | ||
const selectedItem = this.sourceInput.querySelector(`[value="${this.sourceInput.value}"]`); | ||
|
||
return selectedItem ? [selectedItem] : []; | ||
} | ||
|
||
return [...this.sourceInput.querySelectorAll('.ibexa-input:checked')]; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<option>
s are not ibexa-input
and :checked
should also work for single select
if (this.canSelectOnlyOne) { | |
const selectedItem = this.sourceInput.querySelector(`[value="${this.sourceInput.value}"]`); | |
return selectedItem ? [selectedItem] : []; | |
} | |
return [...this.sourceInput.querySelectorAll('.ibexa-input:checked')]; | |
return [...this.sourceInput.querySelectorAll(':checked')]; |
@@ -283,6 +289,65 @@ | |||
return this.itemsContainer; | |||
} | |||
|
|||
hasChangedOptions(mutationList) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
wdyt?
hasChangedOptions(mutationList) { | |
haveOptionsChanged(mutationList) { |
if (!newOptions.length) { | ||
this.container.classList.add('ibexa-dropdown--disabled'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you remove all options (dropdown becomes disabled) and then add a new one it won't enable itself again.
if (!newOptions.length) { | |
this.container.classList.add('ibexa-dropdown--disabled'); | |
this.container.classList.toggle('ibexa-dropdown--disabled', !newOptions.length); |
|
||
createOption(value, label) { | ||
const container = doc.createElement('div'); | ||
const renderedTemplate = this.itemTemplate.replaceAll('{{ value }}', value).replaceAll('{{ label }}', label); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nitpick
const renderedTemplate = this.itemTemplate.replaceAll('{{ value }}', value).replaceAll('{{ label }}', label); | |
const itemRendered = this.itemTemplate.replaceAll('{{ value }}', value).replaceAll('{{ label }}', label); |
} | ||
|
||
recreateOptions() { | ||
const newOptions = this.sourceInput.querySelectorAll('option'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For me new
is misleading, because, not all options are actually new.
ac8eab1
to
f872e6f
Compare
Checklist:
$ composer fix-cs
)