mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-21 08:16:36 +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 "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-item/paper-item-body";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import "@material/mwc-select/mwc-select";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { property, state } from "lit/decorators";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
@ -10,7 +8,6 @@ import {
|
||||
deviceAutomationsEqual,
|
||||
} from "../../data/device_automation";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import "../ha-paper-dropdown-menu";
|
||||
|
||||
const NO_AUTOMATION_KEY = "NO_AUTOMATION";
|
||||
const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
|
||||
@ -67,14 +64,12 @@ export abstract class HaDeviceAutomationPicker<
|
||||
this._createNoAutomation = createNoAutomation;
|
||||
}
|
||||
|
||||
private get _key() {
|
||||
if (
|
||||
!this.value ||
|
||||
deviceAutomationsEqual(
|
||||
this._createNoAutomation(this.deviceId),
|
||||
this.value
|
||||
)
|
||||
) {
|
||||
private get _value() {
|
||||
if (!this.value) {
|
||||
return "";
|
||||
}
|
||||
|
||||
if (!this._automations.length) {
|
||||
return NO_AUTOMATION_KEY;
|
||||
}
|
||||
|
||||
@ -93,42 +88,32 @@ export abstract class HaDeviceAutomationPicker<
|
||||
if (this._renderEmpty) {
|
||||
return html``;
|
||||
}
|
||||
const value = this._value;
|
||||
return html`
|
||||
<ha-paper-dropdown-menu
|
||||
<mwc-select
|
||||
.label=${this.label}
|
||||
.value=${this.value
|
||||
? this._localizeDeviceAutomation(this.hass, this.value)
|
||||
: ""}
|
||||
?disabled=${this._automations.length === 0}
|
||||
.value=${value}
|
||||
@selected=${this._automationChanged}
|
||||
.disabled=${this._automations.length === 0}
|
||||
>
|
||||
<paper-listbox
|
||||
slot="dropdown-content"
|
||||
.selected=${this._key}
|
||||
attr-for-selected="key"
|
||||
@iron-select=${this._automationChanged}
|
||||
>
|
||||
<paper-item
|
||||
key=${NO_AUTOMATION_KEY}
|
||||
.automation=${this._createNoAutomation(this.deviceId)}
|
||||
hidden
|
||||
>
|
||||
${this.NO_AUTOMATION_TEXT}
|
||||
</paper-item>
|
||||
<paper-item key=${UNKNOWN_AUTOMATION_KEY} hidden>
|
||||
${this.UNKNOWN_AUTOMATION_TEXT}
|
||||
</paper-item>
|
||||
${this._automations.map(
|
||||
(automation, idx) => html`
|
||||
<paper-item
|
||||
key=${`${this.deviceId}_${idx}`}
|
||||
.automation=${automation}
|
||||
>
|
||||
${this._localizeDeviceAutomation(this.hass, automation)}
|
||||
</paper-item>
|
||||
`
|
||||
)}
|
||||
</paper-listbox>
|
||||
</ha-paper-dropdown-menu>
|
||||
${value === NO_AUTOMATION_KEY
|
||||
? html`<mwc-list-item .value=${NO_AUTOMATION_KEY}>
|
||||
${this.NO_AUTOMATION_TEXT}
|
||||
</mwc-list-item>`
|
||||
: ""}
|
||||
${value === UNKNOWN_AUTOMATION_KEY
|
||||
? html`<mwc-list-item .value=${UNKNOWN_AUTOMATION_KEY}>
|
||||
${this.UNKNOWN_AUTOMATION_TEXT}
|
||||
</mwc-list-item>`
|
||||
: ""}
|
||||
${this._automations.map(
|
||||
(automation, idx) => html`
|
||||
<mwc-list-item .value=${`${automation.device_id}_${idx}`}>
|
||||
${this._localizeDeviceAutomation(this.hass, automation)}
|
||||
</mwc-list-item>
|
||||
`
|
||||
)}
|
||||
</mwc-select>
|
||||
`;
|
||||
}
|
||||
|
||||
@ -138,14 +123,6 @@ export abstract class HaDeviceAutomationPicker<
|
||||
if (changedProps.has("deviceId")) {
|
||||
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() {
|
||||
@ -168,9 +145,16 @@ export abstract class HaDeviceAutomationPicker<
|
||||
}
|
||||
|
||||
private _automationChanged(ev) {
|
||||
if (ev.detail.item.automation) {
|
||||
this._setValue(ev.detail.item.automation);
|
||||
const value = ev.target.value;
|
||||
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) {
|
||||
@ -183,14 +167,9 @@ export abstract class HaDeviceAutomationPicker<
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
ha-paper-dropdown-menu {
|
||||
mwc-select {
|
||||
width: 100%;
|
||||
}
|
||||
paper-listbox {
|
||||
min-width: 200px;
|
||||
}
|
||||
paper-item {
|
||||
cursor: pointer;
|
||||
margin-top: 4px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user