office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
118 lines • 4.97 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
import * as stylesImport from './OverflowSet.Example.scss';
var styles = stylesImport;
var OverflowSetCustomExample = /** @class */ (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, { items: [
{
key: 'search',
onRender: function (item) {
return (React.createElement(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: this._onRenderOverflowButton, onRenderItem: this._onRenderItem }));
};
OverflowSetCustomExample.prototype._onRenderItem = function (item) {
if (item.onRender) {
return (item.onRender(item));
}
return (React.createElement(DefaultButton, { iconProps: { iconName: item.icon }, menuProps: item.subMenuProps, text: item.name }));
};
OverflowSetCustomExample.prototype._onRenderOverflowButton = function (overflowItems) {
return (React.createElement(DefaultButton, { className: css(styles.overflowButton), menuIconProps: { iconName: 'More' }, menuProps: { items: overflowItems } }));
};
return OverflowSetCustomExample;
}(BaseComponent));
export { OverflowSetCustomExample };
//# sourceMappingURL=OverflowSet.Custom.Example.js.map