Improved performance of raised button touch ripple

Author: hai-cea

src/js/raised-button.jsx

@@ -1,9 +1,9 @@
 var React = require('react');
-var CssEvent = require('./utils/css-event.js');
 var Classable = require('./mixins/classable.js');
 var EnhancedButton = require('./enhanced-button.jsx');
 var Paper = require('./paper.jsx');
 var Ripple = require('./ripple.jsx');
+var TouchRipple = require('./ripples/touch-ripple.jsx');
 
 var RaisedButton = React.createClass({
 
@@ -12,7 +12,10 @@ var RaisedButton = React.createClass({
   propTypes: {
     className: React.PropTypes.string,
     label: React.PropTypes.string.isRequired,
-    onTouchTap: React.PropTypes.func,
+    onMouseDown: React.PropTypes.func,
+    onMouseUp: React.PropTypes.func,
+    onTouchEnd: React.PropTypes.func,
+    onTouchStart: React.PropTypes.func,
     primary: React.PropTypes.bool,
     secondary: React.PropTypes.bool
   },
@@ -27,22 +30,28 @@ var RaisedButton = React.createClass({
 
   render: function() {
     var {
-      className,
-      onTouchTap,
-      ...other } = this.props,
-      classes = this.getClasses('mui-raised-button', {
-        'mui-is-primary': this.props.primary,
-        'mui-is-secondary': !this.props.primary && this.props.secondary
-      });
+      label,
+      primary,
+      secondary,
+      ...other } = this.props;
+    var classes = this.getClasses('mui-raised-button', {
+      'mui-is-primary': this.props.primary,
+      'mui-is-secondary': !this.props.primary && this.props.secondary
+    });
 
     return (
       <Paper className={classes} zDepth={this.state.zDepth}>
-        <EnhancedButton 
-          {...other}
+        <EnhancedButton {...other}
           className="mui-raised-button-container" 
-          onTouchTap={this._onTouchTap}>
+          onMouseUp={this._handleMouseUp}
+          onMouseDown={this._handleMouseDown}
+          onTouchStart={this._handleTouchStart}
+          onTouchEnd={this._handleTouchEnd}>
+
+          <TouchRipple
+          className="mui-raised-button-ripple"
+          ref="touchRipple" />
 
-          <Ripple ref="ripple" className="mui-raised-button-ripple" />
           <Ripple className="mui-raised-button-focus-ripple" />
           <span className="mui-raised-button-label">{this.props.label}</span>
 
@@ -51,22 +60,31 @@ var RaisedButton = React.createClass({
     );
   },
 
-  _onTouchTap: function(e) {
-    if (!this.props.disabled) this._animateButtonClick(e);
-    if (this.props.onTouchTap) this.props.onTouchTap(e);
+  _handleMouseDown: function(e) {
+    //only listen to left clicks
+    if (e.button === 0) {
+      this.refs.touchRipple.start(e);
+      this.setState({ zDepth: this.state.initialZDepth + 1 });
+    }
+    if (this.props.onMouseDown) this.props.onMouseDown(e);
   },
 
-  _animateButtonClick: function(e) {
-    var el = this.getDOMNode();
-
-    //animate the ripple
-    this.refs.ripple.animate(e);
+  _handleMouseUp: function(e) {
+    this.refs.touchRipple.end();
+    this.setState({ zDepth: this.state.initialZDepth });
+    if (this.props.onMouseUp) this.props.onMouseUp(e);
+  },
 
-    //animate the zdepth change
+  _handleTouchStart: function(e) {
+    this.refs.touchRipple.start(e);
     this.setState({ zDepth: this.state.initialZDepth + 1 });
-    setTimeout(function() {
-      this.setState({ zDepth: this.state.initialZDepth });
-    }.bind(this), 450);
+    if (this.props.onTouchStart) this.props.onTouchStart(e);
+  },
+
+  _handleTouchEnd: function(e) {
+    this.refs.touchRipple.end();
+    this.setState({ zDepth: this.state.initialZDepth });
+    if (this.props.onTouchEnd) this.props.onTouchEnd(e);
   }
 
 });

src/less/components/raised-button.less

@@ -4,7 +4,7 @@
   min-width: @button-min-width;
   height: @button-height;
 
-  * { .ease-out(); }
+  &, * { .ease-out(); }
 
   .mui-raised-button-container {
     border-radius: 2px;
@@ -14,6 +14,11 @@
     position: relative;
     width: 100%;
 
+    //This is need so that ripples do not bleed
+    //past border radius.
+    //See: http://stackoverflow.com/questions/17298739/css-overflow-hidden-not-working-in-chrome-when-parent-has-border-radius-and-chil
+    transform: translate3d(0, 0, 0);
+
     .mui-raised-button-focus-ripple {
       background-color: @transparent;
     }
@@ -29,11 +34,8 @@
     }
 
     .mui-raised-button-ripple {
-      &.mui-is-visible {
-        .ripple-click-alt(
-          @animation-name: raised-button-ripple-click;
-          @color: @raised-button-ripple-color;
-        )
+      .mui-ripple-circle-inner {
+        background-color: @raised-button-ripple-color;
       }
     }
 
@@ -72,11 +74,8 @@
       background-color: @raised-button-primary-color;
 
       .mui-raised-button-ripple {
-        &.mui-is-visible {
-          .ripple-click-alt(
-            @animation-name: raised-button-primary-ripple-click;
-            @color: @raised-button-primary-ripple-color;
-          )
+        .mui-ripple-circle-inner {
+          background-color: @raised-button-primary-ripple-color;
         }
       }
 
@@ -106,11 +105,8 @@
       background-color: @raised-button-secondary-color;
 
       .mui-raised-button-ripple {
-        &.mui-is-visible {
-          .ripple-click-alt(
-            @animation-name: raised-button-secondary-ripple-click;
-            @color: @raised-button-secondary-ripple-color;
-          )
+        .mui-ripple-circle-inner {
+          background-color: @raised-button-secondary-ripple-color;
         }
       }