office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
95 lines • 4.43 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
import { Callout } from 'office-ui-fabric-react/lib/Callout';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import * as stylesImport from './ContextualMenuExample.scss';
// tslint:disable-next-line:no-any
var styles = stylesImport;
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(DefaultButton, { id: "ContextualMenuButton2", text: "Click for ContextualMenu", menuProps: {
shouldFocusOnMount: true,
items: [
{
key: 'openInWord',
text: 'Open in Word',
onRenderIcon: function (props) {
return (React.createElement("span", { className: styles.iconContainer },
React.createElement(Icon, { iconName: 'WordLogoFill16', className: styles.logoFillIcon }),
React.createElement(Icon, { iconName: 'WordLogo16', className: styles.logoIcon })));
}
},
{
key: 'newItem',
iconProps: {
iconName: 'Add'
},
text: 'New'
},
{
key: 'upload',
onClick: function () {
_this.setState({ showCallout: true });
},
iconProps: {
iconName: 'Upload',
style: {
color: 'salmon'
}
},
text: 'Upload (Click for popup)',
title: 'Upload a file'
},
{
key: 'divider_1',
itemType: ContextualMenuItemType.Divider
},
{
key: 'share',
iconProps: {
iconName: 'Share'
},
text: 'Share'
},
{
key: 'print',
iconProps: {
iconName: 'Print'
},
text: 'Print'
},
{
key: 'music',
iconProps: {
iconName: 'MusicInCollectionFill'
},
text: 'Music'
}
]
} }),
showCallout && (React.createElement(Callout, { setInitialFocus: true,
// tslint:disable-next-line:jsx-no-lambda
onDismiss: function () { return _this.setState({ showCallout: false }); } },
React.createElement(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));
export { ContextualMenuIconExample };
//# sourceMappingURL=ContextualMenu.Icon.Example.js.map