From 22f80dc6f1fbd24ceba404237b2782ab7bd64c0b Mon Sep 17 00:00:00 2001 From: M03M Date: Wed, 18 Mar 2015 14:42:39 -0500 Subject: [PATCH] Added hover props and fixed style bug. --- src/js/drop-down-icon.jsx | 21 ++++---- src/js/drop-down-menu.jsx | 87 +++++++++++++++++++------------ src/js/flat-button.jsx | 8 ++- src/js/floating-action-button.jsx | 3 +- src/js/font-icon.jsx | 53 +++++++++++++++---- src/js/raised-button.jsx | 10 ++-- src/js/svg-icons/svg-icon.jsx | 57 +++++++++++++++----- 7 files changed, 170 insertions(+), 69 deletions(-) diff --git a/src/js/drop-down-icon.jsx b/src/js/drop-down-icon.jsx index 7101c79d95896c..3539492cd001f5 100644 --- a/src/js/drop-down-icon.jsx +++ b/src/js/drop-down-icon.jsx @@ -15,12 +15,15 @@ var DropDownIcon = React.createClass({ propTypes: { onChange: React.PropTypes.func, menuItems: React.PropTypes.array.isRequired, - closeOnMenuItemClick: React.PropTypes.bool + closeOnMenuItemClick: React.PropTypes.bool, + hoverStyle: React.PropTypes.object, + iconStyle: React.PropTypes.object, + iconClassName: React.PropTypes.string, }, getInitialState: function() { return { - open: false + open: false, } }, @@ -67,14 +70,13 @@ var DropDownIcon = React.createClass({ }, render: function() { - - var icon; - if (this.props.iconClassName) icon = ; - return (
-
- {icon} +
+ {this.props.children}
+
{this.props.menuItems[this.state.selectedIndex].text}
- +
- +
); }, @@ -188,11 +211,11 @@ var DropDownMenu = React.createClass({ }, _handleMouseOver: function(e) { - this.setState({hovered: true}); + this.setState({isHovered: true}); }, _handleMouseOut: function(e) { - this.setState({hovered: false}); + this.setState({isHovered: false}); } }); diff --git a/src/js/flat-button.jsx b/src/js/flat-button.jsx index a5ab90560a0bba..4d58ec970ab2e3 100644 --- a/src/js/flat-button.jsx +++ b/src/js/flat-button.jsx @@ -72,10 +72,14 @@ var FlatButton = React.createClass({ }, _label: function() { - return this.mergeAndPrefix({ + var style = { position: 'relative', padding: '0px ' + CustomVariables.spacing.desktopGutterLess + 'px', - }, this.props.labelStyle); + }; + + if (this.props.labelStyle) style = this.mergeAndPrefix(style, this.props.labelStyle); + + return style; }, diff --git a/src/js/floating-action-button.jsx b/src/js/floating-action-button.jsx index 3501ab3be9af0c..917d775a90d9cf 100644 --- a/src/js/floating-action-button.jsx +++ b/src/js/floating-action-button.jsx @@ -90,8 +90,9 @@ var RaisedButton = React.createClass({ }; if (this.props.mini) style.lineHeight = CustomVariables.floatingActionButtonMiniSize + 'px'; + if (this.props.iconStyle) style = this.mergeAndPrefix(style, this.props.iconStyle); - return this.mergeAndPrefix(style, this.props.iconStyle); + return style; }, _overlay: function() { diff --git a/src/js/font-icon.jsx b/src/js/font-icon.jsx index 0e27655bfe3c5b..c33605409cae93 100644 --- a/src/js/font-icon.jsx +++ b/src/js/font-icon.jsx @@ -6,25 +6,60 @@ var FontIcon = React.createClass({ mixins: [StylePropable], - render: function() { + propTypes: { + hoverStyle: React.PropTypes.object, + }, - var { - style, - ...other - } = this.props; + getInitialState: function() { + return { + isHovered: false, + }; + }, - var styles = this.mergeAndPrefix({ + /** Styles */ + _main: function() { + var style = this.mergeAndPrefix({ position: 'relative', fontSize: Spacing.iconSize + 'px', display: 'inline-block', userSelect: 'none' }); + if (this.state.isHovered && this.props.hoverStyle) { + style = this.mergeAndPrefix(style, this.props.hoverStyle); + } + + return style; + }, + + render: function() { + + var { + style, + hoverStyle, + onMouseOver, + onMouseOut, + ...other + } = this.props; + return ( - + ); - } + }, + + _onMouseOut: function(e) { + this.setState({isHovered: false}); + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _onMouseOver: function(e) { + this.setState({isHovered: true}); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, }); -module.exports = FontIcon; \ No newline at end of file +module.exports = FontIcon; diff --git a/src/js/raised-button.jsx b/src/js/raised-button.jsx index a85b4da265e526..9ebcf5961dc5fc 100644 --- a/src/js/raised-button.jsx +++ b/src/js/raised-button.jsx @@ -41,7 +41,7 @@ var RaisedButton = React.createClass({ var zDepth = nextProps.disabled ? 0 : 1; this.setState({ zDepth: zDepth, - initialZDepth: zDepth + initialZDepth: zDepth, }); }, @@ -81,7 +81,7 @@ var RaisedButton = React.createClass({ }, _label: function() { - return this.mergeAndPrefix({ + var style = { position: 'relative', opacity: 1, fontSize: '14px', @@ -96,7 +96,11 @@ var RaisedButton = React.createClass({ this.props.primary ? CustomVariables.raisedButtonPrimaryTextColor : this.props.secondary ? CustomVariables.raisedButtonSecondaryTextColor : CustomVariables.raisedButtonTextColor, - }, this.props.labelStyle); + }; + + if (this.props.labelStyle) style = this.mergeAndPrefix(style, this.props.labelStyle); + + return style; }, _overlay: function() { diff --git a/src/js/svg-icons/svg-icon.jsx b/src/js/svg-icons/svg-icon.jsx index e067cbb4151a81..9d98350f3eb96c 100644 --- a/src/js/svg-icons/svg-icon.jsx +++ b/src/js/svg-icons/svg-icon.jsx @@ -6,16 +6,19 @@ var SvgIcon = React.createClass({ mixins: [StylePropable], - render: function() { + propTypes: { + hoverStyle: React.PropTypes.object, + }, - var { - viewBox, - style, - ...other - } = this.props; + getInitialState: function() { + return { + isHovered: false, + }; + }, - //merge styles that are passed in - var styles = this.mergeAndPrefix({ + /** Styles */ + _main: function() { + var style = this.mergeAndPrefix({ display: 'inline-block', height: '24px', width: '24px', @@ -23,16 +26,46 @@ var SvgIcon = React.createClass({ fill: Theme.textColor }); + if (this.state.isHovered && this.props.hoverStyle) { + style = this.mergeAndPrefix(style, this.props.hoverStyle); + } + + return style; + }, + + render: function() { + + var { + viewBox, + style, + hoverStyle, + onMouseOver, + onMouseOut, + ...other + } = this.props; + return ( - {this.props.children} + style={this._main()} + onMouseOver={this._onMouseOver} + onMouseOut={this._onMouseOut}> + {this.props.children} ); - } + }, + + _onMouseOut: function(e) { + this.setState({isHovered: false}); + if (this.props.onMouseOut) this.props.onMouseOut(e); + }, + + _onMouseOver: function(e) { + this.setState({isHovered: true}); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, }); -module.exports = SvgIcon; \ No newline at end of file +module.exports = SvgIcon;