mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Improve filtering and performance for icon picker (#14401)
Co-authored-by: Paul Bottein <paul.bottein@gmail.com>
This commit is contained in:
Steve Repsher
GitHub
parent
915563ce6c
commit
faa57e4c02
@ -3,6 +3,7 @@ import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
|
||||
import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
|
||||
import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
|
||||
import type {
|
||||
ComboBoxDataProvider,
|
||||
ComboBoxLight,
|
||||
ComboBoxLightFilterChangedEvent,
|
||||
ComboBoxLightOpenedChangedEvent,
|
||||
@ -82,6 +83,9 @@ export class HaComboBox extends LitElement {
|
||||
|
||||
@property({ attribute: false }) public filteredItems?: any[];
|
||||
|
||||
@property({ attribute: false })
|
||||
public dataProvider?: ComboBoxDataProvider<any>;
|
||||
|
||||
@property({ attribute: "allow-custom-value", type: Boolean })
|
||||
public allowCustomValue = false;
|
||||
|
||||
@ -148,6 +152,7 @@ export class HaComboBox extends LitElement {
|
||||
.items=${this.items}
|
||||
.value=${this.value || ""}
|
||||
.filteredItems=${this.filteredItems}
|
||||
.dataProvider=${this.dataProvider}
|
||||
.allowCustomValue=${this.allowCustomValue}
|
||||
.disabled=${this.disabled}
|
||||
.required=${this.required}
|
||||
@ -225,13 +230,13 @@ export class HaComboBox extends LitElement {
|
||||
}
|
||||
|
||||
private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
|
||||
ev.stopPropagation();
|
||||
const opened = ev.detail.value;
|
||||
// delay this so we can handle click event for toggle button before setting _opened
|
||||
setTimeout(() => {
|
||||
this.opened = opened;
|
||||
}, 0);
|
||||
// @ts-ignore
|
||||
fireEvent(this, ev.type, ev.detail);
|
||||
fireEvent(this, "opened-changed", { value: ev.detail.value });
|
||||
|
||||
if (opened) {
|
||||
const overlay = document.querySelector<HTMLElement>(
|
||||
@ -300,8 +305,8 @@ export class HaComboBox extends LitElement {
|
||||
}
|
||||
|
||||
private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
|
||||
// @ts-ignore
|
||||
fireEvent(this, ev.type, ev.detail, { composed: false });
|
||||
ev.stopPropagation();
|
||||
fireEvent(this, "filter-changed", { value: ev.detail.value });
|
||||
}
|
||||
|
||||
private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
|
||||
@ -363,3 +368,10 @@ declare global {
|
||||
"ha-combo-box": HaComboBox;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
"filter-changed": { value: string };
|
||||
"opened-changed": { value: boolean };
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +1,76 @@
|
||||
import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
|
||||
import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import {
|
||||
ComboBoxDataProviderCallback,
|
||||
ComboBoxDataProviderParams,
|
||||
} from "@vaadin/combo-box/vaadin-combo-box-light";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../common/dom/fire_event";
|
||||
import { customIcons } from "../data/custom_icons";
|
||||
import { PolymerChangedEvent } from "../polymer-types";
|
||||
import { HomeAssistant } from "../types";
|
||||
import "./ha-combo-box";
|
||||
import type { HaComboBox } from "./ha-combo-box";
|
||||
import "./ha-icon";
|
||||
|
||||
type IconItem = {
|
||||
icon: string;
|
||||
parts: Set<string>;
|
||||
keywords: string[];
|
||||
};
|
||||
let iconItems: IconItem[] = [];
|
||||
let iconLoaded = false;
|
||||
|
||||
// eslint-disable-next-line lit/prefer-static-styles
|
||||
const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<mwc-list-item
|
||||
graphic="avatar"
|
||||
>
|
||||
<ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
|
||||
${item.icon}
|
||||
</mwc-list-item>`;
|
||||
type RankedIcon = {
|
||||
icon: string;
|
||||
rank: number;
|
||||
};
|
||||
|
||||
let ICONS: IconItem[] = [];
|
||||
let ICONS_LOADED = false;
|
||||
|
||||
const loadIcons = async () => {
|
||||
ICONS_LOADED = true;
|
||||
|
||||
const iconList = await import("../../build/mdi/iconList.json");
|
||||
ICONS = iconList.default.map((icon) => ({
|
||||
icon: `mdi:${icon.name}`,
|
||||
parts: new Set(icon.name.split("-")),
|
||||
keywords: icon.keywords,
|
||||
}));
|
||||
|
||||
const customIconLoads: Promise<IconItem[]>[] = [];
|
||||
Object.keys(customIcons).forEach((iconSet) => {
|
||||
customIconLoads.push(loadCustomIconItems(iconSet));
|
||||
});
|
||||
(await Promise.all(customIconLoads)).forEach((customIconItems) => {
|
||||
ICONS.push(...customIconItems);
|
||||
});
|
||||
};
|
||||
|
||||
const loadCustomIconItems = async (iconsetPrefix: string) => {
|
||||
try {
|
||||
const getIconList = customIcons[iconsetPrefix].getIconList;
|
||||
if (typeof getIconList !== "function") {
|
||||
return [];
|
||||
}
|
||||
const iconList = await getIconList();
|
||||
const customIconItems = iconList.map((icon) => ({
|
||||
icon: `${iconsetPrefix}:${icon.name}`,
|
||||
parts: new Set(icon.name.split("-")),
|
||||
keywords: icon.keywords ?? [],
|
||||
}));
|
||||
return customIconItems;
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const rowRenderer: ComboBoxLitRenderer<IconItem | RankedIcon> = (item) =>
|
||||
html`<mwc-list-item graphic="avatar">
|
||||
<ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
|
||||
${item.icon}
|
||||
</mwc-list-item>`;
|
||||
|
||||
@customElement("ha-icon-picker")
|
||||
export class HaIconPicker extends LitElement {
|
||||
@ -46,10 +94,6 @@ export class HaIconPicker extends LitElement {
|
||||
|
||||
@property({ type: Boolean }) public invalid = false;
|
||||
|
||||
@state() private _opened = false;
|
||||
|
||||
@query("ha-combo-box", true) private comboBox!: HaComboBox;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
<ha-combo-box
|
||||
@ -58,7 +102,7 @@ export class HaIconPicker extends LitElement {
|
||||
item-label-path="icon"
|
||||
.value=${this._value}
|
||||
allow-custom-value
|
||||
.filteredItems=${iconItems}
|
||||
.dataProvider=${ICONS_LOADED ? this._iconProvider : undefined}
|
||||
.label=${this.label}
|
||||
.helper=${this.helper}
|
||||
.disabled=${this.disabled}
|
||||
@ -70,7 +114,6 @@ export class HaIconPicker extends LitElement {
|
||||
icon
|
||||
@opened-changed=${this._openedChanged}
|
||||
@value-changed=${this._valueChanged}
|
||||
@filter-changed=${this._filterChanged}
|
||||
>
|
||||
${this._value || this.placeholder
|
||||
? html`
|
||||
@ -87,46 +130,55 @@ export class HaIconPicker extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
this._opened = ev.detail.value;
|
||||
if (this._opened && !iconLoaded) {
|
||||
const iconList = await import("../../build/mdi/iconList.json");
|
||||
|
||||
iconItems = iconList.default.map((icon) => ({
|
||||
icon: `mdi:${icon.name}`,
|
||||
keywords: icon.keywords,
|
||||
}));
|
||||
iconLoaded = true;
|
||||
|
||||
this.comboBox.filteredItems = iconItems;
|
||||
|
||||
Object.keys(customIcons).forEach((iconSet) => {
|
||||
this._loadCustomIconItems(iconSet);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
private async _loadCustomIconItems(iconsetPrefix: string) {
|
||||
try {
|
||||
const getIconList = customIcons[iconsetPrefix].getIconList;
|
||||
if (typeof getIconList !== "function") {
|
||||
return;
|
||||
// Filter can take a significant chunk of frame (up to 3-5 ms)
|
||||
private _filterIcons = memoizeOne(
|
||||
(filter: string, iconItems: IconItem[] = ICONS) => {
|
||||
if (!filter) {
|
||||
return iconItems;
|
||||
}
|
||||
const iconList = await getIconList();
|
||||
const customIconItems = iconList.map((icon) => ({
|
||||
icon: `${iconsetPrefix}:${icon.name}`,
|
||||
keywords: icon.keywords ?? [],
|
||||
}));
|
||||
iconItems.push(...customIconItems);
|
||||
this.comboBox.filteredItems = iconItems;
|
||||
} catch (e) {
|
||||
// eslint-disable-next-line
|
||||
console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
|
||||
}
|
||||
}
|
||||
|
||||
protected shouldUpdate(changedProps: PropertyValues) {
|
||||
return !this._opened || changedProps.has("_opened");
|
||||
const filteredItems: RankedIcon[] = [];
|
||||
const addIcon = (icon: string, rank: number) =>
|
||||
filteredItems.push({ icon, rank });
|
||||
|
||||
// Filter and rank such that exact matches rank higher, and prefer icon name matches over keywords
|
||||
for (const item of iconItems) {
|
||||
if (item.parts.has(filter)) {
|
||||
addIcon(item.icon, 1);
|
||||
} else if (item.keywords.includes(filter)) {
|
||||
addIcon(item.icon, 2);
|
||||
} else if (item.icon.includes(filter)) {
|
||||
addIcon(item.icon, 3);
|
||||
} else if (item.keywords.some((word) => word.includes(filter))) {
|
||||
addIcon(item.icon, 4);
|
||||
}
|
||||
}
|
||||
|
||||
// Allow preview for custom icon not in list
|
||||
if (filteredItems.length === 0) {
|
||||
addIcon(filter, 0);
|
||||
}
|
||||
|
||||
return filteredItems.sort((itemA, itemB) => itemA.rank - itemB.rank);
|
||||
}
|
||||
);
|
||||
|
||||
private _iconProvider = (
|
||||
params: ComboBoxDataProviderParams,
|
||||
callback: ComboBoxDataProviderCallback<IconItem | RankedIcon>
|
||||
) => {
|
||||
const filteredItems = this._filterIcons(params.filter.toLowerCase(), ICONS);
|
||||
const iStart = params.page * params.pageSize;
|
||||
const iEnd = iStart + params.pageSize;
|
||||
callback(filteredItems.slice(iStart, iEnd), filteredItems.length);
|
||||
};
|
||||
|
||||
private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
|
||||
const opened = ev.detail.value;
|
||||
if (opened && !ICONS_LOADED) {
|
||||
await loadIcons();
|
||||
this.requestUpdate();
|
||||
}
|
||||
}
|
||||
|
||||
private _valueChanged(ev: PolymerChangedEvent<string>) {
|
||||
@ -147,35 +199,6 @@ export class HaIconPicker extends LitElement {
|
||||
);
|
||||
}
|
||||
|
||||
private _filterChanged(ev: CustomEvent): void {
|
||||
const filterString = ev.detail.value.toLowerCase();
|
||||
const characterCount = filterString.length;
|
||||
if (characterCount >= 2) {
|
||||
const filteredItems: IconItem[] = [];
|
||||
const filteredItemsByKeywords: IconItem[] = [];
|
||||
|
||||
iconItems.forEach((item) => {
|
||||
if (item.icon.includes(filterString)) {
|
||||
filteredItems.push(item);
|
||||
return;
|
||||
}
|
||||
if (item.keywords.some((t) => t.includes(filterString))) {
|
||||
filteredItemsByKeywords.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
filteredItems.push(...filteredItemsByKeywords);
|
||||
|
||||
if (filteredItems.length > 0) {
|
||||
this.comboBox.filteredItems = filteredItems;
|
||||
} else {
|
||||
this.comboBox.filteredItems = [{ icon: filterString, keywords: [] }];
|
||||
}
|
||||
} else {
|
||||
this.comboBox.filteredItems = iconItems;
|
||||
}
|
||||
}
|
||||
|
||||
private get _value() {
|
||||
return this.value || "";
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user