@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
122 lines (121 loc) • 5.82 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Collapse, useProps } from '@mantine/core';
import { flexRender } from '@tanstack/react-table';
import { defaultColumnSizing } from '@tanstack/table-core';
import { Fragment } from 'react';
import { identity } from '../../../../utils';
import { useTableContext } from '../../TableContext';
import { TableCollapsibleColumn } from '../../table-column/TableCollapsibleColumn';
import { TableSelectableColumn } from '../../table-column/TableSelectableColumn';
import { TableLoading } from '../../table-loading/TableLoading';
import { useRowLayout } from './RowLayoutContext';
const defaultProps = {};
export const RowLayoutBody = (props)=>{
const ctx = useRowLayout();
const { getRowExpandedContent, onRowDoubleClick, loading, classNames, className, styles, style, getRowAttributes, ...others } = useProps('RowLayoutBody', defaultProps, props);
const { table, store } = useTableContext();
const toggleCollapsible = (el)=>{
const cell = el.children[el.children.length - 1];
cell.querySelector('button').click();
};
const rows = table.getRowModel()?.rows.map((row)=>{
const rowChildren = getRowExpandedContent?.(row.original, row.index, row) ?? null;
const isSelected = !!row.getIsSelected();
const shouldKeepSelection = store.rowSelectionForced && isSelected;
const onClick = (event)=>{
if (rowChildren) {
toggleCollapsible(event.currentTarget);
}
if (store.rowSelectionEnabled && !store.multiRowSelectionEnabled && !shouldKeepSelection) {
row.toggleSelected();
}
};
return /*#__PURE__*/ _jsxs(Fragment, {
children: [
/*#__PURE__*/ _jsx("tr", {
onClick: onClick,
onDoubleClick: ()=>{
onRowDoubleClick?.(row.original, row.index, row);
},
"data-selectable": store.rowSelectionEnabled,
"data-selected": isSelected,
"data-multi-selection": store.multiRowSelectionEnabled,
"aria-selected": isSelected,
"data-testid": row.id,
...ctx.getStyles('row', {
classNames,
className,
styles,
style
}),
...getRowAttributes?.(row.original, row.index, row) ?? {},
...others,
children: row.getVisibleCells().map((cell)=>{
const columnSizing = {
...defaultColumnSizing,
size: cell.column.columnDef.size,
minSize: cell.column.columnDef.minSize,
maxSize: cell.column.columnDef.maxSize
};
const onCollapsibleCellClick = (event)=>{
if (cell.column.id === TableSelectableColumn.id && store.rowSelectionEnabled) {
event.stopPropagation();
}
};
return /*#__PURE__*/ _jsx("td", {
"data-testid": cell.id,
className: ctx.getStyles('cell', {
classNames,
styles
}).className,
style: {
width: columnSizing.size ? `${columnSizing.size}px` : 'auto',
minWidth: `${columnSizing.minSize}px`,
maxWidth: `${columnSizing.maxSize}px`,
...ctx.getStyles('cell', {
classNames,
styles
}).style
},
"data-collapsible-cell": cell.column.id === TableCollapsibleColumn.id,
onClick: onCollapsibleCellClick,
children: /*#__PURE__*/ _jsx(TableLoading, {
visible: loading,
children: flexRender(cell.column.columnDef.cell, cell.getContext())
})
}, cell.id);
})
}),
rowChildren ? /*#__PURE__*/ _jsx("tr", {
...ctx.getStyles('collapsibleRow', {
classNames,
styles
}),
children: /*#__PURE__*/ _jsx("td", {
colSpan: table.getAllColumns().length,
style: {
padding: 0
},
children: /*#__PURE__*/ _jsx(Collapse, {
in: row.getIsExpanded(),
children: /*#__PURE__*/ _jsx(Box, {
...ctx.getStyles('collapsibleWrapper', {
classNames,
styles
}),
px: "sm",
py: "xs",
children: rowChildren
})
})
})
}) : null
]
}, row.id);
});
return /*#__PURE__*/ _jsx(_Fragment, {
children: rows
});
};
RowLayoutBody.extend = identity;
//# sourceMappingURL=RowLayoutBody.js.map