office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
106 lines • 4.62 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 Button_1 = require("office-ui-fabric-react/lib/Button");
require("./ContextualMenuExample.scss");
var keys = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
var ContextualMenuCheckmarksExample = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuCheckmarksExample, _super);
function ContextualMenuCheckmarksExample(props) {
var _this = _super.call(this, props) || this;
_this._onToggleSelect = _this._onToggleSelect.bind(_this);
_this.state = {
selection: {},
};
return _this;
}
ContextualMenuCheckmarksExample.prototype.render = function () {
var selection = this.state.selection;
return (React.createElement(Button_1.DefaultButton, { id: 'ContextualMenuButton2', text: 'Click for ContextualMenu', menuProps: {
shouldFocusOnMount: true,
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],
iconProps: {
iconName: 'MusicInCollectionFill'
},
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: 'Split Button',
canCheck: true,
isChecked: selection[keys[5]],
split: true,
onClick: this._onToggleSelect,
},
]
} }));
};
ContextualMenuCheckmarksExample.prototype._onToggleSelect = function (ev, item) {
var selection = this.state.selection;
ev.preventDefault();
selection[item.key] = !selection[item.key];
this.setState({
selection: selection
});
};
return ContextualMenuCheckmarksExample;
}(React.Component));
exports.ContextualMenuCheckmarksExample = ContextualMenuCheckmarksExample;
//# sourceMappingURL=ContextualMenu.Checkmarks.Example.js.map