Refactor inline render options

This commit is contained in:
Alex Piqueras 2024-10-11 16:03:54 +02:00
parent 757fdf1674
commit 1e9bdb6910
1 changed files with 1 additions and 6 deletions

View File

@ -23,11 +23,6 @@ class AppBase extends HTMLElement {
this.render();
}
renderOptions() {
const textList = this.store.getRecords();
return textList.map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`).join('\n');
}
render(action = 'INIT') {
if (![Store.actions.OPEN_MODAL, Store.actions.CLOSE_MODAL, Store.actions.ADD_LINE, Store.actions.REMOVE_LINE, Store.actions.UNDO, 'INIT'].includes(action)) {
return; // Only render if content changed
@ -85,7 +80,7 @@ class AppBase extends HTMLElement {
<h1 id="title">${this.text.title}</h1>
<p id="description">${this.text.description}</p>
<select id="list" multiple is="item-list" action="${Store.actions.SELECT}" height="227px">
${this.renderOptions()}
${this.store.getRecords().map((item) => `<option is="custom-item" color="${this.properties.color}" value=${item.id}>${item.text}</option>`)}
</select>
<span class="button-bar">
<button is="custom-button" action="${Store.actions.UNDO}" outline width="81px" color="${this.properties.color}">