# all files / lib/components/Breadcrumb/ Breadcrumb.js

87.21% Statements 75/86
48.72% Branches 19/39
70.59% Functions 12/17
90.12% Lines 73/81

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×

    1×

    1×

    1×
    2×

    1×
    3×
    3×
    3×
    3×
    3×

    1×

    1×

    1×
    1×
    1×

    1×

    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×
    1×

    1×

    1×
    1×

    1×
    1×

    1×

    1×

    1×

     "use strict";
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
    var React = require('react');
    var FocusZone_1 = require('../../FocusZone');
    var ContextualMenu_1 = require('../../ContextualMenu');
    var DirectionalHint_1 = require('../../common/DirectionalHint');
    var EventGroup_1 = require('../../utilities/eventGroup/EventGroup');
    var rtl_1 = require('../../utilities/rtl');
    var css_1 = require('../../utilities/css');
    require('./Breadcrumb.scss');
    var OVERFLOW_KEY = 'overflow';
    var OVERFLOW_WIDTH = 44;
    var _instance = 0;
    var Breadcrumb = (function (_super) {
        __extends(Breadcrumb, _super);
        function Breadcrumb(props) {
            _super.call(this, props);
            this._events = new EventGroup_1.EventGroup(this);
            this.state = this._getStateFromProps(props);
        }
        Breadcrumb.prototype.componentDidMount = function () {
            this._updateItemMeasurements();
            this._updateRenderedItems();
            this._events.on(window, 'resize', this._updateRenderedItems);
        };
        Breadcrumb.prototype.componentWillUnmount = function () {
            this._events.dispose();
        };
        Breadcrumb.prototype.componentWillReceiveProps = function (nextProps) {
            this.setState(this._getStateFromProps(nextProps));
            this._breadcrumbItemWidths = null;
        };
        Breadcrumb.prototype.componentDidUpdate = function (prevProps, prevStates) {
            Iif (!this._breadcrumbItemWidths) {
                this._updateItemMeasurements();
                this._updateRenderedItems();
            }
        };
        Breadcrumb.prototype.render = function () {
            var _this = this;
            var className = this.props.className;
            var _a = this.state, isOverflowOpen = _a.isOverflowOpen, overflowAnchor = _a.overflowAnchor, renderedItems = _a.renderedItems, renderedOverflowItems = _a.renderedOverflowItems, internalId = _a.internalId;
            var overflowMenuId = internalId + '-overflow';
            return (React.createElement("div", {className: css_1.css('ms-Breadcrumb', className), ref: 'renderingArea'}, React.createElement(FocusZone_1.FocusZone, {direction: FocusZone_1.FocusZoneDirection.horizontal}, React.createElement("ul", {className: 'ms-Breadcrumb-list'}, renderedOverflowItems && renderedOverflowItems.length ? (React.createElement("li", {className: 'ms-Breadcrumb-overflow', key: OVERFLOW_KEY, ref: OVERFLOW_KEY}, React.createElement("div", {className: 'ms-Breadcrumb-overflowButton ms-Icon ms-Icon--ellipsis', onClick: this._onOverflowClicked.bind(this), "data-is-focusable": true, role: 'button', "aria-haspopup": 'true', "aria-owns": isOverflowOpen ? overflowMenuId : null}), React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight')}))) : (null), renderedItems.map(function (item, index) { return (React.createElement("li", {className: 'ms-Breadcrumb-listItem', key: item.key || String(index), ref: item.key || String(index)}, React.createElement("a", {className: 'ms-Breadcrumb-itemLink', onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null, href: item.href, role: item.onClick ? 'button' : 'link'}, item.text), React.createElement("i", {className: css_1.css('ms-Breadcrumb-chevron ms-Icon', rtl_1.getRTL() ? 'ms-Icon--chevronLeft' : 'ms-Icon--chevronRight')}))); }))), isOverflowOpen ? (React.createElement(ContextualMenu_1.ContextualMenu, {targetElement: overflowAnchor, isBeakVisible: true, items: renderedOverflowItems.map(function (item, index) { return ({
                name: item.text,
                key: item.key,
                onClick: _this._onBreadcrumbClicked.bind(_this, item),
                href: item.href
            }); }), id: overflowMenuId, directionalHint: DirectionalHint_1.DirectionalHint.bottomLeftEdge, onDismiss: this._onOverflowDismissed.bind(this)})) : (null)));
        };
        Breadcrumb.prototype._onOverflowClicked = function (ev) {
            this.setState({
                'isOverflowOpen': !this.state.isOverflowOpen,
                'overflowAnchor': ev.currentTarget
            });
        };
        Breadcrumb.prototype._onOverflowDismissed = function (ev) {
            this.setState({
                'isOverflowOpen': false,
                'overflowAnchor': null
            });
        };
        Breadcrumb.prototype._onBreadcrumbClicked = function (item, ev) {
            Eif (item.onClick) {
                item.onClick(item.key);
            }
            this.setState({
                'isOverflowOpen': false
            });
        };
        Breadcrumb.prototype._updateItemMeasurements = function () {
            var items = this.props.items;
            Eif (!this._breadcrumbItemWidths) {
                this._breadcrumbItemWidths = {};
            }
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                Eif (!this._breadcrumbItemWidths[item.key]) {
                    var el = this.refs[item.key];
                    this._breadcrumbItemWidths[item.key] = el.getBoundingClientRect().width;
                }
            }
        };
        Breadcrumb.prototype._updateRenderedItems = function () {
            var _a = this.props, items = _a.items, maxDisplayedItems = _a.maxDisplayedItems;
            var renderingArea = this.refs.renderingArea;
            var renderedItems = [];
            var renderedOverflowItems = [].concat(items);
            var consumedWidth = 0;
            var style = window.getComputedStyle(renderingArea);
            var availableWidth = renderingArea.clientWidth - parseInt(style.marginLeft, 10) - parseInt(style.marginRight, 10);
            availableWidth -= OVERFLOW_WIDTH;
            var i;
            var minIndex = Math.max(0, renderedOverflowItems.length - maxDisplayedItems);
            for (i = renderedOverflowItems.length - 1; i >= minIndex; i--) {
                var item = renderedOverflowItems[i];
                var itemWidth = this._breadcrumbItemWidths[item.key];
                Iif ((consumedWidth + itemWidth) >= availableWidth) {
                    break;
                }
                else {
                    consumedWidth += itemWidth;
                }
            }
            renderedItems = renderedOverflowItems.splice(i + 1);
            this.setState({
                isOverflowOpen: this.state.isOverflowOpen,
                overflowAnchor: this.state.overflowAnchor,
                renderedItems: renderedItems,
                renderedOverflowItems: renderedOverflowItems,
            });
        };
        Breadcrumb.prototype._getStateFromProps = function (nextProps) {
            return {
                isOverflowOpen: false,
                overflowAnchor: null,
                renderedItems: nextProps.items || [],
                renderedOverflowItems: null,
                internalId: 'Breadcrumb-' + _instance++
            };
        };
        Breadcrumb.defaultProps = {
            items: [],
            maxDisplayedItems: 999
        };
        return Breadcrumb;
    }(React.Component));
    exports.Breadcrumb = Breadcrumb;

    //# sourceMappingURL=Breadcrumb.js.map