office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
94 lines • 5.66 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, autobind, css, getRTL } from '../../Utilities';
import { FocusZone, FocusZoneDirection } from '../../FocusZone';
import { Link } from '../../Link';
import { Icon } from '../../Icon';
import { IconButton } from '../../Button';
import { ResizeGroup } from '../../ResizeGroup';
import { TooltipHost, TooltipOverflowMode } from '../../Tooltip';
import * as stylesImport from './Breadcrumb.scss';
var styles = stylesImport;
var OVERFLOW_KEY = 'overflow';
var nullFunction = function () { return null; };
var Breadcrumb = /** @class */ (function (_super) {
tslib_1.__extends(Breadcrumb, _super);
function Breadcrumb(props) {
return _super.call(this, props) || this;
}
Breadcrumb.prototype.render = function () {
var _a = this.props, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, maxDisplayedItems = _a.maxDisplayedItems, items = _a.items;
var breadCrumbData = {
props: this.props,
renderedItems: items.slice(-maxDisplayedItems),
renderedOverflowItems: items.slice(0, -maxDisplayedItems)
};
return (React.createElement(ResizeGroup, { onRenderData: this._onRenderBreadcrumb, onReduceData: onReduceData, data: breadCrumbData }));
};
Breadcrumb.prototype._onReduceData = function (data) {
var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;
var movedItem = renderedItems[0];
renderedItems = renderedItems.slice(1);
renderedOverflowItems = renderedOverflowItems.concat([movedItem]);
if (movedItem !== undefined) {
return tslib_1.__assign({}, data, { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });
}
};
Breadcrumb.prototype._onRenderBreadcrumb = function (data) {
var _this = this;
var _a = data.props, className = _a.className, ariaLabel = _a.ariaLabel, _b = _a.onRenderItem, onRenderItem = _b === void 0 ? this._onRenderItem : _b, overflowAriaLabel = _a.overflowAriaLabel;
var renderedOverflowItems = data.renderedOverflowItems, renderedItems = data.renderedItems;
var contextualItems = renderedOverflowItems.map(function (item, index) { return ({
name: item.text,
key: item.key,
onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,
href: item.href
}); });
return (React.createElement("div", { className: css('ms-Breadcrumb', className, styles.root), role: 'navigation', "aria-label": ariaLabel },
React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal },
React.createElement("ol", { className: css('ms-Breadcrumb-list', styles.list) },
renderedOverflowItems && renderedOverflowItems.length !== 0 && (React.createElement("li", { className: css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY },
React.createElement(IconButton, { className: css('ms-Breadcrumb-overflowButton', styles.overflowButton), iconProps: { iconName: 'More' }, role: 'button', "aria-haspopup": 'true', ariaLabel: overflowAriaLabel, onRenderMenuIcon: nullFunction, menuProps: {
items: contextualItems,
directionalHint: 4 /* bottomLeftEdge */
} }),
React.createElement(Icon, { className: css('ms-Breadcrumb-chevron', styles.chevron), iconName: getRTL() ? 'ChevronLeft' : 'ChevronRight' }))),
renderedItems.map(function (item, index) { return (React.createElement("li", { className: css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index) },
onRenderItem(item, _this._onRenderItem),
React.createElement(Icon, { className: css('ms-Breadcrumb-chevron', styles.chevron), iconName: getRTL() ? 'ChevronLeft' : 'ChevronRight' }))); })))));
};
Breadcrumb.prototype._onRenderItem = function (item) {
if (item.onClick || item.href) {
return (React.createElement(Link, { className: css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, "aria-current": item.isCurrentItem ? 'page' : null, onClick: this._onBreadcrumbClicked.bind(this, item) },
React.createElement(TooltipHost, { content: item.text, overflowMode: TooltipOverflowMode.Parent }, item.text)));
}
else {
return (React.createElement("span", { className: css('ms-Breadcrumb-item', styles.item) },
React.createElement(TooltipHost, { content: item.text, overflowMode: TooltipOverflowMode.Parent }, item.text)));
}
};
Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
if (item.onClick) {
item.onClick(ev, item);
}
};
Breadcrumb.defaultProps = {
items: [],
maxDisplayedItems: 999
};
tslib_1.__decorate([
autobind
], Breadcrumb.prototype, "_onReduceData", null);
tslib_1.__decorate([
autobind
], Breadcrumb.prototype, "_onRenderBreadcrumb", null);
tslib_1.__decorate([
autobind
], Breadcrumb.prototype, "_onRenderItem", null);
tslib_1.__decorate([
autobind
], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
return Breadcrumb;
}(BaseComponent));
export { Breadcrumb };
//# sourceMappingURL=Breadcrumb.js.map