diff options
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.tsx | 61 |
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> |