office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
69 lines • 3.64 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { CommandButton } from 'office-ui-fabric-react/lib/Button';
import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
import { css } from 'office-ui-fabric-react/lib/Utilities';
import * as styles from './CommandBar.Example.scss';
var CommandBarCustomizationExample = /** @class */ (function (_super) {
tslib_1.__extends(CommandBarCustomizationExample, _super);
function CommandBarCustomizationExample(props) {
var _this = _super.call(this, props) || this;
_this._renderSplitButtonMenuItem = function (item) {
var darkerBG = _this.state.isContextMenuShown && styles.darkerBG;
var dropDownButtonClass = css(styles.button, darkerBG);
var mainBtnClassName = css(!item.name && ('ms-CommandBarItem--noName'), styles.button, darkerBG);
return (React.createElement("div", null,
React.createElement("div", { className: css(styles.customButtonContainer, darkerBG), ref: function (ref) { return _this.container = ref; } },
React.createElement(CommandButton, { className: mainBtnClassName, iconProps: { iconName: 'Add' }, text: 'New' }),
React.createElement("span", { className: styles.splitter }, "|"),
React.createElement(CommandButton, { onClick: _this._onClickChevron, className: dropDownButtonClass, menuProps: {
className: css('ms-CommandBar-menuHost'),
items: item.subMenuProps.items
} }))));
};
_this._onClickChevron = function (ev) {
ev.stopPropagation();
_this._toggleDropDownMenuShown(ev);
};
_this._toggleDropDownMenuShown = function (ev) {
_this.setState({
isContextMenuShown: !_this.state.isContextMenuShown
});
};
_this.state = { isContextMenuShown: false };
return _this;
}
CommandBarCustomizationExample.prototype.render = function () {
return (React.createElement("div", null,
React.createElement(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;
};
return CommandBarCustomizationExample;
}(React.Component));
export { CommandBarCustomizationExample };
//# sourceMappingURL=CommandBar.Customization.Example.js.map