sdnr/wt/odlux/framework/src/components/material-table/tableHead.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
  19 import * as React from 'react';
  20 import { ColumnModel, ColumnType } from './columnModel';
  21 import { Theme } from '@mui/material/styles';
  22
  23 import { WithStyles } from '@mui/styles';
  24 import withStyles from '@mui/styles/withStyles';
  25 import createStyles from '@mui/styles/createStyles';
  26
  27 import TableSortLabel from '@mui/material/TableSortLabel';
  28 import TableCell from '@mui/material/TableCell';
  29 import TableHead from '@mui/material/TableHead';
  30 import TableRow from '@mui/material/TableRow';
  31 import Checkbox from '@mui/material/Checkbox';
  32 import Tooltip from '@mui/material/Tooltip';
  33
  34 const styles = (theme: Theme) => createStyles({
  35   header: {
  36     backgroundColor: "#fafafa",
  37     position: "sticky",
  38     top: 0
  39   }
  40 });
  41
  42
  43 type styles_header = WithStyles<typeof styles>;
  44
  45 interface IEnhancedTableHeadComponentProps extends styles_header {
  46   numSelected: number | null;
  47   onRequestSort: (event: React.SyntheticEvent, property: string) => void;
  48   onSelectAllClick: () => void;
  49   order: 'asc' | 'desc';
  50   orderBy: string | null;
  51   rowCount: number;
  52   columns: ColumnModel<{}>[];
  53   hiddenColumns: string[];
  54   enableSelection?: boolean;
  55   allowHtmlHeader?: boolean;
  56 }
  57
  58 class EnhancedTableHeadComponent extends React.Component<IEnhancedTableHeadComponentProps> {
  59   createSortHandler = (property: string) => (event: React.SyntheticEvent) => {
  60     this.props.onRequestSort(event, property);
  61   };
  62
  63   render() {
  64     const { onSelectAllClick, order, orderBy, numSelected, rowCount, columns } = this.props;
  65     const {classes} = this.props;
  66
  67     return (
  68       <TableHead>
  69         <TableRow>
  70           { this.props.enableSelection
  71            ? <TableCell padding="checkbox" style={ { width: "50px" } } className= {classes.header} >
  72               <Checkbox
  73                  indeterminate={ numSelected && numSelected > 0 && numSelected < rowCount || undefined }
  74                  checked={ numSelected === rowCount }
  75                  onChange={ onSelectAllClick }
  76               />
  77             </TableCell>
  78           : null
  79           }
  80           { columns.map(col => {
  81             const style = col.width ? { width: col.width } : {};
  82             const tableCell = (
  83               <TableCell className= {classes.header}
  84                 key={ col.property }
  85                 align={ col.type === ColumnType.numeric ? 'right' : 'left' }
  86                 padding={ col.disablePadding ? 'none' : 'normal' }
  87                 sortDirection={ orderBy === (col.property) ? order : false }
  88                 style={ style }
  89               >
  90                 { col.disableSorting || (col.type === ColumnType.custom)
  91                   ? <TableSortLabel
  92                     active={ false }
  93                     direction={ undefined }
  94                   >
  95                     { col.title || col.property }
  96                   </TableSortLabel>
  97                   : <Tooltip disableInteractive
  98                     title="Sort"
  99                     placement={ col.type === ColumnType.numeric ? 'bottom-end' : 'bottom-start' }
 100                     enterDelay={ 300 }
 101                   >
 102                     <TableSortLabel
 103                       active={ orderBy === col.property }
 104                       direction={ order || undefined }
 105                       onClick={ this.createSortHandler(col.property) }
 106                     >
 107                       {
 108                         this.props.allowHtmlHeader ? <div className="content" dangerouslySetInnerHTML={{__html: col.title || col.property}}></div>
 109                        :  (col.title || col.property )
 110                       }
 111                     </TableSortLabel>
 112                   </Tooltip> }
 113               </TableCell>
 114             );
 115
 116             //show column if...
 117             const showColumn = !this.props.hiddenColumns.includes(col.property);
 118
 119             return showColumn && tableCell;
 120           }, this) }
 121         </TableRow>
 122       </TableHead>
 123     );
 124   }
 125 }
 126
 127 export const EnhancedTableHead = withStyles(styles)(EnhancedTableHeadComponent);