@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
73 lines (72 loc) • 3.04 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { CrossSize16Px } from '@coveord/plasma-react-icons';
import { Box, factory, Grid, Tooltip, useProps } from '@mantine/core';
import { Button } from '../../Button/Button.js';
import { TableLayoutControl } from '../layouts/TableLayoutControl.js';
import { TableHeaderActions } from '../table-actions/TableHeaderActions.js';
import { TableComponentsOrder } from '../Table.js';
import { useTableContext } from '../TableContext.js';
const defaultProps = {
unselectAllLabel: 'Unselect all',
selectedCountLabel: (count)=>`${count} selected`,
showActions: true,
borderTop: true
};
export const TableHeader = factory((props, ref)=>{
const { store, getStyles } = useTableContext();
const { showActions, unselectAllLabel, selectedCountLabel, borderTop, children, classNames, className, styles, style, vars: _vars, ...others } = useProps('PlasmaTableHeader', defaultProps, props);
const selectedRows = store.getSelectedRows();
const stylesApiProps = {
classNames,
styles
};
const innerStyles = getStyles('headerGridInner', stylesApiProps);
const gridStyles = getStyles('headerGrid', stylesApiProps);
return /*#__PURE__*/ _jsx(Box, {
ref: ref,
...getStyles('headerRoot', {
className,
style,
...stylesApiProps
}),
...others,
mod: {
'with-border-top': borderTop
},
children: /*#__PURE__*/ _jsxs(Grid, {
justify: "flex-start",
align: "center",
classNames: {
inner: innerStyles.className,
root: gridStyles.className
},
styles: {
inner: innerStyles.style,
root: gridStyles.style
},
children: [
store.multiRowSelectionEnabled && selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Grid.Col, {
span: "auto",
...getStyles('headerCol', stylesApiProps),
order: TableComponentsOrder.MultiSelectInfo,
children: /*#__PURE__*/ _jsx(Tooltip, {
label: unselectAllLabel,
children: /*#__PURE__*/ _jsx(Button.Quaternary, {
onClick: store.clearRowSelection,
disabled: !store.rowSelectionEnabled,
leftSection: /*#__PURE__*/ _jsx(CrossSize16Px, {
height: 16
}),
children: selectedCountLabel(selectedRows.length)
})
})
}) : null,
children,
showActions ? /*#__PURE__*/ _jsx(TableHeaderActions, {}) : null,
/*#__PURE__*/ _jsx(TableLayoutControl, {})
]
})
});
});
TableHeader.displayName = 'Table.Header';
//# sourceMappingURL=TableHeader.js.map