react-toolbox/components/button/IconButton.js

72 lines
1.9 KiB
JavaScript
Raw Normal View History

2015-11-24 02:29:02 +03:00
import React from 'react';
import ClassNames from 'classnames';
import FontIcon from '../font_icon';
2015-12-07 04:34:12 +03:00
import Ripple from '../ripple';
2015-11-24 02:29:02 +03:00
import style from './style';
2015-12-07 02:27:13 +03:00
class IconButton extends React.Component {
2015-11-24 02:29:02 +03:00
static propTypes = {
accent: React.PropTypes.bool,
children: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
href: React.PropTypes.string,
icon: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
2015-11-24 02:29:02 +03:00
inverse: React.PropTypes.bool,
neutral: React.PropTypes.bool,
onMouseLeave: React.PropTypes.func,
onMouseUp: React.PropTypes.func,
2015-11-24 02:29:02 +03:00
primary: React.PropTypes.bool,
type: React.PropTypes.string
};
static defaultProps = {
accent: false,
className: '',
neutral: true,
2015-12-07 02:27:13 +03:00
primary: false
2015-11-24 02:29:02 +03:00
};
handleMouseUp = (event) => {
2015-11-29 14:39:55 +03:00
this.refs.button.blur();
if (this.props.onMouseUp) this.props.onMouseUp(event);
};
handleMouseLeave = (event) => {
this.refs.button.blur();
if (this.props.onMouseLeave) this.props.onMouseLeave(event);
2015-11-29 14:39:55 +03:00
};
2015-11-24 02:29:02 +03:00
render () {
const {accent, children, className, href, icon, inverse, neutral, primary, ...others} = this.props;
2015-11-24 02:29:02 +03:00
const element = href ? 'a' : 'button';
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
const classes = ClassNames([style.toggle], {
[style[level]]: neutral,
[style.inverse]: inverse
}, className);
2015-11-24 02:29:02 +03:00
const props = {
...others,
href,
2015-11-29 14:39:55 +03:00
ref: 'button',
2015-11-24 02:29:02 +03:00
className: classes,
disabled: this.props.disabled,
2015-11-29 14:39:55 +03:00
onMouseUp: this.handleMouseUp,
2016-03-20 05:24:57 +03:00
onMouseLeave: this.handleMouseLeave,
2015-11-25 22:14:22 +03:00
'data-react-toolbox': 'button'
2015-11-24 02:29:02 +03:00
};
return React.createElement(element, props,
2015-12-07 02:27:13 +03:00
icon ? <FontIcon className={style.icon} value={icon}/> : null,
children
2015-11-24 02:29:02 +03:00
);
}
}
2015-12-07 04:34:12 +03:00
export default Ripple({centered: true})(IconButton);
2016-01-22 16:12:53 +03:00
export { IconButton as RawIconButton };