@ackplus/react-tanstack-data-table
Version:
A powerful React data table component built with MUI and TanStack Table
26 lines (25 loc) • 1.91 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({ selectionState, selectedRowCount, bulkActions, sx, }) {
const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
const renderedBulkActions = (0, react_1.useMemo)(() => {
if (!bulkActions)
return null;
return bulkActions(selectionState);
}, [bulkActions, selectionState]);
return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: selectedRowCount > 0, children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, Object.assign({ sx: Object.assign({ 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) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: '1 1 100%' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${selectedRowCount} selected`, size: "small", color: "primary", variant: "outlined" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
display: 'flex',
alignItems: 'center',
gap: 1,
}, children: renderedBulkActions })] })) }));
}