var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/CommandBar", "office-ui-fabric-react/lib/Utilities", "./CommandBar.Example.scss"], function (require, exports, React, Button_1, CommandBar_1, Utilities_1, styles) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var CommandBarCustomizationExample = (function (_super) {
        __extends(CommandBarCustomizationExample, _super);
        function CommandBarCustomizationExample(props) {
            var _this = _super.call(this, props) || this;
            _this.state = { isContextMenuShown: false };
            return _this;
        }
        CommandBarCustomizationExample.prototype.render = function () {
            return (React.createElement("div", null,
                React.createElement(CommandBar_1.CommandBar, { isSearchBoxVisible: false, items: [
                        {
                            key: 'new',
                            name: 'Add',
                            onRender: this._renderSplitButtonMenuItem,
                            className: 'ms-CommandBarItem',
                            subMenuProps: {
                                items: [
                                    (_a = {
                                            key: 'emailMessage',
                                            name: 'Email message',
                                            icon: 'Mail'
                                        },
                                        _a['data-automation-id'] = 'newEmailButton',
                                        _a),
                                    (_b = {
                                            key: 'calendarEvent',
                                            name: 'Calendar event',
                                            icon: 'Calendar'
                                        },
                                        _b['data-automation-id'] = 'newCalendarButton',
                                        _b)
                                ],
                            },
                        },
                    ] })));
            var _a, _b;
        };
        CommandBarCustomizationExample.prototype._renderSplitButtonMenuItem = function (item) {
            var _this = this;
            var darkerBG = this.state.isContextMenuShown && styles.darkerBG;
            var dropDownButtonClass = Utilities_1.css(styles.button, darkerBG);
            var mainBtnClassName = Utilities_1.css(!item.name && ('ms-CommandBarItem--noName'), styles.button, darkerBG);
            return (React.createElement("div", null,
                React.createElement("div", { className: Utilities_1.css(styles.customButtonContainer, darkerBG), ref: function (ref) { return _this.container = ref; } },
                    React.createElement(Button_1.CommandButton, { className: mainBtnClassName, iconProps: { iconName: 'add' }, text: 'New' }),
                    React.createElement("span", { className: styles.splitter }, "|"),
                    React.createElement(Button_1.CommandButton, { onClick: this.onClickChevron, className: dropDownButtonClass, menuProps: {
                            className: Utilities_1.css('ms-CommandBar-menuHost'),
                            items: item.subMenuProps.items
                        } }))));
        };
        CommandBarCustomizationExample.prototype.onClickChevron = function (ev) {
            ev.stopPropagation();
            this.toggleDropDownMenuShown(ev);
        };
        CommandBarCustomizationExample.prototype.toggleDropDownMenuShown = function (ev) {
            this.setState({
                isContextMenuShown: !this.state.isContextMenuShown
            });
        };
        return CommandBarCustomizationExample;
    }(React.Component));
    __decorate([
        Utilities_1.autobind
    ], CommandBarCustomizationExample.prototype, "_renderSplitButtonMenuItem", null);
    __decorate([
        Utilities_1.autobind
    ], CommandBarCustomizationExample.prototype, "onClickChevron", null);
    __decorate([
        Utilities_1.autobind
    ], CommandBarCustomizationExample.prototype, "toggleDropDownMenuShown", null);
    exports.CommandBarCustomizationExample = CommandBarCustomizationExample;
});

//# sourceMappingURL=CommandBar.Customization.Example.js.map
