import './demo5.css';
import Button from '../../button';
import Checkbox from '../../checkbox';
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.state = {
            checkboxStatus: true,
        };
        // @ts-ignore
        this.field = new Field(this, { scrollToFirstError: -10 });
    }
    isChecked(rule, value) {
        if (!value) {
            return Promise.reject(new Error('consent agreement not checked '));
        }
        return Promise.resolve(null);
    }
    userName(rule, value) {
        if (value === 'frank') {
            return new Promise((resolve, reject) => {
                setTimeout(() => reject(new Error('name existed')), 200);
            });
        }
        return new Promise(resolve => {
            setTimeout(() => resolve(null), 200);
        });
    }
    render() {
        const init = this.field.init;
        return (React.createElement("div", { className: "demo" },
            React.createElement(Input, Object.assign({ defaultValue: "", placeholder: "try frank" }, init('username', {
                rules: [
                    {
                        validator: this.userName,
                        trigger: ['onBlur', 'onChange'],
                    },
                ],
            }))),
            this.field.getState('username') === 'loading' ? 'validating...' : '',
            this.field.getError('username') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('username').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            "agreement:",
            React.createElement(Checkbox, Object.assign({}, init('checkbox', {
                valueName: 'checked',
                rules: [{ validator: this.isChecked }],
            }))),
            this.field.getError('checkbox') ? (React.createElement("span", { style: { color: 'red' } }, this.field.getError('checkbox').join(','))) : (''),
            React.createElement("br", null),
            React.createElement("br", null),
            React.createElement(Button, { type: "primary", onClick: () => {
                    this.field.validatePromise().then(({ errors, values }) => {
                        console.log(errors, values);
                    });
                } }, "validate"),
            React.createElement(Button, { onClick: () => {
                    this.field.reset();
                } }, "reset")));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('field-demo-5'));
