import { __extends } from "tslib";
import * as React from 'react';
import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import './ContextualMenuExample.scss';
var ContextualMenuCustomizationExample = /** @class */ (function (_super) {
    __extends(ContextualMenuCustomizationExample, _super);
    function ContextualMenuCustomizationExample() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this._renderCharmMenuItem = function (item, dismissMenu) {
            return (React.createElement(IconButton, { iconProps: { iconName: item.name }, className: "ms-ContextualMenu-customizationExample-icon ms-ContextualMenu-link", "data-is-focusable": true, onClick: dismissMenu }));
        };
        return _this;
    }
    ContextualMenuCustomizationExample.prototype.render = function () {
        return (React.createElement(DefaultButton, { className: "ContextualMenuButton3", text: "Click for ContextualMenu", menuProps: {
                shouldFocusOnMount: true,
                directionalHint: DirectionalHint.bottomLeftEdge,
                className: 'ms-ContextualMenu-customizationExample',
                items: [
                    {
                        key: 'newItem',
                        text: 'New'
                    },
                    {
                        key: 'upload',
                        text: 'Upload'
                    },
                    {
                        key: 'divider_1',
                        itemType: ContextualMenuItemType.Divider
                    },
                    {
                        key: 'charm',
                        text: 'Charm',
                        className: 'Charm-List',
                        subMenuProps: {
                            focusZoneProps: { direction: FocusZoneDirection.bidirectional },
                            items: [
                                {
                                    key: 'none',
                                    text: 'None'
                                },
                                {
                                    key: 'bulb',
                                    text: 'Lightbulb',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'run',
                                    text: 'Running',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'plane',
                                    text: 'Airplane',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'page',
                                    text: 'Page',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'cake',
                                    text: 'Cake',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'soccer',
                                    text: 'Soccer',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'home',
                                    text: 'Home',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'emoji',
                                    text: 'Emoji2',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'work',
                                    text: 'Work',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'coffee',
                                    text: 'Coffee',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'people',
                                    text: 'People',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'stopwatch',
                                    text: 'Stopwatch',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'music',
                                    text: 'MusicInCollectionFill',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                },
                                {
                                    key: 'lock',
                                    text: 'Lock',
                                    onRender: this._renderCharmMenuItem,
                                    className: 'ms-ContextualMenu-customizationExample-item'
                                }
                            ]
                        }
                    },
                    {
                        key: 'categories',
                        text: 'Categorize',
                        subMenuProps: {
                            items: [
                                {
                                    key: 'categories',
                                    text: 'categories',
                                    categoryList: [
                                        {
                                            name: 'Personal',
                                            color: 'yellow'
                                        },
                                        {
                                            name: 'Work',
                                            color: 'green'
                                        },
                                        {
                                            name: 'Birthday',
                                            color: 'blue'
                                        },
                                        {
                                            name: 'Spam',
                                            color: 'grey'
                                        },
                                        {
                                            name: 'Urgent',
                                            color: 'red'
                                        },
                                        {
                                            name: 'Hobbies',
                                            color: 'black'
                                        }
                                    ],
                                    onRender: this._renderCategoriesList
                                },
                                {
                                    key: 'divider_1',
                                    itemType: ContextualMenuItemType.Divider
                                },
                                {
                                    key: 'clear',
                                    text: 'Clear categories'
                                },
                                {
                                    key: 'manage',
                                    text: 'Manage categories'
                                }
                            ]
                        }
                    }
                ]
            } }));
    };
    ContextualMenuCustomizationExample.prototype._renderCategoriesList = function (item) {
        return (React.createElement("ul", { className: "ms-ContextualMenu-customizationExample-categoriesList" },
            React.createElement("li", { className: "ms-ContextualMenu-item" }, item.categoryList.map(function (category) { return (React.createElement(DefaultButton, { className: "ms-ContextualMenu-link ms-ContextualMenu-customizationExample-button", role: "menuitem", key: category.name },
                React.createElement("div", null,
                    React.createElement("span", { className: "ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch", style: { backgroundColor: category.color } }),
                    React.createElement("span", { className: "ms-ContextualMenu-itemText" }, category.name)))); }))));
    };
    return ContextualMenuCustomizationExample;
}(React.Component));
export { ContextualMenuCustomizationExample };
//# sourceMappingURL=ContextualMenu.Customization.Example.js.map