import React, {Component} from 'react';

import ButtonRadioGroup from 'src/ButtonRadioGroup';
import Widget from 'src/Widget';
import WidgetHeader from 'src/WidgetHeader';

import PropTypeDescTable from 'components/PropTypeDescTable';
import doc from 'assets/propTypes/ButtonRadioGroup.json';

export default class ButtonRadioGroupExamples extends Component {

    constructor(props) {

        super(props);

        this.data = [{
            label: 1,
            value: 1
        }, {
            label: 2,
            value: 2
        }, {
            label: 3,
            value: 3
        }, {
            label: 4,
            value: 4,
            disabled: true
        }, {
            label: 5,
            value: 5
        }];

        this.datas = [{
            label: 'one',
            value: 1
        }, {
            label: 2,
            value: 2
        }, {
            label: 'three',
            value: 3
        }, {
            label: 4,
            value: 4
        }, {
            label: 5,
            value: 5
        }];

        this.changeHandle = this::this.changeHandle;

    }

    changeHandle(value) {
        console.log(value);
    }

    render() {
        return (
            <div className="example button-radio-group-examples">


                <h2 className="example-title">ButtonRadioGroup</h2>

                <p>
                    <span>ButtonRadioGroup</span> is a radio group use button style.
                </p>

                <h2 className="example-title">Examples</h2>

                <Widget>

                    <WidgetHeader className="example-header" title="Basic"/>

                    <div className="widget-content">
                        <div className="example-content">

                            <div className="examples-wrapper">

                                <p><code>Button Radio Group</code> simple example.</p>

                                <ButtonRadioGroup data={this.data}
                                                  onChange={this.changeHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

                    <WidgetHeader className="example-header" title="With value"/>

                    <div className="widget-content">
                        <div className="example-content">

                            <div className="examples-wrapper">

                                <p>Set the <code>value</code> property to activate one button.</p>

                                <ButtonRadioGroup data={this.data}
                                                  value={1}
                                                  onChange={this.changeHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <Widget>

                    <WidgetHeader className="example-header" title="With disabled"/>

                    <div className="widget-content">
                        <div className="example-content">

                            <div className="examples-wrapper">

                                <p>Set the <code>disabled</code> property to true for disabling the ButtonRadioGroup.
                                </p>

                                <ButtonRadioGroup data={this.datas}
                                                  disabled={true}
                                                  onChange={this.changeHandle}/>

                            </div>

                        </div>
                    </div>

                </Widget>

                <h2 className="example-title">Properties</h2>

                <PropTypeDescTable data={doc}/>

            </div>
        );
    }
};
@@ -291,23 +291,8 @@
 ';%0A%0A
-export default 
 clas
@@ -1037,25 +1037,23 @@
 %5D;%0A%0A    
+%7D%0A%0A
     
-this.
 changeHa
@@ -1060,67 +1060,20 @@
 ndle
+r
  = 
-this::this.changeHandle;%0A%0A    %7D%0A%0A    changeHandle(
 value
-)
+ =%3E
  %7B%0A 
@@ -1100,24 +1100,25 @@
 alue);%0A    %7D
+;
 %0A%0A    render
@@ -1968,32 +1968,33 @@
 his.changeHandle
+r
 %7D/%3E%0A%0A           
@@ -2685,32 +2685,33 @@
 his.changeHandle
+r
 %7D/%3E%0A%0A           
@@ -3476,16 +3476,17 @@
 geHandle
+r
 %7D/%3E%0A%0A   
@@ -3754,8 +3754,50 @@
     %7D%0A%7D;
+%0A%0Aexport default ButtonRadioGroupExamples;

update ButtonRadioGroupExamples