@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
140 lines (139 loc) • 7.73 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "RowLayoutBody", {
enumerable: true,
get: function() {
return RowLayoutBody;
}
});
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 _tablecore = require("@tanstack/table-core");
var _react = require("react");
var _createFactoryComponent = require("../../../../utils/createFactoryComponent.js");
var _TableContext = require("../../TableContext.js");
var _TableCollapsibleColumn = require("../../table-column/TableCollapsibleColumn.js");
var _TableSelectableColumn = require("../../table-column/TableSelectableColumn.js");
var _TableLoading = require("../../table-loading/TableLoading.js");
var _RowLayoutContext = require("./RowLayoutContext.js");
var defaultProps = {};
var RowLayoutBody = function RowLayoutBody(props) {
var _table_getRowModel;
var ctx = (0, _RowLayoutContext.useRowLayout)();
var _useProps = (0, _core.useProps)('RowLayoutBody', defaultProps, props), getRowExpandedContent = _useProps.getRowExpandedContent, onRowDoubleClick = _useProps.onRowDoubleClick, loading = _useProps.loading, classNames = _useProps.classNames, className = _useProps.className, styles = _useProps.styles, style = _useProps.style, getRowAttributes = _useProps.getRowAttributes, others = _object_without_properties._(_useProps, [
"getRowExpandedContent",
"onRowDoubleClick",
"loading",
"classNames",
"className",
"styles",
"style",
"getRowAttributes"
]);
var _useTableContext = (0, _TableContext.useTableContext)(), table = _useTableContext.table, store = _useTableContext.store;
var toggleCollapsible = function toggleCollapsible(el) {
var cell = el.children[el.children.length - 1];
cell.querySelector('button').click();
};
var rows = (_table_getRowModel = table.getRowModel()) === null || _table_getRowModel === void 0 ? void 0 : _table_getRowModel.rows.map(function(row) {
var _ref, _ref1;
var rowChildren = (_ref = getRowExpandedContent === null || getRowExpandedContent === void 0 ? void 0 : getRowExpandedContent(row.original, row.index, row)) !== null && _ref !== void 0 ? _ref : null;
var isSelected = !!row.getIsSelected();
var shouldKeepSelection = store.rowSelectionForced && isSelected;
var onClick = function onClick(event) {
if (rowChildren) {
toggleCollapsible(event.currentTarget);
}
if (store.rowSelectionEnabled && !store.multiRowSelectionEnabled && !shouldKeepSelection) {
row.toggleSelected();
}
};
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.Fragment, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)("tr", _object_spread_props._(_object_spread._({
onClick: onClick,
onDoubleClick: function onDoubleClick() {
onRowDoubleClick === null || onRowDoubleClick === void 0 ? void 0 : onRowDoubleClick(row.original, row.index, row);
},
"data-selectable": store.rowSelectionEnabled,
"data-selected": isSelected,
"data-multi-selection": store.multiRowSelectionEnabled,
"aria-selected": isSelected,
"data-testid": row.id
}, ctx.getStyles('row', {
classNames: classNames,
className: className,
styles: styles,
style: style
}), (_ref1 = getRowAttributes === null || getRowAttributes === void 0 ? void 0 : getRowAttributes(row.original, row.index, row)) !== null && _ref1 !== void 0 ? _ref1 : {}, others), {
children: row.getVisibleCells().map(function(cell) {
var columnSizing = _object_spread_props._(_object_spread._({}, _tablecore.defaultColumnSizing), {
size: cell.column.columnDef.size,
minSize: cell.column.columnDef.minSize,
maxSize: cell.column.columnDef.maxSize
});
var onCollapsibleCellClick = function onCollapsibleCellClick(event) {
if (cell.column.id === _TableSelectableColumn.TableSelectableColumn.id && store.rowSelectionEnabled) {
event.stopPropagation();
}
};
return /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
"data-testid": cell.id,
className: ctx.getStyles('cell', {
classNames: classNames,
styles: styles
}).className,
style: _object_spread._({
width: columnSizing.size ? "".concat(columnSizing.size, "px") : 'auto',
minWidth: "".concat(columnSizing.minSize, "px"),
maxWidth: "".concat(columnSizing.maxSize, "px")
}, ctx.getStyles('cell', {
classNames: classNames,
styles: styles
}).style),
"data-collapsible-cell": cell.column.id === _TableCollapsibleColumn.TableCollapsibleColumn.id,
onClick: onCollapsibleCellClick,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableLoading.TableLoading, {
visible: loading,
children: (0, _reacttable.flexRender)(cell.column.columnDef.cell, cell.getContext())
})
}, cell.id);
})
})),
rowChildren ? /*#__PURE__*/ (0, _jsxruntime.jsx)("tr", _object_spread_props._(_object_spread._({}, ctx.getStyles('collapsibleRow', {
classNames: classNames,
styles: styles
})), {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)("td", {
colSpan: table.getAllColumns().length,
style: {
padding: 0
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Collapse, {
in: row.getIsExpanded(),
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({}, ctx.getStyles('collapsibleWrapper', {
classNames: classNames,
styles: styles
})), {
px: "sm",
py: "xs",
children: rowChildren
}))
})
})
})) : null
]
}, row.id);
});
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
children: rows
});
};
RowLayoutBody.extend = _createFactoryComponent.identity;
//# sourceMappingURL=RowLayoutBody.js.map