@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
127 lines (126 loc) • 6.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "TableColumnsSelector", {
enumerable: true,
get: function() {
return TableColumnsSelector;
}
});
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _reacttable = require("@tanstack/react-table");
var _Table = require("../Table");
var _TableContext = require("../TableContext");
var defaultProps = {
label: 'Edit columns',
buttonVariant: 'outline',
limitReachedTooltip: 'You have reached the maximum display limit.',
alwaysVisibleTooltip: 'This column is always visible.',
showVisibleCountLabel: false
};
var TableColumnsSelector = (0, _core.factory)(function(props, ref) {
var getStyles = (0, _TableContext.useTableContext)().getStyles;
var _useProps = (0, _core.useProps)('TableColumnsSelector', defaultProps, props), label = _useProps.label, buttonVariant = _useProps.buttonVariant, showVisibleCountLabel = _useProps.showVisibleCountLabel, maxSelectableColumns = _useProps.maxSelectableColumns, footer = _useProps.footer, limitReachedTooltip = _useProps.limitReachedTooltip, alwaysVisibleTooltip = _useProps.alwaysVisibleTooltip, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
"label",
"buttonVariant",
"showVisibleCountLabel",
"maxSelectableColumns",
"footer",
"limitReachedTooltip",
"alwaysVisibleTooltip",
"classNames",
"className",
"styles",
"style",
"vars"
]);
var table = (0, _TableContext.useTableContext)().table;
var allColumns = table.getAllLeafColumns();
var filteredColumns = allColumns.filter(function(column) {
var _column_columnDef_meta;
return !((_column_columnDef_meta = column.columnDef.meta) === null || _column_columnDef_meta === void 0 ? void 0 : _column_columnDef_meta.controlColumn);
});
var selectedColumnsCount = filteredColumns.filter(function(column) {
return column.getIsVisible();
}).length;
if (filteredColumns.length <= 0) {
return null;
}
var stylesApiProps = {
classNames: classNames,
styles: styles
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Grid.Col, _object_spread_props._(_object_spread._({
span: "content",
order: _Table.TableComponentsOrder.ColumnsSelector
}, getStyles('columnSelector', _object_spread._({
className: className,
style: style
}, stylesApiProps)), others), {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
withinPortal: true,
position: "bottom",
shadow: "md",
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Button, {
variant: buttonVariant,
children: [
label,
showVisibleCountLabel ? " (".concat(selectedColumnsCount, ")") : ''
]
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover.Dropdown, {
miw: 240,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.ScrollArea.Autosize, {
mah: 154,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, _object_spread_props._(_object_spread._({}, getStyles('columnSelectorWrapper', stylesApiProps)), {
children: filteredColumns.map(function(column) {
var alwaysVisible = !column.getCanHide();
var isDisabled = selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible() || alwaysVisible;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
label: alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip,
disabled: !isDisabled,
position: "left",
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Checkbox, {
label: (0, _reacttable.flexRender)(column.columnDef.header, {
table: table,
column: column,
header: {
column: column
}
}),
name: column.id,
checked: column.getIsVisible() || alwaysVisible,
disabled: isDisabled,
onChange: column.getToggleVisibilityHandler()
}, column.id)
})
}, column.id);
})
}))
}),
maxSelectableColumns && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, {
mb: "xs",
mt: "sm"
}),
footer
]
})
]
})
]
})
}));
});
//# sourceMappingURL=TableColumnsSelector.js.map