Merge pull request #1806 from hugo-agbonon/feat-cardExpander

[Card] Expand on Click
mui · Oct 7, 2015 · 58685dc · 58685dc
2 parents 6671f90 + a744e49
commit 58685dc
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 11 deletions.
diff --git a/docs/src/app/components/pages/components/cards.jsx b/docs/src/app/components/pages/components/cards.jsx
@@ -53,6 +53,13 @@ class CardPage extends React.Component {
             header: 'optional',
             desc: 'Whether this card component is expandable. Can be set on any child of the Card component.',
           },
+          {
+            name: 'actAsExpander',
+            type: 'bool',
+            header: 'optional',
+            desc: 'Whether a click on this card component expands the card. ' +
+                   'Can be set on any child of the Card component.',
+          },
           {
             name: 'showExpandableButton',
             type: 'bool',
@@ -114,6 +121,7 @@ class CardPage extends React.Component {
               title="Title"
               subtitle="Subtitle"
               avatar={<Avatar style={{color:'red'}}>A</Avatar>}
+              actAsExpander={true}
               showExpandableButton={true}>
             </CardHeader>
             <CardText expandable={true}>

diff --git a/docs/src/app/components/raw-code/cards-code.txt b/docs/src/app/components/raw-code/cards-code.txt
@@ -28,6 +28,7 @@
     title="Title"
     subtitle="Subtitle"
     avatar={<Avatar style={{color:'red'}}>A</Avatar>}
+    actAsExpander={true}
     showExpandableButton={true}>
   </CardHeader>
   <CardText expandable={true}>

diff --git a/src/card/card-actions.jsx b/src/card/card-actions.jsx
@@ -16,6 +16,7 @@ const CardActions = React.createClass({
 
   propTypes: {
     expandable: React.PropTypes.bool,
+    actAsExpander: React.PropTypes.bool,
     showExpandableButton: React.PropTypes.bool,
   },
 

diff --git a/src/card/card-expandable.jsx b/src/card/card-expandable.jsx
@@ -79,13 +79,6 @@ const CardExpandable = React.createClass({
     this.setState({muiTheme: newMuiTheme});
   },
 
-  _onExpanding() {
-    if (this.props.expanded === true)
-      this.props.onExpanding(false);
-    else
-      this.props.onExpanding(true);
-  },
-
   render() {
     let styles = this.getStyles();
 
@@ -100,7 +93,7 @@ const CardExpandable = React.createClass({
     let expandableBtn = (
       <IconButton
         style={mergedStyles}
-        onClick={this._onExpanding}>
+        onTouchTap={this.props.onExpanding}>
         {expandable}
       </IconButton>
     );

diff --git a/src/card/card-header.jsx b/src/card/card-header.jsx
@@ -17,6 +17,7 @@ const CardHeader = React.createClass({
     subtitleStyle: React.PropTypes.object,
     textStyle: React.PropTypes.object,
     expandable: React.PropTypes.bool,
+    actAsExpander: React.PropTypes.bool,
     showExpandableButton: React.PropTypes.bool,
   },
 

diff --git a/src/card/card-media.jsx b/src/card/card-media.jsx
@@ -15,6 +15,7 @@ const CardMedia = React.createClass({
     overlayContentStyle: React.PropTypes.object,
     mediaStyle: React.PropTypes.object,
     expandable: React.PropTypes.bool,
+    actAsExpander: React.PropTypes.bool,
   },
 
   getStyles() {

diff --git a/src/card/card-text.jsx b/src/card/card-text.jsx
@@ -11,6 +11,7 @@ const CardText = React.createClass({
     color: React.PropTypes.string,
     style: React.PropTypes.object,
     expandable: React.PropTypes.bool,
+    actAsExpander: React.PropTypes.bool,
   },
 
   getDefaultProps() {

diff --git a/src/card/card-title.jsx b/src/card/card-title.jsx
@@ -15,6 +15,7 @@ const CardTitle = React.createClass({
     subtitleColor: React.PropTypes.string,
     subtitleStyle: React.PropTypes.object,
     expandable: React.PropTypes.bool,
+    actAsExpander: React.PropTypes.bool,
     showExpandableButton: React.PropTypes.bool,
   },
 

diff --git a/src/card/card.jsx b/src/card/card.jsx
@@ -17,10 +17,11 @@ const Card = React.createClass({
     onExpandChange: React.PropTypes.func,
   },
 
-  _onExpandable(value) {
-    this.setState({expanded: value});
+  _onExpandable() {
+    let newExpandedState = !(this.state.expanded === true);
+    this.setState({expanded: newExpandedState});
     if (this.props.onExpandChange)
-      this.props.onExpandChange(value);
+      this.props.onExpandChange(newExpandedState);
   },
 
   render() {
@@ -31,6 +32,10 @@ const Card = React.createClass({
       }
       if (this.state.expanded === false && currentChild.props.expandable === true)
         return;
+      if (currentChild.props.actAsExpander === true) {
+        currentChild.props.onTouchTap = this._onExpandable;
+        currentChild.props.style = this.mergeStyles({ cursor: 'pointer' }, currentChild.props.style);
+      }
       if (currentChild.props.showExpandableButton === true) {
         lastElement = React.cloneElement(currentChild, {},
           currentChild.props.children,