import Balloon from '../../balloon';
import Button from '../../button';
import Form from '..';
import Grid from '../../grid';
import Icon from '../../icon';
import Input from '../../input';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
const FormItem = Form.Item;
const { Row, Col } = Grid;
const style = {
    padding: '20px',
    background: '#F7F8FA',
    margin: '20px',
};
const formItemLayout = {
    labelCol: { fixedSpan: 4 },
};
const label = (React.createElement("span", null,
    "name\uFF1A",
    React.createElement(Balloon, { type: "primary", trigger: React.createElement(Icon, { type: "prompt", size: "small" }), closable: false }, "blablablablablablablabla")));
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            labelAlign: 'top',
        };
        this.handleChange = v => {
            this.setState({
                labelAlign: v ? 'left' : 'top',
            });
        };
    }
    render() {
        const labelAlign = this.state.labelAlign;
        return (React.createElement("div", null,
            React.createElement(Form, { inline: true },
                React.createElement(Form.Item, { label: "label Position" },
                    React.createElement(Switch, { checkedChildren: "left", unCheckedChildren: "top", checked: this.state.labelAlign === 'left', onChange: this.handleChange }))),
            React.createElement(Form, { style: style },
                React.createElement(Row, { gutter: "4" },
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: label, required: true }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Long search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Long search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Long search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })),
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })))),
                React.createElement(Row, null,
                    React.createElement(Col, { style: { textAlign: 'right' } },
                        React.createElement(Button, { type: "primary", style: { marginRight: '5px' } }, "Search"),
                        React.createElement(Button, null, "Clear All")))),
            React.createElement(Form, { style: style },
                React.createElement(Row, { gutter: "4" },
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: label, required: true }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Long search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" }))),
                    React.createElement(Col, null,
                        React.createElement(FormItem, Object.assign({}, formItemLayout, { labelAlign: labelAlign, label: "Search name:" }),
                            React.createElement(Input, { placeholder: "Enter a search name:" })))),
                React.createElement(Row, null,
                    React.createElement(Col, { style: { textAlign: 'right' } },
                        React.createElement(Button, { type: "primary", style: { marginRight: '5px' } }, "Search"),
                        React.createElement(Button, null, "Clear All"))))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('form-demo-6'));
