Convert hui-input-select-entity-row to TypeScript/LitElement (#2048)

* Convert hui-input-select-entity-row to TypeScript/LitElement

* Address Travis issues

* Address review comments

* Return callService promise

* Remove _selected

src/data/input-select.ts

@@ -0,0 +1,11 @@
+import { HomeAssistant } from "../types";
+
+export const setOption = (
+  hass: HomeAssistant,
+  entity: string,
+  option: string
+) =>
+  hass.callService("input_select", "select_option", {
+    option,
+    entity_id: entity,
+  });

src/panels/lovelace/entity-rows/hui-input-select-entity-row.js

@@ -1,112 +0,0 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-
-import "../../../components/entity/state-badge";
-
-import computeStateName from "../../../common/entity/compute_state_name";
-
-import EventsMixin from "../../../mixins/events-mixin";
-
-/*
- * @appliesMixin EventsMixin
- */
-class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) {
-  static get template() {
-    return html`
-      ${this.styleTemplate}
-      <template is="dom-if" if="[[_stateObj]]">
-        <state-badge state-obj="[[_stateObj]]"></state-badge>
-        <paper-dropdown-menu
-          on-click="_stopPropagation"
-          selected-item-label="{{_selected}}"
-          label="[[_computeName(_config.name, _stateObj)]]"
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            selected="[[_computeSelected(_stateObj)]]"
-          >
-            <template is="dom-repeat" items="[[_stateObj.attributes.options]]">
-              <paper-item>[[item]]</paper-item>
-            </template>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </template>
-      <template is="dom-if" if="[[!_stateObj]]">
-        <div class="not-found">Entity not available: [[_config.entity]]</div>
-      </template>
-    `;
-  }
-
-  static get styleTemplate() {
-    return html`
-      <style>
-        :host {
-          display: flex;
-          align-items: center;
-        }
-        paper-dropdown-menu {
-          margin-left: 16px;
-          flex: 1;
-        }
-        .not-found {
-          flex: 1;
-          background-color: yellow;
-          padding: 8px;
-        }
-      </style>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      _config: Object,
-      _stateObj: {
-        type: Object,
-        computed: "_computeStateObj(hass.states, _config.entity)",
-      },
-      _selected: {
-        type: String,
-        observer: "_selectedChanged",
-      },
-    };
-  }
-
-  setConfig(config) {
-    if (!config || !config.entity) {
-      throw new Error("Entity not configured.");
-    }
-    this._config = config;
-  }
-
-  _computeStateObj(states, entityId) {
-    return states && entityId in states ? states[entityId] : null;
-  }
-
-  _computeName(name, stateObj) {
-    return name || computeStateName(stateObj);
-  }
-
-  _computeSelected(stateObj) {
-    return stateObj.attributes.options.indexOf(stateObj.state);
-  }
-
-  _selectedChanged(option) {
-    // Selected Option will transition to '' before transitioning to new value
-    if (option === "" || option === this._stateObj.state) {
-      return;
-    }
-    this.hass.callService("input_select", "select_option", {
-      option: option,
-      entity_id: this._stateObj.entity_id,
-    });
-  }
-
-  _stopPropagation(ev) {
-    ev.stopPropagation();
-  }
-}
-customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -0,0 +1,112 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { repeat } from "lit-html/directives/repeat";
+import { TemplateResult } from "lit-html";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+
+import "../../../components/entity/state-badge";
+import "./hui-error-entity-row";
+
+import computeStateName from "../../../common/entity/compute_state_name";
+import { HomeAssistant } from "../../../types";
+import { EntityRow, EntityConfig } from "./types";
+import { setOption } from "../../../data/input-select";
+
+class HuiInputSelectEntityRow extends LitElement implements EntityRow {
+  public hass?: HomeAssistant;
+  private _config?: EntityConfig;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  public setConfig(config: EntityConfig): void {
+    if (!config || !config.entity) {
+      throw new Error("Invalid Configuration: 'entity' required");
+    }
+
+    this._config = config;
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this._config) {
+      return html``;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-error-entity-row
+          .entity="${this._config.entity}"
+        ></hui-error-entity-row>
+      `;
+    }
+
+    return html`
+      ${this.renderStyle()}
+      <state-badge .stateObj="${stateObj}"></state-badge>
+      <paper-dropdown-menu
+        selected-item-label="${stateObj.state}"
+        @selected-item-label-changed="${this._selectedChanged}"
+        label="${this._config.name || computeStateName(stateObj)}"
+      >
+        <paper-listbox
+          slot="dropdown-content"
+          selected="${stateObj.attributes.options.indexOf(stateObj.state)}"
+        >
+          ${
+            repeat(
+              stateObj.attributes.options,
+              (option) =>
+                html`
+                  <paper-item>${option}</paper-item>
+                `
+            )
+          }
+        </paper-listbox>
+      </paper-dropdown-menu>
+    `;
+  }
+
+  private renderStyle(): TemplateResult {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        paper-dropdown-menu {
+          margin-left: 16px;
+          flex: 1;
+        }
+      </style>
+    `;
+  }
+
+  private _selectedChanged(ev): void {
+    // Selected Option will transition to '' before transitioning to new value
+    const stateObj = this.hass!.states[this._config!.entity];
+    if (
+      !ev.target.selectedItem ||
+      ev.target.selectedItem.innerText === "" ||
+      ev.target.selectedItem.innerText === stateObj.state
+    ) {
+      return;
+    }
+
+    setOption(this.hass!, stateObj.entity_id, ev.target.selectedItem.innerText);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-input-select-entity-row": HuiInputSelectEntityRow;
+  }
+}
+
+customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);