office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
120 lines (118 loc) • 4.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
/* tslint:disable:no-unused-variable */
var React = require("react");
/* tslint:enable:no-unused-variable */
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var SearchBox_1 = require("office-ui-fabric-react/lib/SearchBox");
var OverflowSet_1 = require("office-ui-fabric-react/lib/OverflowSet");
var stylesImport = require("./OverflowSet.Example.scss");
var styles = stylesImport;
var OverflowSetCustomExample = (function (_super) {
tslib_1.__extends(OverflowSetCustomExample, _super);
function OverflowSetCustomExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
OverflowSetCustomExample.prototype.render = function () {
return (React.createElement(OverflowSet_1.OverflowSet, { items: [
{
key: 'search',
onRender: function (item) {
return (React.createElement(SearchBox_1.SearchBox, { labelText: 'Search' }));
}
},
{
key: 'newItem',
name: 'New',
icon: 'Add',
ariaLabel: 'New. Use left and right arrow keys to navigate',
onClick: function () { return; },
subMenuProps: {
items: [
{
key: 'emailMessage',
name: 'Email message',
icon: 'Mail',
},
{
key: 'calendarEvent',
name: 'Calendar event',
icon: 'Calendar'
}
],
},
},
{
key: 'upload',
name: 'Upload',
icon: 'Upload',
onClick: function () { return; },
},
{
key: 'share',
name: 'Share',
icon: 'Share',
onClick: function () { return; }
}
], overflowItems: [
{
key: 'newItem',
name: 'Add',
icon: 'Add',
ariaLabel: 'New. Use left and right arrow keys to navigate',
onClick: function () { return; },
subMenuProps: {
items: [
{
key: 'emailMessage',
name: 'Email message',
icon: 'Mail',
},
{
key: 'calendarEvent',
name: 'Calendar event',
icon: 'Calendar'
}
],
},
},
{
key: 'move',
name: 'Move to...',
icon: 'MoveToFolder',
onClick: function () { return; }
},
{
key: 'copy',
name: 'Copy to...',
icon: 'Copy',
onClick: function () { return; }
},
{
key: 'rename',
name: 'Rename...',
icon: 'Edit',
onClick: function () { return; }
},
{
key: 'disabled',
name: 'Disabled...',
icon: 'Cancel',
disabled: true,
onClick: function () { return; }
}
], onRenderOverflowButton: function (overflowItems) {
return (React.createElement(Button_1.DefaultButton, { className: Utilities_1.css(styles.overflowButton), iconProps: { iconName: 'More' }, menuIconProps: null, menuProps: { items: overflowItems } }));
}, onRenderItem: function (item) {
if (item.onRender) {
return (item.onRender(item));
}
return (React.createElement(Button_1.DefaultButton, { iconProps: { iconName: item.icon }, menuProps: item.subMenuProps, text: item.name }, " "));
} }));
};
return OverflowSetCustomExample;
}(Utilities_1.BaseComponent));
exports.OverflowSetCustomExample = OverflowSetCustomExample;
//# sourceMappingURL=OverflowSet.Custom.Example.js.map