import React, {Component} from 'react';

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

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

class TextAreaExamples extends Component {

    constructor(props) {

        super(props);

        this.state = {
            value: {}
        };

    }

    changeHandler = (v, index) => {
        const {value} = this.state;
        value[index] = v;
        this.setState({
            value
        });
    };

    render() {

        const {value} = this.state;

        return (
            <div className="example">

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

                <p>
                    A <span>TextArea</span> is an interface for users to input a value in a range. TextArea can be
                    continuous or discrete.
                </p>

                <h2 className="example-title">Examples</h2>
                <Widget>
                    <WidgetHeader className="example-header" title="TextArea Example"/>
                    <div className="widget-content">
                        <div className="example-content">
                            <p>TextArea with auto size.</p>
                            <TextArea placeholder="placeholder"
                                      autoHeight={true}
                                      value={value[0]}
                                      onChange={v => this.changeHandler(v, 0)}/>
                        </div>
                    </div>
                </Widget>

                <Widget>
                    <WidgetHeader className="example-header" title="TextArea Example"/>
                    <div className="widget-content">
                        <div className="example-content">
                            <p>TextArea with regular size.</p>
                            <TextArea placeholder="placeholder"
                                      autoHeight={false}
                                      wordCountVisible={true}
                                      maxLength={100}
                                      value={value[1]}
                                      onChange={v => this.changeHandler(v, 1)}/>
                        </div>
                    </div>
                </Widget>

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

                <PropTypeDescTable data={doc}/>

            </div>
        );
    }
}

export default TextAreaExamples;
@@ -328,25 +328,24 @@
 or(props) %7B%0A
-%0A
         supe
@@ -358,66 +358,8 @@
 s);%0A
-%0A        this.state = %7B%0A            value: %7B%7D%0A        %7D;%0A%0A
     
@@ -385,18 +385,13 @@
 r = 
-(v, index)
+value
  =%3E 
@@ -408,172 +408,46 @@
 cons
-t %7Bvalue%7D = this.state;%0A        value%5Bindex%5D = v;%0A        this.setState(%7B%0A            value%0A        %7D);%0A    %7D;%0A%0A    render() %7B%0A%0A        const %7Bvalue%7D = this.state;%0A
+ole.log(value);%0A    %7D;%0A%0A    render() %7B
 %0A   
@@ -1229,63 +1229,8 @@
 ue%7D%0A
-                                      value=%7Bvalue%5B0%5D%7D%0A
     
@@ -1265,37 +1265,32 @@
       onChange=%7B
-v =%3E 
 this.changeHandl
@@ -1295,14 +1295,8 @@
 dler
-(v, 0)
 %7D/%3E%0A
@@ -1908,63 +1908,8 @@
 00%7D%0A
-                                      value=%7Bvalue%5B1%5D%7D%0A
     
@@ -1956,13 +1956,8 @@
 ge=%7B
-v =%3E 
 this
@@ -1974,14 +1974,8 @@
 dler
-(v, 1)
 %7D/%3E%0A

update TextAreaExamples