perf(08-03): replace class string construction with classMap directive in renderTrackRow
- Import classMap from lit/directives/class-map.js - Replace array filter/join class construction with classMap for track-row - Convert fav-icon conditional class to classMap - Convert cell alignment classes to classMap - Eliminates per-row array allocation and string join in render hot path
This commit is contained in:
@@ -26,6 +26,7 @@ import {
|
|||||||
} from './columns';
|
} from './columns';
|
||||||
import type { ColumnDef } from './columns';
|
import type { ColumnDef } from './columns';
|
||||||
import { repeat } from 'lit/directives/repeat.js';
|
import { repeat } from 'lit/directives/repeat.js';
|
||||||
|
import { classMap } from 'lit/directives/class-map.js';
|
||||||
import {
|
import {
|
||||||
rankTracks,
|
rankTracks,
|
||||||
highlightText,
|
highlightText,
|
||||||
@@ -1527,14 +1528,6 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
|||||||
track.FilePath,
|
track.FilePath,
|
||||||
);
|
);
|
||||||
|
|
||||||
const classes = [
|
|
||||||
'track-row',
|
|
||||||
active ? 'active' : '',
|
|
||||||
selected ? 'selected' : '',
|
|
||||||
]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(' ');
|
|
||||||
|
|
||||||
const cols = this.activeColumns;
|
const cols = this.activeColumns;
|
||||||
|
|
||||||
const isFav = this.favCtrl.isFavorited(
|
const isFav = this.favCtrl.isFavorited(
|
||||||
@@ -1546,7 +1539,11 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
|||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div
|
<div
|
||||||
class=${classes}
|
class=${classMap({
|
||||||
|
'track-row': true,
|
||||||
|
active,
|
||||||
|
selected,
|
||||||
|
})}
|
||||||
draggable="true"
|
draggable="true"
|
||||||
@click=${(e: MouseEvent) =>
|
@click=${(e: MouseEvent) =>
|
||||||
this.onTrackRowClick(e, track, index)}
|
this.onTrackRowClick(e, track, index)}
|
||||||
@@ -1559,7 +1556,10 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
|||||||
@dragend=${this.onTrackDragEnd}
|
@dragend=${this.onTrackDragEnd}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="fav-icon ${isFav ? 'favorited' : ''}"
|
class=${classMap({
|
||||||
|
'fav-icon': true,
|
||||||
|
favorited: isFav,
|
||||||
|
})}
|
||||||
@click=${(e: MouseEvent) => {
|
@click=${(e: MouseEvent) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
void this.favCtrl.toggleFavorite(
|
void this.favCtrl.toggleFavorite(
|
||||||
@@ -1575,11 +1575,6 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
|||||||
${cols.map((col) => {
|
${cols.map((col) => {
|
||||||
const val = col.accessor(track);
|
const val = col.accessor(track);
|
||||||
const centered = val === '\u2014';
|
const centered = val === '\u2014';
|
||||||
const align = centered
|
|
||||||
? 'cell-center'
|
|
||||||
: col.align === 'right'
|
|
||||||
? 'cell-right'
|
|
||||||
: '';
|
|
||||||
const term =
|
const term =
|
||||||
this.searchCtrl.term;
|
this.searchCtrl.term;
|
||||||
const display = term
|
const display = term
|
||||||
@@ -1587,7 +1582,11 @@ export class TrackList extends LitElement implements SelectionHost, ContextMenuH
|
|||||||
: val;
|
: val;
|
||||||
|
|
||||||
return html`
|
return html`
|
||||||
<div class="cell ${align}">
|
<div class=${classMap({
|
||||||
|
cell: true,
|
||||||
|
'cell-center': centered,
|
||||||
|
'cell-right': !centered && col.align === 'right',
|
||||||
|
})}>
|
||||||
${display}
|
${display}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|||||||
Reference in New Issue
Block a user