react-compact-toast
Version:
A tiny, compact, and fully customizable toast notification library.
2 lines • 4.19 kB
JavaScript
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);let l=require(`react/jsx-runtime`);l=s(l);const u=`bottomCenter`,d=6;let f=function(e){return e[e.Add=0]=`Add`,e[e.Delete=1]=`Delete`,e[e.Update=2]=`Update`,e}({});const p={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===f.Add&&this.activeToastCount>=6||(n.forEach(n=>{let i=setTimeout(()=>{switch(e){case f.Add:n(...t),this.activeToastCount+=1;break;case f.Delete:n(...t),--this.activeToastCount;break;case f.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}},m=e=>{let t=crypto.randomUUID();return p.emit(f.Add,{...e,toastId:t}),t},h=e=>m(typeof e==`string`?{text:e}:e),g=()=>{let[e,t]=(0,c.useState)(new Map),n=(0,c.useCallback)(e=>{t(t=>{let n=new Map(t);return n.set(e.toastId,e),n})},[]),r=(0,c.useCallback)(e=>{t(t=>{if(!t.has(e))return t;let n=new Map(t);return n.delete(e),n})},[]),i=(0,c.useCallback)((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(0,c.useEffect)(()=>(p.on(f.Add,n),p.on(f.Delete,r),p.on(f.Update,i),()=>{p.off(f.Add,n),p.off(f.Delete,r),p.off(f.Update,i),p.cancelEmit(f.Add),p.cancelEmit(f.Delete),p.cancelEmit(f.Update)}),[n,r,i]),{getToastPositionGroupToRender:(0,c.useCallback)(()=>{let t=new Map;return e.forEach(e=>{let n=e.position||u;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])}},_=(e,t,n=!0)=>{let[r,i]=(0,c.useState)(!1);return(0,c.useEffect)(()=>{if(t){let e=setTimeout(()=>i(!0),t);return()=>clearTimeout(e)}},[t]),{isExiting:r,handleAnimationEnd:()=>{r&&p.emit(f.Delete,e)},handleClick:()=>{n&&i(!0)}}},v=({toastId:e,text:t,icon:n,highlightText:r,highlightColor:i,autoClose:a=3e3,closeOnClick:o=!0,position:s=u,offset:c,className:d})=>{let{isExiting:f,handleAnimationEnd:p,handleClick:m}=_(e,a,o),h=s.startsWith(`top`);return(0,l.jsx)(`div`,{className:(()=>{let e=`toast`;return d||(e+=` toast-default-style toast-default-size`),h&&(e+=` toast-top-position`),f?e+=h?` toast-exit-top`:` toast-exit-bottom`:e+=h?` toast-enter-top`:` toast-enter-bottom`,d&&(e+=` ${d}`),e})(),onClick:m,onAnimationEnd:p,children:(0,l.jsxs)(`div`,{className:`toast-content`,children:[(()=>{switch(n){case`default`:return n;case void 0:return null;default:return n}})(),(0,l.jsxs)(`p`,{className:`toast-text`,children:[(0,l.jsx)(`span`,{className:`toast-highlight-text`,style:i?{color:i}:void 0,children:r}),t]})]})})};var y=v;const b=(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}:{}},x=()=>{let{getToastPositionGroupToRender:e}=g(),t=(0,c.useMemo)(()=>e(),[e]);return(0,l.jsx)(c.Fragment,{children:Array.from(t).map(([e,{toasts:t,containerStyle:n}])=>{let r=`toast-container toast-position-${e}`,i={...b(t,e),...n};return(0,l.jsx)(`div`,{className:r,style:i,children:t.map(e=>(0,l.jsx)(y,{...e},e.toastId))},e)})})};var S=(0,c.memo)(x);exports.Toast=y,exports.ToastContainer=S,exports.eventManager=p,exports.toast=h,exports.useToast=_,exports.useToastContainer=g;
//# sourceMappingURL=index.js.map