MIgrate entity-filter-badge to updating element (#6050)

home-assistant · May 27, 2020 · 70f59ee · 70f59ee
1 parent b75792a
commit 70f59ee
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/src/panels/lovelace/badges/hui-entity-filter-badge.ts b/src/panels/lovelace/badges/hui-entity-filter-badge.ts
@@ -5,15 +5,16 @@ import { createBadgeElement } from "../create-element/create-badge-element";
 import { EntityFilterEntityConfig } from "../entity-rows/types";
 import { LovelaceBadge } from "../types";
 import { EntityFilterBadgeConfig } from "./types";
+import { UpdatingElement, property, PropertyValues } from "lit-element";
 
-class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
-  private _elements?: LovelaceBadge[];
+class EntityFilterBadge extends UpdatingElement implements LovelaceBadge {
+  @property() public hass!: HomeAssistant;
 
-  private _config?: EntityFilterBadgeConfig;
+  @property() private _config?: EntityFilterBadgeConfig;
 
-  private _configEntities?: EntityFilterEntityConfig[];
+  private _elements?: LovelaceBadge[];
 
-  private _hass?: HomeAssistant;
+  private _configEntities?: EntityFilterEntityConfig[];
 
   private _oldEntities?: EntityFilterEntityConfig[];
 
@@ -34,39 +35,43 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
       throw new Error("Incorrect filter config.");
     }
 
+    while (this.lastChild) {
+      this.removeChild(this.lastChild);
+    }
+    this._elements = undefined;
+
+    this._configEntities = processConfigEntities(config.entities);
+    this._oldEntities = undefined;
     this._config = config;
-    this._configEntities = undefined;
+  }
 
-    if (this.lastChild) {
-      this.removeChild(this.lastChild);
-      this._elements = undefined;
+  protected shouldUpdate(changedProperties: PropertyValues): boolean {
+    if (
+      changedProperties.has("_config") ||
+      (changedProperties.has("hass") &&
+        this.haveEntitiesChanged(
+          changedProperties.get("hass") as HomeAssistant | undefined
+        ))
+    ) {
+      return true;
     }
+    return false;
   }
 
-  set hass(hass: HomeAssistant) {
-    if (!hass || !this._config) {
+  protected update(changedProperties: PropertyValues) {
+    super.update(changedProperties);
+    if (!this.hass || !this._configEntities) {
       return;
     }
 
     if (this._elements) {
       for (const element of this._elements) {
-        element.hass = hass;
+        element.hass = this.hass;
       }
     }
 
-    if (!this.haveEntitiesChanged(hass)) {
-      this._hass = hass;
-      return;
-    }
-
-    this._hass = hass;
-
-    if (!this._configEntities) {
-      this._configEntities = processConfigEntities(this._config.entities);
-    }
-
     const entitiesList = this._configEntities.filter((entityConf) => {
-      const stateObj = hass.states[entityConf.entity];
+      const stateObj = this.hass.states[entityConf.entity];
 
       if (!stateObj) {
         return false;
@@ -91,6 +96,7 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
 
     if (entitiesList.length === 0) {
       this.style.display = "none";
+      this._oldEntities = entitiesList;
       return;
     }
 
@@ -103,7 +109,7 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
       this._elements = [];
       for (const badgeConfig of entitiesList) {
         const element = createBadgeElement(badgeConfig);
-        element.hass = hass;
+        element.hass = this.hass;
         this._elements.push(element);
       }
       this._oldEntities = entitiesList;
@@ -124,17 +130,17 @@ class EntityFilterBadge extends HTMLElement implements LovelaceBadge {
     this.style.display = "inline";
   }
 
-  private haveEntitiesChanged(hass: HomeAssistant): boolean {
-    if (!this._hass) {
+  private haveEntitiesChanged(oldHass?: HomeAssistant): boolean {
+    if (!oldHass) {
       return true;
     }
 
-    if (!this._configEntities || this._hass.localize !== hass.localize) {
+    if (!this._oldEntities || this.hass.localize !== oldHass.localize) {
       return true;
     }
 
-    for (const config of this._configEntities) {
-      if (this._hass.states[config.entity] !== hass.states[config.entity]) {
+    for (const config of this._configEntities!) {
+      if (this.hass.states[config.entity] !== oldHass.states[config.entity]) {
         return true;
       }
     }

diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
@@ -162,7 +162,7 @@ export class HUIView extends LitElement {
 
     if (hassChanged && !configChanged) {
       this._cards.forEach((element) => {
-        element.hass = this.hass;
+        element.hass = hass;
       });
     }