@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
69 lines (68 loc) • 2.89 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';
import { TableLayoutControl } from '../layouts/TableLayoutControl';
import { TableComponentsOrder } from '../Table';
import { TableHeaderActions } from '../table-actions';
import { useTableContext } from '../TableContext';
const defaultProps = {
unselectAllLabel: 'Unselect all',
selectedCountLabel: (count)=>`${count} selected`,
showActions: true
};
export const TableHeader = factory((props, ref)=>{
const { store, getStyles } = useTableContext();
const { showActions, unselectAllLabel, selectedCountLabel, 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,
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, {
onClick: store.clearRowSelection,
variant: "subtle",
disabled: !store.rowSelectionEnabled,
leftSection: /*#__PURE__*/ _jsx(CrossSize16Px, {
height: 16
}),
children: selectedCountLabel(selectedRows.length)
})
})
}) : null,
children,
showActions ? /*#__PURE__*/ _jsx(TableHeaderActions, {}) : null,
/*#__PURE__*/ _jsx(TableLayoutControl, {})
]
})
});
});
//# sourceMappingURL=TableHeader.js.map