"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Checkbox_1 = require("office-ui-fabric-react/lib/Checkbox");
var ContextualMenu_1 = require("office-ui-fabric-react/lib/ContextualMenu");
var Dropdown_1 = require("office-ui-fabric-react/lib/Dropdown");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
require("./ContextualMenuExample.scss");
var exampleStylesImport = require("../../../common/_exampleStyles.scss");
var exampleStyles = exampleStylesImport;
var DIRECTION_OPTIONS = [
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.topLeftEdge], text: 'Top Left Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.topCenter], text: 'Top Center' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.topRightEdge], text: 'Top Right Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.topAutoEdge], text: 'Top Auto Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.bottomLeftEdge], text: 'Bottom Left Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.bottomCenter], text: 'Bottom Center' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.bottomRightEdge], text: 'Bottom Right Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.bottomAutoEdge], text: 'Bottom Auto Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.leftTopEdge], text: 'Left Top Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.leftCenter], text: 'Left Center' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.leftBottomEdge], text: 'Left Bottom Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.rightTopEdge], text: 'Right Top Edge' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.rightCenter], text: 'Right Center' },
    { key: ContextualMenu_1.DirectionalHint[ContextualMenu_1.DirectionalHint.rightBottomEdge], text: 'Right Bottom Edge' },
];
var ContextualMenuDirectionalExample = (function (_super) {
    tslib_1.__extends(ContextualMenuDirectionalExample, _super);
    function ContextualMenuDirectionalExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            isBeakVisible: false,
            directionalHint: ContextualMenu_1.DirectionalHint.bottomLeftEdge,
            directionalHintForRTL: ContextualMenu_1.DirectionalHint.bottomLeftEdge,
            useDirectionalHintForRtl: false,
            gapSpace: 0,
            beakWidth: 20,
            edgeFixed: false
        };
        return _this;
    }
    ContextualMenuDirectionalExample.prototype.render = function () {
        var _a = this.state, beakWidth = _a.beakWidth, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, edgeFixed = _a.edgeFixed, gapSpace = _a.gapSpace, isBeakVisible = _a.isBeakVisible, useDirectionalHintForRtl = _a.useDirectionalHintForRtl;
        return (React.createElement("div", { className: 'ms-ContextualMenuDirectionalExample' },
            React.createElement("div", { className: 'ms-ContextualMenuDirectionalExample-configArea' },
                React.createElement(Checkbox_1.Checkbox, { className: exampleStyles.exampleCheckbox, label: 'Show beak', checked: isBeakVisible, onChange: this._onShowBeakChange }),
                React.createElement(Dropdown_1.Dropdown, { label: 'Directional hint', selectedKey: ContextualMenu_1.DirectionalHint[directionalHint], options: DIRECTION_OPTIONS, onChanged: this._onDirectionalChanged }),
                Utilities_1.getRTL() &&
                    React.createElement(Checkbox_1.Checkbox, { label: 'Use RTL directional hint', checked: useDirectionalHintForRtl, onChange: this._onUseRtlHintChange }),
                Utilities_1.getRTL() &&
                    React.createElement(Dropdown_1.Dropdown, { label: 'Directional hint for RTL', selectedKey: ContextualMenu_1.DirectionalHint[directionalHintForRTL], options: DIRECTION_OPTIONS, onChanged: this._onDirectionalRtlChanged, disabled: !useDirectionalHintForRtl })),
            React.createElement("div", { className: 'ms-ContextualMenuDirectionalExample-buttonArea', ref: 'menuButton' },
                React.createElement(Button_1.DefaultButton, { text: 'Show context menu', menuProps: {
                        isBeakVisible: isBeakVisible,
                        directionalHint: directionalHint,
                        directionalHintForRTL: useDirectionalHintForRtl ? directionalHintForRTL : undefined,
                        gapSpace: gapSpace,
                        beakWidth: beakWidth,
                        directionalHintFixed: edgeFixed,
                        items: [
                            {
                                key: 'newItem',
                                name: 'New'
                            },
                            {
                                key: 'divider_1',
                                itemType: ContextualMenu_1.ContextualMenuItemType.Divider
                            },
                            {
                                key: 'rename',
                                name: 'Rename'
                            },
                            {
                                key: 'edit',
                                name: 'Edit'
                            },
                            {
                                key: 'properties',
                                name: 'Properties'
                            },
                            {
                                key: 'disabled',
                                name: 'Disabled item',
                                disabled: true
                            }
                        ]
                    } }))));
    };
    ContextualMenuDirectionalExample.prototype._onShowBeakChange = function (ev, isVisible) {
        this.setState({
            isBeakVisible: isVisible
        });
    };
    ContextualMenuDirectionalExample.prototype._onUseRtlHintChange = function (ev, isVisible) {
        this.setState({
            useDirectionalHintForRtl: isVisible
        });
    };
    ContextualMenuDirectionalExample.prototype._onDirectionalChanged = function (option) {
        this.setState({
            directionalHint: ContextualMenu_1.DirectionalHint[option.key]
        });
    };
    ContextualMenuDirectionalExample.prototype._onDirectionalRtlChanged = function (option) {
        this.setState({
            directionalHintForRTL: ContextualMenu_1.DirectionalHint[option.key]
        });
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ContextualMenuDirectionalExample.prototype, "_onShowBeakChange", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ContextualMenuDirectionalExample.prototype, "_onUseRtlHintChange", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ContextualMenuDirectionalExample.prototype, "_onDirectionalChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ContextualMenuDirectionalExample.prototype, "_onDirectionalRtlChanged", null);
    return ContextualMenuDirectionalExample;
}(React.Component));
exports.ContextualMenuDirectionalExample = ContextualMenuDirectionalExample;
//# sourceMappingURL=ContextualMenu.Directional.Example.js.map