office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
120 lines (118 loc) • 6.19 kB
JavaScript
"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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var React = require('react');
var DirectionalHint_1 = require('../../common/DirectionalHint');
var Layer_1 = require('../../Layer');
var css_1 = require('../../utilities/css');
var autobind_1 = require('../../utilities/autobind');
var EventGroup_1 = require('../../utilities/eventGroup/EventGroup');
var positioning_1 = require('../../utilities/positioning');
var focus_1 = require('../../utilities/focus');
var index_1 = require('../Popup/index');
var rtl_1 = require('../../utilities/rtl');
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);
}
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(index_1.Popup, {className: 'ms-Callout-main', onDismiss: function (ev) { return _this.dismiss(); }, shouldRestoreFocus: true}, 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.setInitialFocus) {
focus_1.focusFirstChild(this._calloutElement);
}
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: rtl_1.getRTL() ? DirectionalHint_1.DirectionalHint.bottomRightEdge : DirectionalHint_1.DirectionalHint.bottomLeftEdge
};
__decorate([
autobind_1.autobind
], Callout.prototype, "_onLayerDidMount", null);
return Callout;
}(React.Component));
exports.Callout = Callout;
//# sourceMappingURL=Callout.js.map