@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
54 lines (53 loc) • 2.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Bell;
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_headless_1 = require("@magicbell/react-headless");
const ramda_1 = require("ramda");
const MagicBellContext_js_1 = require("../../context/MagicBellContext.js");
const MagicBellThemeContext_js_1 = require("../../context/MagicBellThemeContext.js");
const index_js_1 = require("../Styled/index.js");
const BellBadge_js_1 = tslib_1.__importDefault(require("./BellBadge.js"));
const BellIcon_js_1 = tslib_1.__importDefault(require("./BellIcon.js"));
/**
* Bell. Renders the number of unseen notifications as well. When the bell is
* clicked, all notifications are marked as seen.
*
* It must be wrapped in a {@link MagicBellThemeProvider} component.
*
* @example
* <Bell onClick={toggleNotifications} />
*/
function Bell({ Icon, Badge = BellBadge_js_1.default, onClick, storeId, counter }) {
const notifications = (0, react_headless_1.useBell)({ storeId });
const theme = (0, MagicBellThemeContext_js_1.useTheme)();
const { isFetchingConfig } = (0, MagicBellContext_js_1.useMagicBellContext)();
const { icon: iconTheme } = theme;
const handleClick = () => {
notifications?.markAllAsSeen();
onClick();
};
const containerStyle = (0, react_1.css) `
display: block;
cursor: pointer;
position: relative !important;
width: ${iconTheme.width} !important;
`;
const iconStyle = (0, react_1.css) `
position: relative !important;
& > * {
height: 100%;
width: 100%;
}
`;
if (isFetchingConfig) {
return (0, jsx_runtime_1.jsx)("div", { css: [index_js_1.cleanslate, containerStyle] });
}
return ((0, jsx_runtime_1.jsxs)("a", {
// Ugly, but we need it for now due to style issues
role: "button", onClick: handleClick, css: [index_js_1.cleanslate, containerStyle], "aria-label": "Notifications", "data-testid": "bell", "data-magicbell-bell": true, children: [(0, jsx_runtime_1.jsx)("div", { css: iconStyle, children: !(0, ramda_1.isNil)(Icon) ? Icon : (0, jsx_runtime_1.jsx)(BellIcon_js_1.default, {}) }), notifications && ((0, jsx_runtime_1.jsx)(Badge, { count: counter === 'unread' ? notifications?.unreadCount : notifications?.unseenCount }))] }));
}
//# sourceMappingURL=Bell.js.map