import Drawer from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '../..';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.state = { visible: false, childrenDrawer: false };
        this.showDrawer = () => {
            this.setState({
                visible: true,
            });
        };
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
        this.showChildrenDrawer = () => {
            this.setState({
                childrenDrawer: true,
            });
        };
        this.onChildrenDrawerClose = () => {
            this.setState({
                childrenDrawer: false,
            });
        };
    }
    render() {
        return (React.createElement("div", null,
            React.createElement(Button, { type: "primary", onClick: this.showDrawer }, "Open drawer"),
            React.createElement(Drawer, { title: "Multi-level drawer", closeMode: 'mask', size: 'small', onClose: this.onClose, footer: true, footerAlign: "right", visible: this.state.visible },
                React.createElement(Button, { type: "primary", onClick: this.showChildrenDrawer }, "Two-level drawer"),
                React.createElement("div", { style: { height: 800, marginTop: 40 } }, "\u5F88\u957F\u7684\u5185\u5BB9"),
                React.createElement("div", { style: { marginBottom: 40 } }, "\u5E95\u90E8\u7684\u5185\u5BB9123"),
                React.createElement(Drawer, { multilevel: true, title: "Two-level Drawer", closeMode: 'mask', size: 'small', footer: true, footerAlign: "center", onClose: this.onChildrenDrawerClose, visible: this.state.childrenDrawer },
                    "Start your business here by searching a popular product",
                    React.createElement("div", null,
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "\u5F88\u957F\u7684\u5185\u5BB9"),
                        React.createElement("p", null, "11111 "))))));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('drawer-demo-3'));
