import './demo10.css';
import Button from '../../button';
import Checkbox from '../../checkbox';
import DatePicker from '../../date-picker';
import Field from '..';
import Input from '../../input';
import Radio from '../../radio';
import Range from '../../range';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
import TimePicker from '../../time-picker';
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const list = [
    {
        value: 'apple',
        label: 'apple',
    },
    {
        value: 'pear',
        label: 'pear',
    },
    {
        value: 'orange',
        label: 'orange',
    },
];
const layout = {
    marginBottom: 10,
    width: 400,
};
class App extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
    }
    render() {
        const { init, getValue } = this.field;
        return (React.createElement("div", { className: "demo" },
            React.createElement("div", { style: { marginBottom: 10 } },
                React.createElement(RadioGroup, Object.assign({}, init('radiogroup', { initValue: 'a' })),
                    React.createElement(Radio, { value: "a" }, "A"),
                    React.createElement(Radio, { value: "b" }, "B"),
                    React.createElement(Radio, { value: "c" }, "C"),
                    React.createElement(Radio, { value: "d" }, "D"))),
            getValue('radiogroup') !== 'd' ? (React.createElement(Select, Object.assign({}, init('name', { initValue: 'lucy' }), { style: layout }),
                React.createElement(Select.Option, { value: "jack" }, "jack"),
                React.createElement(Select.Option, { value: "lucy" }, "lucy"),
                React.createElement(Select.Option, { value: "disabled", disabled: true }, "disabled"),
                React.createElement(Select.Option, { value: "hugohua" }, "hugohua"))) : (React.createElement(Input, Object.assign({}, init('name', { initValue: 'frankqian' })))),
            React.createElement("br", null),
            React.createElement(Range, Object.assign({ style: Object.assign(Object.assign({}, layout), { marginTop: 30 }), slider: 'double', 
                // @ts-ignore
                scales: 10, marks: 10 }, init('range', { initValue: [20, 40] }))),
            React.createElement("div", { style: { marginBottom: 10 } },
                React.createElement(CheckboxGroup, Object.assign({ dataSource: list }, init('checkboxgroup', { initValue: ['apple'] })))),
            React.createElement("div", { style: { marginBottom: 10 } },
                React.createElement(DatePicker, Object.assign({}, init('datepicker')))),
            React.createElement("div", { style: { marginBottom: 10 } },
                React.createElement(DatePicker.RangePicker, Object.assign({}, init('rangepicker')))),
            React.createElement("div", { style: { marginBottom: 10 } },
                React.createElement(TimePicker, Object.assign({}, init('timepicker')))),
            React.createElement(Button, { type: "primary", onClick: () => {
                    console.log(this.field.getValues());
                } }, "getValues"),
            React.createElement(Button, { onClick: () => {
                    this.field.setValues({
                        name: 'hugohua',
                        range: [30, 50],
                        checkboxgroup: ['orange'],
                        radiogroup: 'd',
                    });
                } }, "setValues"),
            React.createElement(Button, { onClick: () => {
                    this.field.reset();
                } }, "reset")));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('field-demo-10'));
