office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
105 lines (103 loc) • 5.22 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/ContextualMenu", "office-ui-fabric-react/lib/Button", "./ContextualMenuExample.scss"], function (require, exports, tslib_1, React, ContextualMenu_1, Button_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var keys = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
var ContextualMenuCheckmarksExample = (function (_super) {
tslib_1.__extends(ContextualMenuCheckmarksExample, _super);
function ContextualMenuCheckmarksExample() {
var _this = _super.call(this) || this;
_this._onToggleSelect = _this._onToggleSelect.bind(_this);
_this._onClick = _this._onClick.bind(_this);
_this._onDismiss = _this._onDismiss.bind(_this);
_this.state = {
selection: {},
isContextMenuVisible: false
};
return _this;
}
ContextualMenuCheckmarksExample.prototype.render = function () {
var selection = this.state.selection;
return (React.createElement("div", null,
React.createElement(Button_1.DefaultButton, { onClick: this._onClick, id: 'ContextualMenuButton2', text: 'Click for ContextualMenu' }),
this.state.isContextMenuVisible ? (React.createElement(ContextualMenu_1.ContextualMenu, { target: '#ContextualMenuButton2', shouldFocusOnMount: false, onDismiss: this._onDismiss, directionalHint: ContextualMenu_1.DirectionalHint.bottomLeftEdge, items: [
{
key: keys[0],
name: 'New',
canCheck: true,
isChecked: selection[keys[0]],
onClick: this._onToggleSelect
},
{
key: keys[1],
name: 'Share',
canCheck: true,
isChecked: selection[keys[1]],
onClick: this._onToggleSelect
},
{
key: keys[2],
name: 'Mobile',
canCheck: true,
isChecked: selection[keys[2]],
onClick: this._onToggleSelect
},
{
key: 'divider_1',
itemType: ContextualMenu_1.ContextualMenuItemType.Divider
},
{
key: keys[3],
name: 'Print',
canCheck: true,
isChecked: selection[keys[3]],
onClick: this._onToggleSelect
},
{
key: keys[4],
name: 'Music',
canCheck: true,
isChecked: selection[keys[4]],
onClick: this._onToggleSelect
},
{
key: keys[5],
subMenuProps: {
items: [
{
key: keys[6],
name: 'Email message',
canCheck: true,
isChecked: selection[keys[6]],
onClick: this._onToggleSelect
},
{
key: keys[7],
name: 'Calendar event',
canCheck: true,
isChecked: selection[keys[7]],
onClick: this._onToggleSelect
}
],
},
name: 'New'
},
] })) : (null)));
};
ContextualMenuCheckmarksExample.prototype._onToggleSelect = function (ev, item) {
var selection = this.state.selection;
selection[item.key] = !selection[item.key];
this.setState({
selection: selection
});
};
ContextualMenuCheckmarksExample.prototype._onClick = function (event) {
this.setState({ isContextMenuVisible: true });
};
ContextualMenuCheckmarksExample.prototype._onDismiss = function () {
this.setState({ isContextMenuVisible: false });
};
return ContextualMenuCheckmarksExample;
}(React.Component));
exports.ContextualMenuCheckmarksExample = ContextualMenuCheckmarksExample;
});
//# sourceMappingURL=ContextualMenu.Checkmarks.Example.js.map