@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
41 lines • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Tooltip;
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const react_2 = require("@floating-ui/react");
const react_3 = require("react");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
/**
* Component that renders a tooltip.
*/
function Tooltip({ children, tooltip, placement, delay = 250 }) {
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const [isOpen, setIsOpen] = (0, react_3.useState)(false);
const { refs, context, floatingStyles } = (0, react_2.useFloating)({
placement,
middleware: [(0, react_2.offset)({ mainAxis: 8 })],
open: isOpen,
onOpenChange: setIsOpen,
});
const hover = (0, react_2.useHover)(context, {
delay,
});
const { getFloatingProps, getReferenceProps } = (0, react_2.useInteractions)([hover]);
if (!tooltip)
return children;
const { container: containerTheme, notification: notificationTheme } = theme;
const tipStyle = (0, react_1.css) `
background: ${containerTheme.backgroundColor} !important;
border-radius: 4px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: ${notificationTheme.default.textColor} !important;
font-size: 0.8em !important;
padding: 0.5em !important;
text-transform: ${notificationTheme.default.textTransform};
white-space: nowrap !important;
`;
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_3.cloneElement)(children, { ref: refs.setReference, ...getReferenceProps(children.props) }), isOpen && ((0, jsx_runtime_1.jsx)("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: 1 }, ...getFloatingProps(), children: (0, jsx_runtime_1.jsx)("span", { css: tipStyle, children: tooltip }) }))] }));
}
//# sourceMappingURL=Tooltip.js.map