moq-ui/lib/radio-button.js

Simple, customizable UI components built with React

var React = require('react');
var StylePropable = require('./mixins/style-propable');
var ThemeManager = require('./styles/theme-manager');
var Transitions = require('./styles/transitions');
var RadioIcon = require('./icons/radio-icon');


var RadioButton = React.createClass({displayName: "RadioButton",

  mixins: [StylePropable],

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

  propTypes: {
    value: React.PropTypes.string,
    labelText: React.PropTypes.string,
    checked: React.PropTypes.bool,
    enabled: React.PropTypes.bool,
    labelStyle: React.PropTypes.object,
    onChange: React.PropTypes.func
  },

  getDefaultProps: function() {
    return {
      checked: false
    };
  },

  getInitialState: function() {
    return {
      checked: this.props.checked 
    };
  },

  componentWillReceiveProps: function(nextProps) {
    this.setChecked(nextProps.checked);
  },

  getTheme: function() {
    if (this.uiTheme === undefined) {
      this.uiTheme = this.context.uiTheme || new ThemeManager().getCurrentTheme();
    }

    return this.uiTheme;
  },

  getThemeRadioButton: function() {
    return this.getTheme().component.radioButton;
  },

  getStyles: function() {
    var width = this.props.width  || 16;
    var height = this.props.height || 16;

    var styles = {
      root: {
        display: 'inline-block',
        lineHeight: parseFloat(height) + 'px'
      },
      box: {
        float: 'left',
        width: width,
        height: height
      },
      icon: {
        borderColor: this.getThemeRadioButton().borderColor, 
        backgroundColor: this.getThemeRadioButton().backgroundColor,
        color: this.getThemeRadioButton().color,
        borderWidth: this.getThemeRadioButton().borderWidth,

        checked: {
          borderColor: this.getThemeRadioButton().checked.borderColor,
          backgroundColor: this.getThemeRadioButton().checked.backgroundColor,
          color: this.getThemeRadioButton().checked.color,
        }
      },
      labelText: {
        lineHeight: 'inherit',
        marginLeft: 3,
        fontSize: 16,
        fontFamily: this.getTheme().fontFamily,
        verticalAlign: 'middle'
      }
    };
    return styles;
  },

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

  render: function() {
    var $__0=
      
      
      
      
      this.props,checked=$__0.checked,enabled=$__0.enabled,className=$__0.className,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,{checked:1,enabled:1,className:1});

    var styles = this.getStyles();
    var labelTextElement = null;
      
    if (this.props.labelText) {
      labelTextElement = (
        React.createElement("span", {style: this.mergeAndPrefix(styles.labelText, this.props.labelStyle)}, this.props.labelText)
      );
    }

    return (
      React.createElement("div", {style: styles.root, className: this.getClasses()}, 
        React.createElement("span", {style: styles.box, onMouseDown: this._onChange}, 
          React.createElement(RadioIcon, {checked: this.state.checked, style: styles.icon})
        ), 
        labelTextElement
      )
    );
  },

  _onChange: function(e) {
    var checked =  !this.state.checked;
    this.setState({checked: checked});
    if (this.props.onChange) this.props.onChange(e, this.props.value, checked);
  },

  isChecked: function() {
    return this.state.value;
  },

  setChecked: function(state) {
    this.setState({checked: !!state});
  },
  
  getValue: function() {
    return this.props.value;
  }

});

module.exports = RadioButton;