@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
50 lines (48 loc) • 2.57 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationMenu;
const tslib_1 = require("tslib");
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");
const TranslationsContext_js_1 = require("../../context/TranslationsContext.js");
const MenuIcon_js_1 = tslib_1.__importDefault(require("../icons/MenuIcon.js"));
const index_js_1 = tslib_1.__importDefault(require("../NotificationContextMenu/index.js"));
/**
* Component that renders the context menu
*
* @example
* <NotificationState notification={notification} />
*/
function NotificationMenu({ notification }) {
const { notification: themeVariants } = (0, MagicBellThemeContext_js_1.useTheme)();
const t = (0, TranslationsContext_js_1.useTranslate)();
const [isOpen, setIsOpen] = (0, react_3.useState)(false);
const theme = !notification.isSeen
? themeVariants.unseen
: !notification.isRead
? themeVariants.unread
: themeVariants.default;
const { refs, context, floatingStyles } = (0, react_2.useFloating)({
placement: 'bottom-end',
middleware: [(0, react_2.flip)(), (0, react_2.offset)({ mainAxis: 2, crossAxis: -4 })],
open: isOpen,
onOpenChange: setIsOpen,
});
const dismiss = (0, react_2.useDismiss)(context);
const click = (0, react_2.useClick)(context);
const { getFloatingProps, getReferenceProps } = (0, react_2.useInteractions)([dismiss, click]);
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: refs.setReference, type: "button", "data-magicbell-target": "notification-menu", "aria-label": t('notification.menu', 'Menu'), css: (0, react_1.css) `
color: ${theme.textColor} !important;
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px ${theme.textColor} auto !important;
}
`, ...getReferenceProps(), children: (0, jsx_runtime_1.jsx)(MenuIcon_js_1.default, {}) }), isOpen && ((0, jsx_runtime_1.jsx)("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: 1 }, ...getFloatingProps(), children: (0, jsx_runtime_1.jsx)(index_js_1.default, { notification: notification }) }))] }));
}
//# sourceMappingURL=NotificationMenu.js.map