office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
104 lines • 5.57 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, css, divProperties, getNativeProps, getId, assign, hasOverflow, createRef, portalContainsElement } from '../../Utilities';
import { TooltipOverflowMode } from './TooltipHost.types';
import { Tooltip } from './Tooltip';
import { TooltipDelay } from './Tooltip.types';
import * as stylesImport from './TooltipHost.scss';
var styles = stylesImport;
var TooltipHost = /** @class */ (function (_super) {
tslib_1.__extends(TooltipHost, _super);
// Constructor
function TooltipHost(props) {
var _this = _super.call(this, props) || this;
// The wrapping div that gets the hover events
_this._tooltipHost = createRef();
// The ID of the setTimeout that will eventually close the tooltip if the
// the tooltip isn't hovered over.
_this._closingTimer = -1;
// Show Tooltip
_this._onTooltipMouseEnter = function (ev) {
var overflowMode = _this.props.overflowMode;
if (overflowMode !== undefined) {
var overflowElement = _this._getTargetElement();
if (overflowElement && !hasOverflow(overflowElement)) {
return;
}
}
if (ev.target && portalContainsElement(ev.target, _this._getTargetElement())) {
// Do not show tooltip when target is inside a portal relative to TooltipHost.
return;
}
_this._toggleTooltip(true);
_this._clearDismissTimer();
};
// Hide Tooltip
_this._onTooltipMouseLeave = function (ev) {
if (_this.props.closeDelay) {
_this._clearDismissTimer();
_this._closingTimer = _this._async.setTimeout(function () {
_this._toggleTooltip(false);
}, _this.props.closeDelay);
}
else {
_this._toggleTooltip(false);
}
};
_this._clearDismissTimer = function () {
_this._async.clearTimeout(_this._closingTimer);
};
// Hide Tooltip
_this._hideTooltip = function () {
_this._toggleTooltip(false);
};
_this.state = {
isTooltipVisible: false
};
return _this;
}
// Render
TooltipHost.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, children = _a.children, content = _a.content, delay = _a.delay, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, hostClassName = _a.hostClassName, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, tooltipProps = _a.tooltipProps;
var isTooltipVisible = this.state.isTooltipVisible;
var tooltipId = id || getId('tooltip');
var isContentPresent = !!(content ||
(tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));
var showTooltip = isTooltipVisible && isContentPresent;
var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;
return (React.createElement("div", tslib_1.__assign({ className: css('ms-TooltipHost', styles.host, hostClassName), ref: this._tooltipHost }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._hideTooltip }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, "aria-describedby": ariaDescribedBy }),
children,
showTooltip && (React.createElement(Tooltip, tslib_1.__assign({ id: tooltipId, delay: delay, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: assign({}, calloutProps, {
onMouseEnter: this._onTooltipMouseEnter,
onMouseLeave: this._onTooltipMouseLeave
}), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, getNativeProps(this.props, divProperties), tooltipProps)))));
};
TooltipHost.prototype._getTargetElement = function () {
if (!this._tooltipHost.current) {
return undefined;
}
var overflowMode = this.props.overflowMode;
// Select target element based on overflow mode. For parent mode, you want to position the tooltip relative
// to the parent element, otherwise it might look off.
if (overflowMode !== undefined) {
switch (overflowMode) {
case TooltipOverflowMode.Parent:
return this._tooltipHost.current.parentElement;
case TooltipOverflowMode.Self:
return this._tooltipHost.current;
}
}
return this._tooltipHost.current;
};
TooltipHost.prototype._toggleTooltip = function (isTooltipVisible) {
var _this = this;
if (this.state.isTooltipVisible !== isTooltipVisible) {
this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(_this.state.isTooltipVisible); });
}
};
TooltipHost.defaultProps = {
delay: TooltipDelay.medium
};
return TooltipHost;
}(BaseComponent));
export { TooltipHost };
//# sourceMappingURL=TooltipHost.js.map