office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
107 lines (105 loc) • 4.98 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
define(["require", "exports", "react", "../../../../index", "./ContextualMenuExample.scss"], function (require, exports, React, index_1) {
"use strict";
var ContextualMenuHeaderExample = (function (_super) {
__extends(ContextualMenuHeaderExample, _super);
function ContextualMenuHeaderExample() {
var _this = _super.call(this) || this;
_this.state = {
isContextMenuVisible: false
};
_this._onClick = _this._onClick.bind(_this);
_this._onDismiss = _this._onDismiss.bind(_this);
return _this;
}
ContextualMenuHeaderExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(index_1.Button, { onClick: this._onClick, id: 'ContextualMenuButton1' }, " Click for ContextualMenu "),
this.state.isContextMenuVisible ? (React.createElement(index_1.ContextualMenu, { shouldFocusOnMount: true, target: this.state.target, onDismiss: this._onDismiss, directionalHint: index_1.getRTL() ? index_1.DirectionalHint.bottomRightEdge : index_1.DirectionalHint.bottomLeftEdge, items: [
{
key: 'Actions',
itemType: 2,
name: 'Actions'
},
{
key: 'upload',
iconProps: {
iconName: index_1.IconName.Upload,
style: {
color: 'salmon'
}
},
name: 'Upload',
title: 'Upload a file'
},
{
key: 'rename',
name: 'Rename'
},
{
key: 'share',
iconProps: {
iconName: index_1.IconName.Share
},
subMenuProps: {
items: [
{
key: 'sharetoemail',
name: 'Share to Email',
iconProps: {
iconName: index_1.IconName.Mail
},
},
{
key: 'sharetofacebook',
name: 'Share to Facebook',
},
{
key: 'sharetotwitter',
name: 'Share to Twitter',
iconProps: {
iconName: index_1.IconName.Share
},
},
],
},
name: 'Sharing'
},
{
key: 'navigation',
itemType: 2,
name: 'Navigation'
},
{
key: 'properties',
name: 'Properties'
},
{
key: 'print',
iconProps: {
iconName: index_1.IconName.Print
},
name: 'Print'
},
{
key: 'Bing',
name: 'Go to Bing',
href: 'http://www.bing.com'
},
] })) : (null)));
};
ContextualMenuHeaderExample.prototype._onClick = function (event) {
this.setState({ target: event.target, isContextMenuVisible: true });
};
ContextualMenuHeaderExample.prototype._onDismiss = function (event) {
this.setState({ isContextMenuVisible: false });
};
return ContextualMenuHeaderExample;
}(React.Component));
exports.ContextualMenuHeaderExample = ContextualMenuHeaderExample;
});
//# sourceMappingURL=ContextualMenu.Header.Example.js.map