fix(expander): Manual triggers work in expanders

[#100595270] Signed-off-by: Elena Sharma <esharma@pivotal.io> Signed-off-by: Charles Hansen <chansen@pivotal.io>
pivotal-cf · Feb 17, 2016 · a44bb0b · a44bb0b
1 parent ae02704
commit a44bb0b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 17 deletions.
diff --git a/library/spec/pivotal-ui-react/expander/expander_spec.js b/library/spec/pivotal-ui-react/expander/expander_spec.js
@@ -80,6 +80,19 @@ describe('ExpanderContent', function() {
       expect('.collapse').not.toHaveClass('in');
     });
   });
+  describe('when toggling expanded prop', function() {
+    beforeEach(function() {
+      renderComponent.call(this, {expanded: true});
+      jasmine.clock().tick(1000);
+    });
+
+    it('toggles open/closed', function() {
+      expect('.collapse').toHaveClass('in');
+      renderComponent.call(this, {expanded: false});
+      jasmine.clock().tick(1000);
+      expect('.collapse').not.toHaveClass('in');
+    })
+  })
 });
 
 describe('ExpanderTrigger', function() {

diff --git a/library/src/pivotal-ui-react/expander/expander.js b/library/src/pivotal-ui-react/expander/expander.js
@@ -33,6 +33,12 @@ var ExpanderContent = React.createClass({
     return {expanded: this.props.expanded};
   },
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.expanded !== this.props.expanded) {
+      this.setState({expanded: nextProps.expanded});
+    }
+  },
+
   toggle() {
     this.setState({expanded: !this.state.expanded});
   },

diff --git a/styleguide/docs/react/expander.js b/styleguide/docs/react/expander.js
@@ -18,7 +18,6 @@ Require the subcomponents:
 
 ```
 var ExpanderContent = require('pui-react-expander').ExpanderContent;
-var ExpanderTrigger = require('pui-react-expander').ExpanderTrigger;
 ```
 
 
@@ -34,22 +33,26 @@ See the example below for how to use these components in your own application.
 
 ```jsx_example
 var MoreInfo = React.createClass({
-  componentDidMount: function () {
-    this.refs.infoTrigger.setTarget(this.refs.infoContent);
-  },
-  render: function() {
-    return (
-      <main>
-        <ExpanderContent ref="infoContent">
-          <p className='h1 bg-neutral-2 type-neutral-9'>Content in expander</p>
-        </ExpanderContent>
-        <br/>
-        <ExpanderTrigger ref="infoTrigger">
-          <button className='btn btn-highlight'>Toggle Content</button>
-        </ExpanderTrigger>
-      </main>
-    )
-  }
+ getInitialState() {
+   return {expanded: false};
+ },
+
+ toggleContent() {
+   this.setState({expanded: !this.state.expanded});
+ },
+
+ render: function() {
+   return (
+     <main>
+       <ExpanderContent expanded={this.state.expanded}>
+         <p className='h1 bg-neutral-2 type-neutral-9'>Content in expander</p>
+       </ExpanderContent>
+       <button className='btn btn-highlight' onClick={this.toggleContent}>
+         Toggle Content
+       </button>
+     </main>
+   );
+ }
 });
 ```