jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-18 23:06:40 +00:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
build-scripts/gulp/gen-icons-json.js
View File

@ -26,6 +26,7 @@ const getMeta = () => {
path: svg.match(/ d="([^"]+)"/)[1],
name: icon.name,
tags: icon.tags,
aliases: icon.aliases,
};
});
};
@ -37,6 +38,7 @@ const addRemovedMeta = (meta) => {
path: removeIcon.path,
name: removeIcon.name,
tags: [],
aliases: [],
}));
const combinedMeta = [...meta, ...removedMeta];
return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
@ -141,7 +143,15 @@ gulp.task("gen-icons-json", (done) => {
fs.writeFileSync(
path.resolve(OUTPUT_DIR, "iconList.json"),
JSON.stringify(orderMeta(meta).map((icon) => icon.name))
JSON.stringify(
orderMeta(meta).map((icon) => ({
name: icon.name,
keywords: [
...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
...icon.aliases,
],
}))
)
);
done();

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;
}
}