import React, { Component, PropTypes } from 'react';
import Checkbox from '../checkbox';
import Translation from '../../../behaviours/translation';
import { pull } from 'lodash/array';

/**
 * SelectCheckbox component.
 */
@Translation
class SelectCheckbox extends Component {

    /**
     * Display name.
     */
    static displayName = 'SelectCheckbox';

    /**
     * PropTypes.
     */
    static propTypes = {
        values: PropTypes.array,
        value: PropTypes.array,
        valueKey: PropTypes.string,
        labelKey: PropTypes.string,
        onChange: PropTypes.func,
        legacyOnChange: PropTypes.bool
    };

    /**
     * Default props.
     */
    static defaultProps = {
        values: [], // all values
        value: [], // selected values list
        valueKey: 'value', // key for the displayed value
        labelKey: 'label', // key for the displayed label
        onChange: undefined,
        legacyOnChange: false
    };

    /**
     * Initial state.
     */
    state = {
        selectedValues: this.props.value
    };

    /**
     * React componentWillReceiveProps hook.
     * @param {object} newProps new props.
     */
    componentWillReceiveProps(newProps) {
        if (newProps) {
            this.setState({ selectedValues: newProps.value });
        }
    }

    /**
    * Get the value from the select in the DOM.
    * @return {string} value
    */
    getValue() {
        return this.state.selectedValues;
    }

    /**
     * Handle a change of value.
     * @param  {[type]} key       the key
     * @param  {[type]} newStatus the new status
     */
    _handleCheckboxChange(key, newStatus) {
        const selectedValues = this.state.selectedValues;
        if (newStatus) {
            selectedValues.push(key);
        } else {
            pull(selectedValues, key);
        }

        if (this.props.onChange) {
            if (this.props.legacyOnChange) {
                this.props.onChange(key, newStatus);
            } else {
                this.props.onChange(selectedValues);
            }
            return;
        }

        this.setState({ value: selectedValues });
    }

    /**
     * Closure to capture key and checbox status.
     * @param  {[type]} key the key of checkbox
     * @return {[type]} status closure
     */
    _getCheckboxChangeHandler(key) {
        return (status) => {
            this._handleCheckboxChange(key, status);
        };
    }

    /**
     * Render all selection checkbox.
     * @return {ReactDOMNode} list of ReactDomNode
     */
    renderCheckboxes() {
        return this.props.values.map((val, idx) => {
            const value = val[this.props.valueKey];
            const label = val[this.props.labelKey];
            const isChecked = 0 <= this.state.selectedValues.indexOf(value);
            return (
                <Checkbox key={idx} label={this.i18n(label)} onChange={this._getCheckboxChangeHandler(value)} value={isChecked} />
            );
        });
    }

    /**
     * Render.
     * @return {ReactElement} markup.
     */
    render() {
        return (
            <div data-focus='select-checkbox'>
                {this.renderCheckboxes()}
            </div>
        );
    }
}

export default SelectCheckbox;

@@ -1683,47 +1683,8 @@
 s = 
-this.state.selectedValues;%0A        if (
 newS
@@ -1680,35 +1680,32 @@
 lues = newStatus
-) %7B
 %0A            sel
@@ -1693,32 +1693,45 @@
 tus%0A            
+? this.state.
 selectedValues.p
@@ -1733,18 +1733,21 @@
 ues.
-push(
+concat(%5B
 key
+%5D
 )
-;
 %0A   
@@ -1755,65 +1755,67 @@
     
-%7D else %7B%0A            pull(selectedValues, key);%0A        %7D
+    : this.state.selectedValues.filter(elt =%3E elt !== key);
 %0A%0A  
@@ -1847,28 +1847,12 @@
 ange
-) %7B%0A            if (
+ && 
 this
@@ -1872,28 +1872,24 @@
 OnChange) %7B%0A
-    
             
@@ -1937,25 +1937,42 @@
     
-    
 %7D else 
-%7B%0A    
+if (this.props.onChange) %7B%0A
     
@@ -2028,45 +2028,21 @@
     
-    %7D%0A            return;%0A        %7D%0A%0A
+%7D else %7B%0A    
     
@@ -2083,24 +2083,34 @@
 dValues %7D);%0A
+        %7D%0A
     %7D%0A%0A    /

Fix @Harton review