office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
118 lines • 5.89 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { keytipMap } from './KeytipSetup';
import { Modal } from 'office-ui-fabric-react/lib/Modal';
import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
var KeytipsCommandBarExample = /** @class */ (function (_super) {
tslib_1.__extends(KeytipsCommandBarExample, _super);
function KeytipsCommandBarExample(props) {
var _this = _super.call(this, props) || this;
_this._showModal = function () {
_this.setState({ showModal: true });
};
_this._hideModal = function () {
_this.setState({ showModal: false });
};
_this._showMessageBar = function () {
_this.setState({ showMessageBar: true });
// Hide the MessageBar after 2 seconds
setTimeout(_this._hideMessageBar, 2000);
};
_this._hideMessageBar = function () {
_this.setState({ showMessageBar: false });
};
_this.state = {
showModal: false,
showMessageBar: false
};
return _this;
}
/* tslint:disable:jsx-ban-props jsx-no-lambda */
KeytipsCommandBarExample.prototype.render = function () {
return (React.createElement("div", { style: { height: 100 } },
React.createElement(CommandBar, { items: [
{
key: 'commandBarItem1',
name: 'New',
icon: 'Add',
onClick: this._showModal,
keytipProps: keytipMap.CommandButton1Keytip
},
{
key: 'commandBarItem2',
name: 'Upload',
icon: 'Upload',
onClick: this._showMessageBar,
keytipProps: keytipMap.CommandButton2Keytip
}
], farItems: [
{
key: 'farItem1',
name: 'Options',
icon: 'SortLines',
keytipProps: keytipMap.CommandButton3Keytip,
subMenuProps: {
items: [
{
key: 'emailMessage',
name: 'Send Email',
icon: 'Mail',
keytipProps: keytipMap.SubmenuKeytip1,
onClick: function () { console.log('test1'); }
},
{
key: 'calendarEvent',
name: 'Make Calendar Event',
icon: 'Calendar',
keytipProps: keytipMap.SubmenuKeytip2,
onClick: function () { console.log('test2'); },
subMenuProps: {
items: [
{
key: 'testButton',
name: 'Add to Outlook',
keytipProps: keytipMap.SubmenuKeytip3,
onClick: function () { console.log('test3'); }
},
{
key: 'testButton2',
name: 'Go to Bing',
keytipProps: keytipMap.SubmenuKeytip4,
href: 'http://www.bing.com',
target: '_blank'
}
]
}
},
{
key: 'splitButtonTest',
name: 'Other...',
split: true,
keytipProps: keytipMap.SubmenuKeytip5,
subMenuProps: {
items: [
{
key: 'splitButtonSubMenu1',
name: 'Submenu Item w/o Keytip',
},
{
key: 'splitButtonSubMenu2',
name: 'Submenu Item w/o Keytip'
}
]
}
}
],
},
}
] }),
this.state.showMessageBar &&
React.createElement(MessageBar, { messageBarType: MessageBarType.success }, "Success Uploading"),
React.createElement(Modal, { isOpen: this.state.showModal, onDismiss: this._hideModal, isBlocking: false },
React.createElement("h3", null, "New Modal"))));
};
return KeytipsCommandBarExample;
}(React.Component));
export { KeytipsCommandBarExample };
//# sourceMappingURL=Keytips.CommandBar.Example.js.map