@zenithui/toast
Version:
A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.
50 lines (49 loc) • 3 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import "./toast-container.css";
import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__ from "react-dom";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_toast_js_becabd6a__ from "../../hooks/use-toast.js";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
const ToastItem = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.lazy)(()=>import("../toast-item/toast-item.js"));
function ToastContainer({ toasts, className, ...props }) {
const { position: globalPosition, X_Offset, Y_Offset } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_toast_js_becabd6a__.useToast)();
const groupedToasts = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>toasts.reduce((acc, toast)=>{
const childPosition = toast?.options?.position ?? globalPosition;
if (!acc[childPosition]) acc[childPosition] = [];
acc[childPosition].push(toast);
return acc;
}, {}), [
toasts
]);
const memoizedGroupedToasts = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>Object.entries(groupedToasts).reduce((acc, [position, positionToasts])=>{
acc[position] = [
"bottom-left",
"bottom-center",
"bottom-right"
].includes(position) ? (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.reverseToasts)(positionToasts) : positionToasts;
return acc;
}, {}), [
groupedToasts
]);
return Object.entries(memoizedGroupedToasts).map(([position, toasts])=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__.createPortal)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(MemoToastContainer, {
position: position,
X_Offset: X_Offset,
Y_Offset: Y_Offset,
toasts: toasts,
className: className,
...props
}), document.body));
}
const MemoToastContainer = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.memo)(({ position, X_Offset, Y_Offset, toasts, className, ...props })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
style: {
"--x-offset": `${X_Offset + 12}px`,
"--y-offset": `${Y_Offset + 12}px`
},
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-toast-container", className, (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getPositionClass)(position)),
...props,
children: toasts.map((toast)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ToastItem, {
toast: toast
}, toast.id))
}, position));
export { ToastContainer as default };