import Balloon from '..';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
        };
    }
    hide() {
        this.setState({
            visible: false,
        });
    }
    // onVisibleChange callback will be triggered when visible changes.
    // For example, for click type, it'll be triggered when clicking the button and later the other areas;
    // for hover type, it'll be triggered when mouse enter and mouse leave
    handleVisibleChange(visible) {
        this.setState({ visible });
    }
    onClose() {
        console.log('onClose doing!');
    }
    afterClose() {
        console.log('afterClose doing!');
    }
    render() {
        const visibleTrigger = (React.createElement(Button, { type: "primary", style: { margin: '5px' } }, "click to popup the card"));
        const clickTrigger = (React.createElement(Button, { type: "primary", style: { margin: '5px' } }, "hover to popup the card"));
        const content = (React.createElement("div", null,
            "click the button",
            React.createElement("br", null),
            React.createElement("a", { style: { right: 0 }, id: "confirmBtn", onClick: this.hide.bind(this) }, "confirm"),
            React.createElement("a", { style: { marginLeft: '4px' }, id: "cancelBtn", onClick: this.hide.bind(this) }, "cancel")));
        return (React.createElement("div", null,
            React.createElement(Balloon, { trigger: visibleTrigger, triggerType: "click", visible: this.state.visible, closable: true, onVisibleChange: this.handleVisibleChange.bind(this) }, content),
            React.createElement(Balloon, { trigger: clickTrigger, triggerType: "hover", onClose: this.onClose.bind(this), closable: false, afterClose: this.afterClose.bind(this) }, content)));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('balloon-demo-8'));
