bro-toastify
Version:
A framework-agnostic toast notification library
4 lines (3 loc) • 8.35 kB
JavaScript
'use client';
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a,useRef as i,useEffect as r}from"react";import{createPortal as n}from"react-dom";const o={default:{type:"fade",duration:300,easing:"ease"},success:{type:"fade",duration:300,easing:"ease"},error:{type:"fade",duration:300,easing:"ease"},info:{type:"fade",duration:300,easing:"ease"},warning:{type:"fade",duration:500,easing:"ease"},loading:{type:"fade",duration:300,easing:"ease"},show:{type:"fade",duration:300,easing:"ease"},promises:{type:"fade",duration:300,easing:"ease"},fade:{type:"fade",duration:300,easing:"ease"},"top-slide":{type:"top-slide",duration:300,easing:"ease"},"right-slide":{type:"right-slide",duration:300,easing:"ease"},"bottom-slide":{type:"bottom-slide",duration:300,easing:"ease"},"left-slide":{type:"left-slide",duration:300,easing:"ease"},zoom:{type:"zoom",duration:300,easing:"ease"},flip:{type:"flip",duration:300,easing:"ease"},bounce:{type:"bounce",duration:300,easing:"ease"},none:{type:"none",duration:0,easing:"ease"}};function s(e,t=o.default,a=!0){const{type:i}=t;if("none"===i)return;const r={fade:"animate-fade","top-slide":a?"animate-topSlide":"animate-topSlideReverse","right-slide":a?"animate-rightSlide":"animate-rightSlideReverse","bottom-slide":a?"animate-bottomSlide":"animate-bottomSlideReverse","left-slide":a?"animate-leftSlide":"animate-leftSlideReverse",zoom:"animate-zoom",flip:"animate-flip",bounce:"animate-bounce",none:""},n=document.createElement("style");n.textContent="\n .animate-topSlideReverse {\n animation: topSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes topSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(-100%); opacity: 0; }\n }\n .animate-rightSlideReverse {\n animation: rightSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes rightSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(100%); opacity: 0; }\n }\n .animate-bottomSlideReverse {\n animation: bottomSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes bottomSlideReverse {\n from { transform: translateY(0); opacity: 1; }\n to { transform: translateY(100%); opacity: 0; }\n }\n .animate-leftSlideReverse {\n animation: leftSlideReverse 0.3s ease-in-out forwards;\n }\n @keyframes leftSlideReverse {\n from { transform: translateX(0); opacity: 1; }\n to { transform: translateX(-100%); opacity: 0; }\n }\n ",document.head.appendChild(n);const s=r[i];s&&(e.classList.add(s),e.addEventListener("animationend",(()=>{e.classList.remove(s)}),{once:!0}))}let d="fade";const l={type:"default",duration:3e3,position:"top-right",dismissible:!0,pauseOnHover:!0,customIcon:void 0,customClass:void 0},m=new Map,c=new Map,u=()=>Date.now().toString(36)+Math.random().toString(36).substring(2,5);function f(e){if(!e.message)return void console.error("BroToastify: message is required");const t=e.type||"default",a=e.containerOptions||{},i=a.animation?{...o[a.animation]}:o[d],r={...l,...e,duration:"loading"===e.type?0:e.duration??l.duration,animation:{...o[t],...i,...e.animation}},n=e.id||u(),s={...r,id:n,createdAt:Date.now()};return m.set(n,s),b("create",s),r.duration&&r.duration>0&&"undefined"!=typeof window&&setTimeout((()=>{p(n)}),r.duration),s}function p(e){let t,a;"string"==typeof e?(t=e,a=Array.from(m.values()).find((e=>e.id===t))):(t=e.id,a=e),a&&(m.delete(t),b("dismiss",a),a.onClose&&a.onClose())}function g(e,t){return"undefined"==typeof window?{off:()=>{}}:(c.has(e)||c.set(e,[]),c.get(e).push(t),{off:()=>{const a=c.get(e);if(a){const e=a.indexOf(t);-1!==e&&a.splice(e,1)}}})}function b(e,t){if("undefined"!=typeof window){const a=c.get(e);a&&a.forEach((e=>e(t)))}}const y={show:(e,t)=>f({message:e,type:"show",...t}),default:(e,t)=>f({message:e,type:"default",...t}),success:(e,t)=>f({message:e,type:"success",...t}),error:(e,t)=>f({message:e,type:"error",...t}),info:(e,t)=>f({message:e,type:"info",...t}),warning:(e,t)=>f({message:e,type:"warning",...t}),loading:(e,t)=>{const a=u();return f({id:a,message:e,type:"loading",...t}),{id:a}},promises:(e,t,a)=>{const i=u();return f({id:i,message:t.loading,type:"loading",...a}),e.then((e=>(p(i),f({message:t.success,type:"success",...a}),e))).catch((e=>{throw p(i),f({message:t.error,type:"error",...a}),e})),{id:i}},isToastActive:e=>!!Array.from(m.values()).find((t=>t.id===e)),dismiss:e=>p(e),dismissible:e=>p(e),clearAll:function(){Array.from(m.values()).forEach((e=>{p(e.id)}))}},h=({position:l="top-right",newestOnTop:m=!0,dismissible:c=!1,animation:u="fade"})=>{const[f,b]=a([]),[y,h]=a(!1),w=i(new Map),v=i(new Map);r((()=>{h(!0),function(e){d=e}(u);const e=g("create",(e=>{const t={...e,animation:e.animation||o[u]};b((e=>m?[t,...e]:[...e,t]))})),t=g("dismiss",(e=>{const t=w.current.get(e.id);t?(s(t,e.animation||o[u],!1),t.addEventListener("animationend",(()=>{b((t=>t.filter((t=>t.id!==e.id)))),w.current.delete(e.id),v.current.delete(e.id)}),{once:!0})):(b((t=>t.filter((t=>t.id!==e.id)))),v.current.delete(e.id))}));return()=>{e.off(),t.off()}}),[m,u]),r((()=>{const e=f.map((e=>{if(e.duration&&e.duration>0&&"loading"!==e.type){const t=setTimeout((()=>{p(e.id)}),e.duration);return v.current.set(e.id,t),t}return null}));return()=>{e.forEach((e=>e&&clearTimeout(e)))}}),[f]),r((()=>{f.forEach((e=>{const t=w.current.get(e.id);t&&!t.dataset.animated&&(s(t,e.animation||o[u],!0),t.dataset.animated="true")}))}),[f,u]);if(!y)return null;const x={default:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",success:"bg-green-500/90 backdrop-blur-md border border-green-600 text-white",error:"bg-red-500/90 backdrop-blur-md border border-red-600 text-white",info:"bg-blue-500/90 backdrop-blur-md border border-blue-600 text-white",warning:"bg-yellow-500/90 backdrop-blur-md border border-yellow-600 text-white",loading:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",promises:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",show:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900",dismiss:"bg-white/80 backdrop-blur-md border border-gray-200 text-gray-900"};return n(e("div",{className:`bro-toastify-container ${{"top-right":"top-4 right-4 items-end","top-left":"top-4 left-4 items-start","bottom-right":"bottom-4 right-4 items-end","bottom-left":"bottom-4 left-4 items-start","top-center":"top-4 left-1/2 -translate-x-1/2 items-center","bottom-center":"bottom-4 left-1/2 -translate-x-1/2 items-center"}[l]}`,children:f.map((a=>t("div",{id:`toast-${a.id}`,className:`relative min-w-[300px] max-w-[500px] p-4 rounded-xl shadow-md flex flex-col opacity-100 transition-all duration-300 hover:scale-105 hover:shadow-lg ${x[a.type??"default"]} ${a.customClass||""}`,ref:e=>{e?w.current.set(a.id,e):w.current.delete(a.id)},onMouseEnter:()=>(e=>{const t=v.current.get(e);t&&(clearTimeout(t),v.current.set(e,null))})(a.id),onMouseLeave:()=>(e=>{const t=f.find((t=>t.id===e));if(t&&t.duration&&t.duration>0&&"loading"!==t.type){const a=setTimeout((()=>{p(e)}),t.duration);v.current.set(e,a)}})(a.id),children:[a.title&&e("div",{className:"font-semibold text-base mb-1.5 tracking-tight",children:a.title}),"loading"===a.type?t("div",{className:"flex items-center gap-3",children:[e("div",{className:"border-4 border-gray-200 border-t-blue-500 rounded-full w-5 h-5 animate-spin"}),e("div",{className:"text-sm text-gray-900 animate-[fade_0.3s_ease-in-out]",children:a.message})]}):e("div",{className:"text-sm tracking-tight",children:a.message}),c&&"loading"!==a.type&&"promises"!==a.type&&e("button",{className:"absolute top-2 right-2 w-6 h-6 flex items-center justify-center rounded-full bg-gray-200/50 text-gray-600 text-sm font-semibold hover:bg-gray-300/70 hover:text-gray-900 transition-all duration-200","aria-label":"Close",onClick:()=>p(a.id),children:"×"})]},a.id)))}),document.body)};h.displayName="Toaster";const w=()=>({show:(e,t)=>y.show(e,t),success:(e,t)=>y.success(e,t),error:(e,t)=>y.error(e,t),info:(e,t)=>y.info(e,t),warning:(e,t)=>y.warning(e,t),loading:(e,t)=>y.loading(e,t),promises:(e,t,a)=>y.promises(e,t,a),isToastActive:e=>y.isToastActive(e),dismiss:e=>y.dismiss(e),clearAll:()=>y.clearAll()});export{h as Toaster,w as broToastify};
//# sourceMappingURL=react.esm.js.map