mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-26 18:56:39 +00:00
Do not recreate entities list at each re-order (#13751)
This commit is contained in:
Paul Bottein
GitHub
parent
e13c632afa
commit
9e416e829c
@ -1,14 +1,7 @@
|
|||||||
import { mdiDrag } from "@mdi/js";
|
import { mdiDrag } from "@mdi/js";
|
||||||
import {
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
css,
|
import { customElement, property } from "lit/decorators";
|
||||||
CSSResultGroup,
|
import { repeat } from "lit/directives/repeat";
|
||||||
html,
|
|
||||||
LitElement,
|
|
||||||
PropertyValues,
|
|
||||||
TemplateResult,
|
|
||||||
} from "lit";
|
|
||||||
import { customElement, property, state } from "lit/decorators";
|
|
||||||
import { guard } from "lit/directives/guard";
|
|
||||||
import type { SortableEvent } from "sortablejs";
|
import type { SortableEvent } from "sortablejs";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import "../../../components/entity/ha-entity-picker";
|
import "../../../components/entity/ha-entity-picker";
|
||||||
@ -30,20 +23,20 @@ export class HuiEntityEditor extends LitElement {
|
|||||||
|
|
||||||
@property() protected label?: string;
|
@property() protected label?: string;
|
||||||
|
|
||||||
@state() private _attached = false;
|
private _entityKeys = new WeakMap<EntityConfig, string>();
|
||||||
|
|
||||||
@state() private _renderEmptySortable = false;
|
|
||||||
|
|
||||||
private _sortable?: SortableInstance;
|
private _sortable?: SortableInstance;
|
||||||
|
|
||||||
public connectedCallback() {
|
public disconnectedCallback() {
|
||||||
super.connectedCallback();
|
this._destroySortable();
|
||||||
this._attached = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnectedCallback() {
|
private _getKey(action: EntityConfig) {
|
||||||
super.disconnectedCallback();
|
if (!this._entityKeys.has(action)) {
|
||||||
this._attached = false;
|
this._entityKeys.set(action, Math.random().toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
return this._entityKeys.get(action)!;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
@ -60,23 +53,23 @@ export class HuiEntityEditor extends LitElement {
|
|||||||
")"}
|
")"}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="entities">
|
<div class="entities">
|
||||||
${guard([this.entities, this._renderEmptySortable], () =>
|
${repeat(
|
||||||
this._renderEmptySortable
|
this.entities,
|
||||||
? ""
|
(entityConf) => this._getKey(entityConf),
|
||||||
: this.entities!.map(
|
(entityConf, index) => html`
|
||||||
(entityConf, index) => html`
|
<div class="entity" data-entity-id=${entityConf.entity}>
|
||||||
<div class="entity" data-entity-id=${entityConf.entity}>
|
<div class="handle">
|
||||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||||
<ha-entity-picker
|
</div>
|
||||||
.hass=${this.hass}
|
<ha-entity-picker
|
||||||
.value=${entityConf.entity}
|
.hass=${this.hass}
|
||||||
.index=${index}
|
.value=${entityConf.entity}
|
||||||
@value-changed=${this._valueChanged}
|
.index=${index}
|
||||||
allow-custom-entity
|
@value-changed=${this._valueChanged}
|
||||||
></ha-entity-picker>
|
allow-custom-entity
|
||||||
</div>
|
></ha-entity-picker>
|
||||||
`
|
</div>
|
||||||
)
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ha-entity-picker
|
<ha-entity-picker
|
||||||
@ -87,58 +80,41 @@ export class HuiEntityEditor extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues): void {
|
protected firstUpdated(): void {
|
||||||
super.updated(changedProps);
|
this._createSortable();
|
||||||
|
|
||||||
const attachedChanged = changedProps.has("_attached");
|
|
||||||
const entitiesChanged = changedProps.has("entities");
|
|
||||||
|
|
||||||
if (!entitiesChanged && !attachedChanged) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (attachedChanged && !this._attached) {
|
|
||||||
// Tear down sortable, if available
|
|
||||||
this._sortable?.destroy();
|
|
||||||
this._sortable = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this._sortable && this.entities) {
|
|
||||||
this._createSortable();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entitiesChanged) {
|
|
||||||
this._handleEntitiesChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async _handleEntitiesChanged() {
|
|
||||||
this._renderEmptySortable = true;
|
|
||||||
await this.updateComplete;
|
|
||||||
const container = this.shadowRoot!.querySelector(".entities")!;
|
|
||||||
while (container.lastElementChild) {
|
|
||||||
container.removeChild(container.lastElementChild);
|
|
||||||
}
|
|
||||||
this._renderEmptySortable = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _createSortable() {
|
private async _createSortable() {
|
||||||
const Sortable = await loadSortable();
|
const Sortable = await loadSortable();
|
||||||
|
|
||||||
this._sortable = new Sortable(
|
this._sortable = new Sortable(
|
||||||
this.shadowRoot!.querySelector(".entities")!,
|
this.shadowRoot!.querySelector(".entities")!,
|
||||||
{
|
{
|
||||||
animation: 150,
|
animation: 150,
|
||||||
fallbackClass: "sortable-fallback",
|
fallbackClass: "sortable-fallback",
|
||||||
handle: "ha-svg-icon",
|
handle: ".handle",
|
||||||
dataIdAttr: "data-entity-id",
|
dataIdAttr: "data-entity-id",
|
||||||
onEnd: async (evt: SortableEvent) => this._entityMoved(evt),
|
onChoose: (evt: SortableEvent) => {
|
||||||
|
(evt.item as any).placeholder =
|
||||||
|
document.createComment("sort-placeholder");
|
||||||
|
evt.item.after((evt.item as any).placeholder);
|
||||||
|
},
|
||||||
|
onEnd: (evt: SortableEvent) => {
|
||||||
|
// put back in original location
|
||||||
|
if ((evt.item as any).placeholder) {
|
||||||
|
(evt.item as any).placeholder.replaceWith(evt.item);
|
||||||
|
delete (evt.item as any).placeholder;
|
||||||
|
}
|
||||||
|
this._entityMoved(evt);
|
||||||
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _destroySortable() {
|
||||||
|
this._sortable?.destroy();
|
||||||
|
this._sortable = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
private async _addEntity(ev: CustomEvent): Promise<void> {
|
private async _addEntity(ev: CustomEvent): Promise<void> {
|
||||||
const value = ev.detail.value;
|
const value = ev.detail.value;
|
||||||
if (value === "") {
|
if (value === "") {
|
||||||
@ -198,9 +174,15 @@ export class HuiEntityEditor extends LitElement {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.entity ha-svg-icon {
|
.entity .handle {
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
cursor: move;
|
cursor: move;
|
||||||
|
padding-inline-end: 8px;
|
||||||
|
padding-inline-start: initial;
|
||||||
|
direction: var(--direction);
|
||||||
|
}
|
||||||
|
.entity .handle > * {
|
||||||
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
.entity ha-entity-picker {
|
.entity ha-entity-picker {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|||||||
@ -1,14 +1,7 @@
|
|||||||
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
|
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
|
||||||
import {
|
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||||
css,
|
import { customElement, property } from "lit/decorators";
|
||||||
CSSResultGroup,
|
import { repeat } from "lit/directives/repeat";
|
||||||
html,
|
|
||||||
LitElement,
|
|
||||||
PropertyValues,
|
|
||||||
TemplateResult,
|
|
||||||
} from "lit";
|
|
||||||
import { customElement, property, state } from "lit/decorators";
|
|
||||||
import { guard } from "lit/directives/guard";
|
|
||||||
import type { SortableEvent } from "sortablejs";
|
import type { SortableEvent } from "sortablejs";
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
import { fireEvent } from "../../../common/dom/fire_event";
|
||||||
import "../../../components/entity/ha-entity-picker";
|
import "../../../components/entity/ha-entity-picker";
|
||||||
@ -39,20 +32,20 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
|||||||
|
|
||||||
@property() protected label?: string;
|
@property() protected label?: string;
|
||||||
|
|
||||||
@state() private _attached = false;
|
private _entityKeys = new WeakMap<LovelaceRowConfig, string>();
|
||||||
|
|
||||||
@state() private _renderEmptySortable = false;
|
|
||||||
|
|
||||||
private _sortable?: SortableInstance;
|
private _sortable?: SortableInstance;
|
||||||
|
|
||||||
public connectedCallback() {
|
public disconnectedCallback() {
|
||||||
super.connectedCallback();
|
this._destroySortable();
|
||||||
this._attached = true;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public disconnectedCallback() {
|
private _getKey(action: LovelaceRowConfig) {
|
||||||
super.disconnectedCallback();
|
if (!this._entityKeys.has(action)) {
|
||||||
this._attached = false;
|
this._entityKeys.set(action, Math.random().toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
return this._entityKeys.get(action)!;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render(): TemplateResult {
|
protected render(): TemplateResult {
|
||||||
@ -70,63 +63,61 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
|||||||
)})`}
|
)})`}
|
||||||
</h3>
|
</h3>
|
||||||
<div class="entities">
|
<div class="entities">
|
||||||
${guard([this.entities, this._renderEmptySortable], () =>
|
${repeat(
|
||||||
this._renderEmptySortable
|
this.entities,
|
||||||
? ""
|
(entityConf) => this._getKey(entityConf),
|
||||||
: this.entities!.map(
|
(entityConf, index) => html`
|
||||||
(entityConf, index) => html`
|
<div class="entity">
|
||||||
<div class="entity">
|
<div class="handle">
|
||||||
<div class="handle">
|
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
</div>
|
||||||
|
${entityConf.type
|
||||||
|
? html`
|
||||||
|
<div class="special-row">
|
||||||
|
<div>
|
||||||
|
<span>
|
||||||
|
${this.hass!.localize(
|
||||||
|
`ui.panel.lovelace.editor.card.entities.entity_row.${entityConf.type}`
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span class="secondary"
|
||||||
|
>${this.hass!.localize(
|
||||||
|
"ui.panel.lovelace.editor.card.entities.edit_special_row"
|
||||||
|
)}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
${entityConf.type
|
`
|
||||||
? html`
|
: html`
|
||||||
<div class="special-row">
|
<ha-entity-picker
|
||||||
<div>
|
allow-custom-entity
|
||||||
<span>
|
hideClearIcon
|
||||||
${this.hass!.localize(
|
.hass=${this.hass}
|
||||||
`ui.panel.lovelace.editor.card.entities.entity_row.${entityConf.type}`
|
.value=${(entityConf as EntityConfig).entity}
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span class="secondary"
|
|
||||||
>${this.hass!.localize(
|
|
||||||
"ui.panel.lovelace.editor.card.entities.edit_special_row"
|
|
||||||
)}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
: html`
|
|
||||||
<ha-entity-picker
|
|
||||||
allow-custom-entity
|
|
||||||
hideClearIcon
|
|
||||||
.hass=${this.hass}
|
|
||||||
.value=${(entityConf as EntityConfig).entity}
|
|
||||||
.index=${index}
|
|
||||||
@value-changed=${this._valueChanged}
|
|
||||||
></ha-entity-picker>
|
|
||||||
`}
|
|
||||||
<ha-icon-button
|
|
||||||
.label=${this.hass!.localize(
|
|
||||||
"ui.components.entity.entity-picker.clear"
|
|
||||||
)}
|
|
||||||
.path=${mdiClose}
|
|
||||||
class="remove-icon"
|
|
||||||
.index=${index}
|
.index=${index}
|
||||||
@click=${this._removeRow}
|
@value-changed=${this._valueChanged}
|
||||||
></ha-icon-button>
|
></ha-entity-picker>
|
||||||
<ha-icon-button
|
`}
|
||||||
.label=${this.hass!.localize(
|
<ha-icon-button
|
||||||
"ui.components.entity.entity-picker.edit"
|
.label=${this.hass!.localize(
|
||||||
)}
|
"ui.components.entity.entity-picker.clear"
|
||||||
.path=${mdiPencil}
|
)}
|
||||||
class="edit-icon"
|
.path=${mdiClose}
|
||||||
.index=${index}
|
class="remove-icon"
|
||||||
@click=${this._editRow}
|
.index=${index}
|
||||||
></ha-icon-button>
|
@click=${this._removeRow}
|
||||||
</div>
|
></ha-icon-button>
|
||||||
`
|
<ha-icon-button
|
||||||
)
|
.label=${this.hass!.localize(
|
||||||
|
"ui.components.entity.entity-picker.edit"
|
||||||
|
)}
|
||||||
|
.path=${mdiPencil}
|
||||||
|
class="edit-icon"
|
||||||
|
.index=${index}
|
||||||
|
@click=${this._editRow}
|
||||||
|
></ha-icon-button>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ha-entity-picker
|
<ha-entity-picker
|
||||||
@ -137,57 +128,40 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
protected updated(changedProps: PropertyValues): void {
|
protected firstUpdated(): void {
|
||||||
super.updated(changedProps);
|
this._createSortable();
|
||||||
|
|
||||||
const attachedChanged = changedProps.has("_attached");
|
|
||||||
const entitiesChanged = changedProps.has("entities");
|
|
||||||
|
|
||||||
if (!entitiesChanged && !attachedChanged) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (attachedChanged && !this._attached) {
|
|
||||||
// Tear down sortable, if available
|
|
||||||
this._sortable?.destroy();
|
|
||||||
this._sortable = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this._sortable && this.entities) {
|
|
||||||
this._createSortable();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (entitiesChanged) {
|
|
||||||
this._handleEntitiesChanged();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private async _handleEntitiesChanged() {
|
|
||||||
this._renderEmptySortable = true;
|
|
||||||
await this.updateComplete;
|
|
||||||
const container = this.shadowRoot!.querySelector(".entities")!;
|
|
||||||
while (container.lastElementChild) {
|
|
||||||
container.removeChild(container.lastElementChild);
|
|
||||||
}
|
|
||||||
this._renderEmptySortable = false;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _createSortable() {
|
private async _createSortable() {
|
||||||
const Sortable = await loadSortable();
|
const Sortable = await loadSortable();
|
||||||
|
|
||||||
this._sortable = new Sortable(
|
this._sortable = new Sortable(
|
||||||
this.shadowRoot!.querySelector(".entities")!,
|
this.shadowRoot!.querySelector(".entities")!,
|
||||||
{
|
{
|
||||||
animation: 150,
|
animation: 150,
|
||||||
fallbackClass: "sortable-fallback",
|
fallbackClass: "sortable-fallback",
|
||||||
handle: ".handle",
|
handle: ".handle",
|
||||||
onEnd: async (evt: SortableEvent) => this._rowMoved(evt),
|
onChoose: (evt: SortableEvent) => {
|
||||||
|
(evt.item as any).placeholder =
|
||||||
|
document.createComment("sort-placeholder");
|
||||||
|
evt.item.after((evt.item as any).placeholder);
|
||||||
|
},
|
||||||
|
onEnd: (evt: SortableEvent) => {
|
||||||
|
// put back in original location
|
||||||
|
if ((evt.item as any).placeholder) {
|
||||||
|
(evt.item as any).placeholder.replaceWith(evt.item);
|
||||||
|
delete (evt.item as any).placeholder;
|
||||||
|
}
|
||||||
|
this._rowMoved(evt);
|
||||||
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private _destroySortable() {
|
||||||
|
this._sortable?.destroy();
|
||||||
|
this._sortable = undefined;
|
||||||
|
}
|
||||||
|
|
||||||
private async _addEntity(ev: CustomEvent): Promise<void> {
|
private async _addEntity(ev: CustomEvent): Promise<void> {
|
||||||
const value = ev.detail.value;
|
const value = ev.detail.value;
|
||||||
if (value === "") {
|
if (value === "") {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user