jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ResizeObserver to EntityRow (#9837)

Browse Source 
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Ruben Andrist 2021-09-06 18:34:10 +02:00 committed by GitHub
parent 5a1070c30f
commit b3dedae115
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
View File

@ -10,11 +10,13 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { computeStateDisplay } from "../../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../../common/entity/compute_state_display";
import { computeRTLDirection } from "../../../common/util/compute_rtl"; import { computeRTLDirection } from "../../../common/util/compute_rtl";
import { debounce } from "../../../common/util/debounce";
import "../../../components/ha-slider"; import "../../../components/ha-slider";
import { UNAVAILABLE_STATES } from "../../../data/entity"; import { UNAVAILABLE_STATES } from "../../../data/entity";
import { setValue } from "../../../data/input_text"; import { setValue } from "../../../data/input_text";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
import { installResizeObserver } from "../common/install-resize-observer";
import "../components/hui-generic-entity-row"; import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createEntityNotFoundWarning } from "../components/hui-warning";
import { EntityConfig, LovelaceRow } from "./types"; import { EntityConfig, LovelaceRow } from "./types";
@ -29,6 +31,8 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
private _updated?: boolean; private _updated?: boolean;
private _resizeObserver?: ResizeObserver;
public setConfig(config: EntityConfig): void { public setConfig(config: EntityConfig): void {
if (!config) { if (!config) {
throw new Error("Invalid configuration"); throw new Error("Invalid configuration");
@ -41,6 +45,11 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
if (this._updated && !this._loaded) { if (this._updated && !this._loaded) {
this._initialLoad(); this._initialLoad();
} }
this._attachObserver();
}
public disconnectedCallback(): void {
this._resizeObserver?.disconnect();
} }
protected firstUpdated(): void { protected firstUpdated(): void {
@ -48,6 +57,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
if (this.isConnected && !this._loaded) { if (this.isConnected && !this._loaded) {
this._initialLoad(); this._initialLoad();
} }
this._attachObserver();
} }
protected shouldUpdate(changedProps: PropertyValues): boolean { protected shouldUpdate(changedProps: PropertyValues): boolean {
@ -120,6 +130,9 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host {
display: block;
}
.flex { .flex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -146,13 +159,30 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
private async _initialLoad(): Promise<void> { private async _initialLoad(): Promise<void> {
this._loaded = true; this._loaded = true;
await this.updateComplete; await this.updateComplete;
const element = this.shadowRoot!.querySelector(".state") as HTMLElement; this._measureCard();
if (!element || !this.parentElement) {
return;
} }
element.hidden = this.parentElement.clientWidth <= 300; private _measureCard() {
if (!this.isConnected) {
return;
}
const element = this.shadowRoot!.querySelector(".state") as HTMLElement;
if (!element) {
return;
}
element.hidden = this.clientWidth <= 300;
}
private async _attachObserver(): Promise<void> {
if (!this._resizeObserver) {
await installResizeObserver();
this._resizeObserver = new ResizeObserver(
debounce(() => this._measureCard(), 250, false)
);
}
if (this.isConnected) {
this._resizeObserver.observe(this);
}
} }
private get _inputElement(): { value: string } { private get _inputElement(): { value: string } {