Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import React, { useMemo } from 'react';
import { Link, Toolbar, Typography, useTheme } from '@mui/material';
import { isTopBarButton, TopBarButton } from '.';
import Button from '../Button/Button';
import Tooltip from '../Tooltip/Tooltip';
import { EnhancedTopBarSelectionConfig } from './EnhancedTableToolbarV2';
interface EnhancedTableToolbarProps {
isAllSelected?: boolean;
numSelected: number;
renderNumSelectedText?: (numSelected: number) => string;
topBarButtons?: (TopBarButton | JSX.Element)[];
topBarSelectionConfig?: EnhancedTopBarSelectionConfig;
}
export default function EnhancedTableToolbar(props: EnhancedTableToolbarProps): JSX.Element | null {
const { isAllSelected, numSelected, renderNumSelectedText, topBarButtons, topBarSelectionConfig } = props;
const theme = useTheme();
const selectLinkStyles = {
color: theme.palette.TwClrTxtBrand,
cursor: 'pointer',
};
const topBarSelection = useMemo(() => {
if (!renderNumSelectedText) {
return null;
}
if (!topBarSelectionConfig) {
return renderNumSelectedText(numSelected);
}
const {
handleSelectAll,
handleSelectNone,
renderSelectAllText,
renderSelectNoneText,
renderEnhancedNumSelectedText,
} = topBarSelectionConfig;
return (
<>
{renderEnhancedNumSelectedText ? renderEnhancedNumSelectedText() : renderNumSelectedText(numSelected)}{' '}
{!isAllSelected && handleSelectAll && renderSelectAllText && (
<Link onClick={handleSelectAll} sx={selectLinkStyles}>
{renderSelectAllText()}
</Link>
)}
{isAllSelected && handleSelectNone && renderSelectNoneText && (
<Link onClick={handleSelectNone} sx={selectLinkStyles}>
{renderSelectNoneText()}
</Link>
)}
</>
);
}, [renderNumSelectedText, topBarSelectionConfig, numSelected]);
return renderNumSelectedText && numSelected > 0 ? (
<Toolbar
sx={{
background: theme.palette.TwClrBgSecondary,
borderRadius: theme.spacing(0.5),
}}
>
<Typography color='inherit' variant='subtitle1' component='div' sx={{ flex: '1 1 auto' }}>
{topBarSelection}
</Typography>
{topBarButtons?.map((tbButton: TopBarButton | JSX.Element, index) =>
isTopBarButton(tbButton) ? (
<Tooltip title={tbButton.tooltipTitle} key={index}>
<Button
key={tbButton.buttonText}
label={tbButton.buttonText}
priority='secondary'
type={tbButton.buttonType}
onClick={tbButton.onButtonClick}
icon={tbButton.icon}
disabled={tbButton.disabled}
sx={{ marginLeft: theme.spacing(1) }}
/>
</Tooltip>
) : (
tbButton
)
)}
</Toolbar>
) : null;
}
|