@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
100 lines (99 loc) • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
TableAccordionColumn: function() {
return TableAccordionColumn;
},
TableCollapsibleColumn: function() {
return TableCollapsibleColumn;
}
});
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 _actionicon = require("../../action-icon");
var _TableContext = require("../TableContext");
var sharedProps = {
id: 'collapsible',
enableSorting: false,
enableHiding: false,
meta: {
controlColumn: true
},
header: '',
size: 84
};
var TableCollapsibleColumn = _object_spread_props._(_object_spread._({}, sharedProps), {
cell: function(info) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapsibleIcon, {
info: info
});
}
});
var TableAccordionColumn = _object_spread_props._(_object_spread._({}, sharedProps), {
cell: function(info) {
var onToggle = function() {
// close all other rows when the current row not is expanded
if (!info.row.getIsExpanded()) {
info.table.toggleAllRowsExpanded(false);
}
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)(CollapsibleIcon, {
onToggle: onToggle,
info: info
});
}
});
var defaultProps = {
iconExpanded: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadUpSize16Px, {
height: 16
}),
iconCollapsed: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.ArrowHeadDownSize16Px, {
height: 16
})
};
var CollapsibleIcon = (0, _core.factory)(function(props, ref) {
var getStyles = (0, _TableContext.useTableContext)().getStyles;
var _useProps = (0, _core.useProps)('PlasmaTableCollapsibleColumn', defaultProps, props), info = _useProps.info, onToggle = _useProps.onToggle, iconExpanded = _useProps.iconExpanded, iconCollapsed = _useProps.iconCollapsed, classNames = _useProps.classNames, className = _useProps.className, style = _useProps.style, styles = _useProps.styles, others = _object_without_properties._(_useProps, [
"info",
"onToggle",
"iconExpanded",
"iconCollapsed",
"classNames",
"className",
"style",
"styles"
]);
var handler = info.row.getToggleExpandedHandler();
var onClick = function(e) {
e.stopPropagation();
onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
handler();
};
return info.row.getCanExpand() ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_actionicon.ActionIcon, _object_spread_props._(_object_spread._({
ref: ref,
onClick: onClick,
variant: "subtle",
color: "gray",
radius: "sm"
}, getStyles('collapsibleIcon', {
className: className,
classNames: classNames,
styles: styles,
style: style
}), others), {
children: info.row.getIsExpanded() ? iconExpanded : iconCollapsed
})) : null;
});
//# sourceMappingURL=TableCollapsibleColumn.js.map