office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
70 lines • 3.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Tooltip_1 = require("office-ui-fabric-react/lib/Tooltip");
var OverflowSet_1 = require("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_1.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(Tooltip_1.TooltipHost, { content: item.name, calloutProps: { directionalHint: 12 /* rightCenter */, beakWidth: 12 } },
React.createElement(Button_1.CommandBarButton, { styles: { root: { padding: '10px' } }, iconProps: { iconName: item.icon }, onClick: item.onClick })));
};
OverflowSetVerticalExample.prototype._onRenderOverflowButton = function (overflowItems) {
return (React.createElement(Button_1.CommandBarButton, { styles: { root: { padding: '10px' }, menuIcon: { fontSize: '16px' } }, menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } }));
};
return OverflowSetVerticalExample;
}(Utilities_1.BaseComponent));
exports.OverflowSetVerticalExample = OverflowSetVerticalExample;
//# sourceMappingURL=OverflowSet.Vertical.Example.js.map