Skip to content

Commit fcde856

Browse files
ponnexcodevponnexcodev
authored
Toniq list table revamp (#128)
1 parent cd4a78e commit fcde856

File tree

6 files changed

+59
-65
lines changed

6 files changed

+59
-65
lines changed

‎package-lock.json

+5-5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@toniq-labs/design-system-root",
3-
"version": "16.17.8",
3+
"version": "16.18.3",
44
"private": true,
55
"description": "Root design system mono-repo package.",
66
"homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

‎packages/design-system/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@toniq-labs/design-system",
3-
"version": "16.17.8",
3+
"version": "16.18.3",
44
"private": false,
55
"description": "Design system elements for Toniq Labs",
66
"keywords": [

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

+50-56
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
367367
};
368368
},
369369
isPainting: false,
370-
itemsPainted: 0,
370+
isStillPainting: true,
371371
pageCountKey: 0,
372372
tableListLeft: 0,
373373
},
@@ -383,7 +383,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
383383
}, state.rowStyles),
384384
});
385385
},
386-
renderCallback({inputs, state, updateState, events, dispatch}) {
386+
renderCallback({inputs, state, updateState, events, dispatch, host}) {
387387
const enabledColumns = inputs.columns.filter((column) => !column.disabled);
388388
// Duplicate first entry for the header column
389389
const rows = [
@@ -463,75 +463,32 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
463463
enabledColumns,
464464
(item, index) => index,
465465
(item, index) => {
466-
const contents = row.cells[item.key as keyof typeof row];
466+
const itemKey = item.key as keyof typeof row;
467+
const contents = row.cells[itemKey];
467468
468469
const rowItemLeftStyle = css`
469-
left: ${unsafeCSS(
470-
`${state.rowStyles[item.key as string]?.left}px`,
471-
)};
470+
left: ${unsafeCSS(`${state.rowStyles[itemKey]?.left}px`)};
472471
`;
473472
474473
const rowItemMinWidthStyle = css`
475474
min-width: ${index >= enabledColumns.length - 1
476475
? unsafeCSS('unset')
477-
: unsafeCSS(`${state.rowStyles[item.key as string]?.width}px`)};
476+
: unsafeCSS(`${state.rowStyles[itemKey]?.width}px`)};
478477
`;
479478
480479
return html`
481480
<div
481+
data-column=${itemKey}
482482
class=${classMap({
483483
'row-item': true,
484484
sticky: !!item.option?.sticky && state.canScroll,
485485
fill: !!item.option?.spaceEvenly,
486486
})}
487487
style=${ifDefined(
488488
rowItemLeftStyle || rowItemMinWidthStyle
489-
? `${rowItemLeftStyle} ${rowItemMinWidthStyle}`
489+
? `${rowItemLeftStyle ? rowItemLeftStyle : ''} ${rowItemMinWidthStyle ? rowItemMinWidthStyle : ''}`
490490
: undefined,
491491
)}
492-
${onResize((event) => {
493-
function updateRowStyles() {
494-
const container = event.target;
495-
if (!(container instanceof HTMLElement)) {
496-
throw new Error('onResize event had no target');
497-
}
498-
499-
const left = container.getBoundingClientRect().left;
500-
501-
const currentWidth = (
502-
container.querySelector(
503-
'.row-content',
504-
) as HTMLElement
505-
).getBoundingClientRect().width;
506-
507-
if (
508-
!state.rowStyles[item.key as string]?.width ||
509-
currentWidth >
510-
(state.rowStyles[item.key as string]
511-
?.width as number)
512-
) {
513-
updateState({
514-
rowStyles: {
515-
...state.rowStyles,
516-
[item.key]: {
517-
width: currentWidth,
518-
left: state.tableListLeft
519-
? left - state.tableListLeft
520-
: left,
521-
},
522-
},
523-
});
524-
}
525-
}
526-
if (rowIndex < 2 || !inputs.nonBlocking) {
527-
setTimeout(() => {
528-
updateRowStyles();
529-
updateState({
530-
itemsPainted: state.itemsPainted + 1,
531-
});
532-
}, 0);
533-
}
534-
})}
535492
>
536493
<div
537494
class=${classMap({
@@ -558,8 +515,8 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
558515
`;
559516
}
560517

561-
const isStillPainting = state.itemsPainted < enabledColumns.length * rows.length;
562-
const isLoading = (inputs.nonBlocking ? false : isStillPainting) || !!inputs.showLoading;
518+
const isLoading =
519+
(inputs.nonBlocking ? false : state.isStillPainting) || !!inputs.showLoading;
563520
return html`
564521
<div
565522
class=${classMap({
@@ -574,6 +531,45 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
574531
})}
575532
${onResize((event) => {
576533
tableUpdate(event.target);
534+
535+
setTimeout(() => {
536+
enabledColumns.forEach((column) => {
537+
const columnKey = column.key as string;
538+
539+
const rowItems = host.shadowRoot
540+
.querySelector('.table-list')
541+
?.querySelectorAll(`.row-item[data-column="${columnKey}"]`);
542+
543+
if (rowItems) {
544+
rowItems.forEach((rowItem) => {
545+
const left = rowItem.getBoundingClientRect().left;
546+
const currentWidth = (
547+
rowItem.querySelector('.row-content') as HTMLElement
548+
).getBoundingClientRect().width;
549+
if (
550+
!state.rowStyles[columnKey]?.width ||
551+
currentWidth >
552+
(state.rowStyles[columnKey]?.width as number)
553+
) {
554+
updateState({
555+
rowStyles: {
556+
...state.rowStyles,
557+
[columnKey]: {
558+
width: currentWidth,
559+
left: state.tableListLeft
560+
? left - state.tableListLeft
561+
: left,
562+
},
563+
},
564+
});
565+
}
566+
});
567+
}
568+
});
569+
updateState({
570+
isStillPainting: false,
571+
});
572+
}, 0);
577573
})}
578574
${listen('scroll', (event) => {
579575
tableUpdate(event.target);
@@ -589,9 +585,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
589585
rows,
590586
(item, index) => index,
591587
(item: ListTableRow<any>, index: number) => {
592-
return html`
593-
${listItem(item, index)}
594-
`;
588+
return listItem(item, index);
595589
},
596590
)}
597591
${renderIf(

‎packages/native-elements-test/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@toniq-labs/design-system-native-elements-test",
3-
"version": "16.17.8",
3+
"version": "16.18.3",
44
"private": true,
55
"scripts": {
66
"compile": "virmator compile",

‎packages/scripts/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@toniq-labs/design-system-scripts",
3-
"version": "16.17.8",
3+
"version": "16.18.3",
44
"private": true,
55
"scripts": {
66
"compile": "virmator compile",

0 commit comments

Comments
 (0)