react-compact-toast/dist/index.mjs

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

import{Fragment as e,memo as t,useCallback as n,useEffect as r,useMemo as i,useState as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=`bottomCenter`;let l=function(e){return e[e.Add=0]=`Add`,e[e.Delete=1]=`Delete`,e[e.Update=2]=`Update`,e}({});const u={list:new Map,emitQueue:new Map,activeToastCount:0,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t&&this.list.has(e)){let n=this.list.get(e).filter(e=>e!==t);this.list.set(e,n)}else t||this.list.delete(e);return this},emit(e,...t){if(!this.list.has(e))return;let n=this.list.get(e),r=[];e===l.Add&&this.activeToastCount>=6||(n.forEach(n=>{let i=setTimeout(()=>{switch(e){case l.Add:n(...t),this.activeToastCount+=1;break;case l.Delete:n(...t),--this.activeToastCount;break;case l.Update:n(...t);break}},0);r.push(i)}),r.length>0&&this.emitQueue.set(e,[...this.emitQueue.get(e)||[],...r]))},cancelEmit(e){return this.emitQueue.has(e)&&(this.emitQueue.get(e).forEach(clearTimeout),this.emitQueue.delete(e)),this}},d=e=>{let t=crypto.randomUUID();return u.emit(l.Add,{...e,toastId:t}),t},f=e=>d(typeof e==`string`?{text:e}:e),p=()=>{let[e,t]=a(new Map),i=n(e=>{t(t=>{let n=new Map(t);return n.set(e.toastId,e),n})},[]),o=n(e=>{t(t=>{if(!t.has(e))return t;let n=new Map(t);return n.delete(e),n})},[]),s=n((e,n)=>{t(t=>{if(!t.has(e))return t;let r=new Map(t),i=t.get(e);return r.set(e,{...i,text:n}),r})},[]);return r(()=>(u.on(l.Add,i),u.on(l.Delete,o),u.on(l.Update,s),()=>{u.off(l.Add,i),u.off(l.Delete,o),u.off(l.Update,s),u.cancelEmit(l.Add),u.cancelEmit(l.Delete),u.cancelEmit(l.Update)}),[i,o,s]),{getToastPositionGroupToRender:n(()=>{let t=new Map;return e.forEach(e=>{let n=e.position||c;if(!t.has(n))t.set(n,{toasts:[],containerStyle:e.containerStyle});else{let r=t.get(n);e.containerStyle&&!r.containerStyle&&(r.containerStyle=e.containerStyle)}t.get(n).toasts.push(e)}),t},[e])}},m=(e,t,n=!0)=>{let[i,o]=a(!1);return r(()=>{if(t){let e=setTimeout(()=>o(!0),t);return()=>clearTimeout(e)}},[t]),{isExiting:i,handleAnimationEnd:()=>{i&&u.emit(l.Delete,e)},handleClick:()=>{n&&o(!0)}}};var h=({toastId:e,text:t,icon:n,highlightText:r,highlightColor:i,autoClose:a=3e3,closeOnClick:l=!0,position:u=c,offset:d,className:f})=>{let{isExiting:p,handleAnimationEnd:h,handleClick:g}=m(e,a,l),_=u.startsWith(`top`);return o(`div`,{className:(()=>{let e=`toast`;return f||(e+=` toast-default-style toast-default-size`),_&&(e+=` toast-top-position`),p?e+=_?` toast-exit-top`:` toast-exit-bottom`:e+=_?` toast-enter-top`:` toast-enter-bottom`,f&&(e+=` ${f}`),e})(),onClick:g,onAnimationEnd:h,children:s(`div`,{className:`toast-content`,children:[(()=>{switch(n){case`default`:return n;case void 0:return null;default:return n}})(),s(`p`,{className:`toast-text`,children:[o(`span`,{className:`toast-highlight-text`,style:i?{color:i}:void 0,children:r}),t]})]})})};const g=(e,t)=>{let n=e[0];if((n==null?void 0:n.offset)===void 0||(n==null?void 0:n.offset)===null)return{};let r=typeof n.offset==`number`?`${n.offset}px`:n.offset;return t.startsWith(`top`)?{top:r}:t.startsWith(`bottom`)?{bottom:r}:{}};var _=t(()=>{let{getToastPositionGroupToRender:t}=p(),n=i(()=>t(),[t]);return o(e,{children:Array.from(n).map(([e,{toasts:t,containerStyle:n}])=>{let r=`toast-container toast-position-${e}`,i={...g(t,e),...n};return o(`div`,{className:r,style:i,children:t.map(e=>o(h,{...e},e.toastId))},e)})})});export{h as Toast,_ as ToastContainer,u as eventManager,f as toast,m as useToast,p as useToastContainer};
//# sourceMappingURL=index.mjs.map