Skip to content

Commit 0686150

Browse files
ponnexcodevponnexcodev
committed
Updates
1 parent a75b41b commit 0686150

File tree

1 file changed

+109
-109
lines changed

1 file changed

+109
-109
lines changed

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

+109-109
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
classMap,
77
css,
88
defineElementEvent,
9+
guard,
910
html,
1011
ifDefined,
1112
listen,
@@ -21,18 +22,18 @@ import {ToniqIcon} from '../toniq-icon/toniq-icon.element';
2122
import {ToniqLoading, ToniqLoadingSizeEnum} from '../toniq-loading/toniq-loading.element';
2223
import {ToniqPagination} from '../toniq-pagination/toniq-pagination.element';
2324

24-
export type ColumnsBase = ReadonlyArray<
25-
Readonly<{
26-
key: PropertyKey;
27-
title: string;
28-
disabled?: boolean;
29-
option?: {
30-
sticky?: boolean | undefined;
31-
spaceEvenly?: boolean | undefined;
32-
};
33-
style?: CSSResult;
34-
}>
35-
>;
25+
export type ListTableColumn = Readonly<{
26+
key: PropertyKey;
27+
title: string;
28+
disabled?: boolean;
29+
option?: {
30+
sticky?: boolean | undefined;
31+
spaceEvenly?: boolean | undefined;
32+
};
33+
style?: CSSResult;
34+
}>;
35+
36+
export type ColumnsBase = ReadonlyArray<ListTableColumn>;
3637

3738
export type ListTableRow<Columns extends ColumnsBase> = {
3839
cells: Readonly<
@@ -318,6 +319,94 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
318319
});
319320
}
320321

322+
function listItem(columnItem: ListTableColumn) {
323+
const rowItems = rows.map(
324+
(
325+
row,
326+
): {
327+
contents: HtmlInterpolation;
328+
rowActions: typeof row.rowActions;
329+
} => ({
330+
contents: row.cells[columnItem.key as keyof typeof row],
331+
rowActions: row.rowActions,
332+
}),
333+
);
334+
335+
function calculateLeft(columnKey: string) {
336+
const wrapperEl = host.shadowRoot.querySelector(
337+
`.column-wrapper[data-column="${columnKey}"]`,
338+
);
339+
340+
if (wrapperEl instanceof HTMLElement) {
341+
const left = wrapperEl.getBoundingClientRect().left;
342+
const finalLeft = state.tableListLeft ? left - state.tableListLeft : left;
343+
return css`
344+
left: ${finalLeft > 0 ? finalLeft : 0}px;
345+
`;
346+
}
347+
348+
return css`
349+
left: 0px;
350+
`;
351+
}
352+
353+
const isSticky = !!columnItem.option?.sticky && state.canScroll;
354+
355+
return html`
356+
<div
357+
data-column=${columnItem.key as string}
358+
class=${classMap({
359+
'column-wrapper': true,
360+
sticky: isSticky,
361+
fill: !!columnItem.option?.spaceEvenly,
362+
})}
363+
style=${ifDefined(
364+
isSticky ? calculateLeft(columnItem.key as string) : undefined,
365+
)}
366+
>
367+
${repeat(
368+
rowItems,
369+
(rowItem) => rowItem,
370+
(rowItem, rowIndex) => {
371+
return html`
372+
<div
373+
class="column-content"
374+
${rowIndex > 0
375+
? listen('click', (clickEvent) => {
376+
rowItem?.rowActions?.click?.({
377+
clickEvent,
378+
dispatch,
379+
});
380+
})
381+
: nothing}
382+
>
383+
${renderIf(
384+
rowIndex === 0,
385+
html`
386+
<span class="header" style=${columnItem.style}>
387+
${columnItem.title}
388+
</span>
389+
`,
390+
html`
391+
<div
392+
class="content-wrapper"
393+
${listen('click', (event) => {
394+
event.preventDefault();
395+
event.stopPropagation();
396+
})}
397+
>
398+
${rowItem.contents}
399+
</div>
400+
`,
401+
)}
402+
</div>
403+
`;
404+
},
405+
)}
406+
</div>
407+
`;
408+
}
409+
321410
const paginationTemplate =
322411
inputs.pagination && inputs.pagination?.pageCount > 1
323412
? html`
@@ -363,103 +452,14 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
363452
}
364453
})}
365454
>
366-
${repeat(
367-
enabledColumns,
368-
(columnItem) => columnItem,
369-
(columnItem) => {
370-
const rowItems = rows.map(
371-
(
372-
row,
373-
): {
374-
contents: HtmlInterpolation;
375-
rowActions: typeof row.rowActions;
376-
} => ({
377-
contents: row.cells[columnItem.key as keyof typeof row],
378-
rowActions: row.rowActions,
379-
}),
380-
);
381-
382-
function calculateLeft(columnKey: string) {
383-
const wrapperEl = host.shadowRoot.querySelector(
384-
`.column-wrapper[data-column="${columnKey}"]`,
385-
);
386-
387-
if (wrapperEl instanceof HTMLElement) {
388-
const left = wrapperEl.getBoundingClientRect().left;
389-
const finalLeft = state.tableListLeft
390-
? left - state.tableListLeft
391-
: left;
392-
return css`
393-
left: ${finalLeft > 0 ? finalLeft : 0}px;
394-
`;
395-
}
396-
397-
return css`
398-
left: 0px;
399-
`;
400-
}
401-
402-
const isSticky = !!columnItem.option?.sticky && state.canScroll;
403-
404-
return html`
405-
<div
406-
data-column=${columnItem.key as string}
407-
class=${classMap({
408-
'column-wrapper': true,
409-
sticky: isSticky,
410-
fill: !!columnItem.option?.spaceEvenly,
411-
})}
412-
style=${ifDefined(
413-
isSticky
414-
? calculateLeft(columnItem.key as string)
415-
: undefined,
416-
)}
417-
>
418-
${repeat(
419-
rowItems,
420-
(rowItem) => rowItem,
421-
(rowItem, rowIndex) => {
422-
return html`
423-
<div
424-
class="column-content"
425-
${rowIndex > 0
426-
? listen('click', (clickEvent) => {
427-
rowItem?.rowActions?.click?.({
428-
clickEvent,
429-
dispatch,
430-
});
431-
})
432-
: nothing}
433-
>
434-
${renderIf(
435-
rowIndex === 0,
436-
html`
437-
<span
438-
class="header"
439-
style=${columnItem.style}
440-
>
441-
${columnItem.title}
442-
</span>
443-
`,
444-
html`
445-
<div
446-
class="content-wrapper"
447-
${listen('click', (event) => {
448-
event.preventDefault();
449-
event.stopPropagation();
450-
})}
451-
>
452-
${rowItem.contents}
453-
</div>
454-
`,
455-
)}
456-
</div>
457-
`;
458-
},
459-
)}
460-
</div>
461-
`;
462-
},
455+
${guard([rows], () =>
456+
repeat(
457+
enabledColumns,
458+
(columnItem) => columnItem,
459+
(columnItem) => {
460+
return listItem(columnItem);
461+
},
462+
),
463463
)}
464464
${renderIf(
465465
state.canScroll,

0 commit comments

Comments
 (0)