import Field from '..';
import Input from '../../input';
import Range from '../../range';
import React from 'react';
import ReactDOM from 'react-dom';
import Select from '../../select';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this, {
            onChange: (name, value) => {
                console.log(this.field.getValues());
                switch (name) {
                    case 'input':
                        this.field.setValue('sync', `change to: ${value}`);
                        break;
                    case 'select':
                        this.field.setValue('sync', `${value} is coming`);
                        break;
                    case 'range':
                        this.field.setValue('sync', ` (${value.join(',')}) ready`);
                        break;
                    default:
                        break;
                }
            },
        });
    }
    render() {
        const { init, getValue } = this.field;
        const layout = {
            marginBottom: 10,
            width: 400,
        };
        return (React.createElement("div", null,
            React.createElement(Input, Object.assign({ placeholder: "controlled by onChange" }, init('input'), { style: layout })),
            React.createElement("br", null),
            React.createElement(Input, Object.assign({ placeholder: "under control" }, init('input'), { style: layout })),
            React.createElement("br", null),
            React.createElement(Select, Object.assign({ style: layout }, init('select', { initValue: 'lucy' })),
                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: "hugo" }, "hugo")),
            React.createElement("br", null),
            getValue('select') !== 'hugo' ? (React.createElement(Range, Object.assign({ style: Object.assign(Object.assign({}, layout), { marginTop: 30 }), slider: 'double', scales: 10, marks: 10 }, init('range', { initValue: [20, 40], trigger: 'onProcess' })))) : null,
            React.createElement("br", null),
            React.createElement("hr", { style: { marginBottom: 10 } }),
            React.createElement(Input, Object.assign({ placeholder: "everyone can control me" }, init('sync'), { style: layout })),
            React.createElement("br", null)));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('field-demo-2'));
