import Button from '../../button';
import Dialog from '..';
import React from 'react';
import ReactDOM from 'react-dom';
import Switch from '../../switch';
const largeContent = new Array(60)
    .map((_, index) => (React.createElement("p", { key: index }, "Start your business here by searching a popular product")));
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            visible: false,
            isFullScreen: false,
            closeOnMaskClick: false,
        };
        this.onOpen = () => {
            this.setState({
                visible: true,
            });
        };
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
        this.toggleIsFullScreen = () => {
            this.setState({
                isFullScreen: !this.state.isFullScreen,
            });
        };
        this.toggleCloseOnMaskClick = () => {
            this.setState({
                closeOnMaskClick: !this.state.closeOnMaskClick,
            });
        };
    }
    render() {
        const { visible, isFullScreen, closeOnMaskClick } = this.state;
        return (React.createElement("div", null,
            React.createElement("div", { style: { display: 'block', marginBottom: '10px' } }, "When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:"),
            React.createElement(Switch, { style: { display: 'block', marginBottom: '10px' }, checked: isFullScreen, onChange: this.toggleIsFullScreen }),
            React.createElement("div", { style: { display: 'block', marginBottom: '10px' } }, "Close on mask click:"),
            React.createElement(Switch, { style: { display: 'block', marginBottom: '10px' }, checked: closeOnMaskClick, onChange: this.toggleCloseOnMaskClick }),
            React.createElement(Button, { onClick: this.onOpen, type: "primary" }, "Open dialog"),
            React.createElement(Dialog, { title: "Welcome to Alibaba.com", visible: visible, isFullScreen: isFullScreen, closeMode: closeOnMaskClick ? ['close', 'esc', 'mask'] : ['close', 'esc'], onOk: this.onClose, onCancel: this.onClose, onClose: this.onClose }, largeContent)));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('dialog-demo-6'));
