bro-toastify
Version:
A framework-agnostic toast notification library
4 lines (3 loc) • 8.44 kB
JavaScript
'use client';
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom");const i={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 r(e,t=i.default,a=!0){const{type:r}=t;if("none"===r)return;const n={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:""},o=document.createElement("style");o.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(o);const s=n[r];s&&(e.classList.add(s),e.addEventListener("animationend",(()=>{e.classList.remove(s)}),{once:!0}))}let n="fade";const o={type:"default",duration:3e3,position:"top-right",dismissible:!0,pauseOnHover:!0,customIcon:void 0,customClass:void 0},s=new Map,d=new Map,l=()=>Date.now().toString(36)+Math.random().toString(36).substring(2,5);function m(e){if(!e.message)return void console.error("BroToastify: message is required");const t=e.type||"default",a=e.containerOptions||{},r=a.animation?{...i[a.animation]}:i[n],d={...o,...e,duration:"loading"===e.type?0:e.duration??o.duration,animation:{...i[t],...r,...e.animation}},m=e.id||l(),u={...d,id:m,createdAt:Date.now()};return s.set(m,u),f("create",u),d.duration&&d.duration>0&&"undefined"!=typeof window&&setTimeout((()=>{c(m)}),d.duration),u}function c(e){let t,a;"string"==typeof e?(t=e,a=Array.from(s.values()).find((e=>e.id===t))):(t=e.id,a=e),a&&(s.delete(t),f("dismiss",a),a.onClose&&a.onClose())}function u(e,t){return"undefined"==typeof window?{off:()=>{}}:(d.has(e)||d.set(e,[]),d.get(e).push(t),{off:()=>{const a=d.get(e);if(a){const e=a.indexOf(t);-1!==e&&a.splice(e,1)}}})}function f(e,t){if("undefined"!=typeof window){const a=d.get(e);a&&a.forEach((e=>e(t)))}}const p={show:(e,t)=>m({message:e,type:"show",...t}),default:(e,t)=>m({message:e,type:"default",...t}),success:(e,t)=>m({message:e,type:"success",...t}),error:(e,t)=>m({message:e,type:"error",...t}),info:(e,t)=>m({message:e,type:"info",...t}),warning:(e,t)=>m({message:e,type:"warning",...t}),loading:(e,t)=>{const a=l();return m({id:a,message:e,type:"loading",...t}),{id:a}},promises:(e,t,a)=>{const i=l();return m({id:i,message:t.loading,type:"loading",...a}),e.then((e=>(c(i),m({message:t.success,type:"success",...a}),e))).catch((e=>{throw c(i),m({message:t.error,type:"error",...a}),e})),{id:i}},isToastActive:e=>!!Array.from(s.values()).find((t=>t.id===e)),dismiss:e=>c(e),dismissible:e=>c(e),clearAll:function(){Array.from(s.values()).forEach((e=>{c(e.id)}))}},g=({position:o="top-right",newestOnTop:s=!0,dismissible:d=!1,animation:l="fade"})=>{const[m,f]=t.useState([]),[p,g]=t.useState(!1),b=t.useRef(new Map),y=t.useRef(new Map);t.useEffect((()=>{g(!0),function(e){n=e}(l);const e=u("create",(e=>{const t={...e,animation:e.animation||i[l]};f((e=>s?[t,...e]:[...e,t]))})),t=u("dismiss",(e=>{const t=b.current.get(e.id);t?(r(t,e.animation||i[l],!1),t.addEventListener("animationend",(()=>{f((t=>t.filter((t=>t.id!==e.id)))),b.current.delete(e.id),y.current.delete(e.id)}),{once:!0})):(f((t=>t.filter((t=>t.id!==e.id)))),y.current.delete(e.id))}));return()=>{e.off(),t.off()}}),[s,l]),t.useEffect((()=>{const e=m.map((e=>{if(e.duration&&e.duration>0&&"loading"!==e.type){const t=setTimeout((()=>{c(e.id)}),e.duration);return y.current.set(e.id,t),t}return null}));return()=>{e.forEach((e=>e&&clearTimeout(e)))}}),[m]),t.useEffect((()=>{m.forEach((e=>{const t=b.current.get(e.id);t&&!t.dataset.animated&&(r(t,e.animation||i[l],!0),t.dataset.animated="true")}))}),[m,l]);if(!p)return null;const h={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 a.createPortal(e.jsx("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"}[o]}`,children:m.map((t=>e.jsxs("div",{id:`toast-${t.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 ${h[t.type??"default"]} ${t.customClass||""}`,ref:e=>{e?b.current.set(t.id,e):b.current.delete(t.id)},onMouseEnter:()=>(e=>{const t=y.current.get(e);t&&(clearTimeout(t),y.current.set(e,null))})(t.id),onMouseLeave:()=>(e=>{const t=m.find((t=>t.id===e));if(t&&t.duration&&t.duration>0&&"loading"!==t.type){const a=setTimeout((()=>{c(e)}),t.duration);y.current.set(e,a)}})(t.id),children:[t.title&&e.jsx("div",{className:"font-semibold text-base mb-1.5 tracking-tight",children:t.title}),"loading"===t.type?e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("div",{className:"border-4 border-gray-200 border-t-blue-500 rounded-full w-5 h-5 animate-spin"}),e.jsx("div",{className:"text-sm text-gray-900 animate-[fade_0.3s_ease-in-out]",children:t.message})]}):e.jsx("div",{className:"text-sm tracking-tight",children:t.message}),d&&"loading"!==t.type&&"promises"!==t.type&&e.jsx("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:()=>c(t.id),children:"×"})]},t.id)))}),document.body)};g.displayName="Toaster";exports.Toaster=g,exports.broToastify=()=>({show:(e,t)=>p.show(e,t),success:(e,t)=>p.success(e,t),error:(e,t)=>p.error(e,t),info:(e,t)=>p.info(e,t),warning:(e,t)=>p.warning(e,t),loading:(e,t)=>p.loading(e,t),promises:(e,t,a)=>p.promises(e,t,a),isToastActive:e=>p.isToastActive(e),dismiss:e=>p.dismiss(e),clearAll:()=>p.clearAll()});
//# sourceMappingURL=react.cjs.js.map