Implement onRest and remove onTransitionEnd (#8)

* Implement onRest and remove onTransitionEnd

* Update storybook

* Update CHANGELOG.md

CHANGELOG.md

@@ -1,9 +1,15 @@
 # Changelog
 
+# 3.0.0
+> Apr 7, 2017
+
+* :tada: **Feature** added `onRest` callback. The callback is triggered when your transition on `height` (specified in `className`) is done.
+* :boom: **Breaking** Remove `onTransitionEnd` callback. Please use `onRest` instead.
+
 # 2.1.0
 > Apr 7, 2017
 
-* :tada: **Feature** added `onTransitionEnd` callback that gets called after the expand/collapse animation has finished 
+* :tada: **Feature** added `onTransitionEnd` callback that gets called after the expand/collapse animation has finished
 
 # 2.0.2
 > Apr 5, 2017

README.md

@@ -38,9 +38,8 @@ One or multiple children with static, variable or dynamic height.
 </Collapse>
 ```
 
-#### `onTransitionEnd`: PropTypes.func
-
-A function that is called each time the expand or collapse animation has finished
+#### `onRest`: PropTypes.func
+Callback function for when your transition on `height` (specified in `className`) is finished. It can be used to trigger any function after transition is done.
 
 #### `className`: PropType.string
 

src/components/Collapse.jsx

@@ -3,7 +3,7 @@ import util from '../util';
 
 class Collapse extends Component {
   componentDidMount() {
-    if (this.props.isOpen && this.content) {
+    if (this.content && this.props.isOpen) {
       this.setContentStyleProperty('height', 'auto');
     }
   }
@@ -45,13 +45,13 @@ class Collapse extends Component {
           overflow: 'hidden',
         }}
         className={this.props.className}
-        onTransitionEnd={() => {
+        onTransitionEnd={(e) => {
           if (this.props.isOpen) {
             this.setContentStyleProperty('height', 'auto');
             this.setContentStyleProperty('overflow', 'visible');
           }
-          if (this.props.onTransitionEnd) {
-            this.props.onTransitionEnd();
+          if (this.props.onRest && e.target === this.content && e.propertyName === 'height') {
+            this.props.onRest();
           }
         }}
       >
@@ -65,14 +65,14 @@ Collapse.defaultProps = {
   isOpen: false,
   className: null,
   children: null,
-  onTransitionEnd: null,
+  onRest: null,
 };
 
 Collapse.propTypes = {
   children: PropTypes.node,
   isOpen: PropTypes.bool,
   className: PropTypes.string,
-  onTransitionEnd: PropTypes.func,
+  onRest: PropTypes.func,
 };
 
 export default Collapse;

src/stories/App.jsx

@@ -34,7 +34,7 @@ class App extends Component {
               <Collapse
                 isOpen={this.state.index === index}
                 className="react-css-collapse-transition"
-                onTransitionEnd={action(`${element.name} is now ${this.state.index === index ? 'open' : 'closed'}`)}
+                onRest={action(`${element.name} is now ${this.state.index === index ? 'open' : 'closed'}`)}
               >
                 <div style={{ background: 'lightpink', padding: '20px' }}>
                   {element.text}