jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 00:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate (input) select entities to mwc (#11591)

Browse Source
This commit is contained in:
Bram Kragten 2022-02-07 17:04:37 +01:00 committed by GitHub
parent 354ea88984
commit ca8d31c6bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 94 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import "@polymer/paper-item/paper-item"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-listbox/paper-listbox"; import "@material/mwc-select/mwc-select";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -11,8 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name"; 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 { UNAVAILABLE_STATES } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
import { import {
@ -67,75 +65,43 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config} .config=${this._config}
hideName hideName
> >
<ha-paper-dropdown-menu <mwc-select
.label=${this._config.name || computeStateName(stateObj)} .label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state} .value=${stateObj.state}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)} .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
@iron-select=${this._selectedChanged} naturalMenuWidth
@selected=${this._selectedChanged}
@click=${stopPropagation} @click=${stopPropagation}
@closed=${stopPropagation}
> >
<paper-listbox slot="dropdown-content"> ${stateObj.attributes.options
${stateObj.attributes.options ? stateObj.attributes.options.map(
? stateObj.attributes.options.map( (option) =>
(option) => html` <paper-item>${option}</paper-item> ` html`<mwc-list-item .value=${option}
) >${option}</mwc-list-item
: ""} >`
</paper-listbox> )
</ha-paper-dropdown-menu> : ""}
</mwc-select>
</hui-generic-entity-row> </hui-generic-entity-row>
`; `;
} }
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 { static get styles(): CSSResultGroup {
return css` return css`
hui-generic-entity-row { hui-generic-entity-row {
display: flex; display: flex;
align-items: center; align-items: center;
} }
ha-paper-dropdown-menu { mwc-select {
margin-left: 16px; width: 100%;
flex: 1;
}
paper-item {
cursor: pointer;
min-width: 200px;
}
.pointer {
cursor: pointer;
}
state-badge:focus {
outline: none;
background: var(--divider-color);
border-radius: 100%;
} }
`; `;
} }
private _selectedChanged(ev): void { private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity]; const stateObj = this.hass!.states[this._config!.entity];
const option = ev.target.selectedItem.innerText.trim(); const option = ev.target.value;
if (option === stateObj.state) { if (option === stateObj.state) {
return; return;
} }

90
src/panels/lovelace/entity-rows/hui-select-entity-row.ts
View File

@ -1,5 +1,5 @@
import "@polymer/paper-item/paper-item"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-listbox/paper-listbox"; import "@material/mwc-select/mwc-select";
import { import {
css, css,
CSSResultGroup, CSSResultGroup,
@ -11,8 +11,6 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name"; 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 { UNAVAILABLE } from "../../../data/entity";
import { forwardHaptic } from "../../../data/haptics"; import { forwardHaptic } from "../../../data/haptics";
import { SelectEntity, setSelectOption } from "../../../data/select"; import { SelectEntity, setSelectOption } from "../../../data/select";
@ -64,86 +62,52 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
.config=${this._config} .config=${this._config}
hideName hideName
> >
<ha-paper-dropdown-menu <mwc-select
.label=${this._config.name || computeStateName(stateObj)} .label=${this._config.name || computeStateName(stateObj)}
.value=${stateObj.state}
.disabled=${stateObj.state === UNAVAILABLE} .disabled=${stateObj.state === UNAVAILABLE}
@iron-select=${this._selectedChanged} naturalMenuWidth
@selected=${this._selectedChanged}
@click=${stopPropagation} @click=${stopPropagation}
@closed=${stopPropagation}
> >
<paper-listbox slot="dropdown-content"> ${stateObj.attributes.options
${stateObj.attributes.options ? stateObj.attributes.options.map(
? stateObj.attributes.options.map( (option) =>
(option) => html`
html` <mwc-list-item .value=${option}
<paper-item .option=${option} >${(stateObj.attributes.device_class &&
>${(stateObj.attributes.device_class &&
this.hass!.localize(
`component.select.state.${stateObj.attributes.device_class}.${option}`
)) ||
this.hass!.localize( this.hass!.localize(
`component.select.state._.${option}` `component.select.state.${stateObj.attributes.device_class}.${option}`
) || )) ||
option}</paper-item this.hass!.localize(
> `component.select.state._.${option}`
` ) ||
) option}
: ""} </mwc-list-item>
</paper-listbox> `
</ha-paper-dropdown-menu> )
: ""}
</mwc-select>
</hui-generic-entity-row> </hui-generic-entity-row>
`; `;
} }
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 { static get styles(): CSSResultGroup {
return css` return css`
hui-generic-entity-row { hui-generic-entity-row {
display: flex; display: flex;
align-items: center; align-items: center;
} }
ha-paper-dropdown-menu { mwc-select {
margin-left: 16px; width: 100%;
flex: 1;
}
paper-item {
cursor: pointer;
min-width: 200px;
}
.pointer {
cursor: pointer;
}
state-badge:focus {
outline: none;
background: var(--divider-color);
border-radius: 100%;
} }
`; `;
} }
private _selectedChanged(ev): void { private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity]; const stateObj = this.hass!.states[this._config!.entity];
const option = ev.target.selectedItem.option; const option = ev.target.value;
if (option === stateObj.state) { if (option === stateObj.state) {
return; return;
} }

62
src/state-summary/state-card-input_select.ts
View File

@ -1,21 +1,12 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-item/paper-item"; import "@material/mwc-select/mwc-select";
import type { PaperItemElement } from "@polymer/paper-item/paper-item"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import "@polymer/paper-listbox/paper-listbox";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation"; import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge"; import "../components/entity/state-badge";
import { UNAVAILABLE_STATES } from "../data/entity";
import { InputSelectEntity, setInputSelectOption } from "../data/input_select"; import { InputSelectEntity, setInputSelectOption } from "../data/input_select";
import type { PolymerIronSelectEvent } from "../polymer-types";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
@customElement("state-card-input_select") @customElement("state-card-input_select")
@ -27,32 +18,25 @@ class StateCardInputSelect extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<state-badge .stateObj=${this.stateObj}></state-badge> <state-badge .stateObj=${this.stateObj}></state-badge>
<paper-dropdown-menu-light <mwc-select
.label=${computeStateName(this.stateObj)} .label=${computeStateName(this.stateObj)}
.value=${this.stateObj.state} .value=${this.stateObj.state}
@iron-select=${this._selectedOptionChanged} .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@click=${stopPropagation} naturalMenuWidth
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
> >
<paper-listbox slot="dropdown-content"> ${this.stateObj.attributes.options.map(
${this.stateObj.attributes.options.map( (option) =>
(option) => html` <paper-item>${option}</paper-item> ` html`<mwc-list-item .value=${option}>${option}</mwc-list-item>`
)} )}
</paper-listbox> </mwc-select>
</paper-dropdown-menu-light>
`; `;
} }
protected updated(changedProps: PropertyValues) { private async _selectedOptionChanged(ev) {
super.updated(changedProps); const option = ev.target.value;
// 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<PaperItemElement>
) {
const option = ev.detail.item.innerText.trim();
if (option === this.stateObj.state) { if (option === this.stateObj.state) {
return; return;
} }
@ -62,7 +46,7 @@ class StateCardInputSelect extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
display: block; display: flex;
} }
state-badge { state-badge {
@ -70,14 +54,8 @@ class StateCardInputSelect extends LitElement {
margin-top: 10px; margin-top: 10px;
} }
paper-dropdown-menu-light { mwc-select {
display: block; width: 100%;
margin-left: 53px;
}
paper-item {
cursor: pointer;
min-width: 200px;
} }
`; `;
} }

79
src/state-summary/state-card-select.ts
View File

@ -1,18 +1,11 @@
import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; import "@material/mwc-list/mwc-list-item";
import "@polymer/paper-item/paper-item"; import "@material/mwc-select/mwc-select";
import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import {
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { stopPropagation } from "../common/dom/stop_propagation"; import { stopPropagation } from "../common/dom/stop_propagation";
import { computeStateName } from "../common/entity/compute_state_name"; import { computeStateName } from "../common/entity/compute_state_name";
import "../components/entity/state-badge"; import "../components/entity/state-badge";
import { UNAVAILABLE } from "../data/entity";
import { SelectEntity, setSelectOption } from "../data/select"; import { SelectEntity, setSelectOption } from "../data/select";
import type { HomeAssistant } from "../types"; import type { HomeAssistant } from "../types";
@ -25,42 +18,34 @@ class StateCardSelect extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<state-badge .stateObj=${this.stateObj}></state-badge> <state-badge .stateObj=${this.stateObj}></state-badge>
<paper-dropdown-menu-light <mwc-select
.value=${this.stateObj.state}
.label=${computeStateName(this.stateObj)} .label=${computeStateName(this.stateObj)}
@iron-select=${this._selectedOptionChanged} .disabled=${this.stateObj.state === UNAVAILABLE}
@click=${stopPropagation} naturalMenuWidth
fixedMenuPosition
@selected=${this._selectedOptionChanged}
@closed=${stopPropagation}
> >
<paper-listbox slot="dropdown-content"> ${this.stateObj.attributes.options.map(
${this.stateObj.attributes.options.map( (option) =>
(option) => html`
html` <mwc-list-item .value=${option}>
<paper-item .option=${option} ${(this.stateObj.attributes.device_class &&
>${(this.stateObj.attributes.device_class && this.hass.localize(
this.hass.localize( `component.select.state.${this.stateObj.attributes.device_class}.${option}`
`component.select.state.${this.stateObj.attributes.device_class}.${option}` )) ||
)) || this.hass.localize(`component.select.state._.${option}`) ||
this.hass.localize(`component.select.state._.${option}`) || option}
option}</paper-item </mwc-list-item>
> `
` )}
)} </mwc-select>
</paper-listbox>
</paper-dropdown-menu-light>
`; `;
} }
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) { private _selectedOptionChanged(ev) {
const option = ev.target.selectedItem.option; const option = ev.target.value;
if (option === this.stateObj.state) { if (option === this.stateObj.state) {
return; return;
} }
@ -70,7 +55,7 @@ class StateCardSelect extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
display: block; display: flex;
} }
state-badge { state-badge {
@ -78,14 +63,8 @@ class StateCardSelect extends LitElement {
margin-top: 10px; margin-top: 10px;
} }
paper-dropdown-menu-light { mwc-select {
display: block; width: 100%;
margin-left: 53px;
}
paper-item {
cursor: pointer;
min-width: 200px;
} }
`; `;
} }