Skip to content

Commit

Permalink
[patch][v16.22.10]Table alignment fixes (#145)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ponnexcodev
ponnexcodev authored Oct 19, 2024
1 parent fbe6b4a commit 23a1417
Show file tree
Hide file tree
Showing 6 changed files with 106 additions and 91 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.21.12",
"version": "16.22.10",
"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.21.12",
"version": "16.22.10",
"private": false,
"description": "Design system elements for Toniq Labs",
"keywords": [
Expand Down
179 changes: 97 additions & 82 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 @@ -15,6 +15,7 @@ import {
defineElementEvent,
html,
ifDefined,
keyed,
listen,
nothing,
onResize,
Expand Down Expand Up @@ -368,9 +369,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
left: number | undefined;
};
},
isPainting: false,
isStillPainting: true,
pageCountKey: 0,
isLoading: false,
tableListLeft: 0,
},
initCallback({inputs, state, updateState}) {
Expand Down Expand Up @@ -418,11 +417,6 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
'blocked-pagination': !!inputs.showLoading,
})}
${listen(ToniqPagination.events.pageChange, (event) => {
updateState({
pageCountKey: inputs.pagination?.pageCount
? inputs.pagination?.pageCount
: state.pageCountKey + 1,
});
dispatch(new events.pageChange(event.detail));
})}
></${ToniqPagination}>
Expand Down Expand Up @@ -503,90 +497,111 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
`;
}

const isLoading =
(inputs.nonBlocking ? false : state.isStillPainting) || !!inputs.showLoading;
const isLoading = (inputs.nonBlocking ? false : state.isLoading) || !!inputs.showLoading;
return html`
<div
class=${classMap({
'table-wrapper': true,
'can-scroll': state.canScroll,
})}
>
<div
class=${classMap({
'table-list': true,
hidden: isLoading,
})}
${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 = getElementWidthWithMarginPadding(
rowItem.querySelector('.row-content') as HTMLElement,
).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,
},
},
${keyed(
inputs.pagination?.currentPage,
html`
<div
class=${classMap({
'table-list': true,
hidden: isLoading,
})}
${onResize((event) => {
tableUpdate(event.target);
updateState({
rowStyles: enabledColumns.reduce((accum, item) => {
accum[item.key as string] = {
width: undefined,
left: undefined,
};
return accum;
}, state.rowStyles),
});
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 =
getElementWidthWithMarginPadding(
rowItem.querySelector(
'.row-content',
) as HTMLElement,
).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({
isLoading: false,
});
}, 0);
})}
${listen('scroll', (event) => {
tableUpdate(event.target);
})}
${listen('keydown', (event) => {
if (inputs.showLoading) {
event.preventDefault();
event.stopImmediatePropagation();
}
});
updateState({
isStillPainting: false,
});
}, 0);
})}
${listen('scroll', (event) => {
tableUpdate(event.target);
})}
${listen('keydown', (event) => {
if (inputs.showLoading) {
event.preventDefault();
event.stopImmediatePropagation();
}
})}
>
${repeat(
rows,
(item, index) => index,
(item: ListTableRow<any>, index: number) => {
return listItem(item, index);
},
)}
${renderIf(
state.canScroll,
html`
<div class="scroll-indicator">
<${ToniqIcon.assign({
icon: ChevronsRight16Icon,
})}></${ToniqIcon}>
</div>
`,
)}
</div>
})}
>
${repeat(
rows,
(item, index) => index,
(item: ListTableRow<any>, index: number) => {
return listItem(item, index);
},
)}
${renderIf(
state.canScroll,
html`
<div class="scroll-indicator">
<${ToniqIcon.assign({
icon: ChevronsRight16Icon,
})}></${ToniqIcon}>
</div>
`,
)}
</div>
`,
)}
<div
class=${classMap({
Expand Down Expand Up @@ -616,7 +631,7 @@ function getElementWidthWithMarginPadding(element: HTMLElement) {
const gap = parseFloat(style.gap) || 0;

return {
width: width + marginLeft + marginRight + paddingLeft + paddingRight + gap,
width: width + marginLeft + marginRight + gap,
margin: {
left: marginLeft,
right: marginRight,
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.21.12",
"version": "16.22.10",
"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.21.12",
"version": "16.22.10",
"private": true,
"scripts": {
"compile": "virmator compile",
Expand Down

0 comments on commit 23a1417

Please sign in to comment.