diff options
Diffstat (limited to 'app/assets/javascripts/components/components/icon_button.jsx')
-rw-r--r-- | app/assets/javascripts/components/components/icon_button.jsx | 28 |
1 files changed, 24 insertions, 4 deletions
diff --git a/app/assets/javascripts/components/components/icon_button.jsx b/app/assets/javascripts/components/components/icon_button.jsx index 33835f9a0..0c683db5d 100644 --- a/app/assets/javascripts/components/components/icon_button.jsx +++ b/app/assets/javascripts/components/components/icon_button.jsx @@ -13,7 +13,8 @@ const IconButton = React.createClass({ activeStyle: React.PropTypes.object, disabled: React.PropTypes.bool, inverted: React.PropTypes.bool, - animate: React.PropTypes.bool + animate: React.PropTypes.bool, + overlay: React.PropTypes.bool }, getDefaultProps () { @@ -21,7 +22,8 @@ const IconButton = React.createClass({ size: 18, active: false, disabled: false, - animate: false + animate: false, + overlay: false }; }, @@ -39,7 +41,7 @@ const IconButton = React.createClass({ let style = { fontSize: `${this.props.size}px`, width: `${this.props.size * 1.28571429}px`, - height: `${this.props.size}px`, + height: `${this.props.size * 1.28571429}px`, lineHeight: `${this.props.size}px`, ...this.props.style }; @@ -48,13 +50,31 @@ const IconButton = React.createClass({ style = { ...style, ...this.props.activeStyle }; } + const classes = ['icon-button']; + + if (this.props.active) { + classes.push('active'); + } + + if (this.props.disabled) { + classes.push('disabled'); + } + + if (this.props.inverted) { + classes.push('inverted'); + } + + if (this.props.overlay) { + classes.push('overlayed'); + } + return ( <Motion defaultStyle={{ rotate: this.props.active ? -360 : 0 }} style={{ rotate: this.props.animate ? spring(this.props.active ? -360 : 0, { stiffness: 120, damping: 7 }) : 0 }}> {({ rotate }) => <button aria-label={this.props.title} title={this.props.title} - className={`icon-button ${this.props.active ? 'active' : ''} ${this.props.disabled ? 'disabled' : ''} ${this.props.inverted ? 'inverted' : ''}`} + className={classes.join(' ')} onClick={this.handleClick} style={style}> <i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> |