diff options
author | sai-neetha <sai-neetha.phulmali@highstreet-technologies.com> | 2023-03-20 08:05:47 +0100 |
---|---|---|
committer | highstreetherbert <herbert.eiselt@highstreet-technologies.com> | 2023-03-29 19:06:25 +0200 |
commit | 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 (patch) | |
tree | 711ef5616aceb115a1081cccd152eeae0e87bc79 /sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx | |
parent | ac5e2dc8f1ee4d5549f7260374e8164d52b07f55 (diff) |
Odlux Update
Add eslint and custom icons update
Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx | 73 |
1 files changed, 37 insertions, 36 deletions
diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx index 8696fe4d6..e883aef7f 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/toggleContainer.tsx @@ -17,52 +17,54 @@ */ import * as React from 'react'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; + import BarChartIcon from '@mui/icons-material/BarChart'; +import FilterListIcon from '@mui/icons-material/FilterList'; import TableChartIcon from '@mui/icons-material/TableChart'; -import makeStyles from '@mui/styles/makeStyles'; +import ToggleButton from '@mui/material/ToggleButton'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; import Tooltip from '@mui/material/Tooltip'; -import ChartFilter from './chartFilter' -import FilterListIcon from '@mui/icons-material/FilterList'; +import makeStyles from '@mui/styles/makeStyles'; + +import ChartFilter from './chartFilter'; const styles = makeStyles({ - toggleButtonContainer: { - display: "flex", - alignItems: "center", - justifyContent: "center", - padding: "10px", - }, - subViewGroup: { - padding: "10px" - }, - filterGroup: { - marginLeft: "10px" - } + toggleButtonContainer: { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + padding: '10px', + }, + subViewGroup: { + padding: '10px', + }, + filterGroup: { + marginLeft: '10px', + }, }); -type toggleProps = { selectedValue: string, onChange(value: string): void, showFilter: boolean, onToggleFilterButton(): void, onFilterChanged: (property: string, filterTerm: string) => void, existingFilter: any }; +type toggleProps = { selectedValue: string; onChange(value: string): void; showFilter: boolean; onToggleFilterButton(): void; onFilterChanged: (property: string, filterTerm: string) => void; existingFilter: any }; const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { - const classes = styles(); + const classes = styles(); - const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { - if (newView !== null) { - props.onChange(newView) - } - }; + const handleChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { + if (newView !== null) { + props.onChange(newView); + } + }; - const handleFilterChange = (event: React.MouseEvent<HTMLElement>, newView: string) => { - props.onToggleFilterButton(); - }; + const handleFilterChange = (_event: React.MouseEvent<HTMLElement>) => { + props.onToggleFilterButton(); + }; - const children = React.Children.toArray(props.children); + const children = React.Children.toArray(props.children); - //hide filter if visible + table - //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name + //hide filter if visible + table + //put current name into state, let container handle stuff itelf, register for togglestate, get right via set name - return ( + return ( <> <div className={classes.toggleButtonContainer} > <ToggleButtonGroup className={classes.subViewGroup} size="medium" value={props.selectedValue} exclusive onChange={handleChange}> @@ -79,7 +81,7 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { </ToggleButtonGroup> <ToggleButtonGroup className={classes.filterGroup} onChange={handleFilterChange} > - <ToggleButton value="" aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== "chart"}> + <ToggleButton value="" aria-label="show-filter" selected={props.showFilter as boolean} disabled={props.selectedValue !== 'chart'}> <Tooltip disableInteractive title={props.showFilter ? 'Hide filter' : 'Show available filter'}> <FilterListIcon /> </Tooltip> @@ -89,13 +91,12 @@ const ToggleContainer: React.FunctionComponent<toggleProps> = (props) => { </div> { - props.selectedValue === "chart" && + props.selectedValue === 'chart' && <ChartFilter filters={props.existingFilter} onFilterChanged={props.onFilterChanged} isVisible={props.showFilter} /> } - {props.selectedValue === "chart" ? children[0] : props.selectedValue === "table" && children[1]} + {props.selectedValue === 'chart' ? children[0] : props.selectedValue === 'table' && children[1]} </>); - -} +}; export default ToggleContainer;
\ No newline at end of file |