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                                                                                                                             
"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