office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
310 lines • 16.2 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
import { BaseComponent, assign, autobind, elementContains, focusFirstChild, getWindow, getDocument, customizable } from '../../Utilities';
import { positionCallout, getMaxHeight } from '../../utilities/positioning';
import { Popup } from '../../Popup';
import { classNamesFunction } from '../../Utilities';
var getClassNames = classNamesFunction();
var BORDER_WIDTH = 1;
var BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.
// To help ensure that edge will respect the offscreen style opacity
// filter needs to be added as an additional way to set opacity.
var OFF_SCREEN_STYLE = { opacity: 0, filter: 'opacity(0)' };
var CalloutContentBase = /** @class */ (function (_super) {
tslib_1.__extends(CalloutContentBase, _super);
function CalloutContentBase(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({ 'beakStyle': 'beakWidth' });
_this._didSetInitialFocus = false;
_this.state = {
positions: undefined,
slideDirectionalClassName: undefined,
// @TODO it looks like this is not even being used anymore.
calloutElementRect: undefined,
heightOffset: 0
};
_this._positionAttempts = 0;
return _this;
}
CalloutContentBase.prototype.componentDidUpdate = function () {
this._setInitialFocus();
this._updateAsyncPosition();
};
CalloutContentBase.prototype.componentWillMount = function () {
this._setTargetWindowAndElement(this._getTarget());
};
CalloutContentBase.prototype.componentWillUpdate = function (newProps) {
// If the target element changed, find the new one. If we are tracking target with class name, always find element because we do not know if fabric has rendered a new element and disposed the old element.
var newTarget = this._getTarget(newProps);
var oldTarget = this._getTarget();
if (newTarget !== oldTarget || typeof (newTarget) === 'string' || newTarget instanceof String) {
this._maxHeight = undefined;
this._setTargetWindowAndElement(newTarget);
}
if (newProps.gapSpace !== this.props.gapSpace || this.props.beakWidth !== newProps.beakWidth) {
this._maxHeight = undefined;
}
if (newProps.finalHeight !== this.props.finalHeight) {
this._setHeightOffsetEveryFrame();
}
};
CalloutContentBase.prototype.componentDidMount = function () {
this._onComponentDidMount();
};
CalloutContentBase.prototype.render = function () {
// If there is no target window then we are likely in server side rendering and we should not render anything.
if (!this._targetWindow) {
return null;
}
var target = this.props.target;
var _a = this.props, getStyles = _a.getStyles, role = _a.role, ariaLabel = _a.ariaLabel, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className, isBeakVisible = _a.isBeakVisible, beakStyle = _a.beakStyle, children = _a.children, beakWidth = _a.beakWidth, calloutWidth = _a.calloutWidth, finalHeight = _a.finalHeight, backgroundColor = _a.backgroundColor, calloutMaxHeight = _a.calloutMaxHeight, onScroll = _a.onScroll;
target = this._getTarget();
var positions = this.state.positions;
var getContentMaxHeight = this._getMaxHeight() + this.state.heightOffset;
var contentMaxHeight = calloutMaxHeight && (calloutMaxHeight < getContentMaxHeight) ? calloutMaxHeight : getContentMaxHeight;
var overflowYHidden = !!finalHeight;
var beakVisible = isBeakVisible && (!!target);
this._classNames = getClassNames(getStyles, {
theme: this.props.theme,
className: className,
overflowYHidden: overflowYHidden,
calloutWidth: calloutWidth,
contentMaxHeight: contentMaxHeight,
positions: positions,
beakWidth: beakWidth,
backgroundColor: backgroundColor,
beakStyle: beakStyle
});
var overflowStyle = overflowYHidden ? { overflowY: 'hidden' } : {};
var content = (React.createElement("div", { ref: this._resolveRef('_hostElement'), className: this._classNames.container },
React.createElement("div", { className: this._classNames.root, style: positions ? positions.elementPosition : OFF_SCREEN_STYLE, tabIndex: -1,
// See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
ref: this._resolveRef('_calloutElement') },
beakVisible && (React.createElement("div", { className: this._classNames.beak, style: this._getBeakPosition() })),
beakVisible &&
(React.createElement("div", { className: this._classNames.beakCurtain })),
React.createElement(Popup, { role: role, ariaLabel: ariaLabel, ariaDescribedBy: ariaDescribedBy, ariaLabelledBy: ariaLabelledBy, className: this._classNames.calloutMain, onDismiss: this.dismiss, onScroll: onScroll, shouldRestoreFocus: true, style: overflowStyle }, children))));
return content;
};
CalloutContentBase.prototype.dismiss = function (ev) {
var onDismiss = this.props.onDismiss;
if (onDismiss) {
onDismiss(ev);
}
};
CalloutContentBase.prototype._dismissOnScroll = function (ev) {
var preventDismissOnScroll = this.props.preventDismissOnScroll;
if (this.state.positions && !preventDismissOnScroll) {
this._dismissOnLostFocus(ev);
}
};
CalloutContentBase.prototype._dismissOnLostFocus = function (ev) {
var target = ev.target;
var clickedOutsideCallout = this._hostElement && !elementContains(this._hostElement, target);
if ((!this._target && clickedOutsideCallout) ||
ev.target !== this._targetWindow &&
clickedOutsideCallout &&
(this._target.stopPropagation ||
(!this._target || (target !== this._target && !elementContains(this._target, target))))) {
this.dismiss(ev);
}
};
CalloutContentBase.prototype._setInitialFocus = function () {
if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
this._didSetInitialFocus = true;
focusFirstChild(this._calloutElement);
}
};
CalloutContentBase.prototype._onComponentDidMount = function () {
var _this = this;
// This is added so the callout will dismiss when the window is scrolled
// but not when something inside the callout is scrolled. The delay seems
// to be required to avoid React firing an async focus event in IE from
// the target changing focus quickly prior to rendering the callout.
this._async.setTimeout(function () {
_this._events.on(_this._targetWindow, 'scroll', _this._dismissOnScroll, true);
_this._events.on(_this._targetWindow, 'resize', _this.dismiss, true);
_this._events.on(_this._targetWindow.document.body, 'focus', _this._dismissOnLostFocus, true);
_this._events.on(_this._targetWindow.document.body, 'click', _this._dismissOnLostFocus, true);
}, 0);
if (this.props.onLayerMounted) {
this.props.onLayerMounted();
}
this._updateAsyncPosition();
this._setHeightOffsetEveryFrame();
};
CalloutContentBase.prototype._updateAsyncPosition = function () {
var _this = this;
this._async.requestAnimationFrame(function () { return _this._updatePosition(); });
};
CalloutContentBase.prototype._getBeakPosition = function () {
var positions = this.state.positions;
var beakPostionStyle = tslib_1.__assign({}, (positions && positions.beakPosition ? positions.beakPosition.elementPosition : null));
if (!beakPostionStyle.top && !beakPostionStyle.bottom && !beakPostionStyle.left && !beakPostionStyle.right) {
beakPostionStyle.left = BEAK_ORIGIN_POSITION.left;
beakPostionStyle.top = BEAK_ORIGIN_POSITION.top;
}
return beakPostionStyle;
};
CalloutContentBase.prototype._updatePosition = function () {
var positions = this.state.positions;
var hostElement = this._hostElement;
var calloutElement = this._calloutElement;
if (hostElement && calloutElement) {
var currentProps = void 0;
currentProps = assign(currentProps, this.props);
currentProps.bounds = this._getBounds();
currentProps.target = this._target;
var newPositions = positionCallout(currentProps, hostElement, calloutElement);
// Set the new position only when the positions are not exists or one of the new callout positions are different.
// The position should not change if the position is within 2 decimal places.
if ((!positions && newPositions) ||
(positions && newPositions && !this._arePositionsEqual(positions, newPositions)
&& this._positionAttempts < 5)) {
// We should not reposition the callout more than a few times, if it is then the content is likely resizing
// and we should stop trying to reposition to prevent a stack overflow.
this._positionAttempts++;
this.setState({
positions: newPositions
});
}
else {
this._positionAttempts = 0;
if (this.props.onPositioned) {
this.props.onPositioned(this.state.positions);
}
}
}
};
CalloutContentBase.prototype._getBounds = function () {
if (!this._bounds) {
var currentBounds = this.props.bounds;
if (!currentBounds) {
currentBounds = {
top: 0 + this.props.minPagePadding,
left: 0 + this.props.minPagePadding,
right: this._targetWindow.innerWidth - this.props.minPagePadding,
bottom: this._targetWindow.innerHeight - this.props.minPagePadding,
width: this._targetWindow.innerWidth - this.props.minPagePadding * 2,
height: this._targetWindow.innerHeight - this.props.minPagePadding * 2
};
}
this._bounds = currentBounds;
}
return this._bounds;
};
CalloutContentBase.prototype._getMaxHeight = function () {
if (!this._maxHeight) {
if (this.props.directionalHintFixed && this._target) {
var beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
var gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
// Since the callout cannot measure it's border size it must be taken into account here. Otherwise it will
// overlap with the target.
var totalGap = gapSpace + beakWidth + BORDER_WIDTH * 2;
this._maxHeight = getMaxHeight(this._target, this.props.directionalHint, totalGap, this._getBounds());
}
else {
this._maxHeight = this._getBounds().height - BORDER_WIDTH * 2;
}
}
return this._maxHeight;
};
CalloutContentBase.prototype._arePositionsEqual = function (positions, newPosition) {
return this._comparePositions(positions.elementPosition, newPosition.elementPosition) &&
this._comparePositions(positions.beakPosition.elementPosition, newPosition.beakPosition.elementPosition);
};
CalloutContentBase.prototype._comparePositions = function (oldPositions, newPositions) {
for (var key in newPositions) {
// This needs to be checked here and below because there is a linting error if for in does not immediately have an if statement
if (newPositions.hasOwnProperty(key)) {
var oldPositionEdge = oldPositions[key];
var newPositionEdge = newPositions[key];
if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {
if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {
return false;
}
}
else {
return false;
}
}
}
return true;
};
CalloutContentBase.prototype._setTargetWindowAndElement = function (target) {
if (target) {
if (typeof target === 'string') {
var currentDoc = getDocument();
this._target = currentDoc ? currentDoc.querySelector(target) : null;
this._targetWindow = getWindow();
}
else if (target.stopPropagation) {
this._targetWindow = getWindow(target.toElement);
this._target = target;
}
else if (target.getBoundingClientRect) {
var targetElement = target;
this._targetWindow = getWindow(targetElement);
this._target = target;
// HTMLImgElements can have x and y values. The check for it being a point must go last.
}
else {
this._targetWindow = getWindow();
this._target = target;
}
}
else {
this._targetWindow = getWindow();
}
};
CalloutContentBase.prototype._setHeightOffsetEveryFrame = function () {
var _this = this;
if (this._calloutElement && this.props.finalHeight) {
this._setHeightOffsetTimer = this._async.requestAnimationFrame(function () {
var calloutMainElem = _this._calloutElement.lastChild;
var cardScrollHeight = calloutMainElem.scrollHeight;
var cardCurrHeight = calloutMainElem.offsetHeight;
var scrollDiff = cardScrollHeight - cardCurrHeight;
_this.setState({
heightOffset: _this.state.heightOffset + scrollDiff
});
if (calloutMainElem.offsetHeight < _this.props.finalHeight) {
_this._setHeightOffsetEveryFrame();
}
else {
_this._async.cancelAnimationFrame(_this._setHeightOffsetTimer);
}
});
}
};
CalloutContentBase.prototype._getTarget = function (props) {
if (props === void 0) { props = this.props; }
var useTargetPoint = props.useTargetPoint, targetPoint = props.targetPoint, target = props.target;
return useTargetPoint ? targetPoint : target;
};
CalloutContentBase.defaultProps = {
preventDismissOnScroll: false,
isBeakVisible: true,
beakWidth: 16,
gapSpace: 0,
minPagePadding: 8,
directionalHint: 7 /* bottomAutoEdge */
};
tslib_1.__decorate([
autobind
], CalloutContentBase.prototype, "dismiss", null);
tslib_1.__decorate([
autobind
], CalloutContentBase.prototype, "_setInitialFocus", null);
tslib_1.__decorate([
autobind
], CalloutContentBase.prototype, "_onComponentDidMount", null);
CalloutContentBase = tslib_1.__decorate([
customizable('CalloutContent', ['theme'])
], CalloutContentBase);
return CalloutContentBase;
}(BaseComponent));
export { CalloutContentBase };
//# sourceMappingURL=CalloutContent.base.js.map