application/components/expanding-card.js

import React, {Component} from 'react';
import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';

import {Row, Col} from './flexbox';

class ExpandingCard extends Component {
    constructor(props) {
        super(props);

    }

    componentWillReceiveProps(nextProps) {
    }

    handleToggle(expanded) {
        if (this.props.onToggle) {
            this.props.onToggle(expanded);
        }
    }

    render() {
        let colWidth = 8;
        let colOffset = 2;

        if (this.props.expanded) {
            colWidth = 12;
            colOffset = 0;
        }

        return (
            <Row>
                <Col className={this.props.expanded ? 'expanding-card expanded' : 'expanding-card collapsed'} xs={colWidth} offsetXs={colOffset}>
                    <Card
                        initiallyExpanded={false}
                        expanded={this.props.expanded}
                        onExpandChange={this.handleToggle.bind(this)}
                        >
                        <CardHeader
                            actAsExpander={true}
                            title={this.props.title}
                            subtitle={this.props.subtitle}
                            />
                        <CardText
                            expandable={true}
                            >
                            {this.props.children}
                        </CardText>
                    </Card>
                </Col>
            </Row>
        );
    }
}

export default ExpandingCard;