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

Convert device automation picker to mwc (#11592)

Browse Source 
Co-authored-by: Zack <zackbarett@hey.com>
This commit is contained in:
Bram Kragten 2022-02-07 17:53:23 +01:00 committed by GitHub
parent 236fa14ec3
commit 09d46dac61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 42 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/device/ha-device-automation-picker.ts
View File

@ -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;
} }
`; `;
} }