MontoyaTech/ignite-html-material
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Cleaned up chip list control further.

Browse Source
This commit is contained in:
MattMo
2025-09-25 14:23:12 -07:00
parent 061bd5a3b6
commit eac3a3cc22
1 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
chip-list.js
View File

@@ -45,6 +45,7 @@ class ChipList extends IgniteElement {
get properties() { get properties() {
return { return {
items: [], items: [],
itemConverter: (item) => new text(item),
itemsMax: Number.MAX_SAFE_INTEGER, itemsMax: Number.MAX_SAFE_INTEGER,
placeholder: null, placeholder: null,
editing: false, editing: false,
@@ -55,9 +56,9 @@ class ChipList extends IgniteElement {
searchLoading: false, searchLoading: false,
searchResults: null, searchResults: null,
searchResultConverter: (result) => new text(result), searchResultConverter: (result) => new text(result),
onSearch: null, searchDelay: 200,
onSearchDelay: 200, searchCallback: null,
onSearchCallback: null, searchFunction: null,
documentListener: null, documentListener: null,
freeForm: true, freeForm: true,
chipBackground: null, chipBackground: null,
@@ -82,20 +83,18 @@ class ChipList extends IgniteElement {
//Chips //Chips
new list(this.items, (item) => { new list(this.items, (item) => {
return new Chip() return new Chip()
.id(item.id)
.property("color", item.chipColor ? item.chipColor : this.chipColor)
.property("background", item.chipBackground ? item.chipBackground : this.chipBackground)
.property("readOnly", this.readOnly) .property("readOnly", this.readOnly)
.property("onDelete", () => { .property("onDelete", () => {
this.items = this.items.filter(needle => needle != item); this.items = this.items.filter(needle => needle != item);
this.changed = true; //Make sure changed flag was set. this.changed = true; //Make sure changed flag was set.
}) })
.child(item.content); .child(new converter(item, this.itemConverter));
}), }),
//Text input //Text input
new div() new div()
.class("input-container") .class("input-container")
.style("min-width", "1em")
.show(this.editing) .show(this.editing)
.child( .child(
new div() new div()
@@ -182,11 +181,20 @@ class ChipList extends IgniteElement {
} }
//If we are searching and we have a on search function invoke it. //If we are searching and we have a on search function invoke it.
if (this.searching && this.onSearch) { if (this.searching && this.searchFunction) {
if (this.onSearchCallback) { //Clear a pending search
clearTimeout(this.onSearchCallback); if (this.searchCallback) {
clearTimeout(this.searchCallback);
} }
this.onSearchCallback = setTimeout(() => this.onSearch(this, this.input.textContent.trim()), this.onSearchDelay);
//Schedule a new search
this.searchCallback = setTimeout(async () => {
this.searchLoading = true;
this.searchResults = await this.searchFunction(this.input.textContent.trim());
this.searchLoading = false;
}, this.searchDelay);
} }
}) })
) )
@@ -202,6 +210,7 @@ class ChipList extends IgniteElement {
this.items = null; this.items = null;
this.editing = false; this.editing = false;
this.searching = false; this.searching = false;
this.changed = true;
this.input.blur(); this.input.blur();
this.input.innerHTML = ""; this.input.innerHTML = "";
}), }),