@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
103 lines (102 loc) • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { IconSettings } from '@coveord/plasma-react-icons';
import { Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip } from '@mantine/core';
import { flexRender } from '@tanstack/react-table';
import { ActionIcon } from '../../ActionIcon/ActionIcon';
const DEFAULT_OPTIONS = {
footer: (max)=>`You can display up to ${max} columns.`,
limitReachedTooltip: 'You have reached the maximum display limit.',
alwaysVisibleTooltip: 'This column is always visible.'
};
export const TableColumnsSelector = ({ table, options })=>{
const { maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip } = {
...DEFAULT_OPTIONS,
...options
};
const allColumns = table.getAllLeafColumns();
const filteredColumns = allColumns.filter((column)=>!column.columnDef.meta?.controlColumn);
const selectedColumnsCount = filteredColumns.filter((column)=>column.getIsVisible()).length;
// Validate maxSelectableColumns - must be a positive integer to be effective
const effectiveMaxColumns = maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;
if (filteredColumns.length <= 0) {
return null;
}
const getColumnState = (column)=>{
const alwaysVisible = !column.getCanHide();
const isDisabled = effectiveMaxColumns !== undefined && selectedColumnsCount >= effectiveMaxColumns && !column.getIsVisible() || alwaysVisible;
const isVisible = column.getIsVisible() || alwaysVisible;
return {
alwaysVisible,
isDisabled,
isVisible
};
};
const columnOptions = filteredColumns.map((column)=>{
const { alwaysVisible, isDisabled, isVisible } = getColumnState(column);
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: isVisible,
disabled: isDisabled,
onChange: column.getToggleVisibilityHandler()
})
})
}, column.id);
});
return /*#__PURE__*/ _jsxs(Popover, {
position: "bottom-end",
shadow: "md",
children: [
/*#__PURE__*/ _jsx(Popover.Target, {
children: /*#__PURE__*/ _jsx(Tooltip, {
label: "Edit columns",
children: /*#__PURE__*/ _jsx(ActionIcon.Tertiary, {
"aria-label": "settings",
children: /*#__PURE__*/ _jsx(IconSettings, {
height: 16
})
})
})
}),
/*#__PURE__*/ _jsxs(Popover.Dropdown, {
miw: 270,
pb: "xs",
children: [
/*#__PURE__*/ _jsx(ScrollArea.Autosize, {
mah: 200,
type: "auto",
children: /*#__PURE__*/ _jsx(Stack, {
gap: "xs",
children: columnOptions
})
}),
effectiveMaxColumns && /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsx(Divider, {
my: "xs",
mx: "-sm"
}),
/*#__PURE__*/ _jsx(Text, {
size: "sm",
c: "dimmed",
children: typeof footer === 'function' ? footer(effectiveMaxColumns) : footer
})
]
})
]
})
]
});
};
//# sourceMappingURL=TableColumnsSelector.js.map