"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ContextualMenu_1 = require("office-ui-fabric-react/lib/ContextualMenu");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
require("./ContextualMenuExample.scss");
var ContextualMenuBasicExample = (function (_super) {
    tslib_1.__extends(ContextualMenuBasicExample, _super);
    function ContextualMenuBasicExample() {
        var _this = _super.call(this) || this;
        _this.state = {
            isContextMenuVisible: false,
            showCallout: false
        };
        _this._onClick = _this._onClick.bind(_this);
        _this._onDismiss = _this._onDismiss.bind(_this);
        return _this;
    }
    ContextualMenuBasicExample.prototype.render = function () {
        var _this = this;
        var showCallout = this.state.showCallout;
        return (React.createElement("div", null,
            React.createElement(Button_1.DefaultButton, { onClick: this._onClick, id: 'ContextualMenuButton1', text: 'Click for ContextualMenu' }),
            this.state.isContextMenuVisible ? (React.createElement(ContextualMenu_1.ContextualMenu, { shouldFocusOnMount: true, target: this.state.target, onDismiss: this._onDismiss, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge, items: [
                    {
                        key: 'newItem',
                        iconProps: {
                            iconName: 'Add'
                        },
                        subMenuProps: {
                            items: [
                                {
                                    key: 'emailMessage',
                                    name: 'Email message',
                                    title: 'Create an email'
                                },
                                {
                                    key: 'calendarEvent',
                                    name: 'Calendar event',
                                    title: 'Create a calendar event',
                                }
                            ],
                        },
                        name: 'New'
                    },
                    {
                        key: 'upload',
                        onClick: function () {
                            _this.setState({ showCallout: true });
                        },
                        iconProps: {
                            iconName: 'Upload',
                            style: {
                                color: 'salmon'
                            }
                        },
                        name: 'Upload (Custom Color)',
                        title: 'Upload a file'
                    },
                    {
                        key: 'divider_1',
                        itemType: ContextualMenu_1.ContextualMenuItemType.Divider
                    },
                    {
                        key: 'rename',
                        name: 'Rename'
                    },
                    {
                        key: 'properties',
                        name: 'Properties'
                    },
                    {
                        key: 'disabled',
                        name: 'Disabled item',
                        disabled: true,
                    },
                    {
                        key: 'divider_2',
                        itemType: ContextualMenu_1.ContextualMenuItemType.Divider
                    },
                    {
                        key: 'share',
                        iconProps: {
                            iconName: 'Share'
                        },
                        subMenuProps: {
                            items: [
                                {
                                    key: 'sharetoemail',
                                    name: 'Share to Email',
                                    iconProps: {
                                        iconName: 'Mail'
                                    },
                                },
                                {
                                    key: 'sharetofacebook',
                                    name: 'Share to Facebook',
                                },
                                {
                                    key: 'sharetotwitter',
                                    name: 'Share to Twitter',
                                    iconProps: {
                                        iconName: 'Share'
                                    },
                                    subMenuProps: {
                                        items: [
                                            {
                                                key: 'sharetoemail_1',
                                                name: 'Share to Email',
                                                title: 'Share to Email',
                                                iconProps: {
                                                    iconName: 'Mail'
                                                },
                                            },
                                            {
                                                key: 'sharetofacebook_1',
                                                name: 'Share to Facebook',
                                                title: 'Share to Facebook',
                                            },
                                            {
                                                key: 'sharetotwitter_1',
                                                name: 'Share to Twitter',
                                                title: 'Share to Twitter',
                                                iconProps: {
                                                    iconName: 'Share'
                                                }
                                            },
                                        ],
                                    },
                                },
                            ],
                        },
                        name: 'Share'
                    },
                    {
                        key: 'print',
                        iconProps: {
                            iconName: 'Print'
                        },
                        name: 'Print'
                    },
                    {
                        key: 'music',
                        iconProps: {
                            iconName: 'MusicInCollectionFill'
                        },
                        name: 'Music',
                    },
                    {
                        key: 'divider_3',
                        itemType: ContextualMenu_1.ContextualMenuItemType.Divider,
                    },
                    {
                        key: 'Bing',
                        name: 'Go to Bing',
                        href: 'http://www.bing.com'
                    },
                ] })) : (null),
            showCallout && (React.createElement(Callout_1.Callout, { setInitialFocus: true, onDismiss: function () { return _this.setState({ showCallout: false }); } },
                React.createElement(Button_1.DefaultButton, { onClick: function () { return _this.setState({ showCallout: false }); }, text: 'Hello world' })))));
    };
    ContextualMenuBasicExample.prototype._onClick = function (event) {
        this.setState({ target: event.currentTarget, isContextMenuVisible: true });
    };
    ContextualMenuBasicExample.prototype._onDismiss = function (event) {
        this.setState({ isContextMenuVisible: false });
    };
    return ContextualMenuBasicExample;
}(React.Component));
exports.ContextualMenuBasicExample = ContextualMenuBasicExample;

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