@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
47 lines • 2.33 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FloatingInboxContainer;
const tslib_1 = require("tslib");
const react_1 = require("@floating-ui/react");
const react_2 = tslib_1.__importStar(require("react"));
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
/**
* Notification inbox in a popover.
*
* @example
* <FloatingNotificationInbox height={400} toggle={() => void} isOpen />
*/
function FloatingInboxContainer({ launcherRef, isOpen = false, toggle, placement, offset: offsetProp = 10, width = 500, closeOnClickOutside = true, hideArrow = false, arrowPadding = 18, children, }) {
const [arrowEl, setArrowEl] = (0, react_2.useState)(null);
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const middleware = [placement ? (0, react_1.flip)() : (0, react_1.autoPlacement)(), (0, react_1.offset)(offsetProp)];
if (!hideArrow) {
middleware.push((0, react_1.arrow)({
element: arrowEl,
padding: arrowPadding,
}));
}
const floating = (0, react_1.useFloating)({
placement,
middleware,
strategy: 'absolute',
open: isOpen,
onOpenChange(open, event, reason) {
if (reason === 'outside-press') {
toggle?.();
}
},
elements: { reference: launcherRef.current },
whileElementsMounted: react_1.autoUpdate,
});
const dismiss = (0, react_1.useDismiss)(floating.context, {
referencePress: false,
outsidePress: closeOnClickOutside,
});
const { getFloatingProps } = (0, react_1.useInteractions)([dismiss]);
const arrowColor = /bottom/i.test(floating.placement) ? theme.footer.backgroundColor : theme.header.backgroundColor;
return (react_2.default.createElement(react_2.default.Fragment, null, isOpen ? (react_2.default.createElement("div", { ref: floating.refs.setFloating, style: { ...floating.floatingStyles, width, maxWidth: `calc(100vw - 10px)`, zIndex: 1 }, ...getFloatingProps() },
children,
hideArrow ? null : (react_2.default.createElement(react_1.FloatingArrow, { ref: setArrowEl, context: floating.context, tipRadius: 1, width: 18, fill: arrowColor })))) : null));
}
//# sourceMappingURL=FloatingInboxContainer.js.map