import React from 'react' ; import ExpandMore from '@material-ui/icons/ExpandMore' ; import { ExpansionPanel , ExpansionPanelDetails , ExpansionPanelSummary , Typography , Theme } from '@material-ui/core' ; import { withStyles } from '@material-ui/styles' ; const styles = ( theme ) => ( { summary : { minHeight : '0' } , details : { padding : '0px 16px 8px 8px' , display : 'block' } , heading : { fontSize : theme . typography . pxToRem ( 15 ) , fontWeight : theme . typography . fontWeightRegular , } , } ) ; const Panel = ( props ) => { return ( < ExpansionPanel defaultExpanded = { true } disabled = { props . disabled } > < ExpansionPanelSummary expandIcon = { < ExpandMore />} className={props.classes.summary}> < Typography className = { props . classes . heading } > { props . children [ 0 ] } < /Typography> < /ExpansionPanelSummary> { props . detailsHidden ? null : ( < ExpansionPanelDetails className = { props . classes . detail } > { props . children [ 1 ] } < /ExpansionPanelDetails>)} < /ExpansionPanel>); } ; export default withStyles ( styles ) ( Panel ) ;