Merge pull request #146 from react-toolbox/boost-ripple-performance

Boost ripple performance

.eslintrc

@@ -17,6 +17,7 @@
   "parser": "babel-eslint",
 
   "plugins": [
+    "babel",
     "react"
   ],
 
@@ -168,6 +169,7 @@
     "operator-linebreak": [2, "after"],
     "padded-blocks": [0],
     "prefer-const": [2],
+    "prefer-spread": [2],
     "quote-props": [0],
     "radix": [0],
     "semi": [2],
@@ -210,6 +212,7 @@
     }],
     "react/jsx-uses-react": [2],
     "react/jsx-uses-vars": [2],
-    "react/react-in-jsx-scope": [2]
+    "react/react-in-jsx-scope": [2],
+    "babel/object-shorthand": [2]
   }
 }

components/_mixins.scss

@@ -1,4 +1,4 @@
-//-- Typography
+// scss-lint:disable VendorPrefix
 @mixin typo-preferred-font($use-preferred: true) {
   @if $use-preferred {
     font-family: $preferred-font;
@@ -262,21 +262,18 @@
 @mixin ripple-loading($name, $width, $height, $opacity: 0.3) {
   @keyframes #{$name} {
     0% {
-      width: 0;
-      height: 0;
       opacity: $opacity;
+      transform: translate3d(-50%, -50%, 0) scale(0);
     }
 
     95% {
-      width: $width;
-      height: $height;
       opacity: 0;
+      transform: translate3d(-50%, -50%, 0) scale(1);
     }
 
     100% {
-      width: 0;
-      height: 0;
       opacity: 0;
+      transform: translate3d(-50%, -50%, 0) scale(0);
     }
   }
 }

components/button/index.jsx

@@ -51,8 +51,9 @@ class Button extends React.Component {
   };
 
   render () {
-    const {accent, flat, floating, href, icon, label, loading, mini,
+    const {accent, flat, floating, href, icon, label,
-           primary, raised, ripple, toggle, tooltip, tooltipDelay, ...others} = this.props;
+           loading, mini, primary, raised, ripple, toggle,
+           tooltip, tooltipDelay, ...others} = this.props;  //eslint-disable-line no-redeclare
     const element = href ? 'a' : 'button';
     const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
     const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';

components/button/style.scss

@@ -3,6 +3,7 @@
 @import "./config";
 
 %button {
+  @include typo-button();
   position: relative;
   display: inline-block;
   height: $button-height;
@@ -24,7 +25,6 @@
     border: 0;
   }
   > span:not(.tooltip) {
-    @include typo-button();
     display: inline-block;
     line-height: $button-height;
     vertical-align: middle;
@@ -41,7 +41,7 @@
     pointer-events: none;
   }
   [data-react-toolbox="ripple"] {
-    overflow: hidden;
+    @include rounded-overflow();
   }
 }
 
@@ -97,10 +97,8 @@
   }
   .icon {
     font-size: 120%;
-    vertical-align: middle;
-  }
-  .icon {
     line-height: $button-height;
+    vertical-align: middle;
   }
   [data-react-toolbox="ripple"] {
     border-radius: 50%;

components/commons.scss

@@ -1,13 +1,9 @@
 @import "./base";
+@import "~normalize.css";
 
-$import-normalize: true !default;
 $import-font: true !default;
 $import-flex-attributes: false !default;
 
-@if $import-normalize == true {
-  @import "~normalize.css";
-}
-
 @if $import-font == true {
   @import url($font-roboto-url);
 }

components/dropdown/index.jsx

@@ -28,7 +28,7 @@ class Dropdown extends React.Component {
     const client = event.target.getBoundingClientRect();
     const screen_height = window.innerHeight || document.documentElement.offsetHeight;
     const up = this.props.auto ? client.top > ((screen_height / 2) + client.height) : false;
-    this.setState({active: true, up: up});
+    this.setState({active: true, up});
   };
 
   handleSelect = (item) => {

components/ripple/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import prefixer from '../utils/prefixer';
 import style from './style';
 
 class Ripple extends React.Component {
@@ -25,32 +26,41 @@ class Ripple extends React.Component {
     width: null
   };
 
-  handleEnd = (touch = false) => {
+  handleEnd = () => {
-    document.removeEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd);
+    document.removeEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
     this.setState({active: false});
   };
 
-  start = ({ pageX, pageY }, touch = false) => {
+  start = ({pageX, pageY}, touch = false) => {
-    document.addEventListener(touch ? 'touchend' : 'mouseup', this.handleEnd.bind(this, touch));
+    this.touch = touch;
+    document.addEventListener(this.touch ? 'touchend' : 'mouseup', this.handleEnd);
     const {top, left, width} = this._getDescriptor(pageX, pageY);
-    this.setState({active: false, restarting: true, width: 0}, () => {
+    this.setState({active: false, restarting: true, top, left, width}, () => {
       this.refs.ripple.offsetWidth;  //eslint-disable-line no-unused-expressions
-      this.setState({active: true, restarting: false, top, left, width});
+      this.setState({active: true, restarting: false});
     });
   };
 
   _getDescriptor (pageX, pageY) {
-    const { left, top, height, width } = ReactDOM.findDOMNode(this).getBoundingClientRect();
+    const {left, top, height, width} = ReactDOM.findDOMNode(this).getBoundingClientRect();
     return {
-      left: this.props.centered ? width / 2 : pageX - left + window.scrollX,
+      left: this.props.centered ? 0 : pageX - left - width / 2 + window.scrollX,
-      top: this.props.centered ? height / 2 : pageY - top + window.scrollY,
+      top: this.props.centered ? 0 : pageY - top - height / 2 + window.scrollY,
       width: width * this.props.spread
     };
   }
 
   render () {
     const { left, top, width } = this.state;
-    const rippleStyle = {left, top, width, height: width};
+    const scale = this.state.restarting ? 0 : 1;
+    let rippleStyle = {width, height: width};
+
+    if (!this.props.loading) {
+      rippleStyle = prefixer({
+        transform: `translate3d(${-width / 2 + left}px, ${-width / 2 + top}px, 0) scale(${scale})`
+      }, rippleStyle);
+    }
+
     let className = style[this.props.loading ? 'loading' : 'normal'];
     if (this.state.active) className += ` ${style.active}`;
     if (this.state.restarting) className += ` ${style.restarting}`;

components/ripple/style.scss

@@ -3,14 +3,13 @@
 
 %ripple {
   position: absolute;
+  top: 50%;
+  left: 50%;
   z-index: $z-index-high;
   pointer-events: none;
   background-color: currentColor;
   border-radius: 50%;
-  transform-style: preserve-3d;
+  transform-origin: 50% 50%;
-  transform: translate3d(-50%, -50%, 0);
-  backface-visibility: hidden;
-  will-change: width, height, opacity;
 }
 
 .wrapper {
@@ -25,26 +24,24 @@
 
 .normal {
   @extend %ripple;
-  width: 0;
-  height: 0;
-  opacity: $ripple-final-opacity;
-  transition-timing-function: $animation-curve-linear-out-slow-in;
   transition-duration: $ripple-duration;
-  transition-property: height, width;
+  &.restarting {
-  &:not(.active) {
+    opacity: $ripple-final-opacity;
+    transition-property: none;
+  }
+  &.active {
+    opacity: $ripple-final-opacity;
+    transition-property: transform;
+  }
+  &:not(.active):not(.restarting) {
     opacity: 0;
-    transition-property: height, width, opacity;
+    transition-property: opacity, transform;
-    &.restarting {
-      transition-property: none;
-    }
   }
 }
 
 .loading {
   @extend %ripple;
   @include ripple-loading(ripple, $ripple-size, $ripple-size);
-  top: 50%;
-  left: 50%;
   width: $ripple-size;
   height: $ripple-size;
   opacity: $ripple-final-opacity;

components/slider/__tests__/index.spec.jsx

@@ -103,7 +103,7 @@ describe('Slider', function () {
   describe('#events', function () {
     beforeEach(function () {
       onChange = sinon.spy();
-      props = { min: -500, max: 500, onChange: onChange };
+      props = { min: -500, max: 500, onChange };
       state = { sliderStart: 0, sliderLength: 1000 };
       slider = utils.renderComponent(Slider, props, state);
       slider.handleResize = (event, callback) => { callback(); };

components/tooltip/style.scss

@@ -14,6 +14,7 @@
   line-height: $font-size-small;
   color: $tooltip-color;
   text-align: center;
+  text-transform: none;
   background: $tooltip-background;
   border-radius: $tooltip-border-radius;
   transform: scale(0);

components/utils/prefixer.js

@@ -25,8 +25,8 @@ function addPrefixesTo (style, property, value) {
   return style;
 }
 
-function prefixer (style) {
+function prefixer (style, defaultValue = {}) {
-  const _style = {};
+  const _style = defaultValue;
   for (const property in style) {
     _style[property] = style[property];
     if (properties[property]) {

docs/app/components/preview/index.jsx

@@ -39,7 +39,7 @@ const Preview = React.createClass({
 
   setTimeout () {
     clearTimeout(this.timeoutID);
-    this.timeoutID = setTimeout.apply(null, arguments);
+    this.timeoutID = setTimeout(...arguments);
   },
 
   compileCode () {
@@ -72,7 +72,7 @@ const Preview = React.createClass({
       const compiledCode = this.compileCode();
 
       /*eslint-disable no-eval*/
-      const Component = eval(compiledCode).apply(null, scope);
+      const Component = eval(compiledCode)(...scope);
       ReactDOM.render(Component, mountNode);
       if (this.state.error) {
         this.setState({error: null});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-toolbox",
   "version": "0.12.12",
-  "homepage": "www.react-toolbox.com",
+  "homepage": "http://www.react-toolbox.com",
   "description": "A set of React components implementing Google's Material Design specification with the power of CSS Modules.",
   "author": "React Toolbox Team (http://github.com/react-toolbox)",
   "contributors": [
@@ -53,15 +53,16 @@
     "autoprefixer": "^6.0.3",
     "babel": "^5.8.23",
     "babel-core": "^5.8.23",
-    "babel-eslint": "^4.1.3",
+    "babel-eslint": "^4.1.5",
     "babel-loader": "^5.3.2",
     "babel-plugin-react-transform": "^1.1.1",
     "core-js": "^1.2.6",
     "cpx": "^1.2.1",
     "cross-env": "^1.0.4",
     "css-loader": "^0.21.0",
-    "eslint": "^1.7.3",
+    "eslint": "^1.10.1",
-    "eslint-plugin-react": "^3.3.1",
+    "eslint-plugin-babel": "^2.1.1",
+    "eslint-plugin-react": "^3.10.0",
     "expect": "^1.8.0",
     "express": "^4.13.3",
     "extract-text-webpack-plugin": "^0.8.2",