@fluentui/react
Version:
Reusable React components for building web experiences.
199 lines • 11.4 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Styling", "../../Utilities", "./TooltipHost.types", "./Tooltip", "./Tooltip.types", "@fluentui/react-window-provider", "../../utilities/dom"], function (require, exports, tslib_1, React, Styling_1, Utilities_1, TooltipHost_types_1, Tooltip_1, Tooltip_types_1, react_window_provider_1, dom_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipHostBase = void 0;
var getClassNames = (0, Utilities_1.classNamesFunction)();
var TooltipHostBase = exports.TooltipHostBase = /** @class */ (function (_super) {
tslib_1.__extends(TooltipHostBase, _super);
// Constructor
function TooltipHostBase(props) {
var _this = _super.call(this, props) || this;
// The wrapping div that gets the hover events
_this._tooltipHost = React.createRef();
_this._defaultTooltipId = (0, Utilities_1.getId)('tooltip');
_this.show = function () {
_this._toggleTooltip(true);
};
_this.dismiss = function () {
_this._hideTooltip();
};
_this._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 TooltipHost_types_1.TooltipOverflowMode.Parent:
return _this._tooltipHost.current.parentElement;
case TooltipHost_types_1.TooltipOverflowMode.Self:
return _this._tooltipHost.current;
}
}
return _this._tooltipHost.current;
};
_this._onTooltipFocus = function (ev) {
if (_this._ignoreNextFocusEvent) {
_this._ignoreNextFocusEvent = false;
return;
}
_this._onTooltipMouseEnter(ev);
};
_this._onTooltipContentFocus = function (ev) {
if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {
TooltipHostBase._currentVisibleTooltip.dismiss();
}
TooltipHostBase._currentVisibleTooltip = _this;
_this._clearDismissTimer();
_this._clearOpenTimer();
};
_this._onTooltipBlur = function (ev) {
var _a;
// The focused element gets a blur event when the document loses focus
// (e.g. switching tabs in the browser), but we don't want to show the
// tooltip again when the document gets focus back. Handle this case by
// checking if the blurred element is still the document's activeElement,
// and ignoring when it next gets focus back.
// See https://github.com/microsoft/fluentui/issues/13541
_this._ignoreNextFocusEvent = ((_a = (0, dom_1.getDocumentEx)(_this.context)) === null || _a === void 0 ? void 0 : _a.activeElement) === ev.target;
_this._dismissTimerId = _this._async.setTimeout(function () {
_this._hideTooltip();
}, 0);
};
// Show Tooltip
_this._onTooltipMouseEnter = function (ev) {
var _a;
var overflowMode = (_a = _this.props, _a.overflowMode), delay = _a.delay;
var doc = (0, dom_1.getDocumentEx)(_this.context);
if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {
TooltipHostBase._currentVisibleTooltip.dismiss();
}
TooltipHostBase._currentVisibleTooltip = _this;
if (overflowMode !== undefined) {
var overflowElement = _this._getTargetElement();
if (overflowElement && !(0, Utilities_1.hasOverflow)(overflowElement)) {
return;
}
}
if (ev.target && (0, Utilities_1.portalContainsElement)(ev.target, _this._getTargetElement(), doc)) {
// Do not show tooltip when target is inside a portal relative to TooltipHost.
return;
}
_this._clearDismissTimer();
_this._clearOpenTimer();
if (delay !== Tooltip_types_1.TooltipDelay.zero) {
var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`
_this._openTimerId = _this._async.setTimeout(function () {
_this._toggleTooltip(true);
}, delayTime);
}
else {
_this._toggleTooltip(true);
}
};
// Hide Tooltip
_this._onTooltipMouseLeave = function (ev) {
var closeDelay = _this.props.closeDelay;
_this._clearDismissTimer();
_this._clearOpenTimer();
if (closeDelay) {
_this._dismissTimerId = _this._async.setTimeout(function () {
_this._toggleTooltip(false);
}, closeDelay);
}
else {
_this._toggleTooltip(false);
}
if (TooltipHostBase._currentVisibleTooltip === _this) {
TooltipHostBase._currentVisibleTooltip = undefined;
}
};
_this._onTooltipKeyDown = function (ev) {
// eslint-disable-next-line deprecation/deprecation
if ((ev.which === Utilities_1.KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {
_this._hideTooltip();
ev.stopPropagation();
}
};
_this._clearDismissTimer = function () {
_this._async.clearTimeout(_this._dismissTimerId);
};
_this._clearOpenTimer = function () {
_this._async.clearTimeout(_this._openTimerId);
};
// Hide Tooltip
_this._hideTooltip = function () {
_this._clearOpenTimer();
_this._clearDismissTimer();
_this._toggleTooltip(false);
};
_this._toggleTooltip = function (isTooltipVisible) {
if (_this.state.isTooltipVisible !== isTooltipVisible) {
_this.setState({ isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });
}
};
_this._getDelayTime = function (delay) {
switch (delay) {
case Tooltip_types_1.TooltipDelay.medium:
return 300;
case Tooltip_types_1.TooltipDelay.long:
return 500;
default:
return 0;
}
};
(0, Utilities_1.initializeComponentRef)(_this);
_this.state = {
isAriaPlaceholderRendered: false,
isTooltipVisible: false,
};
return _this;
}
// Render
TooltipHostBase.prototype.render = function () {
var _a, _b;
var calloutProps = (_a = this.props, _a.calloutProps), children = _a.children, content = _a.content, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, className = _a.hostClassName, id = _a.id,
// eslint-disable-next-line deprecation/deprecation
setAriaDescribedBy = (_b = _a.setAriaDescribedBy, _b === void 0 ? true : _b), tooltipProps = _a.tooltipProps, styles = _a.styles, theme = _a.theme;
this._classNames = getClassNames(styles, {
theme: theme,
className: className,
});
var isTooltipVisible = this.state.isTooltipVisible;
var tooltipId = id || this._defaultTooltipId;
var tooltipRenderProps = tslib_1.__assign(tslib_1.__assign({ id: "".concat(tooltipId, "--tooltip"), content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: (0, Utilities_1.assign)({}, calloutProps, {
onDismiss: this._hideTooltip,
onFocus: this._onTooltipContentFocus,
onMouseEnter: this._onTooltipMouseEnter,
onMouseLeave: this._onTooltipMouseLeave,
}), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, (0, Utilities_1.getNativeProps)(this.props, Utilities_1.divProperties, ['id'])), tooltipProps);
// Get the content of the tooltip for use in the hidden div used for screen readers
var tooltipContent = (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.onRenderContent)
? tooltipProps.onRenderContent(tooltipRenderProps, function (props) { return ((props === null || props === void 0 ? void 0 : props.content) ? React.createElement(React.Fragment, null, props.content) : null); })
: content;
var showTooltip = isTooltipVisible && !!tooltipContent;
var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && !!tooltipContent ? tooltipId : undefined;
return (React.createElement("div", tslib_1.__assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipFocus }, { onBlurCapture: this._onTooltipBlur }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, role: "none", "aria-describedby": ariaDescribedBy }),
children,
showTooltip && React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipRenderProps)),
React.createElement("div", { hidden: true, id: tooltipId, style: Styling_1.hiddenContentStyle }, tooltipContent)));
};
TooltipHostBase.prototype.componentDidMount = function () {
this._async = new Utilities_1.Async(this);
};
TooltipHostBase.prototype.componentWillUnmount = function () {
if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {
TooltipHostBase._currentVisibleTooltip = undefined;
}
this._async.dispose();
};
TooltipHostBase.defaultProps = {
delay: Tooltip_types_1.TooltipDelay.medium,
};
TooltipHostBase.contextType = react_window_provider_1.WindowContext;
return TooltipHostBase;
}(React.Component));
});
//# sourceMappingURL=TooltipHost.base.js.map