Im looking for a way to force the Expansion panel to expanded=false
when the expansion panel is disabled.
Imagine an expanded Expansion panel. An event occurs and the Expansion Panel switch to disabled.
My problem is that it's still expanded. I want to force expanded=false
but I don't know how to do.
Here is my code :
return (
<ExpansionPanel disabled={props.body==null} >
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
id="panel1a-header"
classes={{
content: classes.spaced,
}}
>
<Box fontWeight="fontWeightBold">{props.name}</Box>
<Box fontWeight="fontWeightBold" className={props.hasError ? classes.error : classes.ok}>
{props.hasError ? 'DOWN' : 'UP'}
</Box>
</ExpansionPanelSummary>
<ExpansionPanelDetails
classes={{
root: classes.rowSpaced
}}>
{
props.body != null && props.body.checks != null ?
<Box>
<List
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">Liveness</ListSubheader>
}
className={classes.root}
>
<ListItem>
<ListItemText>
<Box display="flex" flexDirection="row" className={classes.spaced}>
<Typography key={props.body.checks[0].name}>{props.body.checks[0].name}</Typography>
<Typography key={props.body.checks[0].name + props.body.checks[0].status} className={props.body.checks[0].status === 'UP' ? classes.ok : classes.error}>
{props.body.checks[0].status}
</Typography>
</Box>
</ListItemText>
</ListItem>
</List>
<Divider />
<List
component="nav"
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
Readyness
</ListSubheader>
}
className={classes.root}
>
{
props.body != null && props.body.checks != null ? props.body.checks.slice(1).sort((a, b) => (a.name > b.name) ? 1 : -1).map((check, i) => (
<ListItem key={check.name + check.status}>
<ListItemText>
<Box display="flex" flexDirection="row" className={classes.spaced}>
<Typography key={check.name}>{check.name}</Typography>
<Typography key={check.name + check.status} className={check.status === 'UP' ? classes.ok : classes.error}>
{check.status}
</Typography>
</Box>
</ListItemText>
</ListItem>
)) : null
}
</List>
</Box>
: null
}
</ExpansionPanelDetails>
</ExpansionPanel>
);
If props.body==null
then the Expansion Panel has to be disabled=true
AND expanded=false
because I don't want to keep it expanded when disabled...
If this.props.body!=null
then I want to let the user click on it to expand as he wants.
Notice the props.body != null && props.body.checks != null ?
condition because an async call is made. See react this.props undefined or empty object
How to do ?
Thank you !