Add onRippleEnded. Fixes #289

components/ripple/Ripple.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ClassNames from 'classnames';
 import style from './style';
+import events from '../utils/events';
 import prefixer from '../utils/prefixer';
 
 const defaults = {
@@ -23,6 +24,7 @@ const Ripple = (options = {}) => {
       static propTypes = {
         children: React.PropTypes.any,
         disabled: React.PropTypes.bool,
+        onRippleEnded: React.PropTypes.func,
         ripple: React.PropTypes.bool,
         rippleCentered: React.PropTypes.bool,
         rippleClassName: React.PropTypes.string,
@@ -45,6 +47,20 @@ const Ripple = (options = {}) => {
         width: null
       };
 
+      componentDidMount () {
+        if (this.props.onRippleEnded) {
+          events.addEventListenerOnTransitionEnded(this.refs.ripple, (evt) => {
+            if (evt.propertyName === 'transform') this.props.onRippleEnded(evt);
+          });
+        }
+      }
+
+      componentWillUnmount () {
+        if (this.props.onRippleEnded) {
+          events.removeEventListenerOnTransitionEnded(this.refs.ripple);
+        }
+      }
+
       handleEnd = () => {
         document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
         this.setState({active: false});

components/ripple/readme.md

@@ -20,8 +20,9 @@ const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
 
 In any component you decorate with the Ripple you'd get some additional props:
 
-| Name          | Type        | Default     | Description|
+| Name            | Type        | Default     | Description|
 |:-----|:-----|:-----|:-----|
-| `centered`    | `Boolean`   | `false`     | True in case you want a centered ripple.|
-| `className`   | `String`    | `''`        | String to customize appearance (color and opacity for example).|
-| `spread`      | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|
+| `centered`      | `Boolean`   | `false`     | True in case you want a centered ripple.|
+| `className`     | `String`    | `''`        | String to customize appearance (color and opacity for example).|
+| `onRippleEnded` | `Function`  |             | Function that will be called when the ripple animation ends. |
+| `spread`        | `Number`    | `2`         | Factor to indicate how much should the ripple spread under the component.|

components/utils/events.js

@@ -37,5 +37,34 @@ export default {
       node = node.parentNode;
     }
     return false;
+  },
+
+  addEventListenerOnTransitionEnded (element, fn) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.addEventListener(eventName, fn);
+    return true;
+  },
+
+  removeEventListenerOnTransitionEnded (element) {
+    const eventName = transitionEventNamesFor(element);
+    if (!eventName) return false;
+    element.removeEventListener(eventName);
+    return true;
   }
 };
+
+const TRANSITIONS = {
+  'transition': 'transitionend',
+  'OTransition': 'oTransitionEnd',
+  'MozTransition': 'transitionend',
+  'WebkitTransition': 'webkitTransitionEnd'
+};
+
+function transitionEventNamesFor (element) {
+  for (const transition in TRANSITIONS) {
+    if (element.style[transition] !== undefined) {
+      return TRANSITIONS[transition];
+    }
+  }
+}

spec/components/button.js

@@ -10,7 +10,7 @@ const ButtonTest = () => (
     <Button href='http://github.com/javivelasco' target='_blank' raised>
       <GithubIcon /> Github
     </Button>
-    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' accent onRippleEnded={rippleEnded} />
     <Button icon='bookmark' label='Bookmark' raised primary />
     <Button icon='inbox' label='Inbox' flat />
     <Button icon='add' floating />
@@ -27,4 +27,8 @@ const ButtonTest = () => (
   </section>
 );
 
+function rippleEnded () {
+  console.log('Ripple animation ended!');
+}
+
 export default ButtonTest;

spec/style.scss

@@ -38,7 +38,7 @@ $offset: 1.8 * $unit;
 }
 
 .appbar {
-  z-index: 999999 !important;
+  z-index: 999 !important;
   display: flex;
   > h1 {
     flex-grow: 1;