@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
56 lines (52 loc) • 2.93 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationContextMenu;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const color_js_1 = require("../../lib/color.js");
const index_js_1 = tslib_1.__importDefault(require("../Text/index.js"));
/**
* Context menu for the clickable notification. Renders a menu with two items:
* "Mark as read" and "Delete".
*
* @example
* <NotificationContextMenu notification={notification} />
*/
function NotificationContextMenu({ notification }) {
const { isRead, markAsUnread, markAsRead } = notification;
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { container: containerTheme, notification: { default: notificationTheme }, } = theme;
const handleDelete = () => notification.delete();
const toggleRead = () => (isRead ? markAsUnread() : markAsRead());
return ((0, jsx_runtime_1.jsxs)("div", { onClick: (e) => e.preventDefault(), css: (0, react_1.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: ${(0, color_js_1.toRGBA)(notificationTheme.backgroundColor, notificationTheme.backgroundOpacity)} !important;
&:hover {
background-color: ${(0, color_js_1.toRGBA)(notificationTheme.hover.backgroundColor, notificationTheme.hover.backgroundOpacity)} !important;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: 2px ${notificationTheme.textColor} solid !important;
}
}
`, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleRead, children: notification.isRead ? ((0, jsx_runtime_1.jsx)(index_js_1.default, { id: "notification.mark-as-unread", defaultMessage: "Mark as unread" })) : ((0, jsx_runtime_1.jsx)(index_js_1.default, { id: "notification.mark-as-read", defaultMessage: "Mark as read" })) }), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleDelete, children: (0, jsx_runtime_1.jsx)(index_js_1.default, { id: "notification.delete", defaultMessage: "Delete" }) })] }));
}
//# sourceMappingURL=NotificationContextMenu.js.map