import './demo5.css';
import ConfigProvider from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Calendar, DatePicker, Dialog, Menu, Radio, Select, Timeline, } from '../..';
const { SubMenu, Item, Group, Divider } = Menu;
const RangePicker = DatePicker.RangePicker;
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dir: 'rtl',
        };
        this.changeDir = this.changeDir.bind(this);
        this.showDialog = this.showDialog.bind(this);
    }
    changeDir(value) {
        this.setState({
            dir: value,
        });
    }
    showDialog() {
        Dialog.confirm({
            title: 'Confirm',
            content: 'Are you sure you want to delete all alert e-mails waiting in queue?',
        });
    }
    render() {
        return (React.createElement("div", null,
            React.createElement("div", { className: "change-rtl" },
                React.createElement("span", { style: { marginRight: 16 } },
                    "Change direction of components:",
                    ' '),
                React.createElement(Radio.Group, { shape: "button", size: "large", value: this.state.dir, onChange: this.changeDir },
                    React.createElement(Radio, { key: "rtl", value: "rtl" }, "RTL"),
                    React.createElement(Radio, { key: "ltr", value: "ltr" }, "LTR"))),
            React.createElement("br", null),
            React.createElement("hr", null),
            React.createElement(ConfigProvider, { rtl: this.state.dir === 'rtl' },
                React.createElement("div", { className: "locale-components", dir: this.state.dir },
                    React.createElement(Button, { type: "primary", onClick: this.showDialog }, "Show Dialog"),
                    React.createElement(Select, { style: { width: '150px' }, dataSource: ['hello', 'bye'] }),
                    React.createElement(RangePicker, { showTime: true }),
                    React.createElement(Calendar, { style: {
                            width: '350px',
                            padding: '12px',
                            border: '1px solid #C4C6CF',
                            borderRadius: '3px',
                        }, shape: "card" }),
                    React.createElement(Timeline, { fold: [{ foldArea: [1, 2], foldShow: true }] },
                        React.createElement(Timeline.Item, { title: "Signed", content: "Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service", time: '2016-06-10 10:30:00', state: "process" }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Express has arrived in Hangzhou, Zhejiang Binjiang company", time: '2016-06-10 09:30:00' }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Zhejiang Hangzhou Riverside company sent a member for you to send pieces", time: '2016-06-10 09:03:00' }),
                        React.createElement(Timeline.Item, { title: "Ship", content: "Zhejiang Hangzhou Transshipment Center has been issued", time: '2016-06-10 06:10:00' })),
                    React.createElement(Menu, { className: "my-menu", defaultOpenKeys: "sub-menu" },
                        React.createElement(Item, { key: "1" }, "Option 1"),
                        React.createElement(Item, { disabled: true, key: "2" }, "Disabled option 2"),
                        React.createElement(Divider, { key: "divider" }),
                        React.createElement(Group, { label: "Group" },
                            React.createElement(Item, { key: "group-1" }, "Group option 1"),
                            React.createElement(Item, { key: "group-2" }, "Group option 2")),
                        React.createElement(Divider, null),
                        React.createElement(SubMenu, { key: "sub-menu", label: "Sub menu" },
                            React.createElement(Item, { key: "sub-1" }, "Sub option 1"),
                            React.createElement(Item, { key: "sub-2" }, "Sub option 2"),
                            React.createElement(Item, { disabled: true, key: "sub-3" },
                                React.createElement("a", { href: "https://www.taobao.com/", target: "__blank" }, "Disabled Option Link 3")),
                            React.createElement(Item, { key: "sub-4" },
                                React.createElement("a", { href: "https://www.taobao.com/", target: "__blank" }, "Option Link 4"))),
                        React.createElement(Item, { key: "3", helper: "CTRL+P" }, "Option 3"),
                        React.createElement(Item, { disabled: true, key: "4" },
                            React.createElement("a", { href: "https://www.taobao.com/", target: "__blank" }, "Disabled Option Link")),
                        React.createElement(Item, { key: "5" },
                            React.createElement("a", { href: "https://www.taobao.com/", target: "__blank" }, "Option Link")))))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('config-provider-demo-5'));
