import { __extends } from "tslib";
import * as React from 'react';
import { Button, MenuButton, SplitButton } from '@uifabric/experiments';
import { Stack } from 'office-ui-fabric-react';
import { buildKeytipConfigMap } from 'office-ui-fabric-react/lib/Keytips';
var btnExecute = function (el) {
    el.click();
};
// Setup keytips
var keytipConfig = {
    keytips: [
        {
            id: 'Button',
            content: '1A',
            optionalProps: {
                onExecute: btnExecute,
            },
        },
        {
            id: 'MenuButton',
            content: '1B',
            optionalProps: {
                onExecute: btnExecute,
            },
            children: [
                {
                    id: 'MenuItem1',
                    content: 'E',
                },
                {
                    id: 'MenuItem2',
                    content: '8',
                },
            ],
        },
        {
            id: 'MenuButton2',
            content: '1C',
            optionalProps: {
                onExecute: btnExecute,
            },
            children: [
                {
                    id: 'MenuItem1',
                    content: 'E',
                },
                {
                    id: 'MenuItem2',
                    content: '8',
                },
            ],
        },
        {
            id: 'SplitButton',
            content: '2',
            optionalProps: {
                onExecute: btnExecute,
            },
        },
    ],
};
var keytipMap = buildKeytipConfigMap(keytipConfig);
var alertClicked = function () {
    alert('Clicked');
};
var menuProps = {
    items: [
        {
            key: 'a',
            text: 'Item a',
            keytipProps: keytipMap.MenuItem1,
        },
        {
            key: 'b',
            text: 'Item b',
            keytipProps: keytipMap.MenuItem2,
        },
    ],
    shouldFocusOnContainer: true,
    shouldFocusOnMount: true,
};
var ButtonKeytipsExample = /** @class */ (function (_super) {
    __extends(ButtonKeytipsExample, _super);
    function ButtonKeytipsExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ButtonKeytipsExample.prototype.render = function () {
        var stackTokens = { childrenGap: 12 };
        return (React.createElement(Stack, { horizontal: true, disableShrink: true, tokens: stackTokens },
            React.createElement(Button, { content: "Button with keytip", onClick: alertClicked, keytipProps: keytipMap.Button }),
            React.createElement(Button, { content: "Button without keytip", onClick: alertClicked }),
            React.createElement(MenuButton, { content: "Menu Button with keytip", keytipProps: keytipMap.MenuButton, menu: menuProps }),
            React.createElement(SplitButton, { content: "Split Button with keytip", keytipProps: keytipMap.SplitButton, menu: menuProps })));
    };
    return ButtonKeytipsExample;
}(React.Component));
export { ButtonKeytipsExample };
//# sourceMappingURL=Button.Keytips.Example.js.map