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 import { Button } from '@material-ui/core';
  33
  34 const styles = (theme: Theme) => createStyles({
  35   root: {
  36     paddingRight: theme.spacing(1),
  37   },
  38   highlight:
  39     theme.palette.type === 'light'
  40       ? {
  41         color: theme.palette.secondary.main,
  42         backgroundColor: lighten(theme.palette.secondary.light, 0.85),
  43       }
  44       : {
  45         color: theme.palette.text.primary,
  46         backgroundColor: theme.palette.secondary.dark,
  47       },
  48   spacer: {
  49     flex: '1 1 100%',
  50   },
  51   actions: {
  52     color: theme.palette.text.secondary,
  53     display: "flex",
  54     flex: "auto",
  55     flexDirection: "row"
  56   },
  57   title: {
  58     flex: '0 0 auto',
  59   },
  60   menuButton: {
  61     marginLeft: -12,
  62     marginRight: 20,
  63   },
  64 });
  65
  66 interface ITableToolbarComponentProps extends WithStyles<typeof styles> {
  67   numSelected: number | null;
  68   title?: string;
  69   tableId?: string;
  70   customActionButtons?: { icon: React.ComponentType<SvgIconProps>, tooltip?: string, onClick: () => void }[];
  71   onToggleFilter: () => void;
  72   onExportToCsv: () => void;
  73 }
  74
  75 class TableToolbarComponent extends React.Component<ITableToolbarComponentProps, { anchorEl: EventTarget & HTMLElement | null }> {
  76   constructor(props: ITableToolbarComponentProps) {
  77     super(props);
  78
  79     this.state = {
  80       anchorEl: null
  81     };
  82   }
  83
  84   private handleMenu = (event: React.MouseEvent<HTMLElement>) => {
  85     this.setState({ anchorEl: event.currentTarget });
  86   };
  87
  88   private handleClose = () => {
  89     this.setState({ anchorEl: null });
  90   };
  91   render() {
  92     const { numSelected, classes } = this.props;
  93     const open = !!this.state.anchorEl;
  94     const buttonPrefix = this.props.tableId !== undefined ? this.props.tableId + '-' : '';
  95     return (
  96       <Toolbar className={`${classes.root} ${numSelected && numSelected > 0 ? classes.highlight : ''} `} >
  97         <div className={classes.title}>
  98           {numSelected && numSelected > 0 ? (
  99             <Typography color="inherit" variant="subtitle1">
 100               {numSelected} selected
 101           </Typography>
 102           ) : (
 103               <Typography variant="h5" id="tableTitle">
 104                 {this.props.title || null}
 105               </Typography>
 106             )}
 107         </div>
 108         <div className={classes.spacer} />
 109         <div className={classes.actions}>
 110           {this.props.customActionButtons
 111             ? this.props.customActionButtons.map((action, ind) => (
 112               <Tooltip key={`custom-action-${ind}`} title={action.tooltip || ''}>
 113                 <IconButton aria-label={buttonPrefix + `custom-action-${ind}`} onClick={() => action.onClick()}>
 114                   <action.icon />
 115                 </IconButton>
 116               </Tooltip>
 117             ))
 118             : null}
 119           {numSelected && numSelected > 0 ? (
 120             <Tooltip title="Delete">
 121               <IconButton aria-label={buttonPrefix + "delete"}>
 122                 <DeleteIcon />
 123               </IconButton>
 124             </Tooltip>
 125           ) : (
 126               <Tooltip title="Filter list">
 127                 <IconButton aria-label={buttonPrefix + "filter-list"} onClick={() => { this.props.onToggleFilter && this.props.onToggleFilter() }}>
 128                   <FilterListIcon />
 129                 </IconButton>
 130               </Tooltip>
 131             )}
 132           <Tooltip title="Actions">
 133             <IconButton color="inherit"
 134             aria-label={buttonPrefix +"additional-actions-button"}
 135               aria-owns={open ? 'menu-appbar' : undefined}
 136               aria-haspopup="true"
 137               onClick={this.handleMenu} >
 138               <MoreIcon />
 139             </IconButton>
 140           </Tooltip>
 141           <Menu id="menu-appbar" anchorEl={this.state.anchorEl} anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
 142             transformOrigin={{ vertical: 'top', horizontal: 'right' }} open={open} onClose={this.handleClose} >
 143             <MenuItem aria-label="export-table-as-csv" onClick={(e) =>{ this.props.onExportToCsv(); this.handleClose()}}>Export as CSV</MenuItem>
 144           </Menu>
 145         </div>
 146       </Toolbar>
 147     );
 148   }
 149 };
 150
 151 export const TableToolbar = withStyles(styles)(TableToolbarComponent);