import * as tslib_1 from "tslib";
import * as React from 'react';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
import './ContextualMenuExample.scss';
var ContextualMenuHeaderExample = /** @class */ (function (_super) {
    tslib_1.__extends(ContextualMenuHeaderExample, _super);
    function ContextualMenuHeaderExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ContextualMenuHeaderExample.prototype.render = function () {
        return (React.createElement(DefaultButton, { id: "ContextualMenuHeaderExample", text: "Click for ContextualMenu", menuProps: {
                shouldFocusOnMount: true,
                items: [
                    {
                        key: 'Actions',
                        itemType: ContextualMenuItemType.Header,
                        text: 'Actions',
                        itemProps: {
                            lang: 'en-us'
                        }
                    },
                    {
                        key: 'upload',
                        iconProps: {
                            iconName: 'Upload',
                            style: {
                                color: 'salmon'
                            }
                        },
                        text: 'Upload',
                        title: 'Upload a file'
                    },
                    {
                        key: 'rename',
                        text: 'Rename'
                    },
                    {
                        key: 'share',
                        iconProps: {
                            iconName: 'Share'
                        },
                        subMenuProps: {
                            items: [
                                {
                                    key: 'sharetoemail',
                                    text: 'Share to Email',
                                    iconProps: {
                                        iconName: 'Mail'
                                    }
                                },
                                {
                                    key: 'sharetofacebook',
                                    text: 'Share to Facebook'
                                },
                                {
                                    key: 'sharetotwitter',
                                    text: 'Share to Twitter',
                                    iconProps: {
                                        iconName: 'Share'
                                    }
                                }
                            ]
                        },
                        text: 'Sharing'
                    },
                    {
                        key: 'navigation',
                        itemType: ContextualMenuItemType.Header,
                        text: 'Navigation'
                    },
                    {
                        key: 'properties',
                        text: 'Properties'
                    },
                    {
                        key: 'print',
                        iconProps: {
                            iconName: 'Print'
                        },
                        text: 'Print'
                    },
                    {
                        key: 'Bing',
                        text: 'Go to Bing',
                        href: 'http://www.bing.com'
                    }
                ]
            } }));
    };
    return ContextualMenuHeaderExample;
}(React.Component));
export { ContextualMenuHeaderExample };
//# sourceMappingURL=ContextualMenu.Header.Example.js.map