Skip to content

Instantly share code, notes, and snippets.

@mattdaisley
Last active January 17, 2019 02:13
Show Gist options
  • Save mattdaisley/ff2cbb7c1fb78ce4eb9e84a7bccc9be7 to your computer and use it in GitHub Desktop.
Save mattdaisley/ff2cbb7c1fb78ce4eb9e84a7bccc9be7 to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import ExpansionPanelDetails from 'ui/core/ExpansionPanel/ExpansionPanelDetails/ExpansionPanelDetails';
import ExpansionPanelSummary from 'ui/core/ExpansionPanel/ExpansionPanelSummary/ExpansionPanelSummary';
import ExpansionPanel from 'ui/core/ExpansionPanel/ExpansionPanel';
export default class ControlledExpansionPanel extends Component {
state = {
expanded: null,
};
handleChange = (panel: string) => (expanded: boolean) => {
this.setState({
expanded: expanded ? panel : false,
});
};
render() {
const { expanded } = this.state;
return (
<React.Fragment>
<ExpansionPanel open={expanded === 'panel1'} onChange={this.handleChange('panel1')}>
<ExpansionPanelSummary>Expansion Panel 1</ExpansionPanelSummary>
<ExpansionPanelDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</ExpansionPanelDetails>
</ExpansionPanel>
<ExpansionPanel open={expanded === 'panel2'} onChange={this.handleChange('panel2')}>
<ExpansionPanelSummary>Expansion Panel 2</ExpansionPanelSummary>
<ExpansionPanelDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
sit amet blandit leo lobortis eget.
</ExpansionPanelDetails>
</ExpansionPanel>
</React.Fragment>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment