Skip to content

Commit

Permalink
Toniq list table revamp (#128)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ponnexcodev
ponnexcodev authored Jun 18, 2024
1 parent cd4a78e commit fcde856
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 65 deletions.
10 changes: 5 additions & 5 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@toniq-labs/design-system-root",
"version": "16.17.8",
"version": "16.18.3",
"private": true,
"description": "Root design system mono-repo package.",
"homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@toniq-labs/design-system",
"version": "16.17.8",
"version": "16.18.3",
"private": false,
"description": "Design system elements for Toniq Labs",
"keywords": [
Expand Down
106 changes: 50 additions & 56 deletions packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
};
},
isPainting: false,
itemsPainted: 0,
isStillPainting: true,
pageCountKey: 0,
tableListLeft: 0,
},
Expand All @@ -383,7 +383,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
}, state.rowStyles),
});
},
renderCallback({inputs, state, updateState, events, dispatch}) {
renderCallback({inputs, state, updateState, events, dispatch, host}) {
const enabledColumns = inputs.columns.filter((column) => !column.disabled);
// Duplicate first entry for the header column
const rows = [
Expand Down Expand Up @@ -463,75 +463,32 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
enabledColumns,
(item, index) => index,
(item, index) => {
const contents = row.cells[item.key as keyof typeof row];
const itemKey = item.key as keyof typeof row;
const contents = row.cells[itemKey];
const rowItemLeftStyle = css`
left: ${unsafeCSS(
`${state.rowStyles[item.key as string]?.left}px`,
)};
left: ${unsafeCSS(`${state.rowStyles[itemKey]?.left}px`)};
`;
const rowItemMinWidthStyle = css`
min-width: ${index >= enabledColumns.length - 1
? unsafeCSS('unset')
: unsafeCSS(`${state.rowStyles[item.key as string]?.width}px`)};
: unsafeCSS(`${state.rowStyles[itemKey]?.width}px`)};
`;
return html`
<div
data-column=${itemKey}
class=${classMap({
'row-item': true,
sticky: !!item.option?.sticky && state.canScroll,
fill: !!item.option?.spaceEvenly,
})}
style=${ifDefined(
rowItemLeftStyle || rowItemMinWidthStyle
? `${rowItemLeftStyle} ${rowItemMinWidthStyle}`
? `${rowItemLeftStyle ? rowItemLeftStyle : ''} ${rowItemMinWidthStyle ? rowItemMinWidthStyle : ''}`
: undefined,
)}
${onResize((event) => {
function updateRowStyles() {
const container = event.target;
if (!(container instanceof HTMLElement)) {
throw new Error('onResize event had no target');
}
const left = container.getBoundingClientRect().left;
const currentWidth = (
container.querySelector(
'.row-content',
) as HTMLElement
).getBoundingClientRect().width;
if (
!state.rowStyles[item.key as string]?.width ||
currentWidth >
(state.rowStyles[item.key as string]
?.width as number)
) {
updateState({
rowStyles: {
...state.rowStyles,
[item.key]: {
width: currentWidth,
left: state.tableListLeft
? left - state.tableListLeft
: left,
},
},
});
}
}
if (rowIndex < 2 || !inputs.nonBlocking) {
setTimeout(() => {
updateRowStyles();
updateState({
itemsPainted: state.itemsPainted + 1,
});
}, 0);
}
})}
>
<div
class=${classMap({
Expand All @@ -558,8 +515,8 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
`;
}

const isStillPainting = state.itemsPainted < enabledColumns.length * rows.length;
const isLoading = (inputs.nonBlocking ? false : isStillPainting) || !!inputs.showLoading;
const isLoading =
(inputs.nonBlocking ? false : state.isStillPainting) || !!inputs.showLoading;
return html`
<div
class=${classMap({
Expand All @@ -574,6 +531,45 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
})}
${onResize((event) => {
tableUpdate(event.target);
setTimeout(() => {
enabledColumns.forEach((column) => {
const columnKey = column.key as string;
const rowItems = host.shadowRoot
.querySelector('.table-list')
?.querySelectorAll(`.row-item[data-column="${columnKey}"]`);
if (rowItems) {
rowItems.forEach((rowItem) => {
const left = rowItem.getBoundingClientRect().left;
const currentWidth = (
rowItem.querySelector('.row-content') as HTMLElement
).getBoundingClientRect().width;
if (
!state.rowStyles[columnKey]?.width ||
currentWidth >
(state.rowStyles[columnKey]?.width as number)
) {
updateState({
rowStyles: {
...state.rowStyles,
[columnKey]: {
width: currentWidth,
left: state.tableListLeft
? left - state.tableListLeft
: left,
},
},
});
}
});
}
});
updateState({
isStillPainting: false,
});
}, 0);
})}
${listen('scroll', (event) => {
tableUpdate(event.target);
Expand All @@ -589,9 +585,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
rows,
(item, index) => index,
(item: ListTableRow<any>, index: number) => {
return html`
${listItem(item, index)}
`;
return listItem(item, index);
},
)}
${renderIf(
Expand Down
2 changes: 1 addition & 1 deletion packages/native-elements-test/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@toniq-labs/design-system-native-elements-test",
"version": "16.17.8",
"version": "16.18.3",
"private": true,
"scripts": {
"compile": "virmator compile",
Expand Down
2 changes: 1 addition & 1 deletion packages/scripts/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@toniq-labs/design-system-scripts",
"version": "16.17.8",
"version": "16.18.3",
"private": true,
"scripts": {
"compile": "virmator compile",
Expand Down

0 comments on commit fcde856

Please sign in to comment.