@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
44 lines • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = NotificationContent;
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
/** @jsxImportSource @emotion/react */
const react_1 = require("@emotion/react");
const react_2 = require("react");
const timeago_js_1 = require("timeago.js");
const prose_js_1 = require("../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} />
*/
function NotificationContent({ notification, prose: withProse = true }) {
const { sanitizedContent: markup } = notification;
const ref = (0, react_2.useRef)(null);
const prose = (0, prose_js_1.useProse)();
// TODO: Move this to a plugin framework
(0, react_2.useEffect)(() => {
if (!ref.current)
return;
const nodes = ref.current.querySelectorAll('time[datetime]');
if (nodes.length > 0)
(0, timeago_js_1.render)(nodes);
return () => {
(0, timeago_js_1.cancel)();
};
}, [markup]);
if (!markup || markup.replace(/(\n|\s|\r)/gi, '') === '')
return null;
const style = (0, react_1.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 (0, jsx_runtime_1.jsx)("article", { ref: ref, css: withProse ? [style, prose] : style, dangerouslySetInnerHTML: { __html: markup } });
}
//# sourceMappingURL=NotificationContent.js.map