[EnhancedButton] Only render a focus ripple when necessary

mui · Jul 29, 2015 · 0f61f9e · 0f61f9e
1 parent 7158352
commit 0f61f9e
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 25 deletions.
diff --git a/src/enhanced-button.jsx b/src/enhanced-button.jsx
@@ -143,7 +143,8 @@ let EnhancedButton = React.createClass({
 
     let buttonChildren = [];
 
-    if (!disabled && !disableFocusRipple && !disableKeyboardFocus) {
+    if (this.state.isKeyboardFocused && !disabled &&
+      !disableFocusRipple && !disableKeyboardFocus) {
       buttonChildren.push(
         <FocusRipple
           key="focusRipple"

diff --git a/src/transition-groups/scale-in-child.jsx b/src/transition-groups/scale-in-child.jsx
@@ -1,10 +1,10 @@
-let React = require('react/addons');
-let StylePropable = require('../mixins/style-propable');
-let AutoPrefix = require('../styles/auto-prefix');
-let Transitions = require('../styles/transitions');
+const React = require('react/addons');
+const StylePropable = require('../mixins/style-propable');
+const AutoPrefix = require('../styles/auto-prefix');
+const Transitions = require('../styles/transitions');
 
 
-let ScaleInChild = React.createClass({
+const ScaleInChild = React.createClass({
 
   mixins: [StylePropable],
 
@@ -22,20 +22,20 @@ let ScaleInChild = React.createClass({
     };
   },
 
-  componentWillEnter(callback) {
-    let style = React.findDOMNode(this).style;
+  componentWillAppear(callback) {
+    this._initializeAnimation(callback);
+  },
 
-    style.opacity = '0';
-    AutoPrefix.set(style, 'transform', 'scale(0)');
+  componentWillEnter(callback) {
+    this._initializeAnimation(callback);
+  },
 
-    setTimeout(callback, this.props.enterDelay);
+  componentDidAppear() {
+    this._animate();
   },
 
   componentDidEnter() {
-    let style = React.findDOMNode(this).style;
-
-    style.opacity = '1';
-    AutoPrefix.set(style, 'transform', 'scale(' + this.props.maxScale + ')');
+    this._animate();
   },
 
   componentWillLeave(callback) {
@@ -48,14 +48,14 @@ let ScaleInChild = React.createClass({
   },
 
   render() {
-    let {
+    const {
       children,
       enterDelay,
       style,
       ...other,
     } = this.props;
 
-    let mergedRootStyles = this.mergeAndPrefix({
+    const mergedRootStyles = this.mergeAndPrefix({
       position: 'absolute',
       height: '100%',
       width: '100%',
@@ -71,6 +71,22 @@ let ScaleInChild = React.createClass({
     );
   },
 
+  _animate() {
+    let style = React.findDOMNode(this).style;
+
+    style.opacity = '1';
+    AutoPrefix.set(style, 'transform', 'scale(' + this.props.maxScale + ')');
+  },
+
+  _initializeAnimation(callback) {
+    let style = React.findDOMNode(this).style;
+
+    style.opacity = '0';
+    AutoPrefix.set(style, 'transform', 'scale(0)');
+
+    setTimeout(callback, this.props.enterDelay);
+  },
+
 });
 
 module.exports = ScaleInChild;
diff --git a/src/transition-groups/scale-in.jsx b/src/transition-groups/scale-in.jsx
@@ -1,10 +1,10 @@
-let React = require('react/addons');
-let ReactTransitionGroup = React.addons.TransitionGroup;
-let StylePropable = require('../mixins/style-propable');
-let ScaleInChild = require('./scale-in-child');
+const React = require('react/addons');
+const ReactTransitionGroup = React.addons.TransitionGroup;
+const StylePropable = require('../mixins/style-propable');
+const ScaleInChild = require('./scale-in-child');
 
 
-let ScaleIn = React.createClass({
+const ScaleIn = React.createClass({
 
   mixins: [StylePropable],
 
@@ -22,7 +22,7 @@ let ScaleIn = React.createClass({
   },
 
   render() {
-    let {
+    const {
       children,
       childStyle,
       enterDelay,
@@ -32,13 +32,13 @@ let ScaleIn = React.createClass({
       ...other,
     } = this.props;
 
-    let mergedRootStyles = this.mergeAndPrefix({
+    const mergedRootStyles = this.mergeAndPrefix({
       position: 'relative',
       overflow: 'hidden',
       height: '100%',
     }, style);
 
-    let newChildren = React.Children.map(children, (child) => {
+    const newChildren = React.Children.map(children, (child) => {
       return (
         <ScaleInChild
           key={child.key}