Skip to content

Commit

Permalink
perf: don't recreate items list twice while filtering (#154)
Browse files Browse the repository at this point in the history
- when we are filtering, the previous code was calling `initListItems()` and then `updateSelected()` which both recreate the rows list, there's no need to do it twice when we can simply pass it from the 1st pass to the 2nd method for other transformation
  • Loading branch information
ghiscoding authored Nov 9, 2023
1 parent 6731228 commit 5e58ceb
Showing 1 changed file with 7 additions and 8 deletions.
15 changes: 7 additions & 8 deletions lib/src/MultipleSelectInstance.ts
Original file line number Diff line number Diff line change
Expand Up @@ -424,7 +424,7 @@ export class MultipleSelectInstance {
this.initListItems();
}

protected initListItems() {
protected initListItems(): HtmlStruct[] {
let offset = 0;
const rows = this.getListRows();

Expand Down Expand Up @@ -483,16 +483,15 @@ export class MultipleSelectInstance {
this.virtualScroll = null;
}
this.events();

return rows;
}

protected getListRows(): HtmlStruct[] {
const rows: HtmlStruct[] = [];
this.updateData = [];
// console.time('perf');

this.data?.forEach((row) => rows.push(...this.initListItem(row)));
rows.push({ tagName: 'li', props: { className: 'ms-no-results', textContent: this.formatNoMatchesFound() } });
// console.timeEnd('perf');

return rows;
}
Expand Down Expand Up @@ -1061,7 +1060,7 @@ export class MultipleSelectInstance {
}
}

protected updateSelected() {
protected updateSelected(rows?: HtmlStruct[]) {
for (let i = this.updateDataStart!; i < this.updateDataEnd!; i++) {
const row = this.updateData[i];
const inputElm = this.dropElm.querySelector<HTMLInputElement>(`input[data-key=${row._key}]`);
Expand All @@ -1088,7 +1087,7 @@ export class MultipleSelectInstance {
toggleElement(this.noResultsElm, noResult);

if (this.virtualScroll) {
this.virtualScroll.rows = this.getListRows();
this.virtualScroll.rows = rows ?? this.getListRows(); // recreate the rows list only when not already created
}
}

Expand Down Expand Up @@ -1366,9 +1365,9 @@ export class MultipleSelectInstance {
}
}

this.initListItems();
const rows = this.initListItems();
this.initSelected(ignoreTrigger);
this.updateSelected();
this.updateSelected(rows); // no need to recreate the rows list twice

if (!ignoreTrigger) {
this.options.onFilter(originalSearch);
Expand Down

0 comments on commit 5e58ceb

Please sign in to comment.