import Balloon from '..';
import Button from '../../button';
import React from 'react';
import ReactDOM from 'react-dom';
const top = (React.createElement(Button, { id: "top", style: { margin: '5px' }, className: "btrigger" }, "top"));
const right = (React.createElement(Button, { id: "right", style: { margin: '5px' }, className: "btrigger" }, "right"));
const bottom = (React.createElement(Button, { id: "bottom", style: { margin: '5px' }, className: "btrigger" }, "bottom"));
const left = (React.createElement(Button, { id: "left", style: { margin: '5px' }, className: "btrigger" }, "left"));
const topLeft = (React.createElement(Button, { id: "topLeft", style: { margin: '5px' }, className: "btrigger" }, "top left"));
const topRight = (React.createElement(Button, { id: "topRight", style: { margin: '5px' }, className: "btrigger" }, "top right"));
const rightTop = (React.createElement(Button, { id: "rightTop", style: { margin: '5px' }, className: "btrigger" }, "right top"));
const rightBottom = (React.createElement(Button, { id: "rightBottom", style: { margin: '5px' }, className: "btrigger" }, "right bottom"));
const bottomLeft = (React.createElement(Button, { id: "bottomLeft", style: { margin: '5px' }, className: "btrigger" }, "bottom left"));
const bottomRight = (React.createElement(Button, { id: "bottomRight", style: { margin: '5px' }, className: "btrigger" }, "bottom right"));
const leftTop = (React.createElement(Button, { id: "leftTop", style: { margin: '5px' }, className: "btrigger" }, "left top"));
const leftBottom = (React.createElement(Button, { id: "leftBottom", style: { margin: '5px' }, className: "btrigger" }, "left bottom"));
const App = () => (React.createElement("div", { style: { paddingLeft: 320 } },
    React.createElement("div", { style: { marginLeft: 75 } },
        React.createElement(Balloon, { needAdjust: true, title: "balloon title", trigger: topLeft, align: "tl", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, title: "balloon title", trigger: top, align: "t", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: topRight, title: "balloon title", align: "tr", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content")),
    React.createElement("div", { style: { width: 80, float: 'left' } },
        React.createElement(Balloon, { needAdjust: true, title: "balloon title", trigger: leftTop, align: "lt", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: left, title: "balloon title", align: "l", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: leftBottom, title: "balloon title", align: "lb", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content")),
    React.createElement("div", { style: { width: 80, marginLeft: 290 } },
        React.createElement(Balloon, { needAdjust: true, trigger: rightTop, title: "balloon title", align: "rt", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: right, title: "balloon title", align: "r", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, title: "balloon title", trigger: rightBottom, align: "rb", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content")),
    React.createElement("div", { style: { marginLeft: 80, clear: 'both' } },
        React.createElement(Balloon, { needAdjust: true, trigger: bottomLeft, title: "balloon title", align: "bl", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: bottom, title: "balloon title", align: "b", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"),
        React.createElement(Balloon, { needAdjust: true, trigger: bottomRight, title: "balloon title", align: "br", alignEdge: true, triggerType: "click", style: { width: 300 } }, "balloon content"))));
ReactDOM.render(React.createElement(App, null), document.getElementById('balloon-demo-7'));
