@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
75 lines (74 loc) • 2.36 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { ArrowHeadDownSize16Px, ArrowHeadUpSize16Px } from '@coveord/plasma-react-icons';
import { factory, useProps } from '@mantine/core';
import { ActionIcon } from '../../action-icon';
import { useTableContext } from '../TableContext';
const sharedProps = {
id: 'collapsible',
enableSorting: false,
enableHiding: false,
meta: {
controlColumn: true
},
header: '',
size: 84
};
/**
* Generic column to use when your table needs collapsible rows
*/ export const TableCollapsibleColumn = {
...sharedProps,
cell: (info)=>/*#__PURE__*/ _jsx(CollapsibleIcon, {
info: info
})
};
/**
* Generic column to use when your table needs an accordion (collapsible rows, but only one open at the time)
*/ export const TableAccordionColumn = {
...sharedProps,
cell: (info)=>{
const onToggle = ()=>{
// close all other rows when the current row not is expanded
if (!info.row.getIsExpanded()) {
info.table.toggleAllRowsExpanded(false);
}
};
return /*#__PURE__*/ _jsx(CollapsibleIcon, {
onToggle: onToggle,
info: info
});
}
};
const defaultProps = {
iconExpanded: /*#__PURE__*/ _jsx(ArrowHeadUpSize16Px, {
height: 16
}),
iconCollapsed: /*#__PURE__*/ _jsx(ArrowHeadDownSize16Px, {
height: 16
})
};
const CollapsibleIcon = factory((props, ref)=>{
const { getStyles } = useTableContext();
const { info, onToggle, iconExpanded, iconCollapsed, classNames, className, style, styles, ...others } = useProps('PlasmaTableCollapsibleColumn', defaultProps, props);
const handler = info.row.getToggleExpandedHandler();
const onClick = (e)=>{
e.stopPropagation();
onToggle?.(e);
handler();
};
return info.row.getCanExpand() ? /*#__PURE__*/ _jsx(ActionIcon, {
ref: ref,
onClick: onClick,
variant: "subtle",
color: "gray",
radius: "sm",
...getStyles('collapsibleIcon', {
className,
classNames,
styles,
style
}),
...others,
children: info.row.getIsExpanded() ? iconExpanded : iconCollapsed
}) : null;
});
//# sourceMappingURL=TableCollapsibleColumn.js.map