import './demo4.css';
import Button from '../../button';
import Field from '..';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.field = new Field(this);
        this.validate = () => {
            console.log(this.field.getErrors());
            this.field.validate(error => {
                alert(JSON.stringify(error)); // eslint-disable-line
            });
        };
    }
    // eslint-disable-next-line no-alert
    render() {
        const { init, getError, setError, setErrors } = this.field;
        return (React.createElement("div", { className: "demo" },
            React.createElement(Input, Object.assign({}, init('input', {
                rules: [
                    {
                        required: true,
                        pattern: /hello/,
                        message: 'must be hello',
                    },
                ],
            }))),
            React.createElement("br", null),
            React.createElement("span", { style: { color: 'red' } }, getError('input')),
            React.createElement("br", null),
            React.createElement(Button, { onClick: () => {
                    setError('input', 'set error 1');
                } }, "setError"),
            React.createElement(Button, { onClick: () => {
                    setErrors({ input: 'set error 2' });
                } }, "setErrors"),
            React.createElement(Button, { onClick: () => {
                    setErrors({ input: '' });
                } }, "clear"),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Input, Object.assign({}, init('input2'))),
            React.createElement("br", null),
            React.createElement("span", { style: { color: 'red' } }, getError('input2')),
            React.createElement("br", null),
            React.createElement(Button, { onClick: () => {
                    setError('input2', 'errors will be removed by onChange and shown on validate');
                } }, "setError"),
            React.createElement(Button, { onClick: this.validate }, "validate")));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('field-demo-4'));
