@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
50 lines (49 loc) • 2.67 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.BulkActionsToolbar = BulkActionsToolbar;
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const data_table_context_1 = require("../../contexts/data-table-context");
const slot_helpers_1 = require("../../utils/slot-helpers");
function BulkActionsToolbar(props) {
const { selectionState, selectedRowCount, bulkActions, chipProps, containerSx, leftSectionSx, rightSectionSx, fadeProps, sx, ...otherProps } = props;
const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
// Extract slot-specific props with enhanced merging
const toolbarSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'bulkActionsToolbar');
const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', material_1.Toolbar);
// Memoize the bulk actions rendering to prevent infinite re-renders
const renderedBulkActions = (0, react_1.useMemo)(() => {
if (!bulkActions)
return null;
return bulkActions(selectionState);
}, [bulkActions, selectionState]);
// Merge all props for maximum flexibility
const mergedToolbarProps = (0, slot_helpers_1.mergeSlotProps)({
sx: {
pl: { sm: 2 },
pr: { xs: 1, sm: 1 },
bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05),
mb: 1,
position: 'relative',
zIndex: 1,
...sx,
...containerSx,
},
}, toolbarSlotProps, otherProps);
const mergedChipProps = (0, slot_helpers_1.mergeSlotProps)({
label: `${selectedRowCount} selected`,
size: 'small',
color: 'primary',
variant: 'outlined',
}, chipProps || {});
return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: selectedRowCount > 0, ...fadeProps, children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, { ...mergedToolbarProps, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
flex: '1 1 100%',
...leftSectionSx,
}, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, { ...mergedChipProps }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
display: 'flex',
alignItems: 'center',
gap: 1,
...rightSectionSx,
}, children: renderedBulkActions })] }) }));
}