@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
99 lines (98 loc) • 4.88 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Button, Checkbox, Divider, factory, Grid, Popover, ScrollArea, Stack, Tooltip, useProps } from '@mantine/core';
import { flexRender } from '@tanstack/react-table';
import { TableComponentsOrder } from '../Table';
import { useTableContext } from '../TableContext';
const defaultProps = {
label: 'Edit columns',
buttonVariant: 'outline',
limitReachedTooltip: 'You have reached the maximum display limit.',
alwaysVisibleTooltip: 'This column is always visible.',
showVisibleCountLabel: false
};
export const TableColumnsSelector = factory((props, ref)=>{
const { getStyles } = useTableContext();
const { label, buttonVariant, showVisibleCountLabel, maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip, classNames, className, styles, style, vars, ...others } = useProps('TableColumnsSelector', defaultProps, props);
const { table } = useTableContext();
const allColumns = table.getAllLeafColumns();
const filteredColumns = allColumns.filter((column)=>!column.columnDef.meta?.controlColumn);
const selectedColumnsCount = filteredColumns.filter((column)=>column.getIsVisible()).length;
if (filteredColumns.length <= 0) {
return null;
}
const stylesApiProps = {
classNames,
styles
};
return /*#__PURE__*/ _jsx(Grid.Col, {
span: "content",
order: TableComponentsOrder.ColumnsSelector,
...getStyles('columnSelector', {
className,
style,
...stylesApiProps
}),
...others,
children: /*#__PURE__*/ _jsxs(Popover, {
withinPortal: true,
position: "bottom",
shadow: "md",
children: [
/*#__PURE__*/ _jsx(Popover.Target, {
children: /*#__PURE__*/ _jsxs(Button, {
variant: buttonVariant,
children: [
label,
showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''
]
})
}),
/*#__PURE__*/ _jsxs(Popover.Dropdown, {
miw: 240,
children: [
/*#__PURE__*/ _jsx(ScrollArea.Autosize, {
mah: 154,
children: /*#__PURE__*/ _jsx(Stack, {
...getStyles('columnSelectorWrapper', stylesApiProps),
children: filteredColumns.map((column)=>{
const alwaysVisible = !column.getCanHide();
const isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible() || alwaysVisible;
return /*#__PURE__*/ _jsx(Tooltip, {
label: alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip,
disabled: !isDisabled,
position: "left",
children: /*#__PURE__*/ _jsx("div", {
children: /*#__PURE__*/ _jsx(Checkbox, {
label: flexRender(column.columnDef.header, {
table,
column,
header: {
column
}
}),
name: column.id,
checked: column.getIsVisible() || alwaysVisible,
disabled: isDisabled,
onChange: column.getToggleVisibilityHandler()
}, column.id)
})
}, column.id);
})
})
}),
maxSelectableColumns && /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx(Divider, {
mb: "xs",
mt: "sm"
}),
footer
]
})
]
})
]
})
});
});
//# sourceMappingURL=TableColumnsSelector.js.map