From 0612edc6c279764cb72ab5565716d38f95ea5098 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 7 Feb 2022 15:05:57 +0100 Subject: [PATCH] Migrate (input) select entities to mwc --- .../hui-input-select-entity-row.ts | 70 ++++----------- .../entity-rows/hui-select-entity-row.ts | 90 ++++++------------- src/state-summary/state-card-input_select.ts | 62 +++++-------- src/state-summary/state-card-select.ts | 79 ++++++---------- 4 files changed, 94 insertions(+), 207 deletions(-) diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts index 55f384a6c9d7..30fd573dbe27 100644 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -1,5 +1,5 @@ -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { css, CSSResultGroup, @@ -11,8 +11,6 @@ import { import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import "../../../components/entity/state-badge"; -import "../../../components/ha-paper-dropdown-menu"; import { UNAVAILABLE_STATES } from "../../../data/entity"; import { forwardHaptic } from "../../../data/haptics"; import { @@ -67,75 +65,43 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow { .config=${this._config} hideName > - - - ${stateObj.attributes.options - ? stateObj.attributes.options.map( - (option) => html` ${option} ` - ) - : ""} - - + ${stateObj.attributes.options + ? stateObj.attributes.options.map( + (option) => + html`${option}` + ) + : ""} + `; } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - - if (!this.hass || !this._config) { - return; - } - - const stateObj = this.hass.states[this._config.entity] as - | InputSelectEntity - | undefined; - - if (!stateObj) { - return; - } - - // Update selected after rendering the items or else it won't work in Firefox - if (stateObj.attributes.options) { - this.shadowRoot!.querySelector("paper-listbox")!.selected = - stateObj.attributes.options.indexOf(stateObj.state); - } - } - static get styles(): CSSResultGroup { return css` hui-generic-entity-row { display: flex; align-items: center; } - ha-paper-dropdown-menu { - margin-left: 16px; - flex: 1; - } - paper-item { - cursor: pointer; - min-width: 200px; - } - .pointer { - cursor: pointer; - } - state-badge:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; + mwc-select { + width: 100%; } `; } private _selectedChanged(ev): void { const stateObj = this.hass!.states[this._config!.entity]; - const option = ev.target.selectedItem.innerText.trim(); + const option = ev.target.value; if (option === stateObj.state) { return; } diff --git a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts index 5aa6f103fda4..f6bc9ec8678d 100644 --- a/src/panels/lovelace/entity-rows/hui-select-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-select-entity-row.ts @@ -1,5 +1,5 @@ -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; import { css, CSSResultGroup, @@ -11,8 +11,6 @@ import { import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import "../../../components/entity/state-badge"; -import "../../../components/ha-paper-dropdown-menu"; import { UNAVAILABLE } from "../../../data/entity"; import { forwardHaptic } from "../../../data/haptics"; import { SelectEntity, setSelectOption } from "../../../data/select"; @@ -64,86 +62,52 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow { .config=${this._config} hideName > - - - ${stateObj.attributes.options - ? stateObj.attributes.options.map( - (option) => - html` - ${(stateObj.attributes.device_class && - this.hass!.localize( - `component.select.state.${stateObj.attributes.device_class}.${option}` - )) || + ${stateObj.attributes.options + ? stateObj.attributes.options.map( + (option) => + html` + ${(stateObj.attributes.device_class && this.hass!.localize( - `component.select.state._.${option}` - ) || - option} - ` - ) - : ""} - - + `component.select.state.${stateObj.attributes.device_class}.${option}` + )) || + this.hass!.localize( + `component.select.state._.${option}` + ) || + option} + + ` + ) + : ""} + `; } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - - if (!this.hass || !this._config) { - return; - } - - const stateObj = this.hass.states[this._config.entity] as - | SelectEntity - | undefined; - - if (!stateObj) { - return; - } - - // Update selected after rendering the items or else it won't work in Firefox - if (stateObj.attributes.options) { - this.shadowRoot!.querySelector("paper-listbox")!.selected = - stateObj.attributes.options.indexOf(stateObj.state); - } - } - static get styles(): CSSResultGroup { return css` hui-generic-entity-row { display: flex; align-items: center; } - ha-paper-dropdown-menu { - margin-left: 16px; - flex: 1; - } - paper-item { - cursor: pointer; - min-width: 200px; - } - .pointer { - cursor: pointer; - } - state-badge:focus { - outline: none; - background: var(--divider-color); - border-radius: 100%; + mwc-select { + width: 100%; } `; } private _selectedChanged(ev): void { const stateObj = this.hass!.states[this._config!.entity]; - const option = ev.target.selectedItem.option; + const option = ev.target.value; if (option === stateObj.state) { return; } diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts index 91b47eede356..c992975a827f 100644 --- a/src/state-summary/state-card-input_select.ts +++ b/src/state-summary/state-card-input_select.ts @@ -1,21 +1,12 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-item/paper-item"; -import type { PaperItemElement } from "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import { - css, - CSSResultGroup, - html, - LitElement, - PropertyValues, - TemplateResult, -} from "lit"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; import { computeStateName } from "../common/entity/compute_state_name"; import "../components/entity/state-badge"; +import { UNAVAILABLE_STATES } from "../data/entity"; import { InputSelectEntity, setInputSelectOption } from "../data/input_select"; -import type { PolymerIronSelectEvent } from "../polymer-types"; import type { HomeAssistant } from "../types"; @customElement("state-card-input_select") @@ -27,32 +18,25 @@ class StateCardInputSelect extends LitElement { protected render(): TemplateResult { return html` - - - ${this.stateObj.attributes.options.map( - (option) => html` ${option} ` - )} - - + ${this.stateObj.attributes.options.map( + (option) => + html`${option}` + )} + `; } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - // Update selected after rendering the items or else it won't work in Firefox - this.shadowRoot!.querySelector("paper-listbox")!.selected = - this.stateObj.attributes.options.indexOf(this.stateObj.state); - } - - private async _selectedOptionChanged( - ev: PolymerIronSelectEvent - ) { - const option = ev.detail.item.innerText.trim(); + private async _selectedOptionChanged(ev) { + const option = ev.target.value; if (option === this.stateObj.state) { return; } @@ -62,7 +46,7 @@ class StateCardInputSelect extends LitElement { static get styles(): CSSResultGroup { return css` :host { - display: block; + display: flex; } state-badge { @@ -70,14 +54,8 @@ class StateCardInputSelect extends LitElement { margin-top: 10px; } - paper-dropdown-menu-light { - display: block; - margin-left: 53px; - } - - paper-item { - cursor: pointer; - min-width: 200px; + mwc-select { + width: 100%; } `; } diff --git a/src/state-summary/state-card-select.ts b/src/state-summary/state-card-select.ts index 8541cac41b1c..1aae15ad6c1e 100644 --- a/src/state-summary/state-card-select.ts +++ b/src/state-summary/state-card-select.ts @@ -1,18 +1,11 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import { - css, - CSSResultGroup, - html, - LitElement, - PropertyValues, - TemplateResult, -} from "lit"; +import "@material/mwc-list/mwc-list-item"; +import "@material/mwc-select/mwc-select"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { stopPropagation } from "../common/dom/stop_propagation"; import { computeStateName } from "../common/entity/compute_state_name"; import "../components/entity/state-badge"; +import { UNAVAILABLE } from "../data/entity"; import { SelectEntity, setSelectOption } from "../data/select"; import type { HomeAssistant } from "../types"; @@ -25,42 +18,34 @@ class StateCardSelect extends LitElement { protected render(): TemplateResult { return html` - - - ${this.stateObj.attributes.options.map( - (option) => - html` - ${(this.stateObj.attributes.device_class && - this.hass.localize( - `component.select.state.${this.stateObj.attributes.device_class}.${option}` - )) || - this.hass.localize(`component.select.state._.${option}`) || - option} - ` - )} - - + ${this.stateObj.attributes.options.map( + (option) => + html` + + ${(this.stateObj.attributes.device_class && + this.hass.localize( + `component.select.state.${this.stateObj.attributes.device_class}.${option}` + )) || + this.hass.localize(`component.select.state._.${option}`) || + option} + + ` + )} + `; } - protected updated(changedProps: PropertyValues) { - super.updated(changedProps); - if (!changedProps.has("stateObj")) { - return; - } - // Update selected after rendering the items or else it won't work in Firefox - this.shadowRoot!.querySelector("paper-listbox")!.selected = - this.stateObj.attributes.options.indexOf(this.stateObj.state); - } - private _selectedOptionChanged(ev) { - const option = ev.target.selectedItem.option; + const option = ev.target.value; if (option === this.stateObj.state) { return; } @@ -70,7 +55,7 @@ class StateCardSelect extends LitElement { static get styles(): CSSResultGroup { return css` :host { - display: block; + display: flex; } state-badge { @@ -78,14 +63,8 @@ class StateCardSelect extends LitElement { margin-top: 10px; } - paper-dropdown-menu-light { - display: block; - margin-left: 53px; - } - - paper-item { - cursor: pointer; - min-width: 200px; + mwc-select { + width: 100%; } `; }