moq-ui/lib/icon-button.js

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({displayName: "IconButton",

  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 $__0=
      
      
      
      this.props,className=$__0.className,label=$__0.label,other=(function(source, exclusion) {var rest = {};var hasOwn = Object.prototype.hasOwnProperty;if (source == null) {throw new TypeError();}for (var key in source) {if (hasOwn.call(source, key) && !hasOwn.call(exclusion, key)) {rest[key] = source[key];}}return rest;})($__0,{className:1,label:1});

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

    return (
      React.createElement(Button, React.__spread({},  other, {className: this.getClasses()}), 
        React.createElement("span", {style: styles.iconWrap}, 
          icon
        ), 
        React.createElement("span", {style: this.mergeAndPrefix(styles.label, this.props.labelStyle)}, 
          label
        )
      )
    );
  }

});

module.exports = IconButton;