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

42.42% Statements 28/66
9.09% Branches 4/44
21.43% Functions 3/14
44.26% Lines 27/61

    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
    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 DirectionalHint_1 = require('../../common/DirectionalHint');
    var Layer_1 = require('../../Layer');
    var css_1 = require('../../utilities/css');
    var EventGroup_1 = require('../../utilities/eventGroup/EventGroup');
    var positioning_1 = require('../../utilities/positioning');
    require('./Callout.scss');
    var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
    var OFF_SCREEN_POSITION = { top: -9999, left: 0 };
    var Callout = (function (_super) {
        __extends(Callout, _super);
        function Callout(props) {
            _super.call(this, props);
            this.state = {
                positions: null,
                slideDirectionalClassName: null,
                calloutElementRect: null
            };
            this._events = new EventGroup_1.EventGroup(this);
            this._onLayerDidMount = this._onLayerDidMount.bind(this);
        }
        Callout.prototype.componentDidUpdate = function () {
            this._updatePosition();
        };
        Callout.prototype.componentDidMount = function () {
            if (this.props.doNotLayer) {
                this._onLayerDidMount();
            }
        };
        Callout.prototype.componentWillUnmount = function () {
            this._events.dispose();
        };
        Callout.prototype.render = function () {
            var _this = this;
            var _a = this.props, className = _a.className, targetElement = _a.targetElement, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children;
            var _b = this.state, positions = _b.positions, slideDirectionalClassName = _b.slideDirectionalClassName;
            var content = (React.createElement("div", {ref: function (host) { return _this._hostElement = host; }, className: 'ms-Callout-container'}, React.createElement("div", {className: css_1.css('ms-Callout', className, slideDirectionalClassName ? "ms-u-" + slideDirectionalClassName : ''), style: ((positions) ? positions.callout : OFF_SCREEN_POSITION), ref: function (callout) { return _this._calloutElement = callout; }}, isBeakVisible && targetElement ? (React.createElement("div", {className: beakStyle, style: ((positions) ? positions.beak : BEAK_ORIGIN_POSITION)})) : (null), React.createElement("div", {className: 'ms-Callout-main'}, children))));
            return this.props.doNotLayer ? content : (React.createElement(Layer_1.Layer, {onLayerMounted: this._onLayerDidMount}, content));
        };
        Callout.prototype.dismiss = function () {
            var onDismiss = this.props.onDismiss;
            if (onDismiss) {
                onDismiss();
            }
        };
        Callout.prototype._dismissOnLostFocus = function (ev) {
            var targetElement = this.props.targetElement;
            var target = ev.target;
            if (ev.target !== window &&
                this._hostElement &&
                !this._hostElement.contains(target) &&
                (!targetElement || !targetElement.contains(target))) {
                this.dismiss();
            }
        };
        Callout.prototype._onLayerDidMount = function () {
            // This is added so the callout will dismiss when the window is scrolled
            // but not when something inside the callout is scrolled.
            this._events.on(window, 'scroll', this._dismissOnLostFocus, true);
            this._events.on(window, 'resize', this.dismiss, true);
            this._events.on(window, 'focus', this._dismissOnLostFocus, true);
            this._events.on(window, 'click', this._dismissOnLostFocus, true);
            if (this.props.onLayerMounted) {
                this.props.onLayerMounted();
            }
            this._updatePosition();
        };
        Callout.prototype._updatePosition = function () {
            var positions = this.state.positions;
            var hostElement = this._hostElement;
            var calloutElement = this._calloutElement;
            if (hostElement && calloutElement) {
                var positionInfo = positioning_1.getRelativePositions(this.props, hostElement, calloutElement);
                // Set the new position only when the positions are not exists or one of the new callout positions are different
                if ((!positions && positionInfo) ||
                    (positions && positionInfo && (positions.callout.top !== positionInfo.calloutPosition.top || positions.callout.left !== positionInfo.calloutPosition.left))) {
                    this.setState({
                        positions: {
                            callout: positionInfo.calloutPosition,
                            beak: positionInfo.beakPosition,
                        },
                        slideDirectionalClassName: positionInfo.directionalClassName
                    });
                }
            }
        };
        Callout.defaultProps = {
            isBeakVisible: true,
            beakStyle: 'ms-Callout-beak',
            beakWidth: 28,
            gapSpace: 10,
            directionalHint: DirectionalHint_1.DirectionalHint.rightCenter
        };
        return Callout;
    }(React.Component));
    exports.Callout = Callout;

    //# sourceMappingURL=Callout.js.map