@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
27 lines • 1.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = FloatingNotificationInbox;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const MagicBellContext_js_1 = require("../../context/MagicBellContext.js");
const index_js_1 = tslib_1.__importDefault(require("../NotificationInbox/index.js"));
const FloatingInboxContainer_js_1 = tslib_1.__importDefault(require("./FloatingInboxContainer.js"));
/**
* Notification inbox in a popover.
*
* @example
* <FloatingNotificationInbox height={400} toggle={() => void} isOpen />
*/
function FloatingNotificationInbox({ launcherRef, isOpen, toggle, placement, offset, arrowPadding, width = 500, onNotificationClick, closeOnClickOutside = true, closeOnNotificationClick = true, hideArrow = false, layout, ...inboxProps }) {
const handleNotificationClick = (notification) => {
if (closeOnNotificationClick)
toggle?.();
return onNotificationClick?.(notification);
};
const { isFetchingConfig } = (0, MagicBellContext_js_1.useMagicBellContext)();
if (isFetchingConfig)
return null;
return (react_1.default.createElement(FloatingInboxContainer_js_1.default, { launcherRef: launcherRef, isOpen: isOpen, toggle: toggle, placement: placement, offset: offset, arrowPadding: arrowPadding, width: width, closeOnClickOutside: closeOnClickOutside, hideArrow: hideArrow, layout: layout },
react_1.default.createElement(index_js_1.default, { onNotificationClick: handleNotificationClick, layout: layout, ...inboxProps })));
}
//# sourceMappingURL=FloatingNotificationInbox.js.map