moq-ui/src/icon-button.jsx

Simple, customizable UI components built with React

/**
 * @jsx React.DOM
 */

var React = require('react');
var StylePropable = require('./mixins/style-propable');
var ThemeManager = require('./styles/theme-manager');
var Button = require('./button');
var Icons = require('./icons'); 

var IconButton = React.createClass({

  mixins: [StylePropable], 

  contextTypes: {
    uiTheme: React.PropTypes.object
  },

  propTypes: {
    iconName: React.PropTypes.string.isRequired,
    iconStyle: React.PropTypes.object
  },

  getStyles: function() {
    var styles = {
      iconWrap: {
        float: 'left',
        width: this.props.size || 18,
        height: this.props.size || 18,
        marginRight: 6  
      },
      icon: {
        color: 'white'
      },
      label: {
        paddingRight: 9,
      },
    };
    return styles;
  },

  getClasses: function() {
    var classString = 'moq-icon-button';
    if (this.props.className && this.props.className.length) {
      classString += ' ' + this.props.className;
    }
    return classString;
  },

  render: function() {
    var {
      className,
      label,
      ...other
    } = this.props;

    var styles = this.getStyles();
    
    var icon = React.createElement(Icons[this.props.iconName], {
      style: this.mergeAndPrefix(styles.icon, this.props.iconStyle)
    });

    return (
      <Button {...other} className={this.getClasses()}>
        <span style={styles.iconWrap}>
          {icon}
        </span> 
        <span style={this.mergeAndPrefix(styles.label, this.props.labelStyle)}>
          {label}
        </span>
      </Button>
    );
  }

});

module.exports = IconButton;