mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +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 {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { guard } from "lit/directives/guard";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import type { SortableEvent } from "sortablejs";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/entity/ha-entity-picker";
|
||||
@ -30,20 +23,20 @@ export class HuiEntityEditor extends LitElement {
|
||||
|
||||
@property() protected label?: string;
|
||||
|
||||
@state() private _attached = false;
|
||||
|
||||
@state() private _renderEmptySortable = false;
|
||||
private _entityKeys = new WeakMap<EntityConfig, string>();
|
||||
|
||||
private _sortable?: SortableInstance;
|
||||
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._attached = true;
|
||||
public disconnectedCallback() {
|
||||
this._destroySortable();
|
||||
}
|
||||
|
||||
public disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this._attached = false;
|
||||
private _getKey(action: EntityConfig) {
|
||||
if (!this._entityKeys.has(action)) {
|
||||
this._entityKeys.set(action, Math.random().toString());
|
||||
}
|
||||
|
||||
return this._entityKeys.get(action)!;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -60,23 +53,23 @@ export class HuiEntityEditor extends LitElement {
|
||||
")"}
|
||||
</h3>
|
||||
<div class="entities">
|
||||
${guard([this.entities, this._renderEmptySortable], () =>
|
||||
this._renderEmptySortable
|
||||
? ""
|
||||
: this.entities!.map(
|
||||
(entityConf, index) => html`
|
||||
<div class="entity" data-entity-id=${entityConf.entity}>
|
||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||
<ha-entity-picker
|
||||
.hass=${this.hass}
|
||||
.value=${entityConf.entity}
|
||||
.index=${index}
|
||||
@value-changed=${this._valueChanged}
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
${repeat(
|
||||
this.entities,
|
||||
(entityConf) => this._getKey(entityConf),
|
||||
(entityConf, index) => html`
|
||||
<div class="entity" data-entity-id=${entityConf.entity}>
|
||||
<div class="handle">
|
||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||
</div>
|
||||
<ha-entity-picker
|
||||
.hass=${this.hass}
|
||||
.value=${entityConf.entity}
|
||||
.index=${index}
|
||||
@value-changed=${this._valueChanged}
|
||||
allow-custom-entity
|
||||
></ha-entity-picker>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
</div>
|
||||
<ha-entity-picker
|
||||
@ -87,58 +80,41 @@ export class HuiEntityEditor extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
protected updated(changedProps: PropertyValues): void {
|
||||
super.updated(changedProps);
|
||||
|
||||
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;
|
||||
protected firstUpdated(): void {
|
||||
this._createSortable();
|
||||
}
|
||||
|
||||
private async _createSortable() {
|
||||
const Sortable = await loadSortable();
|
||||
|
||||
this._sortable = new Sortable(
|
||||
this.shadowRoot!.querySelector(".entities")!,
|
||||
{
|
||||
animation: 150,
|
||||
fallbackClass: "sortable-fallback",
|
||||
handle: "ha-svg-icon",
|
||||
handle: ".handle",
|
||||
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> {
|
||||
const value = ev.detail.value;
|
||||
if (value === "") {
|
||||
@ -198,9 +174,15 @@ export class HuiEntityEditor extends LitElement {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.entity ha-svg-icon {
|
||||
.entity .handle {
|
||||
padding-right: 8px;
|
||||
cursor: move;
|
||||
padding-inline-end: 8px;
|
||||
padding-inline-start: initial;
|
||||
direction: var(--direction);
|
||||
}
|
||||
.entity .handle > * {
|
||||
pointer-events: none;
|
||||
}
|
||||
.entity ha-entity-picker {
|
||||
flex-grow: 1;
|
||||
|
||||
@ -1,14 +1,7 @@
|
||||
import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { guard } from "lit/directives/guard";
|
||||
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { repeat } from "lit/directives/repeat";
|
||||
import type { SortableEvent } from "sortablejs";
|
||||
import { fireEvent } from "../../../common/dom/fire_event";
|
||||
import "../../../components/entity/ha-entity-picker";
|
||||
@ -39,20 +32,20 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
||||
|
||||
@property() protected label?: string;
|
||||
|
||||
@state() private _attached = false;
|
||||
|
||||
@state() private _renderEmptySortable = false;
|
||||
private _entityKeys = new WeakMap<LovelaceRowConfig, string>();
|
||||
|
||||
private _sortable?: SortableInstance;
|
||||
|
||||
public connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._attached = true;
|
||||
public disconnectedCallback() {
|
||||
this._destroySortable();
|
||||
}
|
||||
|
||||
public disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this._attached = false;
|
||||
private _getKey(action: LovelaceRowConfig) {
|
||||
if (!this._entityKeys.has(action)) {
|
||||
this._entityKeys.set(action, Math.random().toString());
|
||||
}
|
||||
|
||||
return this._entityKeys.get(action)!;
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
@ -70,63 +63,61 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
||||
)})`}
|
||||
</h3>
|
||||
<div class="entities">
|
||||
${guard([this.entities, this._renderEmptySortable], () =>
|
||||
this._renderEmptySortable
|
||||
? ""
|
||||
: this.entities!.map(
|
||||
(entityConf, index) => html`
|
||||
<div class="entity">
|
||||
<div class="handle">
|
||||
<ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
|
||||
${repeat(
|
||||
this.entities,
|
||||
(entityConf) => this._getKey(entityConf),
|
||||
(entityConf, index) => html`
|
||||
<div class="entity">
|
||||
<div class="handle">
|
||||
<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>
|
||||
${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>
|
||||
`
|
||||
: 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"
|
||||
`
|
||||
: html`
|
||||
<ha-entity-picker
|
||||
allow-custom-entity
|
||||
hideClearIcon
|
||||
.hass=${this.hass}
|
||||
.value=${(entityConf as EntityConfig).entity}
|
||||
.index=${index}
|
||||
@click=${this._removeRow}
|
||||
></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>
|
||||
`
|
||||
)
|
||||
@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}
|
||||
@click=${this._removeRow}
|
||||
></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>
|
||||
<ha-entity-picker
|
||||
@ -137,57 +128,40 @@ export class HuiEntitiesCardRowEditor extends LitElement {
|
||||
`;
|
||||
}
|
||||
|
||||
protected updated(changedProps: PropertyValues): void {
|
||||
super.updated(changedProps);
|
||||
|
||||
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;
|
||||
protected firstUpdated(): void {
|
||||
this._createSortable();
|
||||
}
|
||||
|
||||
private async _createSortable() {
|
||||
const Sortable = await loadSortable();
|
||||
|
||||
this._sortable = new Sortable(
|
||||
this.shadowRoot!.querySelector(".entities")!,
|
||||
{
|
||||
animation: 150,
|
||||
fallbackClass: "sortable-fallback",
|
||||
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> {
|
||||
const value = ev.detail.value;
|
||||
if (value === "") {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user