@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.
132 lines (131 loc) • 10.3 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
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 "./toast-item.css";
import * as __WEBPACK_EXTERNAL_MODULE__button_button_js_973d92d1__ from "../button/button.js";
import * as __WEBPACK_EXTERNAL_MODULE__toast_asset_toast_asset_js_0beefebf__ from "../toast-asset/toast-asset.js";
import * as __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__ from "@zenithui/utils";
function ToastItem({ toast, ...props }) {
const { richColors, animation, position, showCloseButton, disableAutoDismiss, duration, classNames: globalClassNames, removeToast, setToasts } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_toast_js_becabd6a__.useToast)();
const { options } = toast;
const [status, setStatus] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("loading");
const [message, setMessage] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(options?.loading ?? "Loading...");
const timeoutRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
const setTimer = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
if (!(options?.disableAutoDismiss ? options.disableAutoDismiss : disableAutoDismiss)) timeoutRef.current = setTimeout(()=>{
setToasts((prev)=>prev.map((t)=>t.id === toast.id ? {
...t,
remove: true
} : t));
}, options?.duration ? options?.duration : duration);
}, []);
const trackPromise = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(async ()=>{
try {
const promiseData = await toast.message;
setStatus("success");
setMessage("function" == typeof options?.success ? options.success(promiseData) : options?.success ?? "Success !!");
} catch (error) {
setStatus("error");
setMessage("function" == typeof options?.error ? options.error(error) : options?.error ?? "Error !!");
} finally{
setTimer();
}
}, []);
(0, __WEBPACK_EXTERNAL_MODULE_react__.useEffect)(()=>{
if ("promise" === toast.type && "string" != typeof toast.message) trackPromise();
return ()=>{
if (timeoutRef.current) clearTimeout(timeoutRef.current);
};
}, []);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
...props,
role: "alert",
"aria-live": "assertive",
tabIndex: 0,
"data-type": toast.type,
"data-animation": options?.animation ? options.animation : animation,
"data-rich-colors": options?.richColors ? options.richColors : richColors,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-toast-wrapper", options?.richColors ? options.richColors ? (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getToastTheme)(toast.type) : "" : richColors ? (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getToastTheme)(toast.type) : "", (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getToastAnimation)(options?.animation ? options.animation : animation, options?.position ? options.position : position, !toast.remove), options?.classNames ? "string" == typeof options.classNames ? options?.classNames : options?.classNames?.className ?? "" : globalClassNames?.className ?? ""),
onAnimationEnd: ()=>{
if ("promise" !== toast.type && "string" == typeof toast.message) setTimer();
if (toast.remove) removeToast(toast.id);
},
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
"data-icon": toast.type,
children: options?.icon ? options.icon : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__toast_asset_toast_asset_js_0beefebf__.ToastAsset, {
type: "promise" !== toast.type ? toast.type : status,
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.icon ?? "" : "" : globalClassNames?.icon ?? "")
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
"data-wrapper-zenithui": true,
"data-expand": (options?.animation ? options.animation : animation) === "enter-with-icon",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
"data-content": true,
style: {
width: "100%",
display: "flex",
flexDirection: "column"
},
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.title ?? "" : "" : globalClassNames?.title ?? ""),
children: "promise" === toast.type ? message || "" : toast?.options?.title || toast.message
}),
toast?.options?.description ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.description ?? "" : "" : globalClassNames?.description ?? ""),
children: toast.options.description
}) : null
]
}),
options?.action ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(options.action, {
...options.action,
btntype: "action"
}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: options?.onAction ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__button_button_js_973d92d1__["default"], {
btntype: "action",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)(options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.actionButton ?? "" : "" : globalClassNames?.actionButton ?? ""),
onClick: options.onAction,
children: "Action"
}) : null
}),
options?.cancel ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(options.cancel, {
...options.action,
btntype: "action"
}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: options?.onCancel ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__button_button_js_973d92d1__["default"], {
btntype: "cancel",
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("cancel", options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.cancelButton ?? "" : "" : globalClassNames?.cancelButton ?? ""),
onClick: (e)=>{
options?.onCancel?.(e);
setToasts((prev)=>prev.map((t)=>t.id === toast.id ? {
...t,
remove: true
} : t));
},
children: "Cancel"
}) : null
})
]
}),
options?.close ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(options.close, {
...options.action,
btntype: "close"
}) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
children: options?.showCloseButton || showCloseButton ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("button", {
className: (0, __WEBPACK_EXTERNAL_MODULE__zenithui_utils_3fcf552b__.cn)("zenithui-toast-close", options?.richColors ? options.richColors ? `${(0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getToastTheme)(toast.type)} zenithui-toast-close-rich` : "" : richColors ? `${(0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.getToastTheme)(toast.type)} zenithui-toast-close-rich` : "", options?.classNames ? "string" != typeof options.classNames ? options?.classNames?.closeButton ?? "" : "" : globalClassNames?.closeButton ?? ""),
onClick: (e)=>{
options?.onClose?.(e);
if (timeoutRef.current) clearTimeout(timeoutRef.current);
removeToast(toast.id);
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__toast_asset_toast_asset_js_0beefebf__.ICONS.CloseIcon, {})
}) : null
})
]
});
}
export { ToastItem as default };