"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ContextualMenu_1 = require("@fluentui/react-next/lib-commonjs/ContextualMenu");
var Button_1 = require("@fluentui/react-next/lib-commonjs/compat/Button");
var FocusZone_1 = require("@fluentui/react-next/lib-commonjs/FocusZone");
var Styling_1 = require("@fluentui/react-next/lib-commonjs/Styling");
var Utilities_1 = require("@fluentui/react-next/lib-commonjs/Utilities");
var react_hooks_1 = require("@uifabric/react-hooks");
exports.ContextualMenuCustomizationWithNoWrapExample = function () {
    var menuProps = react_hooks_1.useConst(function () { return ({
        shouldFocusOnMount: true,
        directionalHint: ContextualMenu_1.DirectionalHint.bottomLeftEdge,
        className: classNames.menu,
        items: [
            { key: 'newItem', text: 'New' },
            { key: 'upload', text: 'Upload' },
            { key: 'divider_1', itemType: ContextualMenu_1.ContextualMenuItemType.Divider },
            {
                key: 'charm',
                text: 'Charm',
                className: 'Charm-List',
                ariaLabel: 'Charm. Press enter, space or right arrow keys to open submenu.',
                subMenuProps: {
                    focusZoneProps: {
                        direction: FocusZone_1.FocusZoneDirection.bidirectional,
                        checkForNoWrap: true,
                    },
                    items: [
                        { key: 'bulb', text: 'Lightbulb', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'run', text: 'Running', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'plane', text: 'Airplane', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'page', text: 'Page', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'cake', text: 'Cake', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'soccer', text: 'Soccer', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'home', text: 'Home', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'emoji', text: 'Emoji2', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'work', text: 'Work', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'coffee', text: 'Coffee', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'people', text: 'People', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'stopwatch', text: 'Stopwatch', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'music', text: 'MusicInCollectionFill', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'lock', text: 'Lock', onRender: renderCharmMenuItem, className: classNames.item },
                        { key: 'item3', text: 'Item 3', 'data-no-horizontal-wrap': true },
                        { key: 'item4', text: 'Item 4', 'data-no-horizontal-wrap': true },
                    ],
                },
            },
            {
                key: 'categories',
                text: 'Categorize',
                ariaLabel: 'Categorize. Press enter, space or right arrow keys to open submenu.',
                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: renderCategoriesList,
                        },
                        { key: 'divider_1', itemType: ContextualMenu_1.ContextualMenuItemType.Divider },
                        { key: 'clear', text: 'Additional Item' },
                        { key: 'manage', text: 'Additional Item' },
                    ],
                },
            },
        ],
    }); });
    return React.createElement(Button_1.DefaultButton, { text: "Click for ContextualMenu", menuProps: menuProps });
};
function renderCharmMenuItem(item, dismissMenu) {
    return (React.createElement(Button_1.IconButton, tslib_1.__assign({}, item, { iconProps: { iconName: item.text }, className: "ms-ContextualMenu-link", "data-is-focusable": true, onClick: dismissMenu, "data-no-vertical-wrap": true })));
}
function renderCategoriesList(item) {
    return (React.createElement("ul", { className: classNames.categoriesList },
        React.createElement("li", { className: "ms-ContextualMenu-item" }, item.categoryList.map(function (category) { return (React.createElement(Button_1.DefaultButton, { key: category.name, className: Utilities_1.css('ms-ContextualMenu-link', classNames.button), role: "menuitemcheckbox" },
            React.createElement("div", null,
                React.createElement("span", { style: { backgroundColor: category.color, width: 24, height: 24, verticalAlign: 'top' } }),
                React.createElement("span", { className: "ms-ContextualMenu-itemText" }, category.name)))); }))));
}
var classNames = Styling_1.mergeStyleSets({
    menu: {
        textAlign: 'center',
        maxWidth: 180,
        selectors: {
            '.ms-ContextualMenu-item': {
                height: 'auto',
            },
        },
    },
    item: {
        display: 'inline-block',
        width: 40,
        height: 40,
        lineHeight: 40,
        textAlign: 'center',
        verticalAlign: 'middle',
        marginBottom: 8,
        cursor: 'pointer',
        selectors: {
            '&:hover': {
                backgroundColor: '#eaeaea',
            },
        },
    },
    categoriesList: {
        margin: 0,
        padding: 0,
        listStyleType: 'none',
    },
    button: {
        width: '40%',
        margin: '2%',
    },
});
//# sourceMappingURL=ContextualMenu.CustomizationWithNoWrap.Example.js.map