jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-09 10:59:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update lit-virtualizer (#11623)

Browse Source
This commit is contained in:
Bram Kragten
2022-02-09 18:20:25 +01:00
committed by GitHub
parent 5435218187
commit 5f43715dd8
7 changed files with 166 additions and 1696 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
src/components/data-table/ha-data-table.ts
View File

@@ -1,4 +1,3 @@
import { Layout1d, scroll } from "@lit-labs/virtualizer";
import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
import deepClone from "deep-clone-simple";
import {
@@ -31,6 +30,7 @@ import type { HaCheckbox } from "../ha-checkbox";
import "../ha-svg-icon";
import { filterData, sortData } from "./sort-filter";
import { HomeAssistant } from "../../types";
import "@lit-labs/virtualizer";
declare global {
// for fire event
@@ -337,111 +337,99 @@ export class HaDataTable extends LitElement {
</div>
`
: html`
<div
<lit-virtualizer
scroller
class="mdc-data-table__content scroller ha-scrollbar"
@scroll=${this._saveScrollPos}
>
${scroll({
items: this._items,
layout: Layout1d,
renderItem: (row: DataTableRowData, index) => {
// not sure how this happens...
if (!row) {
return html``;
}
if (row.append) {
return html`
<div class="mdc-data-table__row">${row.content}</div>
`;
}
if (row.empty) {
return html` <div class="mdc-data-table__row"></div> `;
}
return html`
<div
aria-rowindex=${index! + 2}
role="row"
.rowId=${row[this.id]}
@click=${this._handleRowClick}
class="mdc-data-table__row ${classMap({
"mdc-data-table__row--selected":
this._checkedRows.includes(String(row[this.id])),
clickable: this.clickable,
})}"
aria-selected=${ifDefined(
this._checkedRows.includes(String(row[this.id]))
? true
: undefined
)}
.selectable=${row.selectable !== false}
>
${this.selectable
? html`
<div
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
role="cell"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleRowCheckboxClick}
.rowId=${row[this.id]}
.disabled=${row.selectable === false}
.checked=${this._checkedRows.includes(
String(row[this.id])
)}
>
</ha-checkbox>
</div>
`
: ""}
${Object.entries(this.columns).map(
([key, column]) => {
if (column.hidden) {
return "";
}
return html`
<div
role="cell"
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric":
column.type === "numeric",
"mdc-data-table__cell--icon":
column.type === "icon",
"mdc-data-table__cell--icon-button":
column.type === "icon-button",
"mdc-data-table__cell--overflow-menu":
column.type === "overflow-menu",
grows: Boolean(column.grows),
forceLTR: Boolean(column.forceLTR),
})}"
style=${column.width
? styleMap({
[column.grows ? "minWidth" : "width"]:
column.width,
maxWidth: column.maxWidth
? column.maxWidth
: "",
})
: ""}
>
${column.template
? column.template(row[key], row)
: row[key]}
</div>
`;
}
)}
</div>
`;
},
})}
</div>
.items=${this._items}
.renderItem=${this._renderRow}
></lit-virtualizer>
`}
</div>
</div>
`;
}
private _renderRow = (
row: DataTableRowData,
index: number
): TemplateResult => {
// not sure how this happens...
if (!row) {
return html``;
}
if (row.append) {
return html` <div class="mdc-data-table__row">${row.content}</div> `;
}
if (row.empty) {
return html` <div class="mdc-data-table__row"></div> `;
}
return html`
<div
aria-rowindex=${index + 2}
role="row"
.rowId=${row[this.id]}
@click=${this._handleRowClick}
class="mdc-data-table__row ${classMap({
"mdc-data-table__row--selected": this._checkedRows.includes(
String(row[this.id])
),
clickable: this.clickable,
})}"
aria-selected=${ifDefined(
this._checkedRows.includes(String(row[this.id])) ? true : undefined
)}
.selectable=${row.selectable !== false}
>
${this.selectable
? html`
<div
class="mdc-data-table__cell mdc-data-table__cell--checkbox"
role="cell"
>
<ha-checkbox
class="mdc-data-table__row-checkbox"
@change=${this._handleRowCheckboxClick}
.rowId=${row[this.id]}
.disabled=${row.selectable === false}
.checked=${this._checkedRows.includes(String(row[this.id]))}
>
</ha-checkbox>
</div>
`
: ""}
${Object.entries(this.columns).map(([key, column]) => {
if (column.hidden) {
return "";
}
return html`
<div
role="cell"
class="mdc-data-table__cell ${classMap({
"mdc-data-table__cell--numeric": column.type === "numeric",
"mdc-data-table__cell--icon": column.type === "icon",
"mdc-data-table__cell--icon-button":
column.type === "icon-button",
"mdc-data-table__cell--overflow-menu":
column.type === "overflow-menu",
grows: Boolean(column.grows),
forceLTR: Boolean(column.forceLTR),
})}"
style=${column.width
? styleMap({
[column.grows ? "minWidth" : "width"]: column.width,
maxWidth: column.maxWidth ? column.maxWidth : "",
})
: ""}
>
${column.template ? column.template(row[key], row) : row[key]}
</div>
`;
})}
</div>
`;
};
private async _sortFilterData() {
const startTime = new Date().getTime();
this.curRequest++;
@@ -970,6 +958,9 @@ export class HaDataTable extends LitElement {
.clickable {
cursor: pointer;
}
lit-virtualizer {
contain: size layout !important;
}
`,
];
}