React Components

Button.jsx

/**
 * External dependencies
 */
import React, { PropTypes } from 'react';
import classNames from 'classnames';
import noop from 'lodash/noop';

/**
 * Local variables
 */
const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  danger: PropTypes.bool,
  hovered: PropTypes.bool,
  inverse: PropTypes.bool,
  onClick: noop,
  onContextMenu: noop,
  onDoubleClick: noop,
  onDrag: noop,
  onDragEnd: noop,
  onDragEnter: noop,
  onDragExi: noop,
  onDragLeave: noop,
  onDragOver: noop,
  onDragStart: noop,
  onDrop: noop,
  onMouseDown: noop,
  onMouseEnter: noop,
  onMouseLeav: noop,
  onMouseMove: noop,
  onMouseOut: noop,
  onMouseOver: noop,
  onMouseUp: noop,
  primary: PropTypes.bool,
  success: PropTypes.bool,
  warning: PropTypes.bool,
};

/**
 * <Button />
 */
const Button = ({
  children,
  className,
  danger,
  inverse,
  onClick,
  onContextMenu,
  onDoubleClick,
  onDrag,
  onDragEnd,
  onDragEnter,
  onDragExi,
  onDragLeave,
  onDragOver,
  onDragStart,
  onDrop,
  onMouseDown,
  onMouseEnter,
  onMouseLeav,
  onMouseMove,
  onMouseOut,
  onMouseOver,
  onMouseUp,
  primary,
  success,
  warning,
}) => {
  const classes = classNames({
    button: true,
    'button--danger': danger,
    'button--inverse': inverse,
    'button--primary': primary,
    'button--success': success,
    'button--warning': warning,
  }, className);

  return (
    <button
      className={classes}
      onClick={onClick}
      onContextMenu={onContextMenu}
      onDoubleClick={onDoubleClick}
      onDrag={onDrag}
      onDragEnd={onDragEnd}
      onDragEnter={onDragEnter}
      onDragExi={onDragExi}
      onDragLeave={onDragLeave}
      onDragOver={onDragOver}
      onDragStart={onDragStart}
      onDrop={onDrop}
      onMouseDown={onMouseDown}
      onMouseEnter={onMouseEnter}
      onMouseLeav={onMouseLeav}
      onMouseMove={onMouseMove}
      onMouseOut={onMouseOut}
      onMouseOver={onMouseOver}
      onMouseUp={onMouseUp}
    >
      {children}
    </button>
  );
};

Button.propTypes = propTypes;

export default Button;