define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/CommandBar", "./KeytipSetup", "office-ui-fabric-react/lib/Modal", "office-ui-fabric-react/lib/MessageBar"], function (require, exports, tslib_1, React, CommandBar_1, KeytipSetup_1, Modal_1, MessageBar_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var KeytipsCommandBarExample = /** @class */ (function (_super) {
        tslib_1.__extends(KeytipsCommandBarExample, _super);
        function KeytipsCommandBarExample(props) {
            var _this = _super.call(this, props) || this;
            _this._showModal = function () {
                _this.setState({ showModal: true });
            };
            _this._hideModal = function () {
                _this.setState({ showModal: false });
            };
            _this._showMessageBar = function () {
                _this.setState({ showMessageBar: true });
                // Hide the MessageBar after 2 seconds
                setTimeout(_this._hideMessageBar, 2000);
            };
            _this._hideMessageBar = function () {
                _this.setState({ showMessageBar: false });
            };
            _this.state = {
                showModal: false,
                showMessageBar: false
            };
            return _this;
        }
        /* tslint:disable:jsx-ban-props jsx-no-lambda */
        KeytipsCommandBarExample.prototype.render = function () {
            return (React.createElement("div", { style: { height: 100 } },
                React.createElement(CommandBar_1.CommandBar, { items: [
                        {
                            key: 'commandBarItem1',
                            name: 'New',
                            iconProps: {
                                iconName: 'Add',
                            },
                            onClick: this._showModal,
                            keytipProps: KeytipSetup_1.keytipMap.CommandButton1Keytip
                        },
                        {
                            key: 'commandBarItem2',
                            name: 'Upload',
                            iconProps: {
                                iconName: 'Upload',
                            },
                            onClick: this._showMessageBar,
                            keytipProps: KeytipSetup_1.keytipMap.CommandButton2Keytip
                        }
                    ], farItems: [
                        {
                            key: 'farItem1',
                            name: 'Options',
                            iconProps: {
                                iconName: 'SortLines',
                            },
                            keytipProps: KeytipSetup_1.keytipMap.CommandButton3Keytip,
                            subMenuProps: {
                                items: [
                                    {
                                        key: 'emailMessage',
                                        name: 'Send Email',
                                        iconProps: {
                                            iconName: 'Mail',
                                        },
                                        keytipProps: KeytipSetup_1.keytipMap.SubmenuKeytip1,
                                        onClick: function () { console.log('test1'); }
                                    },
                                    {
                                        key: 'calendarEvent',
                                        name: 'Make Calendar Event',
                                        iconProps: {
                                            iconName: 'Calendar',
                                        },
                                        keytipProps: KeytipSetup_1.keytipMap.SubmenuKeytip2,
                                        onClick: function () { console.log('test2'); },
                                        subMenuProps: {
                                            items: [
                                                {
                                                    key: 'testButton',
                                                    name: 'Add to Outlook',
                                                    keytipProps: KeytipSetup_1.keytipMap.SubmenuKeytip3,
                                                    onClick: function () { console.log('test3'); }
                                                },
                                                {
                                                    key: 'testButton2',
                                                    name: 'Go to Bing',
                                                    keytipProps: KeytipSetup_1.keytipMap.SubmenuKeytip4,
                                                    href: 'http://www.bing.com',
                                                    target: '_blank'
                                                }
                                            ]
                                        }
                                    },
                                    {
                                        key: 'splitButtonTest',
                                        name: 'Other...',
                                        split: true,
                                        keytipProps: KeytipSetup_1.keytipMap.SubmenuKeytip5,
                                        subMenuProps: {
                                            items: [
                                                {
                                                    key: 'splitButtonSubMenu1',
                                                    name: 'Submenu Item w/o Keytip',
                                                },
                                                {
                                                    key: 'splitButtonSubMenu2',
                                                    name: 'Submenu Item w/o Keytip'
                                                }
                                            ]
                                        }
                                    }
                                ],
                            },
                        }
                    ] }),
                this.state.showMessageBar &&
                    React.createElement(MessageBar_1.MessageBar, { messageBarType: MessageBar_1.MessageBarType.success }, "Success Uploading"),
                React.createElement(Modal_1.Modal, { isOpen: this.state.showModal, onDismiss: this._hideModal, isBlocking: false },
                    React.createElement("h3", null, "New Modal"))));
        };
        return KeytipsCommandBarExample;
    }(React.Component));
    exports.KeytipsCommandBarExample = KeytipsCommandBarExample;
});
//# sourceMappingURL=Keytips.CommandBar.Example.js.map