office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
107 lines (105 loc) • 4.42 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require('react');
var index_1 = require('../../../../index');
require('./ContextualMenuExample.scss');
var keys = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
var ContextualMenuCheckmarksExample = (function (_super) {
__extends(ContextualMenuCheckmarksExample, _super);
function ContextualMenuCheckmarksExample() {
_super.call(this);
this._onToggleSelect = this._onToggleSelect.bind(this);
this._onClick = this._onClick.bind(this);
this._onDismiss = this._onDismiss.bind(this);
this.state = {
selection: {},
isContextMenuVisible: false
};
}
ContextualMenuCheckmarksExample.prototype.render = function () {
var selection = this.state.selection;
return (React.createElement("div", null,
React.createElement(index_1.Button, {onClick: this._onClick}, " Click for ContextualMenu "),
this.state.isContextMenuVisible ? (React.createElement(index_1.ContextualMenu, {targetPoint: this.state.target, useTargetPoint: true, shouldFocusOnMount: false, onDismiss: this._onDismiss, directionalHint: index_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',
name: '-',
},
{
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],
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({ target: { x: event.clientX, y: event.clientY }, isContextMenuVisible: true });
};
ContextualMenuCheckmarksExample.prototype._onDismiss = function () {
this.setState({ isContextMenuVisible: false });
};
return ContextualMenuCheckmarksExample;
}(React.Component));
exports.ContextualMenuCheckmarksExample = ContextualMenuCheckmarksExample;
//# sourceMappingURL=ContextualMenu.Checkmarks.Example.js.map