From a66b966e7d2b92c02845ea3558fffa51d8073cdd Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 26 May 2021 16:29:50 +0200 Subject: [PATCH] Fix a bunch of updates triggering updated (#9260) --- src/components/ha-cover-controls.ts | 4 +- src/components/ha-cover-tilt-controls.ts | 4 +- src/components/user/ha-user-badge.ts | 15 ++++-- src/panels/calendar/ha-full-calendar.ts | 10 ++-- src/panels/calendar/ha-panel-calendar.ts | 8 +-- .../lovelace/cards/hui-humidifier-card.ts | 18 ++++++- .../lovelace/cards/hui-media-control-card.ts | 52 +++++++++++++------ .../lovelace/cards/hui-thermostat-card.ts | 18 ++++++- .../cards/hui-weather-forecast-card.ts | 8 ++- .../lovelace/components/hui-graph-base.ts | 2 +- .../hui-media-player-entity-row.ts | 7 ++- 11 files changed, 106 insertions(+), 40 deletions(-) diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts index 446d9e76e7..dbc4018322 100644 --- a/src/components/ha-cover-controls.ts +++ b/src/components/ha-cover-controls.ts @@ -23,8 +23,8 @@ class HaCoverControls extends LitElement { @state() private _entityObj?: CoverEntity; - protected updated(changedProperties: PropertyValues): void { - super.updated(changedProperties); + public willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); if (changedProperties.has("stateObj")) { this._entityObj = new CoverEntity(this.hass, this.stateObj); diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index 6bc444cec5..d2c3d97eb7 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -22,8 +22,8 @@ class HaCoverTiltControls extends LitElement { @state() private _entityObj?: CoverEntity; - protected updated(changedProperties: PropertyValues): void { - super.updated(changedProperties); + public willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); if (changedProperties.has("stateObj")) { this._entityObj = new CoverEntity(this.hass, this.stateObj); diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts index 86a7b9ea83..dc1692c35c 100644 --- a/src/components/user/ha-user-badge.ts +++ b/src/components/user/ha-user-badge.ts @@ -1,4 +1,11 @@ -import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; +import { + css, + CSSResultGroup, + html, + LitElement, + PropertyValues, + TemplateResult, +} from "lit"; import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; @@ -32,13 +39,13 @@ class UserBadge extends LitElement { private _personEntityId?: string; - protected updated(changedProps) { - super.updated(changedProps); + public willUpdate(changedProps: PropertyValues) { + super.willUpdate(changedProps); if (changedProps.has("user")) { this._getPersonPicture(); return; } - const oldHass = changedProps.get("hass"); + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; if ( this._personEntityId && oldHass && diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts index 8fa4cf46cc..5b737d529c 100644 --- a/src/panels/calendar/ha-full-calendar.ts +++ b/src/panels/calendar/ha-full-calendar.ts @@ -90,9 +90,9 @@ export class HAFullCalendar extends LitElement { @property() public initialView: FullCalendarView = "dayGridMonth"; - @state() private calendar?: Calendar; + private calendar?: Calendar; - @state() private _activeView?: FullCalendarView; + @state() private _activeView = this.initialView; public updateSize(): void { this.calendar?.updateSize(); @@ -181,8 +181,8 @@ export class HAFullCalendar extends LitElement { `; } - protected updated(changedProps: PropertyValues): void { - super.updated(changedProps); + public willUpdate(changedProps: PropertyValues): void { + super.willUpdate(changedProps); if (!this.calendar) { return; @@ -216,8 +216,6 @@ export class HAFullCalendar extends LitElement { initialView: this.initialView, }; - this._activeView = this.initialView; - config.dateClick = (info) => this._handleDateClick(info); config.eventClick = (info) => this._handleEventClick(info); diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts index 1bbe4b68ed..91cad5b3a6 100644 --- a/src/panels/calendar/ha-panel-calendar.ts +++ b/src/panels/calendar/ha-panel-calendar.ts @@ -48,9 +48,11 @@ class PanelCalendar extends LitElement { private _end?: Date; - protected firstUpdated(changedProps: PropertyValues): void { - super.firstUpdated(changedProps); - this._calendars = getCalendars(this.hass); + public willUpdate(changedProps: PropertyValues): void { + super.willUpdate(changedProps); + if (!this.hasUpdated) { + this._calendars = getCalendars(this.hass); + } } protected render(): TemplateResult { diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts index 8d514aea5c..93a327de9b 100644 --- a/src/panels/lovelace/cards/hui-humidifier-card.ts +++ b/src/panels/lovelace/cards/hui-humidifier-card.ts @@ -214,11 +214,27 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard { } if (!oldHass || oldHass.states[this._config.entity] !== stateObj) { - this._setHum = this._getSetHum(stateObj); this._rescale_svg(); } } + public willUpdate(changedProps: PropertyValues) { + if (!this.hass || !this._config || !changedProps.has("hass")) { + return; + } + + const stateObj = this.hass.states[this._config.entity]; + if (!stateObj) { + return; + } + + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + + if (!oldHass || oldHass.states[this._config.entity] !== stateObj) { + this._setHum = this._getSetHum(stateObj); + } + } + private _rescale_svg() { // Set the viewbox of the SVG containing the set humidity to perfectly // fit the text diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts index 571de96287..2acf872f26 100644 --- a/src/panels/lovelace/cards/hui-media-control-card.ts +++ b/src/panels/lovelace/cards/hui-media-control-card.ts @@ -325,12 +325,15 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { } protected firstUpdated(): void { - this._measureCard(); this._attachObserver(); } - protected updated(changedProps: PropertyValues): void { - super.updated(changedProps); + public willUpdate(changedProps: PropertyValues): void { + super.willUpdate(changedProps); + + if (!this.hasUpdated) { + this._measureCard(); + } if ( !this._config || @@ -352,6 +355,35 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { return; } + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + + const oldImage = + oldHass?.states[this._config.entity]?.attributes.entity_picture_local || + oldHass?.states[this._config.entity]?.attributes.entity_picture; + + if (!this._image) { + this._foregroundColor = undefined; + this._backgroundColor = undefined; + return; + } + + if (this._image !== oldImage) { + this._setColors(); + } + } + + protected updated(changedProps: PropertyValues) { + if ( + !this._config || + !this.hass || + !this._stateObj || + (!changedProps.has("_config") && !changedProps.has("hass")) + ) { + return; + } + + const stateObj = this._stateObj; + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; const oldConfig = changedProps.get("_config") as | MediaControlCardConfig @@ -384,20 +416,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard { clearInterval(this._progressInterval); this._progressInterval = undefined; } - - const oldImage = - oldHass?.states[this._config.entity]?.attributes.entity_picture_local || - oldHass?.states[this._config.entity]?.attributes.entity_picture; - - if (!this._image) { - this._foregroundColor = undefined; - this._backgroundColor = undefined; - return; - } - - if (this._image !== oldImage) { - this._setColors(); - } } private get _image() { diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts index d9d09fb32d..1d50d04180 100644 --- a/src/panels/lovelace/cards/hui-thermostat-card.ts +++ b/src/panels/lovelace/cards/hui-thermostat-card.ts @@ -300,11 +300,27 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard { } if (!oldHass || oldHass.states[this._config.entity] !== stateObj) { - this._setTemp = this._getSetTemp(stateObj); this._rescale_svg(); } } + public willUpdate(changedProps: PropertyValues) { + if (!this.hass || !this._config || !changedProps.has("hass")) { + return; + } + + const stateObj = this.hass.states[this._config.entity]; + if (!stateObj) { + return; + } + + const oldHass = changedProps.get("hass") as HomeAssistant | undefined; + + if (!oldHass || oldHass.states[this._config.entity] !== stateObj) { + this._setTemp = this._getSetTemp(stateObj); + } + } + private _rescale_svg() { // Set the viewbox of the SVG containing the set temperature to perfectly // fit the text diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts index 6a0bc765a4..0a00fa51e8 100644 --- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts +++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts @@ -106,8 +106,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { return hasConfigOrEntityChanged(this, changedProps); } + public willUpdate(): void { + if (!this.hasUpdated) { + this._measureCard(); + } + } + protected firstUpdated(): void { - this._measureCard(); this._attachObserver(); } @@ -129,7 +134,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard { (changedProps.has("_config") && oldConfig!.theme !== this._config.theme) ) { applyThemesOnElement(this, this.hass.themes, this._config.theme); - this.requestUpdate(); } } diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts index 5f48bb0768..de0a35e25b 100644 --- a/src/panels/lovelace/components/hui-graph-base.ts +++ b/src/panels/lovelace/components/hui-graph-base.ts @@ -47,7 +47,7 @@ export class HuiGraphBase extends LitElement { `; } - protected updated(changedProps: PropertyValues) { + public willUpdate(changedProps: PropertyValues) { if (!this.coordinates) { return; } diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts index 250c85cadc..83f73eacb4 100644 --- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts +++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts @@ -65,8 +65,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow { this._resizeObserver?.unobserve(this); } + public willUpdate(): void { + if (!this.hasUpdated) { + this._measureCard(); + } + } + protected firstUpdated(): void { - this._measureCard(); this._attachObserver(); }