office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
135 lines • 8.94 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, nullRender } from '../../Utilities';
import { OverflowSet } from '../../OverflowSet';
import { ResizeGroup } from '../../ResizeGroup';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { classNamesFunction, createRef } from '../../Utilities';
import { CommandBarButton } from '../../Button';
import { TooltipHost } from '../../Tooltip';
var getClassNames = classNamesFunction();
var CommandBarBase = /** @class */ (function (_super) {
tslib_1.__extends(CommandBarBase, _super);
function CommandBarBase() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._overflowSet = createRef();
_this._resizeGroup = createRef();
_this._onRenderData = function (data) {
return (React.createElement(FocusZone, { className: css(_this._classNames.root), direction: FocusZoneDirection.horizontal, role: 'menubar', "aria-label": _this.props.ariaLabel },
React.createElement(OverflowSet, { componentRef: _this._resolveRef('_overflowSet'), className: css(_this._classNames.primarySet), doNotContainWithinFocusZone: true, role: 'presentation', items: data.primaryItems, overflowItems: data.overflowItems.length ? data.overflowItems : undefined, onRenderItem: _this._onRenderItem, onRenderOverflowButton: _this._onRenderOverflowButton }),
data.farItems && (React.createElement(OverflowSet, { className: css(_this._classNames.secondarySet), doNotContainWithinFocusZone: true, role: 'presentation', items: data.farItems, onRenderItem: _this._onRenderItem, onRenderOverflowButton: nullRender }))));
};
_this._onRenderItem = function (item) {
var _a = _this.props.buttonAs, CommandButtonType = _a === void 0 ? CommandBarButton : _a;
var itemText = item.text || item.name;
if (item.onRender) {
// These are the top level items, there is no relevant menu dismissing function to
// provide for the IContextualMenuItem onRender function. Pass in a no op function instead.
return item.onRender(item, function () { return undefined; });
}
var commandButtonProps = tslib_1.__assign({ allowDisabledFocus: true }, item, { styles: tslib_1.__assign({ root: { height: '100%' }, label: { whiteSpace: 'nowrap' } }, item.buttonStyles), className: css('ms-CommandBarItem-link', item.className), text: !item.iconOnly ? itemText : undefined, menuProps: item.subMenuProps, onClick: _this._onButtonClick(item) });
if (item.iconOnly && itemText !== undefined) {
return (React.createElement(TooltipHost, tslib_1.__assign({ content: itemText }, item.tooltipHostProps),
React.createElement(CommandButtonType, tslib_1.__assign({}, commandButtonProps))));
}
return React.createElement(CommandButtonType, tslib_1.__assign({}, commandButtonProps));
};
_this._onRenderOverflowButton = function (overflowItems) {
var _a = _this.props, _b = _a.overflowButtonAs, OverflowButtonType = _b === void 0 ? CommandBarButton : _b, _c = _a.overflowButtonProps // assure that props is not empty
, overflowButtonProps = _c === void 0 ? {} : _c // assure that props is not empty
;
var combinedOverflowItems = (overflowButtonProps.menuProps ? overflowButtonProps.menuProps.items : []).concat(overflowItems);
var overflowProps = tslib_1.__assign({}, overflowButtonProps, { styles: tslib_1.__assign({ menuIcon: { fontSize: '17px' } }, overflowButtonProps.styles), className: css('ms-CommandBar-overflowButton', overflowButtonProps.className), menuProps: tslib_1.__assign({}, overflowButtonProps.menuProps, { items: combinedOverflowItems }), menuIconProps: tslib_1.__assign({ iconName: 'More' }, overflowButtonProps.menuIconProps) });
return React.createElement(OverflowButtonType, tslib_1.__assign({}, overflowProps));
};
_this._onReduceData = function (data) {
var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataReduced = _a.onDataReduced;
var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;
// Use first item if shiftOnReduce, otherwise use last item
var movedItem = primaryItems[shiftOnReduce ? 0 : primaryItems.length - 1];
if (movedItem !== undefined) {
movedItem.renderedInOverflow = true;
overflowItems = [movedItem].concat(overflowItems);
primaryItems = shiftOnReduce ? primaryItems.slice(1) : primaryItems.slice(0, -1);
data.primaryItems = primaryItems;
data.overflowItems = overflowItems;
cacheKey = _this._computeCacheKey(data);
if (onDataReduced) {
onDataReduced(movedItem);
}
return tslib_1.__assign({}, data, { cacheKey: cacheKey });
}
return undefined;
};
_this._onGrowData = function (data) {
var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataGrown = _a.onDataGrown;
var minimumOverflowItems = data.minimumOverflowItems;
var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;
var movedItem = overflowItems[0];
// Make sure that moved item exists and is not one of the original overflow items
if (movedItem !== undefined && overflowItems.length > minimumOverflowItems) {
movedItem.renderedInOverflow = false;
overflowItems = overflowItems.slice(1);
// if shiftOnReduce, movedItem goes first, otherwise, last.
primaryItems = shiftOnReduce ? [movedItem].concat(primaryItems) : primaryItems.concat([movedItem]);
data.primaryItems = primaryItems;
data.overflowItems = overflowItems;
cacheKey = _this._computeCacheKey(data);
if (onDataGrown) {
onDataGrown(movedItem);
}
return tslib_1.__assign({}, data, { cacheKey: cacheKey });
}
return undefined;
};
return _this;
}
CommandBarBase.prototype.render = function () {
var _a = this.props, className = _a.className, items = _a.items, overflowItems = _a.overflowItems, farItems = _a.farItems, styles = _a.styles, theme = _a.theme, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c;
var commandBarData = {
primaryItems: items.slice(),
overflowItems: overflowItems.slice(),
minimumOverflowItems: overflowItems.slice().length,
farItems: farItems,
cacheKey: ''
};
this._classNames = getClassNames(styles, { theme: theme, className: className });
return (React.createElement(ResizeGroup, { componentRef: this._resizeGroup, className: className, data: commandBarData, onReduceData: onReduceData, onGrowData: onGrowData, onRenderData: this._onRenderData }));
};
CommandBarBase.prototype.focus = function () {
var overflowSet = this._overflowSet.current;
overflowSet && overflowSet.focus();
};
CommandBarBase.prototype.remeasure = function () {
this._resizeGroup.current && this._resizeGroup.current.remeasure();
};
CommandBarBase.prototype._onButtonClick = function (item) {
return function (ev) {
// inactive is deprecated. remove check in 7.0
if (item.inactive) {
return;
}
if (item.onClick) {
item.onClick(ev, item);
}
};
};
CommandBarBase.prototype._computeCacheKey = function (data) {
var primaryItems = data.primaryItems, _a = data.farItems, farItems = _a === void 0 ? [] : _a, overflowItems = data.overflowItems;
var returnKey = function (acc, current) {
var _a = current.cacheKey, cacheKey = _a === void 0 ? current.key : _a;
return acc + cacheKey;
};
var primaryKey = primaryItems.reduce(returnKey, '');
var farKey = farItems.reduce(returnKey, '');
var overflowKey = !!overflowItems.length ? 'overflow' : '';
return [primaryKey, farKey, overflowKey].join(' ');
};
CommandBarBase.defaultProps = {
items: [],
overflowItems: []
};
return CommandBarBase;
}(BaseComponent));
export { CommandBarBase };
//# sourceMappingURL=CommandBar.base.js.map