@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
46 lines (44 loc) • 2.17 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { flip, offset, useClick, useDismiss, useFloating, useInteractions } from '@floating-ui/react';
import { useState } from 'react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import { useTranslate } from '../../context/TranslationsContext.js';
import MenuIcon from '../icons/MenuIcon.js';
import NotificationContextMenu from '../NotificationContextMenu/index.js';
/**
* Component that renders the context menu
*
* @example
* <NotificationState notification={notification} />
*/
export default function NotificationMenu({ notification }) {
const { notification: themeVariants } = useTheme();
const t = useTranslate();
const [isOpen, setIsOpen] = useState(false);
const theme = !notification.isSeen
? themeVariants.unseen
: !notification.isRead
? themeVariants.unread
: themeVariants.default;
const { refs, context, floatingStyles } = useFloating({
placement: 'bottom-end',
middleware: [flip(), offset({ mainAxis: 2, crossAxis: -4 })],
open: isOpen,
onOpenChange: setIsOpen,
});
const dismiss = useDismiss(context);
const click = useClick(context);
const { getFloatingProps, getReferenceProps } = useInteractions([dismiss, click]);
return (_jsxs(_Fragment, { children: [_jsx("button", { ref: refs.setReference, type: "button", "data-magicbell-target": "notification-menu", "aria-label": t('notification.menu', 'Menu'), css: css `
color: ${theme.textColor} !important;
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px ${theme.textColor} auto !important;
}
`, ...getReferenceProps(), children: _jsx(MenuIcon, {}) }), isOpen && (_jsx("div", { ref: refs.setFloating, style: { ...floatingStyles, zIndex: 1 }, ...getFloatingProps(), children: _jsx(NotificationContextMenu, { notification: notification }) }))] }));
}
//# sourceMappingURL=NotificationMenu.js.map