//Target
//http://codepen.io/Sambego/pen/zDLxe
/*
<label>
  <input type="checkbox"><span class="ripple"></span><span class="check"></span> Checkbox
</label>
 */
var builder = require('focus').component.builder;
var React = require('react');
var type = require('focus').component.types;
var fieldGridBehaviourMixin = require('../../mixin/field-grid-behaviour');
var jQuery = require('jquery');
var isBoolean = require('lodash/lang/isBoolean');

var checkBoxMixin = {
  mixins: [fieldGridBehaviourMixin],
  /**
   * Get the checkbox default attributes.
   */
  getDefaultProps: function getInputDefaultProps() {
    return {
      value: undefined,
      label: undefined,
      style: {}
    };
  },
  /**
   * Properties validation.
   * @type {Object}
   */
  propTypes: {
    value: type('bool'),
    label: type('string'),
    style: type('object')
  },
  getInitialState: function() {
    return {
      isChecked: this.props.isChecked  ?  this.props.isChecked : this.props.value
    };
  },
  _onChange: function onChange(event) {
    this.setState({
      isChecked: !this.state.isChecked
    });
    if (this.props.onChange) {
      this.props.onChange(event);
    }
  },
  /**
   * Get the value from the input in  the DOM.
   * @returns The DOM node value.
   */
  getValue: function getValue() {
    if(isBoolean(this.props.value)){
      return this.state.isChecked;
    }
    return this.state.isChecked ? this.props.value : undefined;
  },
  /**
   * Build the label class name.
   * @returns The label classame with the grid informations.
   */
  _labelClassName: function labelClassName(){
    return `paper-cb-label ${this._getContentOffsetClassName()} ${this._getContentGridClassName()}`;
  },
  /**
   * Render the Checkbox HTML.
   * @return {VirtualDOM} - The virtual DOM of the checkbox.
   */
  render: function renderCheckBox() {
      return (

          <div className="paper-cb">
              <label className={this._labelClassName()}>
                  <input ref='checkbox' checked={this.state.isChecked} onChange={this._onChange} type='checkbox' className='paper-cbx' value={this.props.value}/>
                  {this.props.label ? this.props.label : ''}
              </label>
          </div>
      );
  },
  /** @inheritedDoc*/
  componentWillReceiveProps: function checkBoxWillreceiveProps(nextProps) {
    if(nextProps.value !== undefined){
      this.setState({isChecked : nextProps.value});
    }
  }
};

module.exports = builder(checkBoxMixin);

@@ -844,16 +844,48 @@
 object')
+,%0A    onChange: type('function')
 %0A  %7D,%0A  
@@ -1129,47 +1129,9 @@
    %7D
-);%0A    if (this.props.onChange) %7B%0A     
+,
  thi
@@ -1150,22 +1150,10 @@
 ange
-(event);%0A    %7D
+);
 %0A  %7D

Call the callback after the state update.