office-ui-fabric-react/lib/components/OverflowSet/examples/OverflowSet.Vertical.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
import { OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
var OverflowSetVerticalExample = /** @class */ (function (_super) {
    tslib_1.__extends(OverflowSetVerticalExample, _super);
    function OverflowSetVerticalExample() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    OverflowSetVerticalExample.prototype.render = function () {
        return (React.createElement(OverflowSet, { vertical: true, items: [
                {
                    key: 'item1',
                    icon: 'Add',
                    name: 'Link 1',
                    ariaLabel: 'New. Use left and right arrow keys to navigate',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'item2',
                    icon: 'Upload',
                    name: 'Link 2',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'item3',
                    icon: 'Share',
                    name: 'Link 3',
                    onClick: function () {
                        return;
                    }
                }
            ], overflowItems: [
                {
                    key: 'item4',
                    icon: 'Mail',
                    name: 'Overflow Link 1',
                    onClick: function () {
                        return;
                    }
                },
                {
                    key: 'item5',
                    icon: 'Calendar',
                    name: 'Overflow Link 2',
                    onClick: function () {
                        return;
                    }
                }
            ], onRenderOverflowButton: this._onRenderOverflowButton, onRenderItem: this._onRenderItem }));
    };
    OverflowSetVerticalExample.prototype._onRenderItem = function (item) {
        return (React.createElement(TooltipHost, { content: item.name, calloutProps: { directionalHint: 12 /* rightCenter */, beakWidth: 12 } },
            React.createElement(CommandBarButton, { styles: { root: { padding: '10px' } }, iconProps: { iconName: item.icon }, onClick: item.onClick })));
    };
    OverflowSetVerticalExample.prototype._onRenderOverflowButton = function (overflowItems) {
        return (React.createElement(CommandBarButton, { styles: { root: { padding: '10px' }, menuIcon: { fontSize: '16px' } }, menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } }));
    };
    return OverflowSetVerticalExample;
}(BaseComponent));
export { OverflowSetVerticalExample };
//# sourceMappingURL=OverflowSet.Vertical.Example.js.map