design-react-kit
Version:
Componenti React per Bootstrap 5
39 lines • 1.69 kB
JavaScript
import React from 'react';
import { cssTransition, useToastContainer } from 'react-toastify';
import { Notification } from './Notification';
import { getBorderStyleFix } from './NotificationContent';
import { PositionContext } from './usePosition';
const KitTransition = /* @__PURE__ */ cssTransition({
enter: `d-block`,
exit: `d-none`,
appendPosition: false
});
export const NotificationManager = (props) => {
const customStyle = {
...props.style,
...getBorderStyleFix(props.fix)
};
const hookProps = {
autoClose: props.duration ?? 6000,
closeOnClick: props.closeOnClick ?? true,
hideProgressBar: true,
transition: KitTransition,
rtl: false,
pauseOnHover: true,
pauseOnFocusLoss: true,
newestOnTop: false, // TODO: sort this out
draggable: false,
role: 'alert',
style: customStyle,
enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed
};
const { getToastToRender, containerRef, isToastActive } = useToastContainer(hookProps);
const { containerId, style, fix } = props;
return (React.createElement(PositionContext.Provider, { value: fix },
React.createElement("div", { ref: containerRef, id: containerId, style: style }, getToastToRender((_, toastList) => {
return toastList.map(({ content, props: toastProps }) => {
return (React.createElement(Notification, { ...toastProps, isIn: isToastActive(toastProps.toastId), key: `notification-${toastProps.key}` }, content));
});
}))));
};
//# sourceMappingURL=NotificationManager.js.map