react-compact-toast/dist/index.mjs

A tiny, compact, and fully customizable toast notification library.

import {memo,useMemo,Fragment,useState,useCallback,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';var f="bottomCenter";var r={list:new Map,emitQueue:new Map,activeToastCount:0,on(t,e){return this.list.has(t)||this.list.set(t,[]),this.list.get(t).push(e),this},off(t,e){if(e&&this.list.has(t)){let o=this.list.get(t).filter(a=>a!==e);this.list.set(t,o);}else e||this.list.delete(t);return this},emit(t,...e){if(!this.list.has(t))return;let s=this.list.get(t),o=[];t===0&&this.activeToastCount>=6||(s.forEach(a=>{let m=setTimeout(()=>{switch(t){case 0:a(...e),this.activeToastCount+=1;break;case 1:a(...e),this.activeToastCount-=1;break;case 2:a(...e);break}},0);o.push(m);}),o.length>0&&this.emitQueue.set(t,[...this.emitQueue.get(t)||[],...o]));},cancelEmit(t){return this.emitQueue.has(t)&&(this.emitQueue.get(t).forEach(clearTimeout),this.emitQueue.delete(t)),this}};var A=t=>{let e=crypto.randomUUID();return r.emit(0,{...t,toastId:e}),e},w=t=>A(typeof t=="string"?{text:t}:t);var x=()=>{let[t,e]=useState(new Map),s=useCallback(i=>{e(p=>{let n=new Map(p);return n.set(i.toastId,i),n});},[]),o=useCallback(i=>{e(p=>{if(!p.has(i))return p;let n=new Map(p);return n.delete(i),n});},[]),a=useCallback((i,p)=>{e(n=>{if(!n.has(i))return n;let c=new Map(n),u=n.get(i);return c.set(i,{...u,text:p}),c});},[]);return useEffect(()=>(r.on(0,s),r.on(1,o),r.on(2,a),()=>{r.off(0,s),r.off(1,o),r.off(2,a),r.cancelEmit(0),r.cancelEmit(1),r.cancelEmit(2);}),[s,o,a]),{getToastPositionGroupToRender:useCallback(()=>{let i=new Map;return t.forEach(p=>{let n=p.position||f;i.has(n)||i.set(n,[]),i.get(n).push(p);}),i},[t])}};var h=(t,e,s=true)=>{let[o,a]=useState(false);return useEffect(()=>{if(e){let p=setTimeout(()=>a(true),e);return ()=>clearTimeout(p)}},[e]),{isExiting:o,handleAnimationEnd:()=>{o&&r.emit(1,t);},handleClick:()=>{s&&a(true);}}};function g(t,{insertAt:e}={}){if(typeof document=="undefined")return;let s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",e==="top"&&s.firstChild?s.insertBefore(o,s.firstChild):s.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t));}g(`@keyframes toastEnterFromBottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes toastExitToBottom{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(100%)}}@keyframes toastEnterFromTop{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes toastExitToTop{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-100%)}}.toast{position:relative;min-width:320px;min-height:50px;display:flex;justify-content:center;align-items:center;text-align:center;z-index:9999;box-shadow:0 0 6px #00000026;cursor:pointer;pointer-events:auto;touch-action:auto}.toast-default-style{background-color:#fff;color:#121212;border-radius:24px}.toast-content{display:flex;justify-content:center;align-items:center;gap:4px}.toast-text{overflow:hidden;text-overflow:ellipsis;white-space:pre-line;max-width:270px}.toast-highlight-text{color:#a9e34b}.toast-enter-top{animation:toastEnterFromTop .5s ease-out forwards}.toast-exit-top{animation:toastExitToTop .5s ease-in forwards}.toast-enter-bottom{animation:toastEnterFromBottom .5s ease-out forwards}.toast-exit-bottom{animation:toastExitToBottom .5s ease-in forwards}.toast-container{display:flex;flex-direction:column;gap:10px;width:100vw;position:fixed;z-index:1000}.toast-position-bottomCenter{align-items:center;bottom:30px;left:0}.toast-position-bottomLeft{align-items:flex-start;bottom:30px;left:20px}.toast-position-bottomRight{align-items:flex-end;bottom:30px;right:20px}.toast-position-topCenter{align-items:center;left:0;top:30px}.toast-position-topLeft{align-items:flex-start;left:20px;top:30px}.toast-position-topRight{align-items:flex-end;right:20px;top:30px}
`);var D=({toastId:t,text:e,icon:s,highlightText:o,highlightColor:a,autoClose:m=3e3,closeOnClick:i=true,position:p=f,className:n})=>{let{isExiting:c,handleAnimationEnd:u,handleClick:k}=h(t,m,i),T=p.startsWith("top"),M=()=>{switch(s){case "default":return s;case void 0:return null;default:return s}};return jsx("div",{className:(()=>{let l="toast";return n||(l+=" toast-default-style toast-default-size"),T&&(l+=" toast-top-position"),c?l+=T?" toast-exit-top":" toast-exit-bottom":l+=T?" toast-enter-top":" toast-enter-bottom",n&&(l+=` ${n}`),l})(),onClick:k,onAnimationEnd:u,children:jsxs("div",{className:"toast-content",children:[M(),jsxs("p",{className:"toast-text",children:[jsx("span",{className:"toast-highlight-text",style:a?{color:a}:void 0,children:o}),e]})]})})},v=D;var L=()=>{let{getToastPositionGroupToRender:t}=x(),e=useMemo(()=>t(),[t]);return jsx(Fragment,{children:Array.from(e).map(([s,o])=>jsx("div",{className:`toast-container toast-position-${s}`,children:o.map(a=>jsx(v,{...a},a.toastId))},s))})},R=memo(L);export{v as Toast,R as ToastContainer,r as eventManager,w as toast,h as useToast,x as useToastContainer};//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map