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                                                                                                                                                             
"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: 16,
        directionalHint: DirectionalHint_1.DirectionalHint.rightCenter
    };
    return Callout;
}(React.Component));
exports.Callout = Callout;
 
//# sourceMappingURL=Callout.js.map