/**
 * @file ButtonCheckbox component
 * @author liangxiaojun(liangxiaojun@derbysoft.com)
 */

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

import RaisedButton from '../RaisedButton';
import Theme from '../Theme';

import Util from '../_vendors/Util';

class ButtonCheckbox extends Component {

    static Theme = Theme;

    constructor(props, ...restArgs) {

        super(props, ...restArgs);

        this.state = {
            value: !!props.value
        };

    }

    clickHandler = () => {
        const value = !this.state.value;
        this.setState({
            value
        }, () => {
            !this.props.disabled && this.props.onChange && this.props.onChange(value);
        });
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.value !== this.state.value) {
            this.setState({
                value: !!nextProps.value
            });
        }
    }

    render() {

        const {className, style, theme, activatedTheme, title, text, disabled} = this.props,
            {value} = this.state,

            buttonClassName = classNames('button-checkbox', {
                activated: value,
                [className]: className
            });

        return (
            <RaisedButton className={buttonClassName}
                          style={style}
                          value={text}
                          title={title}
                          disabled={disabled}
                          isRounded={true}
                          theme={value ? activatedTheme : theme}
                          onClick={this.clickHandler}/>
        );

    }
}

ButtonCheckbox.propTypes = {

    /**
     * The CSS class name of the root element.
     */
    className: PropTypes.string,

    /**
     * Override the styles of the root element.
     */
    style: PropTypes.object,

    /**
     * The ButtonCheckbox theme.
     */
    theme: PropTypes.oneOf(Util.enumerateValue(Theme)),

    /**
     * The ButtonCheckbox activated theme.
     */
    activatedTheme: PropTypes.oneOf(Util.enumerateValue(Theme)),

    /**
     * The title of the ButtonCheckbox.
     */
    title: PropTypes.string,

    /**
     * The text of the button.
     */
    text: PropTypes.string,

    /**
     * If true,the button will be in active status.
     */
    value: PropTypes.bool,

    /**
     * Disables the button if set to true.
     */
    disabled: PropTypes.bool,

    /**
     * Callback function fired when the button is touch-tapped.
     */
    onChange: PropTypes.func

};

ButtonCheckbox.defaultProps = {

    theme: Theme.DEFAULT,
    activatedTheme: Theme.PRIMARY,

    value: false,
    disabled: false

};

export default ButtonCheckbox;
@@ -313,16 +313,71 @@
 s/Util';
+%0Aimport ComponentUtil from '../_vendors/ComponentUtil';
 %0A%0Aclass 
@@ -833,128 +833,103 @@
     
-componentWillReceiveProps(nextProps) %7B%0A        if (nextProps.value !== this.state.value) %7B%0A            this.setState(%7B%0A 
+static getDerivedStateFromProps(props, state) %7B%0A        return %7B%0A            prevProps: props,%0A
     
@@ -940,46 +940,76 @@
     
-   
 value: 
-!!nextProps.
+ComponentUtil.getDerivedState(props, state, '
 value
-%0A  
+')%0A
         
   %7D)
@@ -1008,23 +1008,10 @@
     
-  %7D);%0A        
 %7D
+;
 %0A   
@@ -1045,16 +1045,34 @@
  const %7B
+%0A%0A                
 classNam
@@ -1077,15 +1077,8 @@
 ame,
- style,
  the
@@ -1102,28 +1102,56 @@
 e, t
-itle, text, disabled
+ext,%0A%0A                ...restProps%0A%0A            
 %7D = 
@@ -1396,34 +1396,21 @@
 ton 
-className=%7BbuttonClassName
+%7B...restProps
 %7D%0A  
@@ -1437,19 +1437,33 @@
     
-style=%7Bstyl
+className=%7BbuttonClassNam
 e%7D%0A 
@@ -1504,94 +1504,8 @@
 xt%7D%0A
-                          title=%7Btitle%7D%0A                          disabled=%7Bdisabled%7D%0A
     

update ButtonCheckbox