import Button from '../../button';
import Dialog from '..';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
class Demo extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            visible: false,
            footerActions: ['ok', 'cancel'],
            footerAlign: 'right',
            loading: false,
        };
        this.onOpen = () => {
            this.setState({
                visible: true,
            });
        };
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
        this.toggleFooterActions = footerActionsStr => {
            this.setState({
                footerActions: footerActionsStr.split(','),
            });
        };
        this.toggleFooterAlign = footerAlign => {
            this.setState({
                footerAlign,
            });
        };
        this.toggleOkLoader = loading => {
            this.setState({
                loading,
            });
        };
    }
    render() {
        const { visible, footerActions, footerAlign, loading } = this.state;
        const okProps = {
            loading,
        };
        return (React.createElement("div", null,
            React.createElement(Button, { onClick: this.onOpen, type: "primary" }, "Open dialog"),
            React.createElement(Dialog, { title: "Customize buttons of footer", visible: visible, footerActions: footerActions, footerAlign: footerAlign, onOk: this.onClose, onCancel: this.onClose, onClose: this.onClose, okProps: okProps },
                React.createElement("div", { className: "demo-content" },
                    React.createElement(Radio.Group, { className: "demo-radio-group", shape: "button", value: footerActions.join(','), onChange: this.toggleFooterActions },
                        React.createElement(Radio, { value: "ok,cancel" }, "ok is left"),
                        React.createElement(Radio, { value: "cancel,ok" }, "ok is right"),
                        React.createElement(Radio, { value: "ok" }, "only ok"),
                        React.createElement(Radio, { value: "cancel" }, "only cancel")),
                    React.createElement(Radio.Group, { className: "demo-radio-group", shape: "button", value: footerAlign, onChange: this.toggleFooterAlign },
                        React.createElement(Radio, { value: "left" }, "left"),
                        React.createElement(Radio, { value: "center" }, "center"),
                        React.createElement(Radio, { value: "right" }, "right")),
                    React.createElement(Radio.Group, { className: "demo-radio-group", shape: "button", value: loading, onChange: this.toggleOkLoader },
                        React.createElement(Radio, { value: false }, "Loading Off"),
                        React.createElement(Radio, { value: true }, "Loading On"))))));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('dialog-demo-4'));
