synapse-react-client/dist/containers/widgets/ElementWithTooltip.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ElementWithTooltip = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importDefault)(require("react"));
var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
var react_tooltip_1 = (0, tslib_1.__importDefault)(require("react-tooltip"));
var SynapseTableConstants_1 = require("../table/SynapseTableConstants");
var react_bootstrap_1 = require("react-bootstrap");
var utils_1 = require("../row_renderers/utils");
function getTooltipTriggerContents(image, imageColor, size) {
    if ('svgImg' in image) {
        return image.svgImg;
    }
    else {
        return (react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { size: size !== null && size !== void 0 ? size : '1x', color: imageColor || 'white', icon: image }));
    }
}
var ElementWithTooltip = function (_a) {
    var image = _a.image, idForToolTip = _a.idForToolTip, callbackFn = _a.callbackFn, tooltipText = _a.tooltipText, _b = _a.className, className = _b === void 0 ? '' : _b, imageColor = _a.imageColor, _c = _a.tooltipVisualProps, tooltipVisualProps = _c === void 0 ? { place: 'top', type: 'dark', effect: 'solid' } : _c, children = _a.children, darkTheme = _a.darkTheme, size = _a.size, icon = _a.icon;
    var place = tooltipVisualProps.place, type = tooltipVisualProps.type, effect = tooltipVisualProps.effect, border = tooltipVisualProps.border;
    var iconComponent = icon ? react_1.default.createElement(utils_1.Icon, { type: icon }) : undefined;
    var tooltipTriggerContents = iconComponent
        ? iconComponent
        : image
            ? getTooltipTriggerContents(image, imageColor, size)
            : children || react_1.default.createElement(react_1.default.Fragment, null);
    //if there is no callbackFn - assume it's a toggle
    var tooltipTrigger;
    if (!children) {
        tooltipTrigger = callbackFn ? (react_1.default.createElement("button", { tabIndex: 0, id: idForToolTip, "data-for": idForToolTip, "data-tip": tooltipText, className: "ElementWithTooltip SRC-hand-cursor SRC-primary-background-color-hover " + className + " " + (darkTheme ? 'dark-theme' : '') + " ", onKeyPress: function () { return callbackFn(); }, onClick: function () { return callbackFn(); }, "aria-label": tooltipText }, tooltipTriggerContents)) : (react_1.default.createElement(react_bootstrap_1.Dropdown.Toggle, { "data-for": idForToolTip, "data-tip": tooltipText, id: idForToolTip, className: "ElementWithTooltip SRC-hand-cursor SRC-primary-background-color-hover " + className + " " + (darkTheme ? 'dark-theme' : '') + " ", variant: 'light' }, tooltipTriggerContents));
    }
    else {
        var outerChild = children;
        tooltipTrigger = react_1.default.cloneElement(outerChild, {
            className: outerChild.props.className + " SRC-hand-cursor",
            id: idForToolTip,
            'data-for': idForToolTip,
            'data-tip': tooltipText,
        });
    }
    return (react_1.default.createElement(react_1.default.Fragment, null,
        tooltipTrigger,
        react_1.default.createElement(react_tooltip_1.default, { delayShow: SynapseTableConstants_1.TOOLTIP_DELAY_SHOW, place: place, type: type, effect: effect, border: border ? true : false, id: idForToolTip })));
};
exports.ElementWithTooltip = ElementWithTooltip;
//# sourceMappingURL=ElementWithTooltip.js.map