office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
171 lines (169 loc) • 8.76 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/ContextualMenu", "office-ui-fabric-react/lib/Callout", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/Utilities", "./ContextualMenuExample.scss"], function (require, exports, tslib_1, React, ContextualMenu_1, Callout_1, Button_1, Utilities_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var ContextualMenuBasicExample = (function (_super) {
tslib_1.__extends(ContextualMenuBasicExample, _super);
function ContextualMenuBasicExample() {
var _this = _super.call(this) || this;
_this.state = {
isContextMenuVisible: false,
showCallout: false
};
_this._onClick = _this._onClick.bind(_this);
_this._onDismiss = _this._onDismiss.bind(_this);
return _this;
}
ContextualMenuBasicExample.prototype.render = function () {
var _this = this;
var showCallout = this.state.showCallout;
return (React.createElement("div", null,
React.createElement(Button_1.DefaultButton, { onClick: this._onClick, id: 'ContextualMenuButton1', text: 'Click for ContextualMenu' }),
this.state.isContextMenuVisible ? (React.createElement(ContextualMenu_1.ContextualMenu, { shouldFocusOnMount: true, target: this.state.target, onDismiss: this._onDismiss, directionalHint: Utilities_1.getRTL() ? Callout_1.DirectionalHint.bottomRightEdge : Callout_1.DirectionalHint.bottomLeftEdge, items: [
{
key: 'newItem',
iconProps: {
iconName: 'Add'
},
subMenuProps: {
items: [
{
key: 'emailMessage',
name: 'Email message',
title: 'Create an email'
},
{
key: 'calendarEvent',
name: 'Calendar event',
title: 'Create a calendar event',
}
],
},
name: 'New'
},
{
key: 'upload',
onClick: function () {
_this.setState({ showCallout: true });
},
iconProps: {
iconName: 'Upload',
style: {
color: 'salmon'
}
},
name: 'Upload (Custom Color)',
title: 'Upload a file'
},
{
key: 'divider_1',
itemType: ContextualMenu_1.ContextualMenuItemType.Divider
},
{
key: 'rename',
name: 'Rename'
},
{
key: 'properties',
name: 'Properties'
},
{
key: 'disabled',
name: 'Disabled item',
disabled: true,
},
{
key: 'divider_2',
itemType: ContextualMenu_1.ContextualMenuItemType.Divider
},
{
key: 'share',
iconProps: {
iconName: 'Share'
},
subMenuProps: {
items: [
{
key: 'sharetoemail',
name: 'Share to Email',
iconProps: {
iconName: 'Mail'
},
},
{
key: 'sharetofacebook',
name: 'Share to Facebook',
},
{
key: 'sharetotwitter',
name: 'Share to Twitter',
iconProps: {
iconName: 'Share'
},
subMenuProps: {
items: [
{
key: 'sharetoemail_1',
name: 'Share to Email',
title: 'Share to Email',
iconProps: {
iconName: 'Mail'
},
},
{
key: 'sharetofacebook_1',
name: 'Share to Facebook',
title: 'Share to Facebook',
},
{
key: 'sharetotwitter_1',
name: 'Share to Twitter',
title: 'Share to Twitter',
iconProps: {
iconName: 'Share'
}
},
],
},
},
],
},
name: 'Share'
},
{
key: 'print',
iconProps: {
iconName: 'Print'
},
name: 'Print'
},
{
key: 'music',
iconProps: {
iconName: 'MusicInCollectionFill'
},
name: 'Music',
},
{
key: 'divider_3',
itemType: ContextualMenu_1.ContextualMenuItemType.Divider,
},
{
key: 'Bing',
name: 'Go to Bing',
href: 'http://www.bing.com'
},
] })) : (null),
showCallout && (React.createElement(Callout_1.Callout, { setInitialFocus: true, onDismiss: function () { return _this.setState({ showCallout: false }); } },
React.createElement(Button_1.DefaultButton, { onClick: function () { return _this.setState({ showCallout: false }); }, text: 'Hello world' })))));
};
ContextualMenuBasicExample.prototype._onClick = function (event) {
this.setState({ target: event.currentTarget, isContextMenuVisible: true });
};
ContextualMenuBasicExample.prototype._onDismiss = function (event) {
this.setState({ isContextMenuVisible: false });
};
return ContextualMenuBasicExample;
}(React.Component));
exports.ContextualMenuBasicExample = ContextualMenuBasicExample;
});
//# sourceMappingURL=ContextualMenu.Basic.Example.js.map