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