compolicious/demo/components/button/button.jsx

React component demo utility

import PropTypes from 'prop-types';
import compose from 'recompose/compose';
import defaultProps from 'recompose/defaultProps';
import setDisplayName from 'recompose/setDisplayName';
import setPropTypes from 'recompose/setPropTypes';
import classnames from 'classnames';
import isNumber from 'lodash/fp/isNumber';
import isFinite from 'lodash/fp/isFinite';

import Styles from './button.css.js';

const isFiniteNumber = (value) => isNumber(value) && isFinite(value);

const Button = ({label, fontSize, width, fixedWidth, inverted, mini, onClick}) => {
  const style = {
    fontSize: `${fontSize}px`,
    cursor: 'pointer'
  };

  if (isFiniteNumber(width)) {
    style[fixedWidth ? 'width' : 'minWidth'] = `${width}px`;
  }

  return (
    <div
      className={classnames(Styles.base, {
        [Styles.inverted]: inverted,
        [Styles.mini]: mini
      })}
      onClick={onClick}
    >
      <label className={Styles.label} style={style}>
        {label}
      </label>
    </div>
  );
};

export default compose(
  setDisplayName('Button'),
  setPropTypes({
    label: PropTypes.string,
    fontSize: PropTypes.number,
    width: PropTypes.number,
    fixedWidth: PropTypes.bool,
    inverted: PropTypes.bool,
    mini: PropTypes.bool,
    onClick: PropTypes.func
  }),
  defaultProps({
    label: 'A Button',
    fontSize: 12,
    width: undefined,
    fixedWidth: false,
    inverted: false,
    mini: false,
    onClick: () => {}
  })
)(Button);