sdnr/wt/odlux/framework/src/components/material-ui/panel.tsx

   1 /**\r
   2  * ============LICENSE_START========================================================================\r
   3  * ONAP : ccsdk feature sdnr wt odlux\r
   4  * =================================================================================================\r
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.\r
   6  * =================================================================================================\r
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except\r
   8  * in compliance with the License. You may obtain a copy of the License at\r
   9  *\r
  10  * http://www.apache.org/licenses/LICENSE-2.0\r
  11  *\r
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License\r
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express\r
  14  * or implied. See the License for the specific language governing permissions and limitations under\r
  15  * the License.\r
  16  * ============LICENSE_END==========================================================================\r
  17  */\r
  18 import * as React from 'react';\r
  19 \r
  20 import { withStyles, Theme, WithStyles, createStyles } from '@material-ui/core/styles';\r
  21 \r
  22 import { ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography, ExpansionPanelActions } from '@material-ui/core';\r
  23 \r
  24 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';\r
  25 import { SvgIconProps } from '@material-ui/core/SvgIcon';\r
  26 \r
  27 const styles = (theme: Theme) => createStyles({\r
  28   accordion: {\r
  29     // background: theme.palette.secondary.dark,\r
  30     // color: theme.palette.primary.contrastText\r
  31   },\r
  32   detail: {\r
  33     // background: theme.palette.background.paper,\r
  34     // color: theme.palette.text.primary,\r
  35     position: "relative",\r
  36     display: 'flex',\r
  37     flexDirection: 'column'\r
  38   },\r
  39   text: {\r
  40     // color: theme.palette.common.white,\r
  41     // fontSize: "1rem"\r
  42   },\r
  43 });\r
  44 \r
  45 type PanalProps = WithStyles<typeof styles> & {\r
  46   activePanel: string | null,\r
  47   panelId: string,\r
  48   title: string,\r
  49   customActionButtons?: JSX.Element[];\r
  50   onToggle: (panelId: string | null) => void;\r
  51 }\r
  52 \r
  53 const PanelComponent: React.SFC<PanalProps> = (props) => {\r
  54   const { classes, activePanel, onToggle } = props;\r
  55   return (\r
  56     <ExpansionPanel className={classes.accordion} expanded={activePanel === props.panelId} onChange={() => onToggle(props.panelId)} >\r
  57       <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>\r
  58         <Typography className={classes.text} >{props.title}</Typography>\r
  59       </ExpansionPanelSummary>\r
  60       <ExpansionPanelDetails className={classes.detail}>\r
  61         {props.children}\r
  62       </ExpansionPanelDetails>\r
  63       {props.customActionButtons\r
  64         ? <ExpansionPanelActions>\r
  65           {props.customActionButtons}\r
  66         </ExpansionPanelActions>\r
  67         : null}\r
  68     </ExpansionPanel>\r
  69   );\r
  70 };\r
  71 \r
  72 export const Panel = withStyles(styles)(PanelComponent);\r
  73 export default Panel;