react-toolbox/components/button/Button.js

import React from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import FontIcon from '../font_icon';
import Ripple from '../ripple';

class Button extends React.Component {
  static propTypes = {
    accent: React.PropTypes.bool,
    children: React.PropTypes.node,
    className: React.PropTypes.string,
    disabled: React.PropTypes.bool,
    flat: React.PropTypes.bool,
    floating: React.PropTypes.bool,
    href: React.PropTypes.string,
    icon: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.element
    ]),
    inverse: React.PropTypes.bool,
    label: React.PropTypes.string,
    mini: React.PropTypes.bool,
    neutral: React.PropTypes.bool,
    onMouseLeave: React.PropTypes.func,
    onMouseUp: React.PropTypes.func,
    primary: React.PropTypes.bool,
    raised: React.PropTypes.bool,
    theme: React.PropTypes.shape({
      accent: React.PropTypes.string.isRequired,
      button: React.PropTypes.string.isRequired,
      flat: React.PropTypes.string.isRequired,
      floating: React.PropTypes.string.isRequired,
      icon: React.PropTypes.string.isRequired,
      inverse: React.PropTypes.string.isRequired,
      mini: React.PropTypes.string.isRequired,
      neutral: React.PropTypes.string.isRequired,
      primary: React.PropTypes.string.isRequired,
      raised: React.PropTypes.string.isRequired,
      rippleWrapper: React.PropTypes.string.isRequired,
      toggle: React.PropTypes.string.isRequired
    }),
    type: React.PropTypes.string
  };

  static defaultProps = {
    accent: false,
    className: '',
    flat: false,
    floating: false,
    mini: false,
    neutral: true,
    primary: false,
    raised: false
  };

  handleMouseUp = (event) => {
    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);
  };

  render () {
    const { accent, children, className, flat, floating, href, icon,
      inverse, label, mini, neutral, primary, theme, raised, ...others} = this.props;
    const element = href ? 'a' : 'button';
    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : 'flat';

    const classes = classnames(theme.button, [theme[shape]], {
      [theme[level]]: neutral,
      [theme.mini]: mini,
      [theme.inverse]: inverse
    }, className);

    const props = {
      ...others,
      href,
      ref: 'button',
      className: classes,
      disabled: this.props.disabled,
      onMouseUp: this.handleMouseUp,
      onMouseLeave: this.handleMouseLeave,
      'data-react-toolbox': 'button'
    };

    return React.createElement(element, props,
      icon ? <FontIcon className={theme.icon} value={icon}/> : null,
      label,
      children
    );
  }
}

const RippledButton = themr('ToolboxButton')(Ripple({centered: false})(Button));
const RawButton = themr('ToolboxButton')(Button);

export default RippledButton;
export { RawButton as RawButton };
export { Button };