@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
50 lines (49 loc) • 2.02 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useBell } from '@magicbell/react-headless';
import { isNil } from 'ramda';
import { useMagicBellContext } from '../../context/MagicBellContext.js';
import { useTheme } from '../../context/MagicBellThemeContext.js';
import { cleanslate } from '../Styled/index.js';
import BellBadge from './BellBadge.js';
import BellIcon from './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} />
*/
export default function Bell({ Icon, Badge = BellBadge, onClick, storeId, counter }) {
const notifications = useBell({ storeId });
const theme = useTheme();
const { isFetchingConfig } = useMagicBellContext();
const { icon: iconTheme } = theme;
const handleClick = () => {
notifications?.markAllAsSeen();
onClick();
};
const containerStyle = css `
display: block;
cursor: pointer;
position: relative !important;
width: ${iconTheme.width} !important;
`;
const iconStyle = css `
position: relative !important;
& > * {
height: 100%;
width: 100%;
}
`;
if (isFetchingConfig) {
return _jsx("div", { css: [cleanslate, containerStyle] });
}
return (_jsxs("a", {
// Ugly, but we need it for now due to style issues
role: "button", onClick: handleClick, css: [cleanslate, containerStyle], "aria-label": "Notifications", "data-testid": "bell", "data-magicbell-bell": true, children: [_jsx("div", { css: iconStyle, children: !isNil(Icon) ? Icon : _jsx(BellIcon, {}) }), notifications && (_jsx(Badge, { count: counter === 'unread' ? notifications?.unreadCount : notifications?.unseenCount }))] }));
}
//# sourceMappingURL=Bell.js.map