import Field from '../../field';
import Form from '..';
import Input from '../../input';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
function handleSubmit(v) {
    console.log(v);
}
const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 14 },
};
const App = () => {
    const field = Field.useField({
        autoUnmount: false,
        values: { inline: false, labelAlign: 'left' },
    });
    const inline = field.getValue('inline');
    const labelAlign = inline ? 'left' : field.getValue('labelAlign');
    const layout = inline ? {} : formItemLayout;
    return (React.createElement(Form, Object.assign({ field: field, inline: inline, labelAlign: labelAlign }, layout),
        React.createElement(Form.Item, { label: "Inline Layout" },
            React.createElement(Switch, { name: "inline" })),
        inline ? null : (React.createElement(Form.Item, { label: "Label align" },
            React.createElement(Radio.Group, { shape: "button", name: "labelAlign" },
                React.createElement(Radio, { value: "left" }, "left"),
                React.createElement(Radio, { value: "top" }, "top"),
                React.createElement(Radio, { value: "inset" }, "inset")))),
        React.createElement(Form.Item, { label: "Username:" },
            React.createElement(Input, { name: "inlineUser", placeholder: "first" })),
        React.createElement(Form.Item, { label: "Password:", hasFeedback: false },
            React.createElement(Input.Password, { name: "inlinePass", placeholder: "Please enter your password!" })),
        React.createElement(Form.Item, { label: " " },
            React.createElement(Form.Submit, { onClick: handleSubmit }, "Submit"))));
};
ReactDOM.render(React.createElement(App, null), document.getElementById('form-demo-2'));
