sdnr/wt-odlux/odlux/framework/src/components/material-ui/panel.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
  20 import { Theme } from '@mui/material/styles';
  21
  22 import { WithStyles } from '@mui/styles';
  23 import withStyles from '@mui/styles/withStyles';
  24 import createStyles from '@mui/styles/createStyles';
  25
  26 import { Accordion, AccordionSummary, AccordionDetails, Typography, AccordionActions } from '@mui/material';
  27
  28 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
  29 import { SvgIconProps } from '@mui/material/SvgIcon';
  30
  31 const styles = (theme: Theme) => createStyles({
  32   accordion: {
  33     // background: theme.palette.secondary.dark,
  34     // color: theme.palette.primary.contrastText
  35   },
  36   detail: {
  37     // background: theme.palette.background.paper,
  38     // color: theme.palette.text.primary,
  39     position: "relative",
  40     flexDirection: 'column'
  41   },
  42   text: {
  43     // color: theme.palette.common.white,
  44     // fontSize: "1rem"
  45   },
  46 });
  47
  48 type PanalProps = WithStyles<typeof styles> & {
  49   activePanel: string | null,
  50   panelId: string,
  51   title: string,
  52   customActionButtons?: JSX.Element[];
  53   onToggle: (panelId: string | null) => void;
  54 }
  55
  56 const PanelComponent: React.SFC<PanalProps> = (props) => {
  57   const { classes, activePanel, onToggle } = props;
  58   return (
  59     <Accordion className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >
  60       <AccordionSummary expandIcon={<ExpandMoreIcon />}>
  61         <Typography className={classes.text} >{props.title}</Typography>
  62       </AccordionSummary>
  63       <AccordionDetails className={classes.detail}>
  64         {props.children}
  65       </AccordionDetails>
  66       {props.customActionButtons
  67         ? <AccordionActions>
  68           {props.customActionButtons}
  69         </AccordionActions>
  70         : null}
  71     </Accordion>
  72   );
  73 };
  74
  75 export const Panel = withStyles(styles)(PanelComponent);
  76 export default Panel;