Use comboBoxRenderer from lit-vaadin-helpers (#9201)

2025-07-19 15:26:36 +00:00 · 2021-05-25 13:27:49 +02:00 · 2021-05-25 13:27:49 +02:00 · 0eca602e61
commit 0eca602e61
parent 7f75ca81f1
10 changed files with 126 additions and 211 deletions
--- a/package.json
+++ b/package.json
@ -117,6 +117,7 @@
    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",
    "lit": "^2.0.0-rc.2",
+    "lit-vaadin-helpers": "^0.1.3",
    "marked": "2.0.0",
    "mdn-polyfills": "^5.16.0",
    "memoize-one": "^5.0.2",
--- a/src/components/device/ha-area-devices-picker.ts
+++ b/src/components/device/ha-area-devices-picker.ts
@ -38,6 +38,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
 import "./ha-devices-picker";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";

 interface DevicesByArea {
  [areaId: string]: AreaDevices;
@ -49,42 +50,28 @@ interface AreaDevices {
  devices: string[];
 }

-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaDevices }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        width: 100%;
-        margin: -10px 0;
-        padding: 0;
-      }
-      mwc-icon-button {
-        float: right;
-      }
-      .devices {
-        display: none;
-      }
-      .devices.visible {
-        display: block;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.devices.length]] devices</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector(
-    "[secondary]"
-  )!.textContent = `${model.item.devices.length.toString()} devices`;
-};
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
+    paper-item {
+      width: 100%;
+      margin: -10px 0;
+      padding: 0;
+    }
+    mwc-icon-button {
+      float: right;
+    }
+    .devices {
+      display: none;
+    }
+    .devices.visible {
+      display: block;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line="">
+      <div class="name">${item.name}</div>
+      <div secondary>${item.devices.length} devices</div>
+    </paper-item-body>
+  </paper-item>`;

@customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@ -310,7 +297,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
        item-label-path="name"
        .items=${areas}
        .value=${this._value}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._areaPicked}
      >
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@ -33,6 +33,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

 interface Device {
  name: string;
@ -44,27 +45,18 @@ export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
 ) => boolean;

-const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.area]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector("[secondary]")!.textContent = model.item.area!;
-};
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.area}</span>
+    </paper-item-body>
+  </paper-item>`;

@customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@ -12,6 +12,7 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
@ -22,22 +23,13 @@ import "./state-badge";

 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

-const rowRenderer = (root: HTMLElement, _owner, model: { item: string }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-item></paper-item>
-    `;
-  }
-  root.querySelector("paper-item")!.textContent = formatAttributeName(
-    model.item
-  );
-};
+const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${formatAttributeName(item)}</paper-item>`;

@customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@ -82,8 +74,8 @@ class HaEntityAttributePicker extends LitElement {
      <vaadin-combo-box-light
        .value=${this._value}
        .allowCustomValue=${this.allowCustomValue}
-        .renderer=${rowRenderer}
        attr-for-value="bind-value"
+        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
      >
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@ -13,6 +13,7 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@ -25,32 +26,19 @@ import "./state-badge";

 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;

-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassEntity }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-icon-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-icon-item>
-        <state-badge slot="item-icon"></state-badge>
-        <paper-item-body two-line="">
-          <div class='name'></div>
-          <div secondary></div>
-        </paper-item-body>
-      </paper-icon-item>
-    `;
-  }
-  root.querySelector("state-badge")!.stateObj = model.item;
-  root.querySelector(".name")!.textContent = computeStateName(model.item);
-  root.querySelector("[secondary]")!.textContent = model.item.entity_id;
-};
+const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
+    paper-icon-item {
+      margin: -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-icon-item>
+    <state-badge slot="item-icon" .stateObj=${item}></state-badge>
+    <paper-item-body two-line="">
+      ${computeStateName(item)}
+      <span secondary>${item.entity_id}</span>
+    </paper-item-body>
+  </paper-icon-item>`;

@customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
@ -221,7 +209,7 @@ export class HaEntityPicker extends LitElement {
        item-label-path="entity_id"
        .value=${this._value}
        .allowCustomValue=${this.allowCustomEntity}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
        @filter-changed=${this._filterChanged}
--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@ -9,32 +9,20 @@ import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassioAddonInfo }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.slug]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent = model.item.slug;
-};
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.slug}</span>
+    </paper-item-body>
+  </paper-item>`;

@customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@ -14,7 +14,9 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@ -42,36 +44,20 @@ import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-svg-icon";

-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaRegistryEntry }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px 0;
-          padding: 0;
-        }
-        paper-item.add-new {
-            font-weight: 500;
-        }
-      </style>
-      <paper-item>
-        <paper-item-body two-line>
-          <div class='name'>[[item.name]]</div>
-        </paper-item-body>
-      </paper-item>
-      `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  if (model.item.area_id === "add_new") {
-    root.querySelector("paper-item")!.className = "add-new";
-  } else {
-    root.querySelector("paper-item")!.classList.remove("add-new");
-  }
-};
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+    paper-item.add-new {
+      font-weight: 500;
+    }
+  </style>
+  <paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
+    <paper-item-body two-line>${item.name}</paper-item-body>
+  </paper-item>`;

@customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
@ -340,8 +326,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
        item-id-path="area_id"
        item-label-path="name"
        .value=${this._value}
-        .renderer=${rowRenderer}
        .disabled=${this.disabled}
+        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._areaChanged}
      >
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -6,31 +6,20 @@ import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";

-const defaultRowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: any }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -5px -10px;
-        padding: 0;
-      }
-    </style>
-    <paper-item></paper-item>
-    `;
-  }
-
-  root.querySelector("paper-item")!.textContent = model.item;
-};
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${item}</paper-item>`;

@customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
@ -53,11 +42,7 @@ export class HaComboBox extends LitElement {

  @property({ attribute: "item-id-path" }) public itemIdPath?: string;

-  @property() public renderer?: (
-    root: HTMLElement,
-    owner: HTMLElement,
-    model: { item: any }
-  ) => void;
+  @property() public renderer?: ComboBoxLitRenderer<any>;

  @property({ type: Boolean }) public disabled?: boolean;

@ -90,9 +75,9 @@ export class HaComboBox extends LitElement {
        .value=${this.value}
        .items=${this.items}
        .filteredItems=${this.filteredItems}
-        .renderer=${this.renderer || defaultRowRenderer}
        .allowCustomValue=${this.allowCustomValue}
        .disabled=${this.disabled}
+        ${comboBoxRenderer(this.renderer || defaultRowRenderer)}
        @opened-changed=${this._openedChanged}
        @filter-changed=${this._filterChanged}
        @value-changed=${this._valueChanged}
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@ -6,33 +6,22 @@ import { LocalizeFunc } from "../common/translations/localize";
 import { domainToName } from "../data/integration";
 import { HomeAssistant } from "../types";
 import "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: { service: string; name: string } }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.service]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent =
-    model.item.name === model.item.service ? "" : model.item.service;
-};
+const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.name === item.service ? "" : item.service}</span>
+    </paper-item-body>
+  </paper-item>`;

 class HaServicePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
--- a/yarn.lock
+++ b/yarn.lock
@ -8721,6 +8721,13 @@ lit-html@2.0.0-rc.3, lit-html@^1.4.0, lit-html@^2.0.0-rc.3:
  dependencies:
    "@types/trusted-types" "^1.0.1"

+lit-vaadin-helpers@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/lit-vaadin-helpers/-/lit-vaadin-helpers-0.1.3.tgz#6230ffdb90f7808d087107f18e83f14d64f0f5d5"
+  integrity sha512-fEUJEVzC1IluUbOOExBYuwal/DyhZqheIvtDV/Tlnmbq1NFtIjgybFQuFNXAyHDaaVwuKDijTGP1c3wwf9rg8w==
+  dependencies:
+    lit "^2.0.0-rc.1"
+
 lit@^2.0.0-rc.1, lit@^2.0.0-rc.2:
  version "2.0.0-rc.2"
  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef"