sdnr/wt/odlux/framework/src/components/material-table/tableToolbar.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import * as React from 'react';
  19 import { withStyles, WithStyles, createStyles, Theme } from '@material-ui/core/styles';
  20
  21 import IconButton from '@material-ui/core/IconButton';
  22 import Tooltip from '@material-ui/core/Tooltip';
  23 import Toolbar from '@material-ui/core/Toolbar';
  24 import Typography from '@material-ui/core/Typography';
  25 import DeleteIcon from '@material-ui/icons/Delete';
  26 import MoreIcon from '@material-ui/icons/MoreVert';
  27 import FilterListIcon from '@material-ui/icons/FilterList';
  28 import MenuItem from '@material-ui/core/MenuItem';
  29 import Menu from '@material-ui/core/Menu';
  30 import { lighten } from '@material-ui/core/styles/colorManipulator';
  31 import { SvgIconProps } from '@material-ui/core/SvgIcon/SvgIcon';
  32
  33 const styles = (theme: Theme) => createStyles({
  34   root: {
  35     paddingRight: theme.spacing(1),
  36   },
  37   highlight:
  38     theme.palette.type === 'light'
  39       ? {
  40         color: theme.palette.secondary.main,
  41         backgroundColor: lighten(theme.palette.secondary.light, 0.85),
  42       }
  43       : {
  44         color: theme.palette.text.primary,
  45         backgroundColor: theme.palette.secondary.dark,
  46       },
  47   spacer: {
  48     flex: '1 1 100%',
  49   },
  50   actions: {
  51     color: theme.palette.text.secondary,
  52     display: "flex",
  53     flex: "auto",
  54     flexDirection: "row"
  55   },
  56   title: {
  57     flex: '0 0 auto',
  58   },
  59   menuButton: {
  60     marginLeft: -12,
  61     marginRight: 20,
  62   },
  63 });
  64
  65 interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
  66   numSelected: number | null;
  67   title?: string;
  68   tableId?: string;
  69   customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
  70   onToggleFilter: () => void;
  71   onExportToCsv: () => void;
  72 }
  73
  74 class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null }> {
  75   constructor(props: ITableToolbarComponentProps) {
  76     super(props);
  77
  78     this.state = {
  79       anchorEl: null
  80     };
  81   }
  82
  83   private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
  84     this.setState({ anchorEl: event.currentTarget });
  85   };
  86
  87   private handleClose = () => {
  88     this.setState({ anchorEl: null });
  89   };
  90   render() {
  91     const { numSelected, classes } = this.props;
  92     const open = !!this.state.anchorEl;
  93     const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId + '-' : '';
  94     return (
  95       <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
  96         <div className={classes.title}>
  97           {numSelected && numSelected > 0 ? (
  98             <Typography color="inherit" variant="subtitle1">
  99               {numSelected} selected
 100           </Typography>
 101           ) : (
 102               <Typography variant="h5" id="tableTitle">
 103                 {this.props.title || null}
 104               </Typography>
 105             )}
 106         </div>
 107         <div className={classes.spacer} />
 108         <div className={classes.actions}>
 109           {this.props.customActionButtons
 110             ? this.props.customActionButtons.map((action, ind) => (
 111               <Tooltip key={`custom-action-${ind}`} title={action.tooltip}>
 112                 <IconButton aria-label={buttonPrefix + `custom-action-${ind}`} onClick={() => action.onClick()}>
 113                   <action.icon />
 114                 </IconButton>
 115               </Tooltip>
 116             ))
 117             : null}
 118           {numSelected && numSelected > 0 ? (
 119             <Tooltip title="Delete">
 120               <IconButton aria-label={buttonPrefix + "delete"}>
 121                 <DeleteIcon />
 122               </IconButton>
 123             </Tooltip>
 124           ) : (
 125               <Tooltip title="Filter list">
 126                 <IconButton aria-label={buttonPrefix + "filter-list"} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
 127                   <FilterListIcon />
 128                 </IconButton>
 129               </Tooltip>
 130             )}
 131           <Tooltip title="Actions">
 132             <IconButton color="inherit"
 133               aria-owns={open ? 'menu-appbar' : undefined}
 134               aria-haspopup="true"
 135               onClick={this.handleMenu} >
 136               <MoreIcon />
 137             </IconButton>
 138           </Tooltip>
 139           <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
 140             transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
 141             <MenuItem onClick={this.props.onExportToCsv}>Export as CSV</MenuItem>
 142           </Menu>
 143         </div>
 144       </Toolbar>
 145     );
 146   }
 147 };
 148
 149 export const TableToolbar = withStyles(styles)(TableToolbarComponent);