office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
85 lines • 3.82 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var ContextualMenu_1 = require("office-ui-fabric-react/lib/ContextualMenu");
var Callout_1 = require("office-ui-fabric-react/lib/Callout");
var Button_1 = require("office-ui-fabric-react/lib/Button");
require("./ContextualMenuExample.scss");
var ContextualMenuIconExample = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuIconExample, _super);
function ContextualMenuIconExample(props) {
var _this = _super.call(this, props) || this;
_this.state = {
showCallout: false
};
return _this;
}
ContextualMenuIconExample.prototype.render = function () {
var _this = this;
var showCallout = this.state.showCallout;
return (React.createElement("div", null,
React.createElement(Button_1.DefaultButton, { id: 'ContextualMenuButton2', text: 'Click for ContextualMenu', menuProps: {
shouldFocusOnMount: true,
items: [
{
key: 'newItem',
iconProps: {
iconName: 'Add'
},
name: 'New'
},
{
key: 'upload',
onClick: function () {
_this.setState({ showCallout: true });
},
iconProps: {
iconName: 'Upload',
style: {
color: 'salmon'
}
},
name: 'Upload (Click for popup)',
title: 'Upload a file'
},
{
key: 'divider_1',
itemType: ContextualMenu_1.ContextualMenuItemType.Divider
},
{
key: 'share',
iconProps: {
iconName: 'Share'
},
name: 'Share'
},
{
key: 'print',
iconProps: {
iconName: 'Print'
},
name: 'Print'
},
{
key: 'music',
iconProps: {
iconName: 'MusicInCollectionFill'
},
name: 'Music',
}
]
} }),
showCallout && (React.createElement(Callout_1.Callout, { setInitialFocus: true,
// tslint:disable-next-line:jsx-no-lambda
onDismiss: function () { return _this.setState({ showCallout: false }); } },
React.createElement(Button_1.DefaultButton
// tslint:disable-next-line:jsx-no-lambda
, {
// tslint:disable-next-line:jsx-no-lambda
onClick: function () { return _this.setState({ showCallout: false }); }, text: 'Hello Popup' })))));
};
return ContextualMenuIconExample;
}(React.Component));
exports.ContextualMenuIconExample = ContextualMenuIconExample;
//# sourceMappingURL=ContextualMenu.Icon.Example.js.map