mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Convert device automation picker to mwc (#11592)
Co-authored-by: Zack <zackbarett@hey.com>
This commit is contained in:
parent
236fa14ec3
commit
09d46dac61
@ -1,7 +1,5 @@
|
|||||||
import "@polymer/paper-input/paper-input";
|
import "@material/mwc-list/mwc-list-item";
|
||||||
import "@polymer/paper-item/paper-item";
|
import "@material/mwc-select/mwc-select";
|
||||||
import "@polymer/paper-item/paper-item-body";
|
|
||||||
import "@polymer/paper-listbox/paper-listbox";
|
|
||||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
import { property, state } from "lit/decorators";
|
import { property, state } from "lit/decorators";
|
||||||
import { fireEvent } from "../../common/dom/fire_event";
|
import { fireEvent } from "../../common/dom/fire_event";
|
||||||
@ -10,7 +8,6 @@ import {
|
|||||||
deviceAutomationsEqual,
|
deviceAutomationsEqual,
|
||||||
} from "../../data/device_automation";
|
} from "../../data/device_automation";
|
||||||
import { HomeAssistant } from "../../types";
|
import { HomeAssistant } from "../../types";
|
||||||
import "../ha-paper-dropdown-menu";
|
|
||||||
|
|
||||||
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
|
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
|
||||||
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
|
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
|
||||||
@ -67,14 +64,12 @@ export abstract class HaDeviceAutomationPicker<
|
|||||||
this._createNoAutomation = createNoAutomation;
|
this._createNoAutomation = createNoAutomation;
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _key() {
|
private get _value() {
|
||||||
if (
|
if (!this.value) {
|
||||||
!this.value ||
|
return "";
|
||||||
deviceAutomationsEqual(
|
}
|
||||||
this._createNoAutomation(this.deviceId),
|
|
||||||
this.value
|
if (!this._automations.length) {
|
||||||
)
|
|
||||||
) {
|
|
||||||
return NO_AUTOMATION_KEY;
|
return NO_AUTOMATION_KEY;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -93,42 +88,32 @@ export abstract class HaDeviceAutomationPicker<
|
|||||||
if (this._renderEmpty) {
|
if (this._renderEmpty) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
|
const value = this._value;
|
||||||
return html`
|
return html`
|
||||||
<ha-paper-dropdown-menu
|
<mwc-select
|
||||||
.label=${this.label}
|
.label=${this.label}
|
||||||
.value=${this.value
|
.value=${value}
|
||||||
? this._localizeDeviceAutomation(this.hass, this.value)
|
@selected=${this._automationChanged}
|
||||||
: ""}
|
.disabled=${this._automations.length === 0}
|
||||||
?disabled=${this._automations.length === 0}
|
|
||||||
>
|
>
|
||||||
<paper-listbox
|
${value === NO_AUTOMATION_KEY
|
||||||
slot="dropdown-content"
|
? html`<mwc-list-item .value=${NO_AUTOMATION_KEY}>
|
||||||
.selected=${this._key}
|
${this.NO_AUTOMATION_TEXT}
|
||||||
attr-for-selected="key"
|
</mwc-list-item>`
|
||||||
@iron-select=${this._automationChanged}
|
: ""}
|
||||||
>
|
${value === UNKNOWN_AUTOMATION_KEY
|
||||||
<paper-item
|
? html`<mwc-list-item .value=${UNKNOWN_AUTOMATION_KEY}>
|
||||||
key=${NO_AUTOMATION_KEY}
|
${this.UNKNOWN_AUTOMATION_TEXT}
|
||||||
.automation=${this._createNoAutomation(this.deviceId)}
|
</mwc-list-item>`
|
||||||
hidden
|
: ""}
|
||||||
>
|
${this._automations.map(
|
||||||
${this.NO_AUTOMATION_TEXT}
|
(automation, idx) => html`
|
||||||
</paper-item>
|
<mwc-list-item .value=${`${automation.device_id}_${idx}`}>
|
||||||
<paper-item key=${UNKNOWN_AUTOMATION_KEY} hidden>
|
${this._localizeDeviceAutomation(this.hass, automation)}
|
||||||
${this.UNKNOWN_AUTOMATION_TEXT}
|
</mwc-list-item>
|
||||||
</paper-item>
|
`
|
||||||
${this._automations.map(
|
)}
|
||||||
(automation, idx) => html`
|
</mwc-select>
|
||||||
<paper-item
|
|
||||||
key=${`${this.deviceId}_${idx}`}
|
|
||||||
.automation=${automation}
|
|
||||||
>
|
|
||||||
${this._localizeDeviceAutomation(this.hass, automation)}
|
|
||||||
</paper-item>
|
|
||||||
`
|
|
||||||
)}
|
|
||||||
</paper-listbox>
|
|
||||||
</ha-paper-dropdown-menu>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -138,14 +123,6 @@ export abstract class HaDeviceAutomationPicker<
|
|||||||
if (changedProps.has("deviceId")) {
|
if (changedProps.has("deviceId")) {
|
||||||
this._updateDeviceInfo();
|
this._updateDeviceInfo();
|
||||||
}
|
}
|
||||||
|
|
||||||
// The value has changed, force the listbox to update
|
|
||||||
if (changedProps.has("value") || changedProps.has("_renderEmpty")) {
|
|
||||||
const listbox = this.shadowRoot!.querySelector("paper-listbox")!;
|
|
||||||
if (listbox) {
|
|
||||||
listbox._selectSelected(this._key);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _updateDeviceInfo() {
|
private async _updateDeviceInfo() {
|
||||||
@ -168,9 +145,16 @@ export abstract class HaDeviceAutomationPicker<
|
|||||||
}
|
}
|
||||||
|
|
||||||
private _automationChanged(ev) {
|
private _automationChanged(ev) {
|
||||||
if (ev.detail.item.automation) {
|
const value = ev.target.value;
|
||||||
this._setValue(ev.detail.item.automation);
|
if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
const [deviceId, idx] = value.split("_");
|
||||||
|
const automation = this._automations[idx];
|
||||||
|
if (automation.device_id !== deviceId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this._setValue(automation);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _setValue(automation: T) {
|
private _setValue(automation: T) {
|
||||||
@ -183,14 +167,9 @@ export abstract class HaDeviceAutomationPicker<
|
|||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
ha-paper-dropdown-menu {
|
mwc-select {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
margin-top: 4px;
|
||||||
paper-listbox {
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
paper-item {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user