Skip to content

Commit 17abc0f

Browse files
ponnexcodevponnexcodev
committed
Add nonBlocking check to keyed directive for repainting
1 parent 4f7e56b commit 17abc0f

File tree

1 file changed

+91
-96
lines changed

1 file changed

+91
-96
lines changed

‎packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts

+91-96
Original file line numberDiff line numberDiff line change
@@ -498,110 +498,105 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
498498
}
499499

500500
const isLoading = (inputs.nonBlocking ? false : state.isLoading) || !!inputs.showLoading;
501-
return html`
501+
502+
const tableTemplate = html`
502503
<div
503504
class=${classMap({
504-
'table-wrapper': true,
505-
'can-scroll': state.canScroll,
505+
'table-list': true,
506+
hidden: isLoading,
506507
})}
507-
>
508-
${keyed(
509-
inputs.pagination?.currentPage,
510-
html`
511-
<div
512-
class=${classMap({
513-
'table-list': true,
514-
hidden: isLoading,
515-
})}
516-
${onResize((event) => {
517-
tableUpdate(event.target);
518-
519-
updateState({
520-
rowStyles: enabledColumns.reduce((accum, item) => {
521-
accum[item.key as string] = {
522-
width: undefined,
523-
left: undefined,
524-
};
525-
return accum;
526-
}, state.rowStyles),
508+
${onResize((event) => {
509+
tableUpdate(event.target);
510+
511+
updateState({
512+
rowStyles: enabledColumns.reduce((accum, item) => {
513+
accum[item.key as string] = {
514+
width: undefined,
515+
left: undefined,
516+
};
517+
return accum;
518+
}, state.rowStyles),
519+
});
520+
521+
setTimeout(() => {
522+
enabledColumns.forEach((column) => {
523+
const columnKey = column.key as string;
524+
525+
const rowItems = host.shadowRoot
526+
.querySelector('.table-list')
527+
?.querySelectorAll(`.row-item[data-column="${columnKey}"]`);
528+
529+
if (rowItems) {
530+
rowItems.forEach((rowItem) => {
531+
const left = rowItem.getBoundingClientRect().left;
532+
const currentWidth = getElementWidthWithMarginPadding(
533+
rowItem.querySelector('.row-content') as HTMLElement,
534+
).width;
535+
if (
536+
!state.rowStyles[columnKey]?.width ||
537+
currentWidth > (state.rowStyles[columnKey]?.width as number)
538+
) {
539+
updateState({
540+
rowStyles: {
541+
...state.rowStyles,
542+
[columnKey]: {
543+
width: currentWidth + 36,
544+
left: state.tableListLeft
545+
? left - state.tableListLeft
546+
: left,
547+
},
548+
},
549+
});
550+
}
527551
});
552+
}
553+
});
528554
529-
setTimeout(() => {
530-
enabledColumns.forEach((column) => {
531-
const columnKey = column.key as string;
532-
533-
const rowItems = host.shadowRoot
534-
.querySelector('.table-list')
535-
?.querySelectorAll(
536-
`.row-item[data-column="${columnKey}"]`,
537-
);
538-
539-
if (rowItems) {
540-
rowItems.forEach((rowItem) => {
541-
const left = rowItem.getBoundingClientRect().left;
542-
const currentWidth =
543-
getElementWidthWithMarginPadding(
544-
rowItem.querySelector(
545-
'.row-content',
546-
) as HTMLElement,
547-
).width;
548-
if (
549-
!state.rowStyles[columnKey]?.width ||
550-
currentWidth >
551-
(state.rowStyles[columnKey]
552-
?.width as number)
553-
) {
554-
updateState({
555-
rowStyles: {
556-
...state.rowStyles,
557-
[columnKey]: {
558-
width: currentWidth + 36,
559-
left: state.tableListLeft
560-
? left - state.tableListLeft
561-
: left,
562-
},
563-
},
564-
});
565-
}
566-
});
567-
}
568-
});
569-
570-
updateState({
571-
isLoading: false,
572-
});
573-
}, 0);
574-
})}
575-
${listen('scroll', (event) => {
576-
tableUpdate(event.target);
577-
})}
578-
${listen('keydown', (event) => {
579-
if (inputs.showLoading) {
580-
event.preventDefault();
581-
event.stopImmediatePropagation();
582-
}
583-
})}
584-
>
585-
${repeat(
586-
rows,
587-
(item, index) => index,
588-
(item: ListTableRow<any>, index: number) => {
589-
return listItem(item, index);
590-
},
591-
)}
592-
${renderIf(
593-
state.canScroll,
594-
html`
595-
<div class="scroll-indicator">
596-
<${ToniqIcon.assign({
597-
icon: ChevronsRight16Icon,
598-
})}></${ToniqIcon}>
599-
</div>
600-
`,
601-
)}
555+
updateState({
556+
isLoading: false,
557+
});
558+
}, 0);
559+
})}
560+
${listen('scroll', (event) => {
561+
tableUpdate(event.target);
562+
})}
563+
${listen('keydown', (event) => {
564+
if (inputs.showLoading) {
565+
event.preventDefault();
566+
event.stopImmediatePropagation();
567+
}
568+
})}
569+
>
570+
${repeat(
571+
rows,
572+
(item, index) => index,
573+
(item: ListTableRow<any>, index: number) => {
574+
return listItem(item, index);
575+
},
576+
)}
577+
${renderIf(
578+
state.canScroll,
579+
html`
580+
<div class="scroll-indicator">
581+
<${ToniqIcon.assign({
582+
icon: ChevronsRight16Icon,
583+
})}></${ToniqIcon}>
602584
</div>
603585
`,
604586
)}
587+
</div>
588+
`;
589+
590+
return html`
591+
<div
592+
class=${classMap({
593+
'table-wrapper': true,
594+
'can-scroll': state.canScroll,
595+
})}
596+
>
597+
${inputs.nonBlocking
598+
? keyed(inputs.pagination?.currentPage, tableTemplate)
599+
: tableTemplate}
605600
606601
<div
607602
class=${classMap({

0 commit comments

Comments
 (0)