@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
43 lines • 2.06 kB
JavaScript
import { arrow, autoPlacement, autoUpdate, flip, FloatingArrow, offset, useDismiss, useFloating, useInteractions, } from '@floating-ui/react';
import React, { useState } from 'react';
import { useTheme } from '../../context/MagicBellThemeContext.js';
/**
* Notification inbox in a popover.
*
* @example
* <FloatingNotificationInbox height={400} toggle={() => void} isOpen />
*/
export default function FloatingInboxContainer({ launcherRef, isOpen = false, toggle, placement, offset: offsetProp = 10, width = 500, closeOnClickOutside = true, hideArrow = false, arrowPadding = 18, children, }) {
const [arrowEl, setArrowEl] = useState(null);
const theme = useTheme();
const middleware = [placement ? flip() : autoPlacement(), offset(offsetProp)];
if (!hideArrow) {
middleware.push(arrow({
element: arrowEl,
padding: arrowPadding,
}));
}
const floating = useFloating({
placement,
middleware,
strategy: 'absolute',
open: isOpen,
onOpenChange(open, event, reason) {
if (reason === 'outside-press') {
toggle?.();
}
},
elements: { reference: launcherRef.current },
whileElementsMounted: autoUpdate,
});
const dismiss = useDismiss(floating.context, {
referencePress: false,
outsidePress: closeOnClickOutside,
});
const { getFloatingProps } = useInteractions([dismiss]);
const arrowColor = /bottom/i.test(floating.placement) ? theme.footer.backgroundColor : theme.header.backgroundColor;
return (React.createElement(React.Fragment, null, isOpen ? (React.createElement("div", { ref: floating.refs.setFloating, style: { ...floating.floatingStyles, width, maxWidth: `calc(100vw - 10px)`, zIndex: 1 }, ...getFloatingProps() },
children,
hideArrow ? null : (React.createElement(FloatingArrow, { ref: setArrowEl, context: floating.context, tipRadius: 1, width: 18, fill: arrowColor })))) : null));
}
//# sourceMappingURL=FloatingInboxContainer.js.map