jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Copy resize observer to "non-input" number entity row (#9973)

Browse Source
This commit is contained in:
Philip Allgaier 2021-09-07 17:25:08 +02:00 committed by GitHub
parent 5d46963e8a
commit d0edbec5fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,6 +132,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
return css` return css`
:host { :host {
display: block; display: block;
cursor: pointer;
} }
.flex { .flex {
display: flex; display: flex;
@ -150,9 +151,6 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
} }
:host {
cursor: pointer;
}
`; `;
} }

40
src/panels/lovelace/entity-rows/hui-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 } from "../../../data/entity"; import { UNAVAILABLE } 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 HuiNumberEntityRow 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 HuiNumberEntityRow 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 HuiNumberEntityRow 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,10 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host {
cursor: pointer;
display: block;
}
.flex { .flex {
display: flex; display: flex;
align-items: center; align-items: center;
@ -137,22 +151,36 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
width: 100%; width: 100%;
max-width: 200px; max-width: 200px;
} }
:host {
cursor: pointer;
}
`; `;
} }
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) { private _measureCard() {
if (!this.isConnected) {
return; return;
} }
const element = this.shadowRoot!.querySelector(".state") as HTMLElement;
if (!element) {
return;
}
element.hidden = this.clientWidth <= 300;
}
element.hidden = this.parentElement.clientWidth <= 350; 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 } {