@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
76 lines (75 loc) • 2.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { IconChevronDown, IconChevronUp } from '@coveord/plasma-react-icons';
import { factory, useProps } from '@mantine/core';
import { ActionIcon } from '../../ActionIcon/ActionIcon.js';
import { useTableContext } from '../TableContext.js';
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(IconChevronUp, {
"aria-label": "Collapse",
size: 16
}),
iconCollapsed: /*#__PURE__*/ _jsx(IconChevronDown, {
"aria-label": "Expand",
size: 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.Quaternary, {
ref: ref,
onClick: onClick,
color: "gray",
radius: "sm",
...getStyles('collapsibleIcon', {
className,
classNames,
styles,
style
}),
...others,
children: info.row.getIsExpanded() ? iconExpanded : iconCollapsed
}) : null;
});
//# sourceMappingURL=TableCollapsibleColumn.js.map