@redocly/theme
Version:
Shared UI components lib
36 lines • 1.63 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipWrapper = TooltipWrapper;
const styled_components_1 = __importDefault(require("styled-components"));
const react_1 = __importDefault(require("react"));
const hooks_1 = require("../../core/hooks");
const Tooltip_1 = require("../../components/Tooltip/Tooltip");
function TooltipWrapper({ children, tooltipTranslationKey, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
const { useTranslate } = (0, hooks_1.useThemeHooks)();
const tooltip = (0, hooks_1.useControl)();
const { translate } = useTranslate();
const handleMouseEnter = () => {
if (showOnHover && !disabled) {
tooltip.handleOpen();
}
};
const handleMouseLeave = () => {
if (showOnHover) {
tooltip.handleClose();
}
};
const handleClick = () => {
if (showOnHover) {
tooltip.handleClose();
}
};
return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: translate(tooltipTranslationKey), isOpen: tooltip.isOpened, placement: placement, width: width },
react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
}
const TooltipEventWrapper = styled_components_1.default.div `
display: contents;
`;
//# sourceMappingURL=TooltipWrapper.js.map