define(["require", "exports", "tslib", "react", "../../Utilities", "../../FocusZone", "../../Link", "../../Icon", "../../Button", "../../common/DirectionalHint", "../../ResizeGroup", "./Breadcrumb.scss"], function (require, exports, tslib_1, React, Utilities_1, FocusZone_1, Link_1, Icon_1, Button_1, DirectionalHint_1, ResizeGroup_1, stylesImport) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var styles = stylesImport;
    var OVERFLOW_KEY = 'overflow';
    var Breadcrumb = (function (_super) {
        tslib_1.__extends(Breadcrumb, _super);
        function Breadcrumb(props) {
            return _super.call(this, props) || this;
        }
        Breadcrumb.prototype.render = function () {
            var _a = this.props.onReduceData, onReduceData = _a === void 0 ? this._onReduceData : _a;
            var breadCrumbData = {
                props: this.props,
                renderedItems: this.props.items.slice(0, this.props.maxDisplayedItems),
                renderedOverflowItems: this.props.items.slice(this.props.maxDisplayedItems)
            };
            return (React.createElement(ResizeGroup_1.ResizeGroup, { onRenderData: this._onRenderBreadcrumb, onReduceData: onReduceData, data: breadCrumbData }));
        };
        Breadcrumb.prototype._onReduceData = function (data) {
            var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;
            var movedItem = renderedItems[renderedItems.length - 1];
            renderedItems = renderedItems.slice(0, -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, items = _a.items, _b = _a.onRenderItem, onRenderItem = _b === void 0 ? this._onRenderItem : _b;
            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: Utilities_1.css('ms-Breadcrumb', className, styles.root), ref: 'renderingArea', role: 'navigation', "aria-label": ariaLabel },
                React.createElement(FocusZone_1.FocusZone, { direction: FocusZone_1.FocusZoneDirection.horizontal },
                    React.createElement("ol", { className: Utilities_1.css('ms-Breadcrumb-list', styles.list) },
                        renderedOverflowItems && renderedOverflowItems.length !== 0 && (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-overflow', styles.overflow), key: OVERFLOW_KEY, ref: OVERFLOW_KEY },
                            React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Breadcrumb-overflowButton', styles.overflowButton), iconProps: { iconName: 'More' }, role: 'button', "aria-haspopup": 'true', menuIconProps: null, menuProps: {
                                    items: contextualItems,
                                    directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge
                                } }),
                            Icon_1.Icon({
                                className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron),
                                iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight'
                            }))),
                        renderedItems.map(function (item, index) { return (React.createElement("li", { className: Utilities_1.css('ms-Breadcrumb-listItem', styles.listItem), key: item.key || String(index), ref: item.key || String(index) },
                            onRenderItem(item, _this._defaultRenderItem),
                            React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-Breadcrumb-chevron', styles.chevron), iconName: Utilities_1.getRTL() ? 'ChevronLeft' : 'ChevronRight' }))); })))));
        };
        Breadcrumb.prototype._onRenderItem = function (item, defaultRender) {
            return this._defaultRenderItem(item);
        };
        Breadcrumb.prototype._defaultRenderItem = function (item) {
            if (item.onClick || item.href) {
                return (React.createElement(Link_1.Link, { className: Utilities_1.css('ms-Breadcrumb-itemLink', styles.itemLink), href: item.href, "aria-current": item.isCurrentItem ? 'page' : null, onClick: this._onBreadcrumbClicked.bind(this, item) }, item.text));
            }
            else {
                return (React.createElement("span", { className: Utilities_1.css('ms-Breadcrumb-item', styles.item) }, item.text));
            }
        };
        Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
            if (item.onClick) {
                item.onClick(ev, item);
            }
        };
        return Breadcrumb;
    }(Utilities_1.BaseComponent));
    Breadcrumb.defaultProps = {
        items: [],
        maxDisplayedItems: 999
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Breadcrumb.prototype, "_onReduceData", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Breadcrumb.prototype, "_onRenderBreadcrumb", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Breadcrumb.prototype, "_onRenderItem", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Breadcrumb.prototype, "_defaultRenderItem", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], Breadcrumb.prototype, "_onBreadcrumbClicked", null);
    exports.Breadcrumb = Breadcrumb;
});

//# sourceMappingURL=Breadcrumb.js.map
