feat(Collapse): Add onOpened and onClosed events (#277) (#301)

j-francisco · eddywashere · commit 6c5621f65828 · 2017-01-20T12:30:48.000-08:00
* feat(Collapse): Add onOpened and onClosed events

Allow passing in onOpened and onClosed props as functions that are
triggered after the Collapse component has finished opening or closing.
Useful for performing an action that relies on the new height of the
page after a Collapse component has opened or closed (such as
scrolling).

* Fix typo in test

* fix(Collapse): default onOpened and onClosed to noop

Remove the need for the onOpened and onClosed helper functions and call
the props directly.

* Add info about onOpened and onClosed to Collapse example
diff --git a/docs/lib/Components/CollapsePage.js b/docs/lib/Components/CollapsePage.js
@@ -6,6 +6,9 @@ import Helmet from 'react-helmet';
 import CollapseExample from '../examples/Collapse';
 const CollapseExampleSource = require('!!raw!../examples/Collapse');
 
+import CollapseEventsExample from '../examples/CollapseEvents';
+const CollapseEventsExampleSource = require('!!raw!../examples/CollapseEvents');
+
 export default class CollapsePage extends React.Component {
   render() {
     return (
@@ -32,11 +35,23 @@ export default class CollapsePage extends React.Component {
   delay: PropTypes.oneOfType([
     PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
     PropTypes.number
-  ]),
-  // optionally override show/hide delays - default { show: 350, hide: 350 }
+  ]), // optionally override show/hide delays - default { show: 350, hide: 350 }
+  onOpened: PropTypes.func,
+  onClosed: PropTypes.func,
 }`}
           </PrismCode>
         </pre>
+
+        <h3>Events</h3>
+        <p>Use the onOpened and onClosed props for callbacks when the Collapse has finished opening or closing.</p>
+        <div className="docs-example">
+          <CollapseEventsExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {CollapseEventsExampleSource}
+          </PrismCode>
+        </pre>
       </div>
     );
   }
diff --git a/docs/lib/examples/CollapseEvents.js b/docs/lib/examples/CollapseEvents.js
@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Collapse, Button, CardBlock, Card } from 'reactstrap';
+
+class Example extends Component {
+  constructor(props) {
+    super(props);
+    this.onOpened = this.onOpened.bind(this);
+    this.onClosed = this.onClosed.bind(this);
+    this.toggle = this.toggle.bind(this);
+    this.state = { collapse: false, status: 'Closed' };
+  }
+
+  onOpened() {
+    this.setState({ ...this.state, status: 'Opened' });
+  }
+
+  onClosed() {
+    this.setState({ ...this.state, status: 'Closed' });
+  }
+
+  toggle() {
+    const status = !this.state.collapse ? 'Opening...' : 'Closing...';
+    this.setState({ collapse: !this.state.collapse, status });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+        <h5>Current state: {this.state.status}</h5>
+        <Collapse isOpen={this.state.collapse} onOpened={this.onOpened} onClosed={this.onClosed}>
+          <Card>
+            <CardBlock>
+            Anim pariatur cliche reprehenderit,
+             enim eiusmod high life accusamus terry richardson ad squid. Nihil
+             anim keffiyeh helvetica, craft beer labore wes anderson cred
+             nesciunt sapiente ea proident.
+            </CardBlock>
+          </Card>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default Example;
diff --git a/src/Collapse.js b/src/Collapse.js
@@ -18,6 +18,8 @@ const propTypes = {
     PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
     PropTypes.number,
   ]),
+  onOpened: PropTypes.func,
+  onClosed: PropTypes.func,
 };
 
 const DEFAULT_DELAYS = {
@@ -29,11 +31,14 @@ const defaultProps = {
   isOpen: false,
   tag: 'div',
   delay: DEFAULT_DELAYS,
+  onOpened: () => {},
+  onClosed: () => {},
 };
 
 class Collapse extends Component {
   constructor(props) {
     super(props);
+
     this.state = {
       collapse: props.isOpen ? SHOWN : HIDDEN,
       height: null
@@ -78,6 +83,20 @@ class Collapse extends Component {
     // else: do nothing.
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.collapse === SHOWN &&
+        prevState &&
+        prevState.collapse !== SHOWN) {
+      this.props.onOpened();
+    }
+
+    if (this.state.collapse === HIDDEN &&
+        prevState &&
+        prevState.collapse !== HIDDEN) {
+      this.props.onClosed();
+    }
+  }
+
   componentWillUnmount() {
     clearTimeout(this.transitionTag);
   }
@@ -101,7 +120,7 @@ class Collapse extends Component {
       cssModule,
       tag: Tag,
       ...attributes
-    } = omit(this.props, ['isOpen', 'delay']);
+    } = omit(this.props, ['isOpen', 'delay', 'onOpened', 'onClosed']);
     const { collapse, height } = this.state;
     let collapseClass;
     switch (collapse) {
diff --git a/src/__tests__/Collapse.spec.js b/src/__tests__/Collapse.spec.js
@@ -160,4 +160,45 @@ describe('Collapse', () => {
     wrapper.unmount();
     expect(Collapse.prototype.componentWillUnmount).toHaveBeenCalled();
   });
+
+  it('should call onOpened after opening', () => {
+    const onOpened = jasmine.createSpy('onOpenedSpy');
+    const onClosed = jasmine.createSpy('onClosedSpy');
+    const wrapper = mount(<Collapse isOpen={isOpen} onOpened={onOpened} onClosed={onClosed} />);
+
+    jasmine.clock().tick(300);
+    expect(isOpen).toBe(false);
+    expect(onOpened).not.toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({ isOpen });
+    jasmine.clock().tick(380);
+    expect(isOpen).toBe(true);
+    expect(onOpened).toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
+
+  it('should call onClosed after closing', () => {
+    const onOpened = jasmine.createSpy('onOpenedSpy');
+    const onClosed = jasmine.createSpy('onClosedSpy');
+    toggle();
+    const wrapper = mount(<Collapse isOpen={isOpen} onOpened={onOpened} onClosed={onClosed} />);
+
+    jasmine.clock().tick(380);
+    expect(isOpen).toBe(true);
+    expect(onOpened).not.toHaveBeenCalled();
+    expect(onClosed).not.toHaveBeenCalled();
+
+    toggle();
+    wrapper.setProps({ isOpen });
+    jasmine.clock().tick(380);
+    expect(isOpen).toBe(false);
+    expect(onOpened).not.toHaveBeenCalled();
+    expect(onClosed).toHaveBeenCalled();
+
+    wrapper.unmount();
+  });
 });
