@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
99 lines (98 loc) • 3.81 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Th", {
enumerable: true,
get: function() {
return Th;
}
});
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 _plasmareacticons = require("@coveord/plasma-react-icons");
var _core = require("@mantine/core");
var _reacttable = require("@tanstack/react-table");
var _utils = require("../../../utils");
var _TableContext = require("../TableContext");
var SortingIcons = {
asc: _plasmareacticons.ArrowUpSize16Px,
desc: _plasmareacticons.ArrowDownSize16Px,
none: _plasmareacticons.DoubleArrowHeadVSize16Px
};
var SortingLabels = {
asc: 'ascending',
desc: 'descending',
none: 'none'
};
var defaultProps = {
sortingIcons: SortingIcons
};
var Th = function(props) {
var getStyles = (0, _TableContext.useTableContext)().getStyles;
var _useProps = (0, _core.useProps)('PlasmaTableTh', defaultProps, props), header = _useProps.header, sortingIcons = _useProps.sortingIcons, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, vars = _useProps.vars, others = _object_without_properties._(_useProps, [
"header",
"sortingIcons",
"classNames",
"className",
"styles",
"style",
"vars"
]);
var columnSizing = _object_spread_props._(_object_spread._({}, _reacttable.defaultColumnSizing), {
size: header.column.columnDef.size,
minSize: header.column.columnDef.minSize,
maxSize: header.column.columnDef.maxSize
});
var thStyles = getStyles('th', {
classNames: classNames,
className: className,
styles: styles,
style: style
});
if (header.isPlaceholder) {
return null;
}
if (!header.column.getCanSort()) {
var _columnSizing_size;
return /*#__PURE__*/ (0, _jsxruntime.jsx)("th", _object_spread_props._(_object_spread._({
className: thStyles.className,
style: _object_spread_props._(_object_spread._({}, thStyles.style), {
width: (_columnSizing_size = columnSizing.size) !== null && _columnSizing_size !== void 0 ? _columnSizing_size : 'auto',
minWidth: columnSizing.minSize,
maxWidth: columnSizing.maxSize
})
}, others), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Group, {
wrap: "nowrap",
gap: "xs",
children: (0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext())
})
}));
}
var onSort = header.column.getToggleSortingHandler();
var sortingOrder = header.column.getIsSorted() || 'none';
var Icon = sortingIcons[sortingOrder];
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.UnstyledButton, _object_spread_props._(_object_spread._({
component: "th",
onClick: onSort,
"aria-sort": SortingLabels[sortingOrder],
"data-control": true
}, thStyles, others), {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
wrap: "nowrap",
gap: "xs",
children: [
(0, _reacttable.flexRender)(header.column.columnDef.header, header.getContext()),
/*#__PURE__*/ (0, _jsxruntime.jsx)(Icon, {
height: 16,
width: 16
})
]
})
}));
};
Th.extend = _utils.identity;
//# sourceMappingURL=Th.js.map