"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var index_1 = require('../../../../index');
require('./ContextualMenuExample.scss');
var DIRECTION_OPTIONS = [
    { key: index_1.DirectionalHint[index_1.DirectionalHint.topLeftEdge], text: 'Top Left Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.topCenter], text: 'Top Center' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.topRightEdge], text: 'Top Right Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.topAutoEdge], text: 'Top Auto Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.bottomLeftEdge], text: 'Bottom Left Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.bottomCenter], text: 'Bottom Center' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.bottomRightEdge], text: 'Bottom Right Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.bottomAutoEdge], text: 'Bottom Auto Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.leftTopEdge], text: 'Left Top Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.leftCenter], text: 'Left Center' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.leftBottomEdge], text: 'Left Bottom Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.rightTopEdge], text: 'Right Top Edge' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.rightCenter], text: 'Right Center' },
    { key: index_1.DirectionalHint[index_1.DirectionalHint.rightBottomEdge], text: 'Right Bottom Edge' },
];
var ContextualMenuDirectionalExample = (function (_super) {
    __extends(ContextualMenuDirectionalExample, _super);
    function ContextualMenuDirectionalExample() {
        _super.call(this);
        this._onShowMenuClicked = this._onShowMenuClicked.bind(this);
        this._onShowBeakChanged = this._onShowBeakChanged.bind(this);
        this._onDirectionalChanged = this._onDirectionalChanged.bind(this);
        this._onChangeGapSizeClicked = this._onChangeGapSizeClicked.bind(this);
        this._onDismissMenu = this._onDismissMenu.bind(this);
        this.state = {
            isContextualMenuVisible: false,
            isBeakVisible: false,
            directionalHint: index_1.DirectionalHint.bottomLeftEdge,
            gapSpace: 0
        };
    }
    ContextualMenuDirectionalExample.prototype.render = function () {
        var _a = this.state, isContextualMenuVisible = _a.isContextualMenuVisible, isBeakVisible = _a.isBeakVisible, directionalHint = _a.directionalHint, gapSpace = _a.gapSpace;
        return (React.createElement("div", {className: 'ms-ContextualMenuDirectionalExample'}, React.createElement("div", {className: 'ms-ContextualMenuDirectionalExample-configArea'}, React.createElement(index_1.Checkbox, {text: 'Show beak', isChecked: isBeakVisible, onChanged: this._onShowBeakChanged}), React.createElement(index_1.TextField, {ref: 'gapSize', label: 'Gap Space', placeholder: 'Type in the gap space'}), React.createElement(index_1.Button, {onClick: this._onChangeGapSizeClicked}, "Submit"), React.createElement(index_1.Dropdown, {label: 'Directional hint', selectedKey: index_1.DirectionalHint[directionalHint], options: DIRECTION_OPTIONS, onChanged: this._onDirectionalChanged})), React.createElement("div", {className: 'ms-ContextualMenuDirectionalExample-buttonArea', ref: 'menuButton'}, React.createElement(index_1.Button, {onClick: this._onShowMenuClicked}, isContextualMenuVisible ? 'Hide context menu' : 'Show context menu')), isContextualMenuVisible ? (React.createElement(index_1.ContextualMenu, {targetElement: this.refs.menuButton, isBeakVisible: isBeakVisible, directionalHint: directionalHint, gapSpace: gapSpace, onDismiss: this._onDismissMenu, items: [
            {
                key: 'newItem',
                name: 'New',
                icon: 'circlePlus',
                items: [
                    {
                        key: 'emailMessage',
                        name: 'Email message',
                    },
                    {
                        key: 'calendarEvent',
                        name: 'Calendar event',
                    }
                ]
            },
            {
                key: 'upload',
                name: 'Upload',
                icon: 'upload'
            },
            {
                key: 'rename',
                name: 'Rename',
            },
            {
                key: '-',
                name: '-',
            },
            {
                key: 'share',
                name: 'Share',
                icon: 'share',
                items: [
                    {
                        key: 'sharetoemail',
                        name: 'Share to Email',
                        icon: 'mail'
                    },
                    {
                        key: 'sharetofacebook',
                        name: 'Share to Facebook',
                    },
                    {
                        key: 'sharetotwitter',
                        name: 'Share to Twitter',
                        icon: 'share'
                    },
                ]
            },
            {
                key: 'print',
                name: 'Print',
                icon: 'print'
            },
        ]})) : (null)));
    };
    ContextualMenuDirectionalExample.prototype._onShowBeakChanged = function (isVisible) {
        this.setState({
            isBeakVisible: isVisible
        });
    };
    ContextualMenuDirectionalExample.prototype._onShowMenuClicked = function () {
        this.setState({
            isContextualMenuVisible: !this.state.isContextualMenuVisible
        });
    };
    ContextualMenuDirectionalExample.prototype._onDismissMenu = function (ev) {
        this.setState({
            isContextualMenuVisible: false
        });
    };
    ContextualMenuDirectionalExample.prototype._onDirectionalChanged = function (option) {
        this.setState({
            directionalHint: index_1.DirectionalHint[option.key]
        });
    };
    ContextualMenuDirectionalExample.prototype._onChangeGapSizeClicked = function () {
        this.setState({
            gapSpace: parseInt(this.refs.gapSize.state.value, 10)
        });
    };
    return ContextualMenuDirectionalExample;
}(React.Component));
exports.ContextualMenuDirectionalExample = ContextualMenuDirectionalExample;

//# sourceMappingURL=ContextualMenu.Directional.Example.js.map
