moq-ui/lib/icons/radio-icon.js

Simple, customizable UI components built with React

var React = require('react');

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

  getDefaultProps: function() {
    return {
      style: {
        borderColor: 'black',
        backgroundColor: 'white',
        color: 'white',
        borderWidth: 2,

        checked: {
          borderColor: 'black',
          backgroundColor: 'white',
          color: 'black',
        }
      },
      checked: false
    }
  },

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

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

  getStyles: function() {
    var styles = {
      svg: {
        width: '100%',
        height: '100%'
      },
      outer: {
        stroke: this.props.style.borderColor,
        fill: this.props.style.backgroundColor,
        strokeWidth: this.props.style.borderWidth,
        strokeLinecap: 'round'
      },
      inner: {
        fill: this.props.style.color,
        opacity: this.state.checked ? 1 : 0,
        transition: 'all 250ms ease'
      }
    };

    if (this.state.checked) {
      styles.outer.fill = this.props.style.checked.backgroundColor;
      styles.outer.stroke = this.props.style.checked.borderColor;
      styles.inner.fill = this.props.style.checked.color;
    }

    return styles;
  },

  render: function() {
    var styles = this.getStyles();

    return (
      React.createElement("svg", {viewBox: "0 0 14 14", style: styles.svg}, 
        React.createElement("circle", {style: styles.outer, cx: "7", cy: "7", r: "6"}), 
        React.createElement("circle", {style: styles.inner, cx: "7", cy: "7", r: "3"})
      )
    );
  }

});

module.exports = RadioIcon;