- Add proper type validation for the animation

- Remove the unused function.

src/lib/animation.js

@@ -4,18 +4,27 @@ import {spring, Motion} from 'react-motion';
 import PureRenderComponent from './pure-render-component';
 
 const propTypes = {
-  animatedProps: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
+  animatedProps: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
+  onStart: React.PropTypes.func,
+  onEnd: React.PropTypes.func,
+  stiffness: React.PropTypes.number,
+  damping: React.PropTypes.number,
+  precision: React.PropTypes.number
 };
 
 class Animation extends PureRenderComponent {
   constructor(props) {
     super(props);
     this._updateInterpolator(props);
     this._renderChildren = this._renderChildren.bind(this);
+    this._motionEndHandler = this._motionEndHandler.bind(this);
   }
 
   componentWillUpdate(props) {
     this._updateInterpolator(this.props, props);
+    if (props.onStart) {
+      props.onStart();
+    }
   }
 
   /**
@@ -70,6 +79,12 @@ class Animation extends PureRenderComponent {
     );
   }
 
+  _motionEndHandler() {
+    if (this.props.onEnd) {
+      this.props.onEnd();
+    }
+  }
+
   render() {
     const defaultStyle = {i: 0};
     const style = {i: spring(1)};
@@ -78,7 +93,7 @@ class Animation extends PureRenderComponent {
     // TODO: find a better solution for the spring.
     const key = Math.random();
     return (
-      <Motion {...{defaultStyle, style, key}}>
+      <Motion {...{defaultStyle, style, key}} onRest={this._motionEndHandler}>
         {this._renderChildren}
       </Motion>
     );

src/lib/utils/animation-utils.js

@@ -19,52 +19,12 @@
 // THE SOFTWARE.
 
 import React from 'react';
+import Animation from '../animation';
 
 /**
  * Property type for the animation.
  */
 export const AnimationPropType = React.PropTypes.oneOfType([
-  React.PropTypes.shape({
-    duration: React.PropTypes.number
-  }),
-  React.PropTypes.bool
+  React.PropTypes.shape(Animation.propTypes),
+  React.PropTypes.oneOf([true])
 ]);
-
-/**
- * Object with default settings for the lib's animation.
- * @const
- */
-export const DEFAULT_ANIMATION = {
-  duration: 100
-};
-
-/**
- * Transforms a regular CSS object into an object with CSS animation (e. g. adds
- * the `transition` property for all keys of an object).
- * @param {{animation: *}} props The object of component's props.
- * @param {Object} style A style object to apply animation to.
- * @returns {Object} New style object with CSS animation applied.
- */
-export function getCSSAnimation(props, style) {
-  let {animation} = props;
-  let transition = 'none';
-  if (animation) {
-    // Fallback to default animation if no animation is passed.
-    if (!(animation instanceof Object)) {
-      animation = DEFAULT_ANIMATION;
-    }
-    const keys = Object.keys(style);
-    // Create a string of visualized parameters and filter out those, which
-    // don't have values.
-    const animationKeys = keys
-      .filter(key => Boolean(style[key]))
-      .map(key => `${key} ${animation.duration / 1000}s`);
-    if (animationKeys.length) {
-      transition = animationKeys.join(',');
-    }
-  }
-  return {
-    transition,
-    ... style
-  };
-}