From a690a1d7bfd84ec98ed17587616a1d688c7603b1 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Sat, 16 Oct 2021 05:41:23 -0700 Subject: [PATCH] ABC automation types + use MWC (#10287) --- .../action/ha-automation-action-row.ts | 53 ++++++++++--------- .../types/ha-automation-action-delay.ts | 3 ++ .../ha-automation-condition-editor.ts | 53 ++++++++++--------- .../trigger/ha-automation-trigger-row.ts | 53 ++++++++++--------- 4 files changed, 90 insertions(+), 72 deletions(-) diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts index 6e1f316a82..23313c87aa 100644 --- a/src/panels/config/automation/action/ha-automation-action-row.ts +++ b/src/panels/config/automation/action/ha-automation-action-row.ts @@ -1,15 +1,16 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-select"; +import type { Select } from "@material/mwc-select"; import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import { customElement, property, query, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { stringCompare } from "../../../../common/string/compare"; import { handleStructError } from "../../../../common/structs/handle-errors"; +import { LocalizeFunc } from "../../../../common/translations/localize"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; import "../../../../components/ha-alert"; @@ -99,6 +100,19 @@ export default class HaAutomationActionRow extends LitElement { @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor; + private _processedTypes = memoizeOne( + (localize: LocalizeFunc): [string, string][] => + OPTIONS.map( + (action) => + [ + action, + localize( + `ui.panel.config.automation.editor.actions.type.${action}.label` + ), + ] as [string, string] + ).sort((a, b) => stringCompare(a[1], b[1])) + ); + protected updated(changedProperties: PropertyValues) { if (!changedProperties.has("action")) { return; @@ -211,28 +225,20 @@ export default class HaAutomationActionRow extends LitElement { > ` : html` - - - ${OPTIONS.map( - (opt) => html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.actions.type.${opt}.label` - )} - - ` - )} - - + ${this._processedTypes(this.hass.localize).map( + ([opt, label]) => html` + ${label} + ` + )} + +
${dynamicElement(`ha-automation-action-${type}`, { hass: this.hass, @@ -292,8 +298,7 @@ export default class HaAutomationActionRow extends LitElement { } private _typeChanged(ev: CustomEvent) { - const type = ((ev.target as PaperListboxElement)?.selectedItem as any) - ?.action; + const type = (ev.target as Select).value; if (!type) { return; diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts index e03a533be6..488494e65e 100644 --- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts +++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts @@ -40,6 +40,9 @@ export class HaDelayAction extends LitElement implements ActionElement { protected render() { return html` + OPTIONS.map( + (condition) => + [ + condition, + localize( + `ui.panel.config.automation.editor.conditions.type.${condition}.label` + ), + ] as [string, string] + ).sort((a, b) => stringCompare(a[1], b[1])) + ); + protected render() { const selected = OPTIONS.indexOf(this.condition.condition); const yamlMode = this.yamlMode || selected === -1; @@ -71,28 +85,20 @@ export default class HaAutomationConditionEditor extends LitElement { > ` : html` - - - ${OPTIONS.map( - (opt) => html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.conditions.type.${opt}.label` - )} - - ` - )} - - + ${this._processedTypes(this.hass.localize).map( + ([opt, label]) => html` + ${label} + ` + )} + +
${dynamicElement( `ha-automation-condition-${this.condition.condition}`, @@ -104,8 +110,7 @@ export default class HaAutomationConditionEditor extends LitElement { } private _typeChanged(ev: CustomEvent) { - const type = ((ev.target as PaperListboxElement)?.selectedItem as any) - ?.condition; + const type = (ev.target as Select).value; if (!type) { return; diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts index f5d9125699..51487ee054 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts @@ -1,15 +1,16 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation"; import "@material/mwc-list/mwc-list-item"; import { mdiDotsVertical } from "@mdi/js"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; +import "@material/mwc-select"; +import type { Select } from "@material/mwc-select"; import { css, CSSResultGroup, html, LitElement } from "lit"; import { customElement, property, state } from "lit/decorators"; +import memoizeOne from "memoize-one"; import { dynamicElement } from "../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../common/dom/fire_event"; +import { stringCompare } from "../../../../common/string/compare"; import { handleStructError } from "../../../../common/structs/handle-errors"; +import { LocalizeFunc } from "../../../../common/translations/localize"; import "../../../../components/ha-button-menu"; import "../../../../components/ha-card"; import "../../../../components/ha-alert"; @@ -86,6 +87,19 @@ export default class HaAutomationTriggerRow extends LitElement { @state() private _yamlMode = false; + private _processedTypes = memoizeOne( + (localize: LocalizeFunc): [string, string][] => + OPTIONS.map( + (action) => + [ + action, + localize( + `ui.panel.config.automation.editor.triggers.type.${action}.label` + ), + ] as [string, string] + ).sort((a, b) => stringCompare(a[1], b[1])) + ); + protected render() { const selected = OPTIONS.indexOf(this.trigger.platform); const yamlMode = this._yamlMode || selected === -1; @@ -160,28 +174,20 @@ export default class HaAutomationTriggerRow extends LitElement { > ` : html` - - - ${OPTIONS.map( - (opt) => html` - - ${this.hass.localize( - `ui.panel.config.automation.editor.triggers.type.${opt}.label` - )} - - ` - )} - - + ${this._processedTypes(this.hass.localize).map( + ([opt, label]) => html` + ${label} + ` + )} + +