Numerical State to HA-Form (#11646)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts

@@ -1,15 +1,13 @@
-import "@polymer/paper-input/paper-input";
+import "../../../../../components/ha-form/ha-form";
-import "@polymer/paper-input/paper-textarea";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import type { HaFormSchema } from "../../../../../components/ha-form/types";
 import { createDurationData } from "../../../../../common/datetime/create_duration_data";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
-import "../../../../../components/entity/ha-entity-picker";
+import type { NumericStateTrigger } from "../../../../../data/automation";
-import { NumericStateTrigger } from "../../../../../data/automation";
+import type { HomeAssistant } from "../../../../../types";
-import { HomeAssistant } from "../../../../../types";
-import { handleChangeEvent } from "../ha-automation-trigger-row";
-import "../../../../../components/ha-duration-input";
 
 @customElement("ha-automation-trigger-numeric_state")
 export class HaNumericStateTrigger extends LitElement {
@@ -17,6 +15,22 @@ export class HaNumericStateTrigger extends LitElement {
 
   @property() public trigger!: NumericStateTrigger;
 
+  private _schema = memoizeOne((entityId): HaFormSchema[] => [
+    { name: "entity_id", selector: { entity: {} } },
+    {
+      name: "attribute",
+      selector: { attribute: { entity_id: entityId } },
+    },
+    { name: "above", required: false, selector: { text: {} } },
+    { name: "below", required: false, selector: { text: {} } },
+    {
+      name: "value_template",
+      required: false,
+      selector: { text: { multiline: true } },
+    },
+    { name: "for", required: false, selector: { duration: {} } },
+  ]);
+
   public willUpdate(changedProperties: PropertyValues) {
     if (!changedProperties.has("trigger")) {
       return;
@@ -38,67 +52,46 @@ export class HaNumericStateTrigger extends LitElement {
   }
 
   public render() {
-    const { value_template, entity_id, attribute, below, above } = this.trigger;
     const trgFor = createDurationData(this.trigger.for);
 
+    const data = { ...this.trigger, for: trgFor };
+    const schema = this._schema(this.trigger.entity_id);
+
     return html`
-      <ha-entity-picker
+      <ha-form
-        .value=${entity_id}
-        @value-changed=${this._valueChanged}
-        .name=${"entity_id"}
         .hass=${this.hass}
-        allow-custom-entity
+        .data=${data}
-      ></ha-entity-picker>
+        .schema=${schema}
-      <ha-entity-attribute-picker
-        .hass=${this.hass}
-        .entityId=${entity_id}
-        .value=${attribute}
-        .name=${"attribute"}
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.attribute"
-        )}
         @value-changed=${this._valueChanged}
-        allow-custom-value
+        .computeLabel=${this._computeLabelCallback}
-      ></ha-entity-attribute-picker>
+      ></ha-form>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.numeric_state.above"
-        )}
-        name="above"
-        .value=${above}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.numeric_state.below"
-        )}
-        name="below"
-        .value=${below}
-        @value-changed=${this._valueChanged}
-      ></paper-input>
-      <paper-textarea
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.numeric_state.value_template"
-        )}
-        name="value_template"
-        .value=${value_template}
-        @value-changed=${this._valueChanged}
-        dir="ltr"
-      ></paper-textarea>
-      <ha-duration-input
-        .label=${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.type.state.for"
-        )}
-        .name=${"for"}
-        .data=${trgFor}
-        @value-changed=${this._valueChanged}
-      ></ha-duration-input>
     `;
   }
 
   private _valueChanged(ev: CustomEvent): void {
-    handleChangeEvent(this, ev);
+    ev.stopPropagation();
+    const newTrigger = ev.detail.value;
+    fireEvent(this, "value-changed", { value: newTrigger });
   }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string => {
+    switch (schema.name) {
+      case "entity_id":
+        return this.hass.localize("ui.components.entity.entity-picker.entity");
+      case "attribute":
+        return this.hass.localize(
+          "ui.components.entity.entity-attribute-picker.attribute"
+        );
+      case "for":
+        return this.hass.localize(
+          `ui.panel.config.automation.editor.triggers.type.state.for`
+        );
+      default:
+        return this.hass.localize(
+          `ui.panel.config.automation.editor.triggers.type.numeric_state.${schema.name}`
+        );
+    }
+  };
 }
 
 declare global {