summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx')
-rw-r--r--sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx61
1 files changed, 31 insertions, 30 deletions
diff --git a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
index 80d38ab52..a4080b51b 100644
--- a/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
+++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx
@@ -32,7 +32,7 @@ import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
const styles = (theme: Theme) => createStyles({
root: {
- paddingRight: theme.spacing.unit,
+ paddingRight: theme.spacing(1),
},
highlight:
theme.palette.type === 'light'
@@ -65,6 +65,7 @@ const styles = (theme: Theme) => createStyles({
interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
numSelected: number | null;
title?: string;
+ tableId?: string;
customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
onToggleFilter: () => void;
onExportToCsv: () => void;
@@ -79,7 +80,7 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
};
}
- private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
+ private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
this.setState({ anchorEl: event.currentTarget });
};
@@ -89,55 +90,55 @@ class TableToolbarComponent extends React.Component<ITableToolbarComponentProps,
render() {
const { numSelected, classes } = this.props;
const open = !!this.state.anchorEl;
-
+ const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId + '-' : '';
return (
- <Toolbar className={ `${ classes.root } ${ numSelected && numSelected > 0 ? classes.highlight : '' } ` } >
- <div className={ classes.title }>
- { numSelected && numSelected > 0 ? (
- <Typography color="inherit" variant="subheading">
- { numSelected } selected
+ <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
+ <div className={classes.title}>
+ {numSelected && numSelected > 0 ? (
+ <Typography color="inherit" variant="subtitle1">
+ {numSelected} selected
</Typography>
) : (
- <Typography variant="headline" id="tableTitle">
- { this.props.title || null }
+ <Typography variant="h5" id="tableTitle">
+ {this.props.title || null}
</Typography>
- ) }
+ )}
</div>
- <div className={ classes.spacer } />
- <div className={ classes.actions }>
- { this.props.customActionButtons
- ? this.props.customActionButtons.map((action, ind) =>(
- <Tooltip key={ `custom-action-${ ind }`} title={action.tooltip}>
- <IconButton aria-label={ `custom-action-${ind}` } onClick={() => action.onClick() }>
- <action.icon />
- </IconButton>
- </Tooltip>
+ <div className={classes.spacer} />
+ <div className={classes.actions}>
+ {this.props.customActionButtons
+ ? this.props.customActionButtons.map((action, ind) => (
+ <Tooltip key={`custom-action-${ind}`} title={action.tooltip}>
+ <IconButton aria-label={buttonPrefix + `custom-action-${ind}`} onClick={() => action.onClick()}>
+ <action.icon />
+ </IconButton>
+ </Tooltip>
))
- : null }
- { numSelected && numSelected > 0 ? (
+ : null}
+ {numSelected && numSelected > 0 ? (
<Tooltip title="Delete">
- <IconButton aria-label="Delete">
+ <IconButton aria-label={buttonPrefix + "delete"}>
<DeleteIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip title="Filter list">
- <IconButton aria-label="Filter list" onClick={ () => { this.props.onToggleFilter && this.props.onToggleFilter() } }>
+ <IconButton aria-label={buttonPrefix + "filter-list"} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
<FilterListIcon />
</IconButton>
</Tooltip>
- ) }
+ )}
<Tooltip title="Actions">
<IconButton color="inherit"
- aria-owns={ open ? 'menu-appbar' : undefined }
+ aria-owns={open ? 'menu-appbar' : undefined}
aria-haspopup="true"
- onClick={ this.handleMenu } >
+ onClick={this.handleMenu} >
<MoreIcon />
</IconButton>
</Tooltip>
- <Menu id="menu-appbar" anchorEl={ this.state.anchorEl } anchorOrigin={ { vertical: 'top', horizontal: 'right' } }
- transformOrigin={ { vertical: 'top', horizontal: 'right' } } open={ open } onClose={ this.handleClose } >
- <MenuItem onClick={ this.props.onExportToCsv }>Export as CSV</MenuItem>
+ <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
+ <MenuItem onClick={this.props.onExportToCsv}>Export as CSV</MenuItem>
</Menu>
</div>
</Toolbar>