moq-ui/src/radio-button.jsx

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({

  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 {
      checked,
      enabled,
      className,
      ...other
    } = this.props;

    var styles = this.getStyles();
    var labelTextElement = null;
      
    if (this.props.labelText) {
      labelTextElement = (
        <span style={this.mergeAndPrefix(styles.labelText, this.props.labelStyle)}>{this.props.labelText}</span>
      );
    }

    return (
      <div style={styles.root} className={this.getClasses()}>
        <span style={styles.box} onMouseDown={this._onChange}>
          <RadioIcon checked={this.state.checked} style={styles.icon} />
        </span>
        {labelTextElement}
      </div>
    );
  },

  _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;