diff options
author | Herbert Eiselt <herbert.eiselt@highstreet-technologies.com> | 2019-02-11 14:54:12 +0100 |
---|---|---|
committer | Herbert Eiselt <herbert.eiselt@highstreet-technologies.com> | 2019-02-11 14:54:53 +0100 |
commit | 3d202a04b99f0e61b6ccf8b7a5610e1a15ca58e7 (patch) | |
tree | ab756cfa8de5eced886d3947423d198be8c0ce62 /sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx | |
parent | 12a8c669f52c0e84d580c078cee849b25133b585 (diff) |
Add sdnr wt odlux
Add complete sdnr wireless transport app odlux core and apps
Change-Id: I5dcbfb8f3b790e3bda7c8df67bd69d81958f65e5
Issue-ID: SDNC-576
Signed-off-by: Herbert Eiselt <herbert.eiselt@highstreet-technologies.com>
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 | 131 |
1 files changed, 131 insertions, 0 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 new file mode 100644 index 000000000..9ee2e13c7 --- /dev/null +++ b/sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx @@ -0,0 +1,131 @@ +import * as React from 'react'; +import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles'; + +import IconButton from '@material-ui/core/IconButton'; +import Tooltip from '@material-ui/core/Tooltip'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import DeleteIcon from '@material-ui/icons/Delete'; +import MoreIcon from '@material-ui/icons/MoreVert'; +import FilterListIcon from '@material-ui/icons/FilterList'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { lighten } from '@material-ui/core/styles/colorManipulator'; +import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon'; + +const styles = (theme: Theme) => createStyles({ + root: { + paddingRight: theme.spacing.unit, + }, + highlight: + theme.palette.type === 'light' + ? { + color: theme.palette.secondary.main, + backgroundColor: lighten(theme.palette.secondary.light, 0.85), + } + : { + color: theme.palette.text.primary, + backgroundColor: theme.palette.secondary.dark, + }, + spacer: { + flex: '1 1 100%', + }, + actions: { + color: theme.palette.text.secondary, + display: "flex", + flex: "auto", + flexDirection: "row" + }, + title: { + flex: '0 0 auto', + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +interface ITableToolbarComponentProps extends WithStyles<typeof styles> { + numSelected: number | null; + title?: string; + customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[]; + onToggleFilter: () => void; + onExportToCsv: () => void; +} + +class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null }> { + constructor(props: ITableToolbarComponentProps) { + super(props); + + this.state = { + anchorEl: null + }; + } + + private handleMenu = (event: React.MouseEvent<HTMLElement>) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + private handleClose = () => { + this.setState({ anchorEl: null }); + }; + render() { + const { numSelected, classes } = this.props; + const open = !!this.state.anchorEl; + + return ( + <Toolbar className={ `${ classes.root } ${ numSelected && numSelected > 0 ? classes.highlight : '' } ` } > + <div className={ classes.title }> + { numSelected && numSelected > 0 ? ( + <Typography color="inherit" variant="subheading"> + { numSelected } selected + </Typography> + ) : ( + <Typography variant="headline" 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> + )) + : null } + { numSelected && numSelected > 0 ? ( + <Tooltip title="Delete"> + <IconButton aria-label="Delete"> + <DeleteIcon /> + </IconButton> + </Tooltip> + ) : ( + <Tooltip title="Filter list"> + <IconButton aria-label="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-haspopup="true" + 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> + </div> + </Toolbar> + ); + } +}; + +export const TableToolbar = withStyles(styles)(TableToolbarComponent);
\ No newline at end of file |