@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
41 lines • 1.5 kB
JavaScript
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import { useEffect, useRef } from 'react';
import { cancel, render } from 'timeago.js';
import { useProse } from '../ClickableNotification/prose.js';
/**
* Component that renders the summary of a notification. The content of the
* notification is compiled as a liquid template.
*
* @example
* <NotificationContent notification={notification} />
*/
export default function NotificationContent({ notification, prose: withProse = true }) {
const { sanitizedContent: markup } = notification;
const ref = useRef(null);
const prose = useProse();
// TODO: Move this to a plugin framework
useEffect(() => {
if (!ref.current)
return;
const nodes = ref.current.querySelectorAll('time[datetime]');
if (nodes.length > 0)
render(nodes);
return () => {
cancel();
};
}, [markup]);
if (!markup || markup.replace(/(\n|\s|\r)/gi, '') === '')
return null;
const style = css `
color: inherit !important;
cursor: inherit;
margin: 0;
line-height: ${withProse ? 'inherit' : '1.5 !important'};
margin-top: 8px !important;
word-break: break-word !important;
`;
return _jsx("article", { ref: ref, css: withProse ? [style, prose] : style, dangerouslySetInnerHTML: { __html: markup } });
}
//# sourceMappingURL=NotificationContent.js.map