sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2020 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 ToggleButton from '@material-ui/lab/ToggleButton';
  21 import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
  22 import BarChartIcon from '@material-ui/icons/BarChart';
  23 import TableChartIcon from '@material-ui/icons/TableChart';
  24 import { makeStyles } from '@material-ui/core';
  25 import Tooltip from '@material-ui/core/Tooltip';
  26 import ChartFilter from './chartFilter'
  27 import FilterListIcon from '@material-ui/icons/FilterList';
  28
  29 const styles = makeStyles({
  30     toggleButtonContainer: {
  31         display: "flex",
  32         alignItems: "center",
  33         justifyContent: "center",
  34         padding: "10px",
  35     },
  36     subViewGroup: {
  37         padding: "10px"
  38     },
  39     filterGroup: {
  40         marginLeft: "10px"
  41     }
  42 });
  43
  44 type filterType = {
  45     onRefresh: () => void;
  46     onHandleRequestSort: (orderBy: string) => void;
  47     onToggleFilter: () => void;
  48     onFilterChanged: (property: string, filterTerm: string) => void;
  49     onHandleChangePage: (page: number) => void;
  50     onHandleChangeRowsPerPage: (rowsPerPage: number | null) => void;
  51 };
  52
  53 type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any };
  54
  55 const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => {
  56
  57     const classes = styles();
  58
  59     const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
  60         if (newView !== null) {
  61             props.onChange(newView)
  62         }
  63     };
  64
  65     const handleFilterChange = (event: React.MouseEvent<HTMLElement>, newView: string) => {
  66         props.onToggleFilterButton();
  67     };
  68
  69     const children = React.Children.toArray(props.children);
  70
  71     //hide filter if visible + table
  72     //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name
  73
  74     return (
  75         <>
  76             <div className={classes.toggleButtonContainer} >
  77                 <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}>
  78                     <ToggleButton aria-label="display-chart" key={1} value="chart">
  79                         <Tooltip title="Chart">
  80                             <BarChartIcon />
  81                         </Tooltip>
  82                     </ToggleButton>
  83                     <ToggleButton aria-label="display-table" key={2} value="table">
  84                         <Tooltip title="Table">
  85                             <TableChartIcon />
  86                         </Tooltip>
  87                     </ToggleButton>
  88                 </ToggleButtonGroup>
  89
  90                 <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} >
  91                     <ToggleButton aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}>
  92                         <Tooltip title={props.showFilter ? 'Hide filter' : 'Show available filter'}>
  93                             <FilterListIcon />
  94                         </Tooltip>
  95                     </ToggleButton>
  96                 </ToggleButtonGroup>
  97
  98
  99             </div>
 100             {
 101                 props.selectedValue === "chart" &&
 102                 <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} />
 103
 104             }
 105             {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]}
 106         </>);
 107
 108 }
 109
 110 export default ToggleContainer;