[Card] Expandable CardText

docs/src/app/components/pages/components/cards.jsx

@@ -43,7 +43,23 @@ class CardPage extends React.Component {
             Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
             Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
           </CardText>
-        </Card>`;
+        </Card>
+        <Card expandable={true}>
+           <CardHeader
+             title="Title"
+             subtitle="Subtitle"
+             avatar={<Avatar>A</Avatar>}/>
+           <CardActions>
+             <FlatButton label="Action1"/>
+             <FlatButton label="Action2"/>
+           </CardActions>
+           <CardText>
+             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+             Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+             Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+             Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
+           </CardText>
+         </Card>`;
 
     this.desc =
       'A card is a piece of paper with unique related data that serves as an '+
@@ -56,7 +72,25 @@ class CardPage extends React.Component {
       'Cards do not flip over to reveal information on the back.';
 
 
-    this.componentInfo = [];
+    this.componentInfo = [
+      {
+        name: 'Card.Props',
+        infoArray: [
+          {
+            name: 'expandable',
+            type: 'bool',
+            header: 'optional',
+            desc: 'Wether this card has expandable contents.'
+          },
+          {
+            name: 'openExpanded',
+            type: 'bool',
+            header: 'optional',
+            desc: 'Wether the default state is expanded or retracted.'
+          },
+        ]
+      }
+    ];
   }
 
   render() {
@@ -90,6 +124,23 @@ class CardPage extends React.Component {
               Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
             </CardText>
           </Card>
+          <br />
+          <Card expandable={true}>
+            <CardHeader
+              title="Title"
+              subtitle="Subtitle"
+              avatar={<Avatar style={{color:'red'}}>A</Avatar>}/>
+            <CardActions>
+              <FlatButton label="Action1"/>
+              <FlatButton label="Action2"/>
+            </CardActions>
+            <CardText>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
+              Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
+              Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
+            </CardText>
+          </Card>
       </ComponentDoc>
     );
   }

src/card/card-actions.jsx

@@ -1,14 +1,31 @@
 let React = require('react');
-
+let OpenIcon = require('../svg-icons/navigation/arrow-drop-up');
+let CloseIcon = require('../svg-icons/navigation/arrow-drop-down');
+let IconButton = require('../icon-button');
 let CardActions = React.createClass({
   getStyles() {
     return {
       root: {
-        padding: 8
+        padding: 8,
+        position: 'relative'
+      },
+      expandableIconButton: {
+        right: 4,
+        top: 0,
+        position: 'absolute'
       }
     };
   },
 
+  _onExpanding() {
+    if (!this.props.onExpanding)
+      return;
+    if (this.props.expandable == 'open')
+      this.props.onExpanding(false);
+    else if (this.props.expandable == 'close')
+      this.props.onExpanding(true);
+  },
+
   render() {
     let styles = this.getStyles();
 
@@ -18,9 +35,20 @@ let CardActions = React.createClass({
       });
     });
 
+    var expandable;
+    if (this.props.expandable == 'open') {
+      expandable = <OpenIcon/>;
+    } else if (this.props.expandable == 'close') {
+      expandable = <CloseIcon/>;
+    }
+    if (expandable) {
+      expandable = <IconButton style={styles.expandableIconButton} onClick={this._onExpanding}>{expandable}</IconButton>;
+    }
+
     return (
       <div {...this.props} style={styles.root}>
         {children}
+        {expandable}
       </div>
     );
   }

src/card/card.jsx

@@ -6,11 +6,47 @@ let StylePropable = require('../mixins/style-propable');
 let Card = React.createClass({
   mixins:[StylePropable],
 
+  getInitialState() {
+    return { expanded: this.props.openExpanded ? true : false };
+  },
+
   propTypes: {
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    expandable: React.PropTypes.bool,
+    openExpanded: React.PropTypes.bool
+  },
+
+  _onExpandable(value) {
+    this.setState({expanded: value});
   },
 
   render() {
+
+    let newChildren = React.Children.map(this.props.children, (currentChild) => {
+      if (!currentChild) {
+        return null;
+      }
+      switch (currentChild.type.displayName) {
+        case 'CardActions' :
+          if (!this.props.expandable)
+            return currentChild;
+          return React.cloneElement(currentChild, {
+            expandable: this.state.expanded ? 'open' : 'close',
+            onExpanding: this._onExpandable
+          });
+        case 'CardHeader':
+        case 'CardMedia' :
+        case 'CardTitle' :
+          return currentChild;
+        default:
+          if (this.props.expandable && this.state.expanded == false)
+            return;
+          return currentChild;
+      }
+    }, this);
+
+
+    //TODO
     let lastElement = React.Children.count(this.props.children) > 1 ?
       this.props.children[this.props.children.length - 1]
       : this.props.children;
@@ -32,7 +68,7 @@ let Card = React.createClass({
     return (
       <Paper {...other} style={mergedStyles}>
         <div style={{paddingBottom: addBottomPadding ? 8 : 0}}>
-          {this.props.children}
+          {newChildren}
         </div>
       </Paper>
     );