2015-10-11 20:07:09 +03:00
|
|
|
import React from 'react';
|
2016-05-16 15:40:03 +03:00
|
|
|
import classnames from 'classnames';
|
|
|
|
import { themr } from 'react-css-themr';
|
2015-09-18 22:03:08 +03:00
|
|
|
import FontIcon from '../font_icon';
|
2015-12-07 04:34:12 +03:00
|
|
|
import Ripple from '../ripple';
|
2015-09-18 22:03:08 +03:00
|
|
|
|
2015-10-22 02:31:17 +03:00
|
|
|
class Button extends React.Component {
|
2015-10-20 08:40:51 +03:00
|
|
|
static propTypes = {
|
2015-10-21 01:48:24 +03:00
|
|
|
accent: React.PropTypes.bool,
|
2015-11-23 22:38:44 +03:00
|
|
|
children: React.PropTypes.node,
|
2015-09-18 22:03:08 +03:00
|
|
|
className: React.PropTypes.string,
|
|
|
|
disabled: React.PropTypes.bool,
|
2015-11-17 23:49:27 +03:00
|
|
|
flat: React.PropTypes.bool,
|
|
|
|
floating: React.PropTypes.bool,
|
2015-11-23 22:38:44 +03:00
|
|
|
href: React.PropTypes.string,
|
2016-04-07 04:24:31 +03:00
|
|
|
icon: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.string,
|
|
|
|
React.PropTypes.element
|
|
|
|
]),
|
2015-11-23 01:33:44 +03:00
|
|
|
inverse: React.PropTypes.bool,
|
2015-09-18 22:03:08 +03:00
|
|
|
label: React.PropTypes.string,
|
2015-10-21 01:48:24 +03:00
|
|
|
mini: React.PropTypes.bool,
|
2015-12-19 22:55:30 +03:00
|
|
|
neutral: React.PropTypes.bool,
|
2015-12-11 21:20:58 +03:00
|
|
|
onMouseLeave: React.PropTypes.func,
|
|
|
|
onMouseUp: React.PropTypes.func,
|
2015-10-21 01:48:24 +03:00
|
|
|
primary: React.PropTypes.bool,
|
2015-11-17 23:49:27 +03:00
|
|
|
raised: React.PropTypes.bool,
|
2016-05-16 15:40:03 +03:00
|
|
|
theme: React.PropTypes.object,
|
2015-09-18 22:03:08 +03:00
|
|
|
type: React.PropTypes.string
|
2015-10-20 08:40:51 +03:00
|
|
|
};
|
2015-09-18 22:03:08 +03:00
|
|
|
|
2015-10-20 08:40:51 +03:00
|
|
|
static defaultProps = {
|
2015-10-21 05:58:11 +03:00
|
|
|
accent: false,
|
2015-10-20 08:40:51 +03:00
|
|
|
className: '',
|
2015-11-17 23:49:27 +03:00
|
|
|
flat: false,
|
|
|
|
floating: false,
|
2015-10-21 05:58:11 +03:00
|
|
|
mini: false,
|
2015-12-19 22:55:30 +03:00
|
|
|
neutral: true,
|
2015-10-21 05:58:11 +03:00
|
|
|
primary: false,
|
2015-12-06 16:35:10 +03:00
|
|
|
raised: false
|
2015-10-22 11:02:36 +03:00
|
|
|
};
|
2015-09-18 22:03:08 +03:00
|
|
|
|
2016-01-22 16:22:35 +03:00
|
|
|
handleMouseUp = (event) => {
|
2015-11-29 14:39:55 +03:00
|
|
|
this.refs.button.blur();
|
2016-01-22 16:22:35 +03:00
|
|
|
if (this.props.onMouseUp) this.props.onMouseUp(event);
|
2015-12-11 21:20:58 +03:00
|
|
|
};
|
|
|
|
|
2016-01-22 16:22:35 +03:00
|
|
|
handleMouseLeave = (event) => {
|
2015-12-11 21:20:58 +03:00
|
|
|
this.refs.button.blur();
|
2016-01-22 16:22:35 +03:00
|
|
|
if (this.props.onMouseLeave) this.props.onMouseLeave(event);
|
2015-11-29 14:39:55 +03:00
|
|
|
};
|
|
|
|
|
2015-10-02 18:39:26 +03:00
|
|
|
render () {
|
2015-11-29 14:39:55 +03:00
|
|
|
const { accent, children, className, flat, floating, href, icon,
|
2016-05-16 15:40:03 +03:00
|
|
|
inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
|
2015-11-16 23:55:21 +03:00
|
|
|
const element = href ? 'a' : 'button';
|
2015-11-17 23:49:27 +03:00
|
|
|
const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
|
2015-11-25 00:18:00 +03:00
|
|
|
const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';
|
2015-11-16 23:55:21 +03:00
|
|
|
|
2016-05-20 20:53:03 +03:00
|
|
|
const classes = classnames(theme.button, [theme[shape]], {
|
2016-05-16 15:40:03 +03:00
|
|
|
[theme[level]]: neutral,
|
|
|
|
[theme.mini]: mini,
|
|
|
|
[theme.inverse]: inverse
|
2015-11-23 01:33:44 +03:00
|
|
|
}, className);
|
2015-10-04 16:12:53 +03:00
|
|
|
|
2015-11-16 23:55:21 +03:00
|
|
|
const props = {
|
|
|
|
...others,
|
|
|
|
href,
|
2015-11-29 14:39:55 +03:00
|
|
|
ref: 'button',
|
2015-11-23 01:33:44 +03:00
|
|
|
className: classes,
|
2015-11-28 22:34:07 +03:00
|
|
|
disabled: this.props.disabled,
|
2015-11-29 14:39:55 +03:00
|
|
|
onMouseUp: this.handleMouseUp,
|
2015-12-11 21:20:58 +03:00
|
|
|
onMouseLeave: this.handleMouseLeave,
|
2015-11-25 22:14:22 +03:00
|
|
|
'data-react-toolbox': 'button'
|
2015-11-16 23:55:21 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
return React.createElement(element, props,
|
2016-05-16 15:40:03 +03:00
|
|
|
icon ? <FontIcon className={theme.icon} value={icon}/> : null,
|
2015-11-29 14:39:55 +03:00
|
|
|
label,
|
|
|
|
children
|
2015-09-18 22:03:08 +03:00
|
|
|
);
|
2015-10-20 08:40:51 +03:00
|
|
|
}
|
2015-10-21 05:58:11 +03:00
|
|
|
}
|
2015-10-22 02:31:17 +03:00
|
|
|
|
2016-05-16 15:40:03 +03:00
|
|
|
const RawButton = themr('ToolboxButton')(Button);
|
|
|
|
export default themr('ToolboxButton')(Ripple({centered: false})(Button));
|
|
|
|
export { RawButton as RawButton };
|