office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
82 lines (80 loc) • 4.36 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./TooltipHost.Props", "./Tooltip", "./Tooltip.Props", "./TooltipHost.scss"], function (require, exports, tslib_1, React, Utilities_1, TooltipHost_Props_1, Tooltip_1, Tooltip_Props_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var TooltipHost = (function (_super) {
tslib_1.__extends(TooltipHost, _super);
// Constructor
function TooltipHost(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isTooltipVisible: false
};
return _this;
}
// Render
TooltipHost.prototype.render = function () {
var _a = this.props, calloutProps = _a.calloutProps, tooltipProps = _a.tooltipProps, content = _a.content, children = _a.children, directionalHint = _a.directionalHint, delay = _a.delay, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, hostClassName = _a.hostClassName;
var isTooltipVisible = this.state.isTooltipVisible;
var tooltipId = id || Utilities_1.getId('tooltip');
return (React.createElement("div", tslib_1.__assign({ className: Utilities_1.css('ms-TooltipHost', styles.host, hostClassName), ref: this._resolveRef('_tooltipHost') }, { onFocusCapture: this._onTooltipMouseEnter }, { onBlurCapture: this._onTooltipMouseLeave }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, "aria-describedby": setAriaDescribedBy && isTooltipVisible && content ? tooltipId : undefined }),
children,
isTooltipVisible &&
content ? (React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipProps, { id: tooltipId, delay: delay, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, calloutProps: Utilities_1.assign(calloutProps, { onDismiss: this._onTooltipCallOutDismiss }) }, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties)))) : undefined));
};
TooltipHost.prototype._getTargetElement = function () {
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_Props_1.TooltipOverflowMode.Parent:
return this._tooltipHost.parentElement;
case TooltipHost_Props_1.TooltipOverflowMode.Self:
return this._tooltipHost;
}
}
return this._tooltipHost;
};
// Show Tooltip
TooltipHost.prototype._onTooltipMouseEnter = function (ev) {
var overflowMode = this.props.overflowMode;
if (overflowMode !== undefined) {
var overflowElement = this._getTargetElement();
if (overflowElement && !Utilities_1.hasOverflow(overflowElement)) {
return;
}
}
this.setState({
isTooltipVisible: true
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipMouseLeave = function (ev) {
this.setState({
isTooltipVisible: false
});
};
// Hide Tooltip
TooltipHost.prototype._onTooltipCallOutDismiss = function () {
this.setState({
isTooltipVisible: false
});
};
return TooltipHost;
}(Utilities_1.BaseComponent));
TooltipHost.defaultProps = {
delay: Tooltip_Props_1.TooltipDelay.medium
};
tslib_1.__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseEnter", null);
tslib_1.__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipMouseLeave", null);
tslib_1.__decorate([
Utilities_1.autobind
], TooltipHost.prototype, "_onTooltipCallOutDismiss", null);
exports.TooltipHost = TooltipHost;
});
//# sourceMappingURL=TooltipHost.js.map