import Checkbox from '../../checkbox';
import DatePicker from '../../date-picker';
import Form from '..';
import Input from '../../input';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
import Upload from '../../upload';
const RadioGroup = Radio.Group;
const FormItem = Form.Item;
const formItemLayout = {
    labelCol: {
        span: 7,
    },
    wrapperCol: {
        span: 16,
    },
};
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            size: 'medium',
        };
        this.submitHandle = e => {
            console.log(e);
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(Form, Object.assign({}, formItemLayout, { size: this.state.size, style: { maxWidth: '800px' } }),
                React.createElement(FormItem, { required: true, label: "username:" },
                    React.createElement(Input, { placeholder: "Please enter your username", id: "a11yUsername", name: "a11yUsername", "aria-required": "true" })),
                React.createElement(FormItem, { required: true, label: "Password:" },
                    React.createElement(Input, { htmlType: "password", placeholder: "Please enter your password", id: "a11yPassword", name: "a11yPassword", "aria-required": "true" })),
                React.createElement(FormItem, { id: "myDateInput-1", required: true, label: "Accessible Date 1 (YYYY/MM/DD):", requiredMessage: "Please select your date" },
                    React.createElement(DatePicker, { name: "a11yDate", format: "YYYY/MM/DD", inputProps: { 'aria-required': 'true', id: 'myDateInput-1' } })),
                React.createElement(FormItem, { required: true, label: "Accessible Date 2 (YYYY/MM/DD):", requiredMessage: "Please select your date" },
                    React.createElement(DatePicker, { name: "a11yOtherDate", format: "YYYY/MM/DD", dateInputAriaLabel: "Date input format YYYY/MM/DD", inputProps: {
                            'aria-required': 'true',
                            'aria-label': 'Accessible Date 2',
                        } })),
                React.createElement(FormItem, { label: "Switch:" },
                    React.createElement(Switch, { name: "a11ySwitch", "aria-label": "Accessible Switch", defaultChecked: true })),
                React.createElement(FormItem, { required: true, label: "gender:", requiredMessage: "Please select your gender" },
                    React.createElement(RadioGroup, { name: "a11ySex" },
                        React.createElement(Radio, { value: "male", "aria-required": "true" }, "Male"),
                        React.createElement(Radio, { value: "female", "aria-required": "true" }, "Female"))),
                React.createElement(FormItem, { label: "Language:" },
                    React.createElement(Checkbox.Group, { name: "a11yLangs", "aria-label": "Please select a programming language" },
                        React.createElement(Checkbox, { value: "python" }, "python"),
                        React.createElement(Checkbox, { value: "java" }, "java"),
                        React.createElement(Checkbox, { value: "angular" }, "angular"),
                        React.createElement(Checkbox, { value: "c" }, "c"),
                        React.createElement(Checkbox, { value: "other" }, "other"))),
                React.createElement(FormItem, { label: "upload:" },
                    React.createElement(Upload.Card, { listType: "card", action: "https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload", accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp", defaultValue: [], limit: 2, name: "a11yUpload" })),
                React.createElement(FormItem, { label: "Note:" },
                    React.createElement(Input.TextArea, { placeholder: "description", name: "a11yRemark" })),
                React.createElement(FormItem, { wrapperCol: { offset: 7 } },
                    React.createElement(Form.Submit, { validate: true, type: "primary", onClick: this.submitHandle, style: { marginRight: 10 } }, "Submit"),
                    React.createElement(Form.Reset, null, "Reset")))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('form-demo-15'));
