Merge pull request #541 from appfolio/controlledExpandableOpen

gt - Add support for controlled open prop
appfolio · May 16, 2019 · 38496ef · 38496ef
2 parents 736afb5 + b4df23b
commit 38496ef
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/components/ExpandableSection.js b/src/components/ExpandableSection.js
@@ -27,6 +27,16 @@ class ExpandableSection extends React.Component {
 
   toggle = () => this.setState({ open: !this.state.open });
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.open !== this.props.open) {
+      if (nextProps.open) {
+        this.setState({ open: true });
+      } else {
+        this.setState({ open: false });
+      }
+    }
+  }
+
   render() {
     return (
       <section className={this.props.className}>

diff --git a/stories/ExpandableSection.js b/stories/ExpandableSection.js
@@ -1,19 +1,22 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { text } from '@storybook/addon-knobs';
+import { boolean, text } from '@storybook/addon-knobs';
 
 import { ExpandableSection } from '../src';
 
 storiesOf('ExpandableSection', module)
   .addWithInfo('Default', () => (
-    <ExpandableSection title={text('title', 'Click to expand me')}>
+    <ExpandableSection
+      title={text('title', 'Click to expand me')}
+      open={boolean('open', ExpandableSection.defaultProps.open)}
+    >
       <h2>BOO!</h2>
     </ExpandableSection>
   ))
   .addWithInfo('Open', () => (
     <ExpandableSection
       title={text('title', 'Expanded by default')}
-      open
+      open={boolean('open', true)}
     >
       <h2>BOO!</h2>
     </ExpandableSection>

diff --git a/test/components/ExpandableSection.spec.js b/test/components/ExpandableSection.spec.js
@@ -46,4 +46,16 @@ describe('<ExpandableSection />', () => {
     component.find('header').simulate('click');
     assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should be visible');
   });
+
+  it('should be open when prop changed', () => {
+    const component = mount(
+      <ExpandableSection title="Open">
+        <h1>Hello World!</h1>
+      </ExpandableSection>
+    );
+
+    assert.equal(component.find(Collapse).prop('isOpen'), false, 'inner block should be hidden');
+    component.setProps({ open: true });
+    assert.equal(component.find(Collapse).prop('isOpen'), true, 'inner block should be visible');
+  });
 });