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 |