@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
52 lines (48 loc) • 2.51 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import { toRGBA } from '../../lib/color.js';
import Text from '../Text/index.js';
/**
* Context menu for the clickable notification. Renders a menu with two items:
* "Mark as read" and "Delete".
*
* @example
* <NotificationContextMenu notification={notification} />
*/
export default function NotificationContextMenu({ notification }) {
const { isRead, markAsUnread, markAsRead } = notification;
const theme = useTheme();
const { container: containerTheme, notification: { default: notificationTheme }, } = theme;
const handleDelete = () => notification.delete();
const toggleRead = () => (isRead ? markAsUnread() : markAsRead());
return (_jsxs("div", { onClick: (e) => e.preventDefault(), css: css `
background: ${containerTheme.backgroundColor} !important;
border-radius: 4px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 4px 0 !important;
color: ${notificationTheme.textColor} !important;
font-family: ${notificationTheme.fontFamily} !important;
font-size: ${notificationTheme.fontSize} !important;
text-transform: ${notificationTheme.textTransform} !important;
min-width: 10em;
button {
display: block;
padding: 0.75em 1.25em !important;
width: 100%;
text-align: left;
background-color: ${toRGBA(notificationTheme.backgroundColor, notificationTheme.backgroundOpacity)} !important;
&:hover {
background-color: ${toRGBA(notificationTheme.hover.backgroundColor, notificationTheme.hover.backgroundOpacity)} !important;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px ${notificationTheme.textColor} solid !important;
}
}
`, children: [_jsx("button", { type: "button", onClick: toggleRead, children: notification.isRead ? (_jsx(Text, { id: "notification.mark-as-unread", defaultMessage: "Mark as unread" })) : (_jsx(Text, { id: "notification.mark-as-read", defaultMessage: "Mark as read" })) }), _jsx("button", { type: "button", onClick: handleDelete, children: _jsx(Text, { id: "notification.delete", defaultMessage: "Delete" }) })] }));
}
//# sourceMappingURL=NotificationContextMenu.js.map