"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 CommandBar_1 = require("office-ui-fabric-react/lib/CommandBar");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var styles = require("./CommandBar.Example.scss");
var CommandBarCustomizationExample = (function (_super) {
    tslib_1.__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));
tslib_1.__decorate([
    Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "_renderSplitButtonMenuItem", null);
tslib_1.__decorate([
    Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "onClickChevron", null);
tslib_1.__decorate([
    Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "toggleDropDownMenuShown", null);
exports.CommandBarCustomizationExample = CommandBarCustomizationExample;

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