IconButton FontIcon child hover styling

mui · May 13, 2015 · a40a430 · a40a430
1 parent 7898b03
commit a40a430
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git a/src/font-icon.jsx b/src/font-icon.jsx
@@ -1,6 +1,7 @@
 var React = require('react');
 var StylePropable = require('./mixins/style-propable');
 var Spacing = require('./styles/spacing');
+var Transitions = require('./styles/transitions');
 
 var FontIcon = React.createClass({
 
@@ -12,7 +13,7 @@ var FontIcon = React.createClass({
 
   getInitialState: function() {
     return {
-      isHovered: false,
+      hovered: false,
     };
   },
 
@@ -25,7 +26,8 @@ var FontIcon = React.createClass({
       position: 'relative',
       fontSize: Spacing.iconSize + 'px',
       display: 'inline-block',
-      userSelect: 'none'  
+      userSelect: 'none',
+      transition: Transitions.easeOut()
     };
     if (!styles.color && !this.props.className) {
       styles.color = this.getTheme().textColor;
@@ -35,16 +37,34 @@ var FontIcon = React.createClass({
 
   render: function() {
     var {
+      onMouseOut,
+      onMouseOver,
       style,
       ...other
     } = this.props;
 
     return (
-      <span {...other} 
+      <span
+        {...other}
+        onMouseOut={this._handleMouseOut}
+        onMouseOver={this._handleMouseOver}
         style={this.mergeAndPrefix(
           this.getStyles(),
-          this.props.style)} />
+          this.props.style,
+          this.state.hovered && this.props.hoverStyle)} />
     );
+  },
+
+  _handleMouseOut: function(e) {
+    this.setState({hovered: false});
+
+    if (this.props.onMouseOut) this.props.onMouseOut(e);
+  },
+
+  _handleMouseOver: function(e) {
+    this.setState({hovered: true});
+
+    if (this.props.onMouseOver) this.props.onMouseOver(e);
   }
 });
 

diff --git a/src/icon-button.jsx b/src/icon-button.jsx
@@ -117,13 +117,16 @@ var IconButton = React.createClass({
     }
 
     if (this.props.iconClassName) {
+      var { iconHoverStyle, ...iconStyle } = this.props.iconStyle;
+
       fonticon = (
         <FontIcon 
-          className={this.props.iconClassName} 
+          className={this.props.iconClassName}
+          hoverStyle={this.mergeAndPrefix(iconHoverStyle)}
           style={this.mergeAndPrefix(
             styles.icon, 
             this.props.disabled && styles.iconWhenDisabled,
-            this.props.iconStyle
+            iconStyle
           )}/>
       );
     }