|
|
@ -5,17 +5,19 @@ const IconButton = React.createClass({ |
|
|
|
propTypes: { |
|
|
|
title: React.PropTypes.string.isRequired, |
|
|
|
icon: React.PropTypes.string.isRequired, |
|
|
|
onClick: React.PropTypes.func.isRequired, |
|
|
|
onClick: React.PropTypes.func, |
|
|
|
size: React.PropTypes.number, |
|
|
|
active: React.PropTypes.bool, |
|
|
|
style: React.PropTypes.object, |
|
|
|
activeStyle: React.PropTypes.object |
|
|
|
activeStyle: React.PropTypes.object, |
|
|
|
disabled: React.PropTypes.bool |
|
|
|
}, |
|
|
|
|
|
|
|
getDefaultProps () { |
|
|
|
return { |
|
|
|
size: 18, |
|
|
|
active: false |
|
|
|
active: false, |
|
|
|
disabled: false |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
@ -23,8 +25,10 @@ const IconButton = React.createClass({ |
|
|
|
|
|
|
|
handleClick (e) { |
|
|
|
e.preventDefault(); |
|
|
|
this.props.onClick(); |
|
|
|
e.stopPropagation(); |
|
|
|
|
|
|
|
if (!this.props.disabled) { |
|
|
|
this.props.onClick(); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
render () { |
|
|
@ -37,7 +41,6 @@ const IconButton = React.createClass({ |
|
|
|
width: `${this.props.size * 1.28571429}px`, |
|
|
|
height: `${this.props.size}px`, |
|
|
|
lineHeight: `${this.props.size}px`, |
|
|
|
cursor: 'pointer', |
|
|
|
...this.props.style |
|
|
|
}; |
|
|
|
|
|
|
@ -46,7 +49,7 @@ const IconButton = React.createClass({ |
|
|
|
} |
|
|
|
|
|
|
|
return ( |
|
|
|
<button aria-label={this.props.title} title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''}`} onClick={this.handleClick} style={style}> |
|
|
|
<button aria-label={this.props.title} title={this.props.title} className={`icon-button ${this.props.active ? 'active' : ''} ${this.props.disabled ? 'disabled' : ''}`} onClick={this.handleClick} style={style}> |
|
|
|
<i className={`fa fa-fw fa-${this.props.icon}`} aria-hidden='true' /> |
|
|
|
</button> |
|
|
|
); |
|
|
|