office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
77 lines • 4.55 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/Button", "office-ui-fabric-react/lib/CommandBar", "office-ui-fabric-react/lib/Utilities", "./CommandBar.Example.scss"], function (require, exports, tslib_1, React, Button_1, CommandBar_1, Utilities_1, styles) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var CommandBarCustomizationExample = /** @class */ (function (_super) {
tslib_1.__extends(CommandBarCustomizationExample, _super);
function CommandBarCustomizationExample(props) {
var _this = _super.call(this, props) || this;
_this.state = { isContextMenuShown: false };
return _this;
}
CommandBarCustomizationExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(CommandBar_1.CommandBar, { isSearchBoxVisible: false, items: [
{
key: 'new',
name: 'Add',
onRender: this._renderSplitButtonMenuItem,
className: 'ms-CommandBarItem',
subMenuProps: {
items: [
(_a = {
key: 'emailMessage',
name: 'Email message',
icon: 'Mail'
},
_a['data-automation-id'] = 'newEmailButton',
_a),
(_b = {
key: 'calendarEvent',
name: 'Calendar event',
icon: 'Calendar'
},
_b['data-automation-id'] = 'newCalendarButton',
_b)
],
},
},
] })));
var _a, _b;
};
CommandBarCustomizationExample.prototype._renderSplitButtonMenuItem = function (item) {
var _this = this;
var darkerBG = this.state.isContextMenuShown && styles.darkerBG;
var dropDownButtonClass = Utilities_1.css(styles.button, darkerBG);
var mainBtnClassName = Utilities_1.css(!item.name && ('ms-CommandBarItem--noName'), styles.button, darkerBG);
return (React.createElement("div", null,
React.createElement("div", { className: Utilities_1.css(styles.customButtonContainer, darkerBG), ref: function (ref) { return _this.container = ref; } },
React.createElement(Button_1.CommandButton, { className: mainBtnClassName, iconProps: { iconName: 'Add' }, text: 'New' }),
React.createElement("span", { className: styles.splitter }, "|"),
React.createElement(Button_1.CommandButton, { onClick: this._onClickChevron, className: dropDownButtonClass, menuProps: {
className: Utilities_1.css('ms-CommandBar-menuHost'),
items: item.subMenuProps.items
} }))));
};
CommandBarCustomizationExample.prototype._onClickChevron = function (ev) {
ev.stopPropagation();
this._toggleDropDownMenuShown(ev);
};
CommandBarCustomizationExample.prototype._toggleDropDownMenuShown = function (ev) {
this.setState({
isContextMenuShown: !this.state.isContextMenuShown
});
};
tslib_1.__decorate([
Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "_renderSplitButtonMenuItem", null);
tslib_1.__decorate([
Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "_onClickChevron", null);
tslib_1.__decorate([
Utilities_1.autobind
], CommandBarCustomizationExample.prototype, "_toggleDropDownMenuShown", null);
return CommandBarCustomizationExample;
}(React.Component));
exports.CommandBarCustomizationExample = CommandBarCustomizationExample;
});
//# sourceMappingURL=CommandBar.Customization.Example.js.map