import './demo7.css';
import Menu from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const { SubMenu, Item, Divider } = Menu;
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.createContextMenu = e => {
            e.preventDefault();
            const target = e.target;
            const { top, left } = target.getBoundingClientRect();
            Menu.create({
                target: e.target,
                offset: [e.clientX - left, e.clientY - top],
                className: 'context-menu',
                popupClassName: 'context-menu',
                onItemClick: console.log,
                selectedKeys: this.state.selectedKeys,
                selectMode: 'multiple',
                onSelect: this.handleSelect,
                children: [
                    React.createElement(Item, { key: "1" }, "Option 1"),
                    React.createElement(Item, { key: "2" }, "Option 2"),
                    React.createElement(Item, { key: "3" }, "Option 3"),
                    React.createElement(Divider, { key: "divider-1" }),
                    React.createElement(SubMenu, { key: "sub-menu", label: "Sub menu" },
                        React.createElement(Item, { key: "sub-1" }, "Sub option 1"),
                        React.createElement(Item, { key: "sub-2" }, "Sub option 2")),
                    React.createElement(Item, { key: "4" }, "Option 4"),
                    React.createElement(Divider, { key: "divider-2" }),
                    React.createElement(Item, { key: "5" }, "Option 5"),
                ],
            });
        };
        this.state = {
            selectedKeys: [],
        };
        this.handleSelect = this.handleSelect.bind(this);
    }
    handleSelect(selectedKeys) {
        selectedKeys = selectedKeys.filter(key => {
            return ['sub-1', 'sub-2'].indexOf(key) > -1;
        });
        this.setState({
            selectedKeys,
        });
    }
    render() {
        return (React.createElement("div", { className: "context-demo", onContextMenu: this.createContextMenu }, "Right click here to see the context menu!"));
    }
}
ReactDOM.render(React.createElement(Demo, null), document.getElementById('menu-demo-7'));
