mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 00:06:35 +00:00
Migrate (input) select entities to mwc (#11591)
This commit is contained in:
parent
354ea88984
commit
ca8d31c6bb
@ -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
|
||||
>
|
||||
<ha-paper-dropdown-menu
|
||||
<mwc-select
|
||||
.label=${this._config.name || computeStateName(stateObj)}
|
||||
.value=${stateObj.state}
|
||||
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
|
||||
@iron-select=${this._selectedChanged}
|
||||
naturalMenuWidth
|
||||
@selected=${this._selectedChanged}
|
||||
@click=${stopPropagation}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
${stateObj.attributes.options
|
||||
? stateObj.attributes.options.map(
|
||||
(option) => html` <paper-item>${option}</paper-item> `
|
||||
)
|
||||
: ""}
|
||||
</paper-listbox>
|
||||
</ha-paper-dropdown-menu>
|
||||
${stateObj.attributes.options
|
||||
? stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`<mwc-list-item .value=${option}
|
||||
>${option}</mwc-list-item
|
||||
>`
|
||||
)
|
||||
: ""}
|
||||
</mwc-select>
|
||||
</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 {
|
||||
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;
|
||||
}
|
||||
|
@ -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
|
||||
>
|
||||
<ha-paper-dropdown-menu
|
||||
<mwc-select
|
||||
.label=${this._config.name || computeStateName(stateObj)}
|
||||
.value=${stateObj.state}
|
||||
.disabled=${stateObj.state === UNAVAILABLE}
|
||||
@iron-select=${this._selectedChanged}
|
||||
naturalMenuWidth
|
||||
@selected=${this._selectedChanged}
|
||||
@click=${stopPropagation}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
${stateObj.attributes.options
|
||||
? stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`
|
||||
<paper-item .option=${option}
|
||||
>${(stateObj.attributes.device_class &&
|
||||
this.hass!.localize(
|
||||
`component.select.state.${stateObj.attributes.device_class}.${option}`
|
||||
)) ||
|
||||
${stateObj.attributes.options
|
||||
? stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`
|
||||
<mwc-list-item .value=${option}
|
||||
>${(stateObj.attributes.device_class &&
|
||||
this.hass!.localize(
|
||||
`component.select.state._.${option}`
|
||||
) ||
|
||||
option}</paper-item
|
||||
>
|
||||
`
|
||||
)
|
||||
: ""}
|
||||
</paper-listbox>
|
||||
</ha-paper-dropdown-menu>
|
||||
`component.select.state.${stateObj.attributes.device_class}.${option}`
|
||||
)) ||
|
||||
this.hass!.localize(
|
||||
`component.select.state._.${option}`
|
||||
) ||
|
||||
option}
|
||||
</mwc-list-item>
|
||||
`
|
||||
)
|
||||
: ""}
|
||||
</mwc-select>
|
||||
</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 {
|
||||
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;
|
||||
}
|
||||
|
@ -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`
|
||||
<state-badge .stateObj=${this.stateObj}></state-badge>
|
||||
<paper-dropdown-menu-light
|
||||
<mwc-select
|
||||
.label=${computeStateName(this.stateObj)}
|
||||
.value=${this.stateObj.state}
|
||||
@iron-select=${this._selectedOptionChanged}
|
||||
@click=${stopPropagation}
|
||||
.disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
|
||||
naturalMenuWidth
|
||||
fixedMenuPosition
|
||||
@selected=${this._selectedOptionChanged}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
${this.stateObj.attributes.options.map(
|
||||
(option) => html` <paper-item>${option}</paper-item> `
|
||||
)}
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu-light>
|
||||
${this.stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`<mwc-list-item .value=${option}>${option}</mwc-list-item>`
|
||||
)}
|
||||
</mwc-select>
|
||||
`;
|
||||
}
|
||||
|
||||
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<PaperItemElement>
|
||||
) {
|
||||
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%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
@ -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`
|
||||
<state-badge .stateObj=${this.stateObj}></state-badge>
|
||||
<paper-dropdown-menu-light
|
||||
<mwc-select
|
||||
.value=${this.stateObj.state}
|
||||
.label=${computeStateName(this.stateObj)}
|
||||
@iron-select=${this._selectedOptionChanged}
|
||||
@click=${stopPropagation}
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
naturalMenuWidth
|
||||
fixedMenuPosition
|
||||
@selected=${this._selectedOptionChanged}
|
||||
@closed=${stopPropagation}
|
||||
>
|
||||
<paper-listbox slot="dropdown-content">
|
||||
${this.stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`
|
||||
<paper-item .option=${option}
|
||||
>${(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}</paper-item
|
||||
>
|
||||
`
|
||||
)}
|
||||
</paper-listbox>
|
||||
</paper-dropdown-menu-light>
|
||||
${this.stateObj.attributes.options.map(
|
||||
(option) =>
|
||||
html`
|
||||
<mwc-list-item .value=${option}>
|
||||
${(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}
|
||||
</mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</mwc-select>
|
||||
`;
|
||||
}
|
||||
|
||||
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%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user