Home-Assistant/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-12-24 12:49:19 +00:00
Code Activity

Use tags and aliases when filtering icons in Icon Picker (#10425)

Browse Source
This commit is contained in:
Paul Bottein
2021-10-27 22:12:12 +02:00
committed by GitHub
parent 10986db7c6
commit 74533cebc6
2 changed files with 42 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/components/ha-icon-picker.ts
View File

@@ -11,10 +11,14 @@ import { PolymerChangedEvent } from "../polymer-types";
import "./ha-icon";
import "./ha-icon-button";
let mdiIconList: string[] = [];
type IconItem = {
icon: string;
keywords: string[];
};
let iconItems: IconItem[] = [];
// eslint-disable-next-line lit/prefer-static-styles
const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<style>
paper-icon-item {
padding: 0;
margin: -8px;
@@ -37,8 +41,8 @@ const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
<paper-icon-item>
<ha-icon .icon=${item} slot="item-icon"></ha-icon>
<paper-item-body>${item}</paper-item-body>
<ha-icon .icon=${item.icon} slot="item-icon"></ha-icon>
<paper-item-body>${item.icon}</paper-item-body>
</paper-icon-item>`;
@customElement("ha-icon-picker")
@@ -66,7 +70,7 @@ export class HaIconPicker extends LitElement {
item-label-path="icon"
.value=${this._value}
allow-custom-value
.filteredItems=${mdiIconList}
.filteredItems=${iconItems}
${comboBoxRenderer(rowRenderer)}
@opened-changed=${this._openedChanged}
@value-changed=${this._valueChanged}
@@ -105,10 +109,13 @@ export class HaIconPicker extends LitElement {
private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
this._opened = ev.detail.value;
if (this._opened && !mdiIconList.length) {
if (this._opened && !iconItems.length) {
const iconList = await import("../../build/mdi/iconList.json");
mdiIconList = iconList.default.map((icon) => `mdi:${icon}`);
(this.comboBox as any).filteredItems = mdiIconList;
iconItems = iconList.default.map((icon) => ({
icon: `mdi:${icon.name}`,
keywords: icon.keywords,
}));
(this.comboBox as any).filteredItems = iconItems;
}
}
@@ -133,16 +140,28 @@ export class HaIconPicker extends LitElement {
const filterString = ev.detail.value.toLowerCase();
const characterCount = filterString.length;
if (characterCount >= 2) {
const filteredItems = mdiIconList.filter((icon) =>
icon.includes(filterString)
);
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 as any).filteredItems = filteredItems;
} else {
(this.comboBox as any).filteredItems = [filterString];
}
} else {
(this.comboBox as any).filteredItems = mdiIconList;
(this.comboBox as any).filteredItems = iconItems;
}
}