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

Teardown and rebuild element editor when switching stack cards (#24065)

Browse Source
This commit is contained in:
karwosts 2025-02-19 22:57:34 -08:00 committed by GitHub
parent 5cddc6e5c6
commit d22a82c4a6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
View File

@ -21,6 +21,7 @@ import {
optional,
string,
} from "superstruct";
import { keyed } from "lit/directives/keyed";
import type {
HaFormSchema,
SchemaUnion,
@ -84,6 +85,8 @@ export class HuiStackCardEditor
@state() protected _guiModeAvailable? = true;
protected _keys = new WeakMap<LovelaceCardConfig, string>();
protected _schema: readonly HaFormSchema[] = SCHEMA;
@query("hui-card-element-editor")
@ -199,14 +202,16 @@ export class HuiStackCardEditor
@click=${this._handleDeleteCard}
></ha-icon-button>
</div>
<hui-card-element-editor
.hass=${this.hass}
.value=${this._config.cards[selected]}
.lovelace=${this.lovelace}
@config-changed=${this._handleConfigChanged}
@GUImode-changed=${this._handleGUIModeChanged}
></hui-card-element-editor>
${keyed(
this._getKey(this._config.cards[selected]),
html`<hui-card-element-editor
.hass=${this.hass}
.value=${this._config.cards[selected]}
.lovelace=${this.lovelace}
@config-changed=${this._handleConfigChanged}
@GUImode-changed=${this._handleGUIModeChanged}
></hui-card-element-editor>`
)}
`
: html`
<hui-card-picker
@ -220,6 +225,14 @@ export class HuiStackCardEditor
`;
}
private _getKey(card: LovelaceCardConfig) {
if (!this._keys.has(card)) {
this._keys.set(card, Math.random().toString());
}
return this._keys.get(card)!;
}
protected _handleSelectedCard(ev) {
if (ev.target.id === "add-card") {
this._selectedCard = this._config!.cards.length;
@ -236,7 +249,10 @@ export class HuiStackCardEditor
return;
}
const cards = [...this._config.cards];
cards[this._selectedCard] = ev.detail.config as LovelaceCardConfig;
const key = this._getKey(cards[this._selectedCard]);
const newCard = ev.detail.config as LovelaceCardConfig;
cards[this._selectedCard] = newCard;
this._keys.set(newCard, key);
this._config = { ...this._config, cards };
this._guiModeAvailable = ev.detail.guiModeAvailable;
fireEvent(this, "config-changed", { config: this._config });