office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
122 lines • 6.78 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/TextField", "./ContextualMenuExample.scss"], function (require, exports, tslib_1, React, Button_1, TextField_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ContextualMenuSubmenuExample = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuSubmenuExample, _super);
function ContextualMenuSubmenuExample(props) {
var _this = _super.call(this, props) || this;
_this._onHoverDelayChanged = function (ev, newValue) {
_this.setState({
hoverDelay: +newValue
});
};
_this.state = {
hoverDelay: 250
};
return _this;
}
ContextualMenuSubmenuExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(TextField_1.TextField, { value: String(this.state.hoverDelay), onChange: this._onHoverDelayChanged }),
React.createElement(Button_1.DefaultButton, { id: "ContextualMenuButton2", text: "Click for ContextualMenu", menuProps: {
shouldFocusOnMount: true,
subMenuHoverDelay: this.state.hoverDelay,
items: [
{
key: 'newItem',
subMenuProps: {
items: [
{
key: 'emailMessage',
text: 'Email message',
title: 'Create an email'
},
{
key: 'calendarEvent',
text: 'Calendar event',
title: 'Create a calendar event'
}
]
},
href: 'https://bing.com',
text: 'New'
},
{
key: 'share',
subMenuProps: {
items: [
{
key: 'sharetotwitter',
text: 'Share to Twitter'
},
{
key: 'sharetofacebook',
text: 'Share to Facebook'
},
{
key: 'sharetoemail',
text: 'Share to Email',
subMenuProps: {
items: [
{
key: 'sharetooutlook_1',
text: 'Share to Outlook',
title: 'Share to Outlook'
},
{
key: 'sharetogmail_1',
text: 'Share to Gmail',
title: 'Share to Gmail'
}
]
}
}
]
},
text: 'Share'
},
{
key: 'shareSplit',
onClick: function () { return alert('Split buttons!'); },
split: true,
'aria-roledescription': 'split button',
subMenuProps: {
items: [
{
key: 'sharetotwittersplit',
text: 'Share to Twitter'
},
{
key: 'sharetofacebooksplit',
text: 'Share to Facebook'
},
{
key: 'sharetoemailsplit',
text: 'Share to Email',
subMenuProps: {
items: [
{
key: 'sharetooutlooksplit_1',
text: 'Share to Outlook',
title: 'Share to Outlook'
},
{
key: 'sharetogmailsplit_1',
text: 'Share to Gmail',
title: 'Share to Gmail'
}
]
}
}
]
},
text: 'Share w/ Split'
}
]
} })));
};
return ContextualMenuSubmenuExample;
}(React.Component));
exports.ContextualMenuSubmenuExample = ContextualMenuSubmenuExample;
});
//# sourceMappingURL=ContextualMenu.Submenu.Example.js.map