Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-toastify

Package Overview
Dependencies
Maintainers
1
Versions
154
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-toastify - npm Package Compare versions

Comparing version 9.0.5 to 9.0.6-vite-1

2

addons/use-notification-center/useNotificationCenter.d.ts

@@ -44,3 +44,3 @@ import { ToastItem, Id } from 'react-toastify';

*/
notifications: NotificationCenterItem[];
notifications: NotificationCenterItem<Data>[];
/**

@@ -47,0 +47,0 @@ * Clear all notifications

1422

dist/react-toastify.js

@@ -1,2 +0,1422 @@

var e=require("react"),t=require("clsx");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=/*#__PURE__*/n(e),s=/*#__PURE__*/n(t);function a(e){return"number"==typeof e&&!isNaN(e)}function r(e){return"boolean"==typeof e}function i(e){return"string"==typeof e}function l(e){return"function"==typeof e}function c(e){return i(e)||l(e)?e:null}function u(e){return 0===e||e}function d(t){return e.isValidElement(t)||i(t)||l(t)||a(t)}const f={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},p={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"};function m(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame(()=>{s.minHeight="initial",s.height=o+"px",s.transition="all "+n+"ms",requestAnimationFrame(()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)})})}function g(t){let{enter:n,exit:s,appendPosition:a=!1,collapse:r=!0,collapseDuration:i=300}=t;return function(t){let{children:l,position:c,preventExitTransition:u,done:d,nodeRef:f,isIn:p}=t;const g=a?n+"--"+c:n,y=a?s+"--"+c:s,h=e.useRef(),T=e.useRef(0);function v(e){if(e.target!==f.current)return;const t=f.current;t.dispatchEvent(new Event("d")),t.removeEventListener("animationend",v),t.removeEventListener("animationcancel",v),0===T.current&&"animationcancel"!==e.type&&(t.className=h.current)}function E(){const e=f.current;e.removeEventListener("animationend",E),r?m(e,d,i):d()}return e.useLayoutEffect(()=>{!function(){const e=f.current;h.current=e.className,e.className+=" "+g,e.addEventListener("animationend",v),e.addEventListener("animationcancel",v)}()},[]),e.useEffect(()=>{p||(u?E():function(){T.current=1;const e=f.current;e.className+=" "+y,e.addEventListener("animationend",E)}())},[p]),o.default.createElement(o.default.Fragment,null,l)}}function y(e,t){return{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}}const h={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter(e=>e!==t);return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach(t=>{const n=setTimeout(()=>{t(...[].slice.call(arguments,1))},0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)})}},T=e=>{let{theme:t,type:n,...s}=e;return o.default.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":"var(--toastify-icon-color-"+n+")",...s})},v={info:function(e){return o.default.createElement(T,{...e},o.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return o.default.createElement(T,{...e},o.default.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return o.default.createElement(T,{...e},o.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return o.default.createElement(T,{...e},o.default.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return o.default.createElement("div",{className:"Toastify__spinner"})}};function E(t){const[,n]=e.useReducer(e=>e+1,0),[o,s]=e.useState([]),f=e.useRef(null),p=e.useRef(new Map).current,m=e=>-1!==o.indexOf(e),g=e.useRef({toastKey:1,displayedToast:0,count:0,queue:[],props:t,containerId:null,isToastActive:m,getToast:e=>p.get(e)}).current;function T(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function E(e){s(t=>u(e)?t.filter(t=>t!==e):[])}function b(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();_(e,t,n)}function C(t,o){let{delay:s,staleId:m,...T}=o;if(!d(t)||function(e){return!f.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||p.has(e.toastId)&&null==e.updateId}(T))return;const{toastId:C,updateId:I,data:O}=T,{props:L}=g,N=()=>E(C),x=null==I;x&&g.count++;const R={toastId:C,updateId:I,data:O,containerId:T.containerId,isLoading:T.isLoading,theme:T.theme||L.theme,icon:null!=T.icon?T.icon:L.icon,isIn:!1,key:T.key||g.toastKey++,type:T.type,closeToast:N,closeButton:T.closeButton,rtl:L.rtl,position:T.position||L.position,transition:T.transition||L.transition,className:c(T.className||L.toastClassName),bodyClassName:c(T.bodyClassName||L.bodyClassName),style:T.style||L.toastStyle,bodyStyle:T.bodyStyle||L.bodyStyle,onClick:T.onClick||L.onClick,pauseOnHover:r(T.pauseOnHover)?T.pauseOnHover:L.pauseOnHover,pauseOnFocusLoss:r(T.pauseOnFocusLoss)?T.pauseOnFocusLoss:L.pauseOnFocusLoss,draggable:r(T.draggable)?T.draggable:L.draggable,draggablePercent:T.draggablePercent||L.draggablePercent,draggableDirection:T.draggableDirection||L.draggableDirection,closeOnClick:r(T.closeOnClick)?T.closeOnClick:L.closeOnClick,progressClassName:c(T.progressClassName||L.progressClassName),progressStyle:T.progressStyle||L.progressStyle,autoClose:!T.isLoading&&(P=T.autoClose,B=L.autoClose,!1===P||a(P)&&P>0?P:B),hideProgressBar:r(T.hideProgressBar)?T.hideProgressBar:L.hideProgressBar,progress:T.progress,role:T.role||L.role,deleteToast(){const e=y(p.get(C),"removed");p.delete(C),h.emit(4,e);const t=g.queue.length;if(g.count=u(C)?g.count-1:g.count-g.displayedToast,g.count<0&&(g.count=0),t>0){const e=u(C)?1:g.props.limit;if(1===t||1===e)g.displayedToast++,b();else{const n=e>t?t:e;g.displayedToast=n;for(let e=0;e<n;e++)b()}}else n()}};var P,B;R.iconOut=function(t){let{theme:n,type:o,isLoading:s,icon:r}=t,c=null;const u={theme:n,type:o};return!1===r||(l(r)?c=r(u):e.isValidElement(r)?c=e.cloneElement(r,u):i(r)||a(r)?c=r:s?c=v.spinner():(e=>e in v)(o)&&(c=v[o](u))),c}(R),l(T.onOpen)&&(R.onOpen=T.onOpen),l(T.onClose)&&(R.onClose=T.onClose),R.closeButton=L.closeButton,!1===T.closeButton||d(T.closeButton)?R.closeButton=T.closeButton:!0===T.closeButton&&(R.closeButton=!d(L.closeButton)||L.closeButton);let k=t;e.isValidElement(t)&&!i(t.type)?k=e.cloneElement(t,{closeToast:N,toastProps:R,data:O}):l(t)&&(k=t({closeToast:N,toastProps:R,data:O})),L.limit&&L.limit>0&&g.count>L.limit&&x?g.queue.push({toastContent:k,toastProps:R,staleId:m}):a(s)?setTimeout(()=>{_(k,R,m)},s):_(k,R,m)}function _(e,t,n){const{toastId:o}=t;n&&p.delete(n);const a={content:e,props:t};p.set(o,a),s(e=>[...e,o].filter(e=>e!==n)),h.emit(4,y(a,null==a.props.updateId?"added":"updated"))}return e.useEffect(()=>(g.containerId=t.containerId,h.cancelEmit(3).on(0,C).on(1,e=>f.current&&E(e)).on(5,T).emit(2,g),()=>h.emit(3,g)),[]),e.useEffect(()=>{g.props=t,g.isToastActive=m,g.displayedToast=o.length}),{getToastToRender:function(e){const n=new Map,o=Array.from(p.values());return t.newestOnTop&&o.reverse(),o.forEach(e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)}),Array.from(n,t=>e(t[0],t[1]))},containerRef:f,isToastActive:m}}function b(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function C(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function _(t){const[n,o]=e.useState(!1),[s,a]=e.useState(!1),r=e.useRef(null),i=e.useRef({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,c=e.useRef(t),{autoClose:u,pauseOnHover:d,closeToast:f,onClick:p,closeOnClick:m}=t;function g(e){if(t.draggable){i.didMove=!1,document.addEventListener("mousemove",v),document.addEventListener("mouseup",E),document.addEventListener("touchmove",v),document.addEventListener("touchend",E);const n=r.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=b(e.nativeEvent),i.y=C(e.nativeEvent),"x"===t.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(t.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===t.draggablePercent?1.5*t.draggablePercent:t.draggablePercent/100))}}function y(){if(i.boundingRect){const{top:e,bottom:n,left:o,right:s}=i.boundingRect;t.pauseOnHover&&i.x>=o&&i.x<=s&&i.y>=e&&i.y<=n?T():h()}}function h(){o(!0)}function T(){o(!1)}function v(e){const o=r.current;i.canDrag&&o&&(i.didMove=!0,n&&T(),i.x=b(e),i.y=C(e),i.delta="x"===t.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform="translate"+t.draggableDirection+"("+i.delta+"px)",o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function E(){document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",E),document.removeEventListener("touchmove",v),document.removeEventListener("touchend",E);const e=r.current;if(i.canDrag&&i.didMove&&e){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return a(!0),void t.closeToast();e.style.transition="transform 0.2s, opacity 0.2s",e.style.transform="translate"+t.draggableDirection+"(0)",e.style.opacity="1"}}e.useEffect(()=>{c.current=t}),e.useEffect(()=>(r.current&&r.current.addEventListener("d",h,{once:!0}),l(t.onOpen)&&t.onOpen(e.isValidElement(t.children)&&t.children.props),()=>{const t=c.current;l(t.onClose)&&t.onClose(e.isValidElement(t.children)&&t.children.props)}),[]),e.useEffect(()=>(t.pauseOnFocusLoss&&(document.hasFocus()||T(),window.addEventListener("focus",h),window.addEventListener("blur",T)),()=>{t.pauseOnFocusLoss&&(window.removeEventListener("focus",h),window.removeEventListener("blur",T))}),[t.pauseOnFocusLoss]);const _={onMouseDown:g,onTouchStart:g,onMouseUp:y,onTouchEnd:y};return u&&d&&(_.onMouseEnter=T,_.onMouseLeave=h),m&&(_.onClick=e=>{p&&p(e),i.canCloseOnClick&&f()}),{playToast:h,pauseToast:T,isRunning:n,preventExitTransition:s,toastRef:r,eventHandlers:_}}function I(e){let{closeToast:t,theme:n,ariaLabel:s="close"}=e;return o.default.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+n,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":s},o.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},o.default.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function O(e){let{delay:t,isRunning:n,closeToast:a,type:r,hide:i,className:c,style:u,controlledProgress:d,progress:f,rtl:p,isIn:m,theme:g}=e;const y={...u,animationDuration:t+"ms",animationPlayState:n?"running":"paused",opacity:i?0:1};d&&(y.transform="scaleX("+f+")");const h=s.default("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar-theme--"+g,"Toastify__progress-bar--"+r,{"Toastify__progress-bar--rtl":p}),T=l(c)?c({rtl:p,type:r,defaultClassName:h}):s.default(h,c);return o.default.createElement("div",{role:"progressbar","aria-hidden":i?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&f>=1?"onTransitionEnd":"onAnimationEnd"]:d&&f<1?null:()=>{m&&a()}})}O.defaultProps={type:p.DEFAULT,hide:!1};const L=e=>{const{isRunning:t,preventExitTransition:n,toastRef:a,eventHandlers:r}=_(e),{closeButton:i,children:c,autoClose:u,onClick:d,type:f,hideProgressBar:p,closeToast:m,transition:g,position:y,className:h,style:T,bodyClassName:v,bodyStyle:E,progressClassName:b,progressStyle:C,updateId:L,role:N,progress:x,rtl:R,toastId:P,deleteToast:B,isIn:k,isLoading:M,iconOut:w,theme:D}=e,A=s.default("Toastify__toast","Toastify__toast-theme--"+D,"Toastify__toast--"+f,{"Toastify__toast--rtl":R}),S=l(h)?h({rtl:R,position:y,type:f,defaultClassName:A}):s.default(A,h),F=!!x,z={closeToast:m,type:f,theme:D};let H=null;return!1===i||(H=l(i)?i(z):o.default.isValidElement(i)?o.default.cloneElement(i,z):I(z)),o.default.createElement(g,{isIn:k,done:B,position:y,preventExitTransition:n,nodeRef:a},o.default.createElement("div",{id:P,onClick:d,className:S,...r,style:T,ref:a},o.default.createElement("div",{...k&&{role:N},className:l(v)?v({type:f}):s.default("Toastify__toast-body",v),style:E},null!=w&&o.default.createElement("div",{className:s.default("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!M})},w),o.default.createElement("div",null,c)),H,(u||F)&&o.default.createElement(O,{...L&&!F?{key:"pb-"+L}:{},rtl:R,theme:D,delay:u,isRunning:t,isIn:k,closeToast:m,hide:p,type:f,style:C,className:b,controlledProgress:F,progress:x})))},N=g({enter:"Toastify--animate Toastify__bounce-enter",exit:"Toastify--animate Toastify__bounce-exit",appendPosition:!0}),x=g({enter:"Toastify--animate Toastify__slide-enter",exit:"Toastify--animate Toastify__slide-exit",appendPosition:!0}),R=g({enter:"Toastify--animate Toastify__zoom-enter",exit:"Toastify--animate Toastify__zoom-exit"}),P=g({enter:"Toastify--animate Toastify__flip-enter",exit:"Toastify--animate Toastify__flip-exit"}),B=e.forwardRef((t,n)=>{const{getToastToRender:a,containerRef:r,isToastActive:i}=E(t),{className:u,style:d,rtl:f,containerId:p}=t;function m(e){const t=s.default("Toastify__toast-container","Toastify__toast-container--"+e,{"Toastify__toast-container--rtl":f});return l(u)?u({position:e,rtl:f,defaultClassName:t}):s.default(t,c(u))}return e.useEffect(()=>{n&&(n.current=r.current)},[]),o.default.createElement("div",{ref:r,className:"Toastify",id:p},a((e,t)=>{const n=t.length?{...d}:{...d,pointerEvents:"none"};return o.default.createElement("div",{className:m(e),style:n,key:"container-"+e},t.map((e,n)=>{let{content:s,props:a}=e;return o.default.createElement(L,{...a,isIn:i(a.toastId),style:{...a.style,"--nth":n+1,"--len":t.length},key:"toast-"+a.key},s)}))}))});B.displayName="ToastContainer",B.defaultProps={position:f.TOP_RIGHT,transition:N,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:I,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let k,M=new Map,w=[];function D(){return Math.random().toString(36).substring(2,9)}function A(e){return e&&(i(e.toastId)||a(e.toastId))?e.toastId:D()}function S(e,t){return M.size>0?h.emit(0,e,t):w.push({content:e,options:t}),t.toastId}function F(e,t){return{...t,type:t&&t.type||e,toastId:A(t)}}function z(e){return(t,n)=>S(t,F(e,n))}function H(e,t){return S(e,F(p.DEFAULT,t))}H.loading=(e,t)=>S(e,F(p.DEFAULT,{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),H.promise=function(e,t,n){let o,{pending:s,error:a,success:r}=t;s&&(o=i(s)?H.loading(s,n):H.loading(s.render,{...n,...s}));const c={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null,delay:100},u=(e,t,s)=>{if(null==t)return void H.dismiss(o);const a={type:e,...c,...n,data:s},r=i(t)?{render:t}:t;return o?H.update(o,{...a,...r}):H(r.render,{...a,...r}),s},d=l(e)?e():e;return d.then(e=>u("success",r,e)).catch(e=>u("error",a,e)),d},H.success=z(p.SUCCESS),H.info=z(p.INFO),H.error=z(p.ERROR),H.warning=z(p.WARNING),H.warn=H.warning,H.dark=(e,t)=>S(e,F(p.DEFAULT,{theme:"dark",...t})),H.dismiss=e=>h.emit(1,e),H.clearWaitingQueue=function(e){return void 0===e&&(e={}),h.emit(5,e)},H.isActive=e=>{let t=!1;return M.forEach(n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)}),t},H.update=function(e,t){void 0===t&&(t={}),setTimeout(()=>{const n=function(e,t){let{containerId:n}=t;const o=M.get(n||k);return o?o.getToast(e):null}(e,t);if(n){const{props:o,content:s}=n,a={...o,...t,toastId:t.toastId||e,updateId:D()};a.toastId!==e&&(a.staleId=e);const r=a.render||s;delete a.render,S(r,a)}},0)},H.done=e=>{H.update(e,{progress:1})},H.onChange=e=>(h.on(4,e),()=>{h.off(4,e)}),H.POSITION=f,H.TYPE=p,h.on(2,e=>{k=e.containerId||e,M.set(k,e),w.forEach(e=>{h.emit(0,e.content,e.options)}),w=[]}).on(3,e=>{M.delete(e.containerId||e),0===M.size&&h.off(0).off(1).off(5)}),exports.Bounce=N,exports.Flip=P,exports.Icons=v,exports.Slide=x,exports.ToastContainer=B,exports.Zoom=R,exports.collapseToast=m,exports.cssTransition=g,exports.toast=H,exports.useToast=_,exports.useToastContainer=E;
var React = require('react');
var cx = require('clsx');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
function isNum(v) {
return typeof v === 'number' && !isNaN(v);
}
function isBool(v) {
return typeof v === 'boolean';
}
function isStr(v) {
return typeof v === 'string';
}
function isFn(v) {
return typeof v === 'function';
}
function parseClassName(v) {
return isStr(v) || isFn(v) ? v : null;
}
function isToastIdValid(toastId) {
return toastId === 0 || toastId;
}
function getAutoCloseDelay(toastAutoClose, containerAutoClose) {
return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : containerAutoClose;
}
function canBeRendered(content) {
return React.isValidElement(content) || isStr(content) || isFn(content) || isNum(content);
}
const POSITION = {
TOP_LEFT: 'top-left',
TOP_RIGHT: 'top-right',
TOP_CENTER: 'top-center',
BOTTOM_LEFT: 'bottom-left',
BOTTOM_RIGHT: 'bottom-right',
BOTTOM_CENTER: 'bottom-center'
};
const TYPE = {
INFO: 'info',
SUCCESS: 'success',
WARNING: 'warning',
ERROR: 'error',
DEFAULT: 'default'
};
/**
* Used to collapse toast after exit animation
*/
function collapseToast(node, done, duration
/* Default.COLLAPSE_DURATION */
) {
if (duration === void 0) {
duration = 300;
}
const {
scrollHeight,
style
} = node;
requestAnimationFrame(() => {
style.minHeight = 'initial';
style.height = scrollHeight + 'px';
style.transition = "all " + duration + "ms";
requestAnimationFrame(() => {
style.height = '0';
style.padding = '0';
style.margin = '0';
setTimeout(done, duration);
});
});
}
/**
* Css animation that just work.
* You could use animate.css for instance
*
*
* ```
* cssTransition({
* enter: "animate__animated animate__bounceIn",
* exit: "animate__animated animate__bounceOut"
* })
* ```
*
*/
function cssTransition(_ref) {
let {
enter,
exit,
appendPosition = false,
collapse = true,
collapseDuration = 300
/* Default.COLLAPSE_DURATION */
} = _ref;
return function ToastTransition(_ref2) {
let {
children,
position,
preventExitTransition,
done,
nodeRef,
isIn
} = _ref2;
const enterClassName = appendPosition ? enter + "--" + position : enter;
const exitClassName = appendPosition ? exit + "--" + position : exit;
const baseClassName = React.useRef();
const animationStep = React.useRef(0
/* AnimationStep.Enter */
);
React.useLayoutEffect(() => {
onEnter();
}, []);
React.useEffect(() => {
if (!isIn) preventExitTransition ? onExited() : onExit();
}, [isIn]);
function onEnter() {
const node = nodeRef.current;
baseClassName.current = node.className;
node.className += " " + enterClassName;
node.addEventListener('animationend', onEntered);
node.addEventListener('animationcancel', onEntered);
}
function onEntered(e) {
if (e.target !== nodeRef.current) return;
const node = nodeRef.current;
node.dispatchEvent(new Event("d"
/* SyntheticEvent.ENTRANCE_ANIMATION_END */
));
node.removeEventListener('animationend', onEntered);
node.removeEventListener('animationcancel', onEntered);
if (animationStep.current === 0
/* AnimationStep.Enter */
&& e.type !== 'animationcancel') {
node.className = baseClassName.current;
}
}
function onExit() {
animationStep.current = 1
/* AnimationStep.Exit */
;
const node = nodeRef.current;
node.className += " " + exitClassName;
node.addEventListener('animationend', onExited);
}
function onExited() {
const node = nodeRef.current;
node.removeEventListener('animationend', onExited);
collapse ? collapseToast(node, done, collapseDuration) : done();
}
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
};
}
function toToastItem(toast, status) {
return {
content: toast.content,
containerId: toast.props.containerId,
id: toast.props.toastId,
theme: toast.props.theme,
type: toast.props.type,
data: toast.props.data || {},
isLoading: toast.props.isLoading,
icon: toast.props.icon,
status
};
}
const eventManager = {
list: new Map(),
emitQueue: new Map(),
on(event, callback) {
this.list.has(event) || this.list.set(event, []);
this.list.get(event).push(callback);
return this;
},
off(event, callback) {
if (callback) {
const cb = this.list.get(event).filter(cb => cb !== callback);
this.list.set(event, cb);
return this;
}
this.list.delete(event);
return this;
},
cancelEmit(event) {
const timers = this.emitQueue.get(event);
if (timers) {
timers.forEach(clearTimeout);
this.emitQueue.delete(event);
}
return this;
},
/**
* Enqueue the event at the end of the call stack
* Doing so let the user call toast as follow:
* toast('1')
* toast('2')
* toast('3')
* Without setTimemout the code above will not work
*/
emit(event) {
this.list.has(event) && this.list.get(event).forEach(callback => {
const timer = setTimeout(() => {
// @ts-ignore
callback(...[].slice.call(arguments, 1));
}, 0);
this.emitQueue.has(event) || this.emitQueue.set(event, []);
this.emitQueue.get(event).push(timer);
});
}
};
const Svg = _ref => {
let {
theme,
type,
...rest
} = _ref;
return React__default["default"].createElement("svg", {
viewBox: "0 0 24 24",
width: "100%",
height: "100%",
fill: theme === 'colored' ? 'currentColor' : "var(--toastify-icon-color-" + type + ")",
...rest
});
};
function Warning(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"
}));
}
function Info(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"
}));
}
function Success(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"
}));
}
function Error(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"
}));
}
function Spinner() {
return React__default["default"].createElement("div", {
className: "Toastify"
/* Default.CSS_NAMESPACE */
+ "__spinner"
});
}
const Icons = {
info: Info,
warning: Warning,
success: Success,
error: Error,
spinner: Spinner
};
const maybeIcon = type => type in Icons;
function getIcon(_ref2) {
let {
theme,
type,
isLoading,
icon
} = _ref2;
let Icon = null;
const iconProps = {
theme,
type
};
if (icon === false) ; else if (isFn(icon)) {
Icon = icon(iconProps);
} else if (React.isValidElement(icon)) {
Icon = React.cloneElement(icon, iconProps);
} else if (isStr(icon) || isNum(icon)) {
Icon = icon;
} else if (isLoading) {
Icon = Icons.spinner();
} else if (maybeIcon(type)) {
Icon = Icons[type](iconProps);
}
return Icon;
}
function useToastContainer(props) {
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
const [toastIds, setToastIds] = React.useState([]);
const containerRef = React.useRef(null);
const toastToRender = React.useRef(new Map()).current;
const isToastActive = id => toastIds.indexOf(id) !== -1;
const instance = React.useRef({
toastKey: 1,
displayedToast: 0,
count: 0,
queue: [],
props,
containerId: null,
isToastActive,
getToast: id => toastToRender.get(id)
}).current;
React.useEffect(() => {
instance.containerId = props.containerId;
eventManager.cancelEmit(3
/* Event.WillUnmount */
).on(0
/* Event.Show */
, buildToast).on(1
/* Event.Clear */
, toastId => containerRef.current && removeToast(toastId)).on(5
/* Event.ClearWaitingQueue */
, clearWaitingQueue).emit(2
/* Event.DidMount */
, instance);
return () => eventManager.emit(3
/* Event.WillUnmount */
, instance);
}, []);
React.useEffect(() => {
instance.props = props;
instance.isToastActive = isToastActive;
instance.displayedToast = toastIds.length;
});
function clearWaitingQueue(_ref) {
let {
containerId
} = _ref;
const {
limit
} = instance.props;
if (limit && (!containerId || instance.containerId === containerId)) {
instance.count -= instance.queue.length;
instance.queue = [];
}
}
function removeToast(toastId) {
setToastIds(state => isToastIdValid(toastId) ? state.filter(id => id !== toastId) : []);
}
function dequeueToast() {
const {
toastContent,
toastProps,
staleId
} = instance.queue.shift();
appendToast(toastContent, toastProps, staleId);
}
/**
* check if a container is attached to the dom
* check for multi-container, build only if associated
* check for duplicate toastId if no update
*/
function isNotValid(options) {
return !containerRef.current || instance.props.enableMultiContainer && options.containerId !== instance.props.containerId || toastToRender.has(options.toastId) && options.updateId == null;
} // this function and all the function called inside needs to rely on refs
function buildToast(content, _ref2) {
let {
delay,
staleId,
...options
} = _ref2;
if (!canBeRendered(content) || isNotValid(options)) return;
const {
toastId,
updateId,
data
} = options;
const {
props
} = instance;
const closeToast = () => removeToast(toastId);
const isNotAnUpdate = updateId == null;
if (isNotAnUpdate) instance.count++;
const toastProps = {
toastId,
updateId,
data,
containerId: options.containerId,
isLoading: options.isLoading,
theme: options.theme || props.theme,
icon: options.icon != null ? options.icon : props.icon,
isIn: false,
key: options.key || instance.toastKey++,
type: options.type,
closeToast: closeToast,
closeButton: options.closeButton,
rtl: props.rtl,
position: options.position || props.position,
transition: options.transition || props.transition,
className: parseClassName(options.className || props.toastClassName),
bodyClassName: parseClassName(options.bodyClassName || props.bodyClassName),
style: options.style || props.toastStyle,
bodyStyle: options.bodyStyle || props.bodyStyle,
onClick: options.onClick || props.onClick,
pauseOnHover: isBool(options.pauseOnHover) ? options.pauseOnHover : props.pauseOnHover,
pauseOnFocusLoss: isBool(options.pauseOnFocusLoss) ? options.pauseOnFocusLoss : props.pauseOnFocusLoss,
draggable: isBool(options.draggable) ? options.draggable : props.draggable,
draggablePercent: options.draggablePercent || props.draggablePercent,
draggableDirection: options.draggableDirection || props.draggableDirection,
closeOnClick: isBool(options.closeOnClick) ? options.closeOnClick : props.closeOnClick,
progressClassName: parseClassName(options.progressClassName || props.progressClassName),
progressStyle: options.progressStyle || props.progressStyle,
autoClose: options.isLoading ? false : getAutoCloseDelay(options.autoClose, props.autoClose),
hideProgressBar: isBool(options.hideProgressBar) ? options.hideProgressBar : props.hideProgressBar,
progress: options.progress,
role: options.role || props.role,
deleteToast() {
const removed = toToastItem(toastToRender.get(toastId), 'removed');
toastToRender.delete(toastId);
eventManager.emit(4
/* Event.Change */
, removed);
const queueLen = instance.queue.length;
instance.count = isToastIdValid(toastId) ? instance.count - 1 : instance.count - instance.displayedToast;
if (instance.count < 0) instance.count = 0;
if (queueLen > 0) {
const freeSlot = isToastIdValid(toastId) ? 1 : instance.props.limit;
if (queueLen === 1 || freeSlot === 1) {
instance.displayedToast++;
dequeueToast();
} else {
const toDequeue = freeSlot > queueLen ? queueLen : freeSlot;
instance.displayedToast = toDequeue;
for (let i = 0; i < toDequeue; i++) dequeueToast();
}
} else {
forceUpdate();
}
}
};
toastProps.iconOut = getIcon(toastProps);
if (isFn(options.onOpen)) toastProps.onOpen = options.onOpen;
if (isFn(options.onClose)) toastProps.onClose = options.onClose;
toastProps.closeButton = props.closeButton;
if (options.closeButton === false || canBeRendered(options.closeButton)) {
toastProps.closeButton = options.closeButton;
} else if (options.closeButton === true) {
toastProps.closeButton = canBeRendered(props.closeButton) ? props.closeButton : true;
}
let toastContent = content;
if (React.isValidElement(content) && !isStr(content.type)) {
toastContent = React.cloneElement(content, {
closeToast,
toastProps,
data
});
} else if (isFn(content)) {
toastContent = content({
closeToast,
toastProps,
data
});
} // not handling limit + delay by design. Waiting for user feedback first
if (props.limit && props.limit > 0 && instance.count > props.limit && isNotAnUpdate) {
instance.queue.push({
toastContent,
toastProps,
staleId
});
} else if (isNum(delay)) {
setTimeout(() => {
appendToast(toastContent, toastProps, staleId);
}, delay);
} else {
appendToast(toastContent, toastProps, staleId);
}
}
function appendToast(content, toastProps, staleId) {
const {
toastId
} = toastProps;
if (staleId) toastToRender.delete(staleId);
const toast = {
content,
props: toastProps
};
toastToRender.set(toastId, toast);
setToastIds(state => [...state, toastId].filter(id => id !== staleId));
eventManager.emit(4
/* Event.Change */
, toToastItem(toast, toast.props.updateId == null ? 'added' : 'updated'));
}
function getToastToRender(cb) {
const toRender = new Map();
const collection = Array.from(toastToRender.values());
if (props.newestOnTop) collection.reverse();
collection.forEach(toast => {
const {
position
} = toast.props;
toRender.has(position) || toRender.set(position, []);
toRender.get(position).push(toast);
});
return Array.from(toRender, p => cb(p[0], p[1]));
}
return {
getToastToRender,
containerRef,
isToastActive
};
}
function getX(e) {
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.clientX;
}
function getY(e) {
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.clientY;
}
function useToast(props) {
const [isRunning, setIsRunning] = React.useState(false);
const [preventExitTransition, setPreventExitTransition] = React.useState(false);
const toastRef = React.useRef(null);
const drag = React.useRef({
start: 0,
x: 0,
y: 0,
delta: 0,
removalDistance: 0,
canCloseOnClick: true,
canDrag: false,
boundingRect: null,
didMove: false
}).current;
const syncProps = React.useRef(props);
const {
autoClose,
pauseOnHover,
closeToast,
onClick,
closeOnClick
} = props;
React.useEffect(() => {
syncProps.current = props;
});
React.useEffect(() => {
if (toastRef.current) toastRef.current.addEventListener("d"
/* SyntheticEvent.ENTRANCE_ANIMATION_END */
, playToast, {
once: true
});
if (isFn(props.onOpen)) props.onOpen(React.isValidElement(props.children) && props.children.props);
return () => {
const props = syncProps.current;
if (isFn(props.onClose)) props.onClose(React.isValidElement(props.children) && props.children.props);
};
}, []);
React.useEffect(() => {
props.pauseOnFocusLoss && bindFocusEvents();
return () => {
props.pauseOnFocusLoss && unbindFocusEvents();
};
}, [props.pauseOnFocusLoss]);
function onDragStart(e) {
if (props.draggable) {
bindDragEvents();
const toast = toastRef.current;
drag.canCloseOnClick = true;
drag.canDrag = true;
drag.boundingRect = toast.getBoundingClientRect();
toast.style.transition = '';
drag.x = getX(e.nativeEvent);
drag.y = getY(e.nativeEvent);
if (props.draggableDirection === "x"
/* Direction.X */
) {
drag.start = drag.x;
drag.removalDistance = toast.offsetWidth * (props.draggablePercent / 100);
} else {
drag.start = drag.y;
drag.removalDistance = toast.offsetHeight * (props.draggablePercent === 80
/* Default.DRAGGABLE_PERCENT */
? props.draggablePercent * 1.5 : props.draggablePercent / 100);
}
}
}
function onDragTransitionEnd() {
if (drag.boundingRect) {
const {
top,
bottom,
left,
right
} = drag.boundingRect;
if (props.pauseOnHover && drag.x >= left && drag.x <= right && drag.y >= top && drag.y <= bottom) {
pauseToast();
} else {
playToast();
}
}
}
function playToast() {
setIsRunning(true);
}
function pauseToast() {
setIsRunning(false);
}
function bindFocusEvents() {
if (!document.hasFocus()) pauseToast();
window.addEventListener('focus', playToast);
window.addEventListener('blur', pauseToast);
}
function unbindFocusEvents() {
window.removeEventListener('focus', playToast);
window.removeEventListener('blur', pauseToast);
}
function bindDragEvents() {
drag.didMove = false;
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
document.addEventListener('touchmove', onDragMove);
document.addEventListener('touchend', onDragEnd);
}
function unbindDragEvents() {
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
document.removeEventListener('touchmove', onDragMove);
document.removeEventListener('touchend', onDragEnd);
}
function onDragMove(e) {
const toast = toastRef.current;
if (drag.canDrag && toast) {
drag.didMove = true;
if (isRunning) pauseToast();
drag.x = getX(e);
drag.y = getY(e);
if (props.draggableDirection === "x"
/* Direction.X */
) {
drag.delta = drag.x - drag.start;
} else {
drag.delta = drag.y - drag.start;
} // prevent false positif during a toast click
if (drag.start !== drag.x) drag.canCloseOnClick = false;
toast.style.transform = "translate" + props.draggableDirection + "(" + drag.delta + "px)";
toast.style.opacity = "" + (1 - Math.abs(drag.delta / drag.removalDistance));
}
}
function onDragEnd() {
unbindDragEvents();
const toast = toastRef.current;
if (drag.canDrag && drag.didMove && toast) {
drag.canDrag = false;
if (Math.abs(drag.delta) > drag.removalDistance) {
setPreventExitTransition(true);
props.closeToast();
return;
}
toast.style.transition = 'transform 0.2s, opacity 0.2s';
toast.style.transform = "translate" + props.draggableDirection + "(0)";
toast.style.opacity = '1';
}
}
const eventHandlers = {
onMouseDown: onDragStart,
onTouchStart: onDragStart,
onMouseUp: onDragTransitionEnd,
onTouchEnd: onDragTransitionEnd
};
if (autoClose && pauseOnHover) {
eventHandlers.onMouseEnter = pauseToast;
eventHandlers.onMouseLeave = playToast;
} // prevent toast from closing when user drags the toast
if (closeOnClick) {
eventHandlers.onClick = e => {
onClick && onClick(e);
drag.canCloseOnClick && closeToast();
};
}
return {
playToast,
pauseToast,
isRunning,
preventExitTransition,
toastRef,
eventHandlers
};
}
function CloseButton(_ref) {
let {
closeToast,
theme,
ariaLabel = 'close'
} = _ref;
return React__default["default"].createElement("button", {
className: "Toastify"
/* Default.CSS_NAMESPACE */
+ "__close-button " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__close-button--" + theme,
type: "button",
onClick: e => {
e.stopPropagation();
closeToast(e);
},
"aria-label": ariaLabel
}, React__default["default"].createElement("svg", {
"aria-hidden": "true",
viewBox: "0 0 14 16"
}, React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
})));
}
function ProgressBar(_ref) {
let {
delay,
isRunning,
closeToast,
type,
hide,
className,
style: userStyle,
controlledProgress,
progress,
rtl,
isIn,
theme
} = _ref;
const style = { ...userStyle,
animationDuration: delay + "ms",
animationPlayState: isRunning ? 'running' : 'paused',
opacity: hide ? 0 : 1
};
if (controlledProgress) style.transform = "scaleX(" + progress + ")";
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar", controlledProgress ? "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--controlled" : "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--animated", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar-theme--" + theme, "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--" + type, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--rtl"]: rtl
});
const classNames = isFn(className) ? className({
rtl,
type,
defaultClassName
}) : cx__default["default"](defaultClassName, className); // 🧐 controlledProgress is derived from progress
// so if controlledProgress is set
// it means that this is also the case for progress
const animationEvent = {
[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd']: controlledProgress && progress < 1 ? null : () => {
isIn && closeToast();
}
}; // TODO: add aria-valuenow, aria-valuemax, aria-valuemin
return React__default["default"].createElement("div", {
role: "progressbar",
"aria-hidden": hide ? 'true' : 'false',
"aria-label": "notification timer",
className: classNames,
style: style,
...animationEvent
});
}
ProgressBar.defaultProps = {
type: TYPE.DEFAULT,
hide: false
};
const Toast = props => {
const {
isRunning,
preventExitTransition,
toastRef,
eventHandlers
} = useToast(props);
const {
closeButton,
children,
autoClose,
onClick,
type,
hideProgressBar,
closeToast,
transition: Transition,
position,
className,
style,
bodyClassName,
bodyStyle,
progressClassName,
progressStyle,
updateId,
role,
progress,
rtl,
toastId,
deleteToast,
isIn,
isLoading,
iconOut,
theme
} = props;
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-theme--" + theme, "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast--" + type, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast--rtl"]: rtl
});
const cssClasses = isFn(className) ? className({
rtl,
position,
type,
defaultClassName
}) : cx__default["default"](defaultClassName, className);
const isProgressControlled = !!progress;
const closeButtonProps = {
closeToast,
type,
theme
};
let Close = null;
if (closeButton === false) ; else if (isFn(closeButton)) {
Close = closeButton(closeButtonProps);
} else if (React__default["default"].isValidElement(closeButton)) {
Close = React__default["default"].cloneElement(closeButton, closeButtonProps);
} else {
Close = CloseButton(closeButtonProps);
}
return React__default["default"].createElement(Transition, {
isIn: isIn,
done: deleteToast,
position: position,
preventExitTransition: preventExitTransition,
nodeRef: toastRef
}, React__default["default"].createElement("div", {
id: toastId,
onClick: onClick,
className: cssClasses,
...eventHandlers,
style: style,
ref: toastRef
}, React__default["default"].createElement("div", { ...(isIn && {
role: role
}),
className: isFn(bodyClassName) ? bodyClassName({
type
}) : cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-body", bodyClassName),
style: bodyStyle
}, iconOut != null && React__default["default"].createElement("div", {
className: cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-icon", {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate-icon " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-enter"]: !isLoading
})
}, iconOut), React__default["default"].createElement("div", null, children)), Close, (autoClose || isProgressControlled) && React__default["default"].createElement(ProgressBar, { ...(updateId && !isProgressControlled ? {
key: "pb-" + updateId
} : {}),
rtl: rtl,
theme: theme,
delay: autoClose,
isRunning: isRunning,
isIn: isIn,
closeToast: closeToast,
hide: hideProgressBar,
type: type,
style: progressStyle,
className: progressClassName,
controlledProgress: isProgressControlled,
progress: progress
})));
};
const Bounce = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__bounce-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__bounce-exit",
appendPosition: true
});
const Slide = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__slide-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__slide-exit",
appendPosition: true
});
const Zoom = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-exit"
});
const Flip = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__flip-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__flip-exit"
});
// https://github.com/yannickcr/eslint-plugin-react/issues/3140
const ToastContainer = React.forwardRef((props, ref) => {
const {
getToastToRender,
containerRef,
isToastActive
} = useToastContainer(props);
const {
className,
style,
rtl,
containerId
} = props;
function getClassName(position) {
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container--" + position, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container--rtl"]: rtl
});
return isFn(className) ? className({
position,
rtl,
defaultClassName
}) : cx__default["default"](defaultClassName, parseClassName(className));
}
React.useEffect(() => {
if (ref) {
ref.current = containerRef.current;
}
}, []);
return React__default["default"].createElement("div", {
ref: containerRef,
className: "Toastify"
/* Default.CSS_NAMESPACE */
,
id: containerId
}, getToastToRender((position, toastList) => {
const containerStyle = !toastList.length ? { ...style,
pointerEvents: 'none'
} : { ...style
};
return React__default["default"].createElement("div", {
className: getClassName(position),
style: containerStyle,
key: "container-" + position
}, toastList.map((_ref, i) => {
let {
content,
props: toastProps
} = _ref;
return React__default["default"].createElement(Toast, { ...toastProps,
isIn: isToastActive(toastProps.toastId),
style: { ...toastProps.style,
'--nth': i + 1,
'--len': toastList.length
},
key: "toast-" + toastProps.key
}, content);
}));
}));
});
ToastContainer.displayName = 'ToastContainer';
ToastContainer.defaultProps = {
position: POSITION.TOP_RIGHT,
transition: Bounce,
rtl: false,
autoClose: 5000,
hideProgressBar: false,
closeButton: CloseButton,
pauseOnHover: true,
pauseOnFocusLoss: true,
closeOnClick: true,
newestOnTop: false,
draggable: true,
draggablePercent: 80
/* Default.DRAGGABLE_PERCENT */
,
draggableDirection: "x"
/* Direction.X */
,
role: 'alert',
theme: 'light'
};
let containers = new Map();
let latestInstance;
let queue = [];
/**
* Get the toast by id, given it's in the DOM, otherwise returns null
*/
function getToast(toastId, _ref) {
let {
containerId
} = _ref;
const container = containers.get(containerId || latestInstance);
if (!container) return null;
return container.getToast(toastId);
}
/**
* Generate a random toastId
*/
function generateToastId() {
return Math.random().toString(36).substring(2, 9);
}
/**
* Generate a toastId or use the one provided
*/
function getToastId(options) {
if (options && (isStr(options.toastId) || isNum(options.toastId))) {
return options.toastId;
}
return generateToastId();
}
/**
* If the container is not mounted, the toast is enqueued and
* the container lazy mounted
*/
function dispatchToast(content, options) {
if (containers.size > 0) {
eventManager.emit(0
/* Event.Show */
, content, options);
} else {
queue.push({
content,
options
});
}
return options.toastId;
}
/**
* Merge provided options with the defaults settings and generate the toastId
*/
function mergeOptions(type, options) {
return { ...options,
type: options && options.type || type,
toastId: getToastId(options)
};
}
function createToastByType(type) {
return (content, options) => dispatchToast(content, mergeOptions(type, options));
}
function toast(content, options) {
return dispatchToast(content, mergeOptions(TYPE.DEFAULT, options));
}
toast.loading = (content, options) => dispatchToast(content, mergeOptions(TYPE.DEFAULT, {
isLoading: true,
autoClose: false,
closeOnClick: false,
closeButton: false,
draggable: false,
...options
}));
function handlePromise(promise, _ref2, options) {
let {
pending,
error,
success
} = _ref2;
let id;
if (pending) {
id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, { ...options,
...pending
});
}
const resetParams = {
isLoading: null,
autoClose: null,
closeOnClick: null,
closeButton: null,
draggable: null,
delay: 100
};
const resolver = (type, input, result) => {
// Remove the toast if the input has not been provided. This prevents the toast from hanging
// in the pending state if a success/error toast has not been provided.
if (input == null) {
toast.dismiss(id);
return;
}
const baseParams = {
type,
...resetParams,
...options,
data: result
};
const params = isStr(input) ? {
render: input
} : input; // if the id is set we know that it's an update
if (id) {
toast.update(id, { ...baseParams,
...params
});
} else {
// using toast.promise without loading
toast(params.render, { ...baseParams,
...params
});
}
return result;
};
const p = isFn(promise) ? promise() : promise; //call the resolvers only when needed
p.then(result => resolver('success', success, result)).catch(err => resolver('error', error, err));
return p;
}
toast.promise = handlePromise;
toast.success = createToastByType(TYPE.SUCCESS);
toast.info = createToastByType(TYPE.INFO);
toast.error = createToastByType(TYPE.ERROR);
toast.warning = createToastByType(TYPE.WARNING);
toast.warn = toast.warning;
toast.dark = (content, options) => dispatchToast(content, mergeOptions(TYPE.DEFAULT, {
theme: 'dark',
...options
}));
/**
* Remove toast programmaticaly
*/
toast.dismiss = id => eventManager.emit(1
/* Event.Clear */
, id);
/**
* Clear waiting queue when limit is used
*/
toast.clearWaitingQueue = function (params) {
if (params === void 0) {
params = {};
}
return eventManager.emit(5
/* Event.ClearWaitingQueue */
, params);
};
/**
* return true if one container is displaying the toast
*/
toast.isActive = id => {
let isToastActive = false;
containers.forEach(container => {
if (container.isToastActive && container.isToastActive(id)) {
isToastActive = true;
}
});
return isToastActive;
};
toast.update = function (toastId, options) {
if (options === void 0) {
options = {};
}
// if you call toast and toast.update directly nothing will be displayed
// this is why I defered the update
setTimeout(() => {
const toast = getToast(toastId, options);
if (toast) {
const {
props: oldOptions,
content: oldContent
} = toast;
const nextOptions = { ...oldOptions,
...options,
toastId: options.toastId || toastId,
updateId: generateToastId()
};
if (nextOptions.toastId !== toastId) nextOptions.staleId = toastId;
const content = nextOptions.render || oldContent;
delete nextOptions.render;
dispatchToast(content, nextOptions);
}
}, 0);
};
/**
* Used for controlled progress bar.
*/
toast.done = id => {
toast.update(id, {
progress: 1
});
};
/**
* Subscribe to change when a toast is added, removed and updated
*
* Usage:
* ```
* const unsubscribe = toast.onChange((payload) => {
* switch (payload.status) {
* case "added":
* // new toast added
* break;
* case "updated":
* // toast updated
* break;
* case "removed":
* // toast has been removed
* break;
* }
* })
* ```
*/
toast.onChange = callback => {
eventManager.on(4
/* Event.Change */
, callback);
return () => {
eventManager.off(4
/* Event.Change */
, callback);
};
};
toast.POSITION = POSITION;
toast.TYPE = TYPE;
/**
* Wait until the ToastContainer is mounted to dispatch the toast
* and attach isActive method
*/
eventManager.on(2
/* Event.DidMount */
, containerInstance => {
latestInstance = containerInstance.containerId || containerInstance;
containers.set(latestInstance, containerInstance);
queue.forEach(item => {
eventManager.emit(0
/* Event.Show */
, item.content, item.options);
});
queue = [];
}).on(3
/* Event.WillUnmount */
, containerInstance => {
containers.delete(containerInstance.containerId || containerInstance);
if (containers.size === 0) {
eventManager.off(0
/* Event.Show */
).off(1
/* Event.Clear */
).off(5
/* Event.ClearWaitingQueue */
);
}
});
exports.Bounce = Bounce;
exports.Flip = Flip;
exports.Icons = Icons;
exports.Slide = Slide;
exports.ToastContainer = ToastContainer;
exports.Zoom = Zoom;
exports.collapseToast = collapseToast;
exports.cssTransition = cssTransition;
exports.toast = toast;
exports.useToast = useToast;
exports.useToastContainer = useToastContainer;
//# sourceMappingURL=react-toastify.js.map

1426

dist/react-toastify.umd.js

@@ -1,2 +0,1426 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("clsx")):"function"==typeof define&&define.amd?define(["exports","react","clsx"],t):t((e||self).reactToastify={},e.react,e.clsx)}(this,function(e,t,n){function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=/*#__PURE__*/o(t),a=/*#__PURE__*/o(n);function r(e){return"number"==typeof e&&!isNaN(e)}function i(e){return"boolean"==typeof e}function l(e){return"string"==typeof e}function c(e){return"function"==typeof e}function u(e){return l(e)||c(e)?e:null}function d(e){return 0===e||e}function f(e){return t.isValidElement(e)||l(e)||c(e)||r(e)}const p={TOP_LEFT:"top-left",TOP_RIGHT:"top-right",TOP_CENTER:"top-center",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right",BOTTOM_CENTER:"bottom-center"},m={INFO:"info",SUCCESS:"success",WARNING:"warning",ERROR:"error",DEFAULT:"default"};function g(e,t,n){void 0===n&&(n=300);const{scrollHeight:o,style:s}=e;requestAnimationFrame(()=>{s.minHeight="initial",s.height=o+"px",s.transition="all "+n+"ms",requestAnimationFrame(()=>{s.height="0",s.padding="0",s.margin="0",setTimeout(t,n)})})}function y(e){let{enter:n,exit:o,appendPosition:a=!1,collapse:r=!0,collapseDuration:i=300}=e;return function(e){let{children:l,position:c,preventExitTransition:u,done:d,nodeRef:f,isIn:p}=e;const m=a?n+"--"+c:n,y=a?o+"--"+c:o,h=t.useRef(),T=t.useRef(0);function v(e){if(e.target!==f.current)return;const t=f.current;t.dispatchEvent(new Event("d")),t.removeEventListener("animationend",v),t.removeEventListener("animationcancel",v),0===T.current&&"animationcancel"!==e.type&&(t.className=h.current)}function E(){const e=f.current;e.removeEventListener("animationend",E),r?g(e,d,i):d()}return t.useLayoutEffect(()=>{!function(){const e=f.current;h.current=e.className,e.className+=" "+m,e.addEventListener("animationend",v),e.addEventListener("animationcancel",v)}()},[]),t.useEffect(()=>{p||(u?E():function(){T.current=1;const e=f.current;e.className+=" "+y,e.addEventListener("animationend",E)}())},[p]),s.default.createElement(s.default.Fragment,null,l)}}function h(e,t){return{content:e.content,containerId:e.props.containerId,id:e.props.toastId,theme:e.props.theme,type:e.props.type,data:e.props.data||{},isLoading:e.props.isLoading,icon:e.props.icon,status:t}}const T={list:new Map,emitQueue:new Map,on(e,t){return this.list.has(e)||this.list.set(e,[]),this.list.get(e).push(t),this},off(e,t){if(t){const n=this.list.get(e).filter(e=>e!==t);return this.list.set(e,n),this}return this.list.delete(e),this},cancelEmit(e){const t=this.emitQueue.get(e);return t&&(t.forEach(clearTimeout),this.emitQueue.delete(e)),this},emit(e){this.list.has(e)&&this.list.get(e).forEach(t=>{const n=setTimeout(()=>{t(...[].slice.call(arguments,1))},0);this.emitQueue.has(e)||this.emitQueue.set(e,[]),this.emitQueue.get(e).push(n)})}},v=e=>{let{theme:t,type:n,...o}=e;return s.default.createElement("svg",{viewBox:"0 0 24 24",width:"100%",height:"100%",fill:"colored"===t?"currentColor":"var(--toastify-icon-color-"+n+")",...o})},E={info:function(e){return s.default.createElement(v,{...e},s.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"}))},warning:function(e){return s.default.createElement(v,{...e},s.default.createElement("path",{d:"M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"}))},success:function(e){return s.default.createElement(v,{...e},s.default.createElement("path",{d:"M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"}))},error:function(e){return s.default.createElement(v,{...e},s.default.createElement("path",{d:"M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"}))},spinner:function(){return s.default.createElement("div",{className:"Toastify__spinner"})}};function b(e){const[,n]=t.useReducer(e=>e+1,0),[o,s]=t.useState([]),a=t.useRef(null),p=t.useRef(new Map).current,m=e=>-1!==o.indexOf(e),g=t.useRef({toastKey:1,displayedToast:0,count:0,queue:[],props:e,containerId:null,isToastActive:m,getToast:e=>p.get(e)}).current;function y(e){let{containerId:t}=e;const{limit:n}=g.props;!n||t&&g.containerId!==t||(g.count-=g.queue.length,g.queue=[])}function v(e){s(t=>d(e)?t.filter(t=>t!==e):[])}function b(){const{toastContent:e,toastProps:t,staleId:n}=g.queue.shift();_(e,t,n)}function C(e,o){let{delay:s,staleId:m,...y}=o;if(!f(e)||function(e){return!a.current||g.props.enableMultiContainer&&e.containerId!==g.props.containerId||p.has(e.toastId)&&null==e.updateId}(y))return;const{toastId:C,updateId:I,data:O}=y,{props:L}=g,N=()=>v(C),R=null==I;R&&g.count++;const x={toastId:C,updateId:I,data:O,containerId:y.containerId,isLoading:y.isLoading,theme:y.theme||L.theme,icon:null!=y.icon?y.icon:L.icon,isIn:!1,key:y.key||g.toastKey++,type:y.type,closeToast:N,closeButton:y.closeButton,rtl:L.rtl,position:y.position||L.position,transition:y.transition||L.transition,className:u(y.className||L.toastClassName),bodyClassName:u(y.bodyClassName||L.bodyClassName),style:y.style||L.toastStyle,bodyStyle:y.bodyStyle||L.bodyStyle,onClick:y.onClick||L.onClick,pauseOnHover:i(y.pauseOnHover)?y.pauseOnHover:L.pauseOnHover,pauseOnFocusLoss:i(y.pauseOnFocusLoss)?y.pauseOnFocusLoss:L.pauseOnFocusLoss,draggable:i(y.draggable)?y.draggable:L.draggable,draggablePercent:y.draggablePercent||L.draggablePercent,draggableDirection:y.draggableDirection||L.draggableDirection,closeOnClick:i(y.closeOnClick)?y.closeOnClick:L.closeOnClick,progressClassName:u(y.progressClassName||L.progressClassName),progressStyle:y.progressStyle||L.progressStyle,autoClose:!y.isLoading&&(P=y.autoClose,B=L.autoClose,!1===P||r(P)&&P>0?P:B),hideProgressBar:i(y.hideProgressBar)?y.hideProgressBar:L.hideProgressBar,progress:y.progress,role:y.role||L.role,deleteToast(){const e=h(p.get(C),"removed");p.delete(C),T.emit(4,e);const t=g.queue.length;if(g.count=d(C)?g.count-1:g.count-g.displayedToast,g.count<0&&(g.count=0),t>0){const e=d(C)?1:g.props.limit;if(1===t||1===e)g.displayedToast++,b();else{const n=e>t?t:e;g.displayedToast=n;for(let e=0;e<n;e++)b()}}else n()}};var P,B;x.iconOut=function(e){let{theme:n,type:o,isLoading:s,icon:a}=e,i=null;const u={theme:n,type:o};return!1===a||(c(a)?i=a(u):t.isValidElement(a)?i=t.cloneElement(a,u):l(a)||r(a)?i=a:s?i=E.spinner():(e=>e in E)(o)&&(i=E[o](u))),i}(x),c(y.onOpen)&&(x.onOpen=y.onOpen),c(y.onClose)&&(x.onClose=y.onClose),x.closeButton=L.closeButton,!1===y.closeButton||f(y.closeButton)?x.closeButton=y.closeButton:!0===y.closeButton&&(x.closeButton=!f(L.closeButton)||L.closeButton);let k=e;t.isValidElement(e)&&!l(e.type)?k=t.cloneElement(e,{closeToast:N,toastProps:x,data:O}):c(e)&&(k=e({closeToast:N,toastProps:x,data:O})),L.limit&&L.limit>0&&g.count>L.limit&&R?g.queue.push({toastContent:k,toastProps:x,staleId:m}):r(s)?setTimeout(()=>{_(k,x,m)},s):_(k,x,m)}function _(e,t,n){const{toastId:o}=t;n&&p.delete(n);const a={content:e,props:t};p.set(o,a),s(e=>[...e,o].filter(e=>e!==n)),T.emit(4,h(a,null==a.props.updateId?"added":"updated"))}return t.useEffect(()=>(g.containerId=e.containerId,T.cancelEmit(3).on(0,C).on(1,e=>a.current&&v(e)).on(5,y).emit(2,g),()=>T.emit(3,g)),[]),t.useEffect(()=>{g.props=e,g.isToastActive=m,g.displayedToast=o.length}),{getToastToRender:function(t){const n=new Map,o=Array.from(p.values());return e.newestOnTop&&o.reverse(),o.forEach(e=>{const{position:t}=e.props;n.has(t)||n.set(t,[]),n.get(t).push(e)}),Array.from(n,e=>t(e[0],e[1]))},containerRef:a,isToastActive:m}}function C(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientX:e.clientX}function _(e){return e.targetTouches&&e.targetTouches.length>=1?e.targetTouches[0].clientY:e.clientY}function I(e){const[n,o]=t.useState(!1),[s,a]=t.useState(!1),r=t.useRef(null),i=t.useRef({start:0,x:0,y:0,delta:0,removalDistance:0,canCloseOnClick:!0,canDrag:!1,boundingRect:null,didMove:!1}).current,l=t.useRef(e),{autoClose:u,pauseOnHover:d,closeToast:f,onClick:p,closeOnClick:m}=e;function g(t){if(e.draggable){i.didMove=!1,document.addEventListener("mousemove",v),document.addEventListener("mouseup",E),document.addEventListener("touchmove",v),document.addEventListener("touchend",E);const n=r.current;i.canCloseOnClick=!0,i.canDrag=!0,i.boundingRect=n.getBoundingClientRect(),n.style.transition="",i.x=C(t.nativeEvent),i.y=_(t.nativeEvent),"x"===e.draggableDirection?(i.start=i.x,i.removalDistance=n.offsetWidth*(e.draggablePercent/100)):(i.start=i.y,i.removalDistance=n.offsetHeight*(80===e.draggablePercent?1.5*e.draggablePercent:e.draggablePercent/100))}}function y(){if(i.boundingRect){const{top:t,bottom:n,left:o,right:s}=i.boundingRect;e.pauseOnHover&&i.x>=o&&i.x<=s&&i.y>=t&&i.y<=n?T():h()}}function h(){o(!0)}function T(){o(!1)}function v(t){const o=r.current;i.canDrag&&o&&(i.didMove=!0,n&&T(),i.x=C(t),i.y=_(t),i.delta="x"===e.draggableDirection?i.x-i.start:i.y-i.start,i.start!==i.x&&(i.canCloseOnClick=!1),o.style.transform="translate"+e.draggableDirection+"("+i.delta+"px)",o.style.opacity=""+(1-Math.abs(i.delta/i.removalDistance)))}function E(){document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",E),document.removeEventListener("touchmove",v),document.removeEventListener("touchend",E);const t=r.current;if(i.canDrag&&i.didMove&&t){if(i.canDrag=!1,Math.abs(i.delta)>i.removalDistance)return a(!0),void e.closeToast();t.style.transition="transform 0.2s, opacity 0.2s",t.style.transform="translate"+e.draggableDirection+"(0)",t.style.opacity="1"}}t.useEffect(()=>{l.current=e}),t.useEffect(()=>(r.current&&r.current.addEventListener("d",h,{once:!0}),c(e.onOpen)&&e.onOpen(t.isValidElement(e.children)&&e.children.props),()=>{const e=l.current;c(e.onClose)&&e.onClose(t.isValidElement(e.children)&&e.children.props)}),[]),t.useEffect(()=>(e.pauseOnFocusLoss&&(document.hasFocus()||T(),window.addEventListener("focus",h),window.addEventListener("blur",T)),()=>{e.pauseOnFocusLoss&&(window.removeEventListener("focus",h),window.removeEventListener("blur",T))}),[e.pauseOnFocusLoss]);const b={onMouseDown:g,onTouchStart:g,onMouseUp:y,onTouchEnd:y};return u&&d&&(b.onMouseEnter=T,b.onMouseLeave=h),m&&(b.onClick=e=>{p&&p(e),i.canCloseOnClick&&f()}),{playToast:h,pauseToast:T,isRunning:n,preventExitTransition:s,toastRef:r,eventHandlers:b}}function O(e){let{closeToast:t,theme:n,ariaLabel:o="close"}=e;return s.default.createElement("button",{className:"Toastify__close-button Toastify__close-button--"+n,type:"button",onClick:e=>{e.stopPropagation(),t(e)},"aria-label":o},s.default.createElement("svg",{"aria-hidden":"true",viewBox:"0 0 14 16"},s.default.createElement("path",{fillRule:"evenodd",d:"M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"})))}function L(e){let{delay:t,isRunning:n,closeToast:o,type:r,hide:i,className:l,style:u,controlledProgress:d,progress:f,rtl:p,isIn:m,theme:g}=e;const y={...u,animationDuration:t+"ms",animationPlayState:n?"running":"paused",opacity:i?0:1};d&&(y.transform="scaleX("+f+")");const h=a.default("Toastify__progress-bar",d?"Toastify__progress-bar--controlled":"Toastify__progress-bar--animated","Toastify__progress-bar-theme--"+g,"Toastify__progress-bar--"+r,{"Toastify__progress-bar--rtl":p}),T=c(l)?l({rtl:p,type:r,defaultClassName:h}):a.default(h,l);return s.default.createElement("div",{role:"progressbar","aria-hidden":i?"true":"false","aria-label":"notification timer",className:T,style:y,[d&&f>=1?"onTransitionEnd":"onAnimationEnd"]:d&&f<1?null:()=>{m&&o()}})}L.defaultProps={type:m.DEFAULT,hide:!1};const N=e=>{const{isRunning:t,preventExitTransition:n,toastRef:o,eventHandlers:r}=I(e),{closeButton:i,children:l,autoClose:u,onClick:d,type:f,hideProgressBar:p,closeToast:m,transition:g,position:y,className:h,style:T,bodyClassName:v,bodyStyle:E,progressClassName:b,progressStyle:C,updateId:_,role:N,progress:R,rtl:x,toastId:P,deleteToast:B,isIn:k,isLoading:M,iconOut:w,theme:D}=e,A=a.default("Toastify__toast","Toastify__toast-theme--"+D,"Toastify__toast--"+f,{"Toastify__toast--rtl":x}),S=c(h)?h({rtl:x,position:y,type:f,defaultClassName:A}):a.default(A,h),F=!!R,z={closeToast:m,type:f,theme:D};let H=null;return!1===i||(H=c(i)?i(z):s.default.isValidElement(i)?s.default.cloneElement(i,z):O(z)),s.default.createElement(g,{isIn:k,done:B,position:y,preventExitTransition:n,nodeRef:o},s.default.createElement("div",{id:P,onClick:d,className:S,...r,style:T,ref:o},s.default.createElement("div",{...k&&{role:N},className:c(v)?v({type:f}):a.default("Toastify__toast-body",v),style:E},null!=w&&s.default.createElement("div",{className:a.default("Toastify__toast-icon",{"Toastify--animate-icon Toastify__zoom-enter":!M})},w),s.default.createElement("div",null,l)),H,(u||F)&&s.default.createElement(L,{..._&&!F?{key:"pb-"+_}:{},rtl:x,theme:D,delay:u,isRunning:t,isIn:k,closeToast:m,hide:p,type:f,style:C,className:b,controlledProgress:F,progress:R})))},R=y({enter:"Toastify--animate Toastify__bounce-enter",exit:"Toastify--animate Toastify__bounce-exit",appendPosition:!0}),x=y({enter:"Toastify--animate Toastify__slide-enter",exit:"Toastify--animate Toastify__slide-exit",appendPosition:!0}),P=y({enter:"Toastify--animate Toastify__zoom-enter",exit:"Toastify--animate Toastify__zoom-exit"}),B=y({enter:"Toastify--animate Toastify__flip-enter",exit:"Toastify--animate Toastify__flip-exit"}),k=t.forwardRef((e,n)=>{const{getToastToRender:o,containerRef:r,isToastActive:i}=b(e),{className:l,style:d,rtl:f,containerId:p}=e;function m(e){const t=a.default("Toastify__toast-container","Toastify__toast-container--"+e,{"Toastify__toast-container--rtl":f});return c(l)?l({position:e,rtl:f,defaultClassName:t}):a.default(t,u(l))}return t.useEffect(()=>{n&&(n.current=r.current)},[]),s.default.createElement("div",{ref:r,className:"Toastify",id:p},o((e,t)=>{const n=t.length?{...d}:{...d,pointerEvents:"none"};return s.default.createElement("div",{className:m(e),style:n,key:"container-"+e},t.map((e,n)=>{let{content:o,props:a}=e;return s.default.createElement(N,{...a,isIn:i(a.toastId),style:{...a.style,"--nth":n+1,"--len":t.length},key:"toast-"+a.key},o)}))}))});k.displayName="ToastContainer",k.defaultProps={position:p.TOP_RIGHT,transition:R,rtl:!1,autoClose:5e3,hideProgressBar:!1,closeButton:O,pauseOnHover:!0,pauseOnFocusLoss:!0,closeOnClick:!0,newestOnTop:!1,draggable:!0,draggablePercent:80,draggableDirection:"x",role:"alert",theme:"light"};let M,w=new Map,D=[];function A(){return Math.random().toString(36).substring(2,9)}function S(e){return e&&(l(e.toastId)||r(e.toastId))?e.toastId:A()}function F(e,t){return w.size>0?T.emit(0,e,t):D.push({content:e,options:t}),t.toastId}function z(e,t){return{...t,type:t&&t.type||e,toastId:S(t)}}function H(e){return(t,n)=>F(t,z(e,n))}function q(e,t){return F(e,z(m.DEFAULT,t))}q.loading=(e,t)=>F(e,z(m.DEFAULT,{isLoading:!0,autoClose:!1,closeOnClick:!1,closeButton:!1,draggable:!1,...t})),q.promise=function(e,t,n){let o,{pending:s,error:a,success:r}=t;s&&(o=l(s)?q.loading(s,n):q.loading(s.render,{...n,...s}));const i={isLoading:null,autoClose:null,closeOnClick:null,closeButton:null,draggable:null,delay:100},u=(e,t,s)=>{if(null==t)return void q.dismiss(o);const a={type:e,...i,...n,data:s},r=l(t)?{render:t}:t;return o?q.update(o,{...a,...r}):q(r.render,{...a,...r}),s},d=c(e)?e():e;return d.then(e=>u("success",r,e)).catch(e=>u("error",a,e)),d},q.success=H(m.SUCCESS),q.info=H(m.INFO),q.error=H(m.ERROR),q.warning=H(m.WARNING),q.warn=q.warning,q.dark=(e,t)=>F(e,z(m.DEFAULT,{theme:"dark",...t})),q.dismiss=e=>T.emit(1,e),q.clearWaitingQueue=function(e){return void 0===e&&(e={}),T.emit(5,e)},q.isActive=e=>{let t=!1;return w.forEach(n=>{n.isToastActive&&n.isToastActive(e)&&(t=!0)}),t},q.update=function(e,t){void 0===t&&(t={}),setTimeout(()=>{const n=function(e,t){let{containerId:n}=t;const o=w.get(n||M);return o?o.getToast(e):null}(e,t);if(n){const{props:o,content:s}=n,a={...o,...t,toastId:t.toastId||e,updateId:A()};a.toastId!==e&&(a.staleId=e);const r=a.render||s;delete a.render,F(r,a)}},0)},q.done=e=>{q.update(e,{progress:1})},q.onChange=e=>(T.on(4,e),()=>{T.off(4,e)}),q.POSITION=p,q.TYPE=m,T.on(2,e=>{M=e.containerId||e,w.set(M,e),D.forEach(e=>{T.emit(0,e.content,e.options)}),D=[]}).on(3,e=>{w.delete(e.containerId||e),0===w.size&&T.off(0).off(1).off(5)}),e.Bounce=R,e.Flip=B,e.Icons=E,e.Slide=x,e.ToastContainer=k,e.Zoom=P,e.collapseToast=g,e.cssTransition=y,e.toast=q,e.useToast=I,e.useToastContainer=b});
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('clsx')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'clsx'], factory) :
(global = global || self, factory(global.reactToastify = {}, global.react, global.clsx));
})(this, (function (exports, React, cx) {
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
function isNum(v) {
return typeof v === 'number' && !isNaN(v);
}
function isBool(v) {
return typeof v === 'boolean';
}
function isStr(v) {
return typeof v === 'string';
}
function isFn(v) {
return typeof v === 'function';
}
function parseClassName(v) {
return isStr(v) || isFn(v) ? v : null;
}
function isToastIdValid(toastId) {
return toastId === 0 || toastId;
}
function getAutoCloseDelay(toastAutoClose, containerAutoClose) {
return toastAutoClose === false || isNum(toastAutoClose) && toastAutoClose > 0 ? toastAutoClose : containerAutoClose;
}
function canBeRendered(content) {
return React.isValidElement(content) || isStr(content) || isFn(content) || isNum(content);
}
const POSITION = {
TOP_LEFT: 'top-left',
TOP_RIGHT: 'top-right',
TOP_CENTER: 'top-center',
BOTTOM_LEFT: 'bottom-left',
BOTTOM_RIGHT: 'bottom-right',
BOTTOM_CENTER: 'bottom-center'
};
const TYPE = {
INFO: 'info',
SUCCESS: 'success',
WARNING: 'warning',
ERROR: 'error',
DEFAULT: 'default'
};
/**
* Used to collapse toast after exit animation
*/
function collapseToast(node, done, duration
/* Default.COLLAPSE_DURATION */
) {
if (duration === void 0) {
duration = 300;
}
const {
scrollHeight,
style
} = node;
requestAnimationFrame(() => {
style.minHeight = 'initial';
style.height = scrollHeight + 'px';
style.transition = "all " + duration + "ms";
requestAnimationFrame(() => {
style.height = '0';
style.padding = '0';
style.margin = '0';
setTimeout(done, duration);
});
});
}
/**
* Css animation that just work.
* You could use animate.css for instance
*
*
* ```
* cssTransition({
* enter: "animate__animated animate__bounceIn",
* exit: "animate__animated animate__bounceOut"
* })
* ```
*
*/
function cssTransition(_ref) {
let {
enter,
exit,
appendPosition = false,
collapse = true,
collapseDuration = 300
/* Default.COLLAPSE_DURATION */
} = _ref;
return function ToastTransition(_ref2) {
let {
children,
position,
preventExitTransition,
done,
nodeRef,
isIn
} = _ref2;
const enterClassName = appendPosition ? enter + "--" + position : enter;
const exitClassName = appendPosition ? exit + "--" + position : exit;
const baseClassName = React.useRef();
const animationStep = React.useRef(0
/* AnimationStep.Enter */
);
React.useLayoutEffect(() => {
onEnter();
}, []);
React.useEffect(() => {
if (!isIn) preventExitTransition ? onExited() : onExit();
}, [isIn]);
function onEnter() {
const node = nodeRef.current;
baseClassName.current = node.className;
node.className += " " + enterClassName;
node.addEventListener('animationend', onEntered);
node.addEventListener('animationcancel', onEntered);
}
function onEntered(e) {
if (e.target !== nodeRef.current) return;
const node = nodeRef.current;
node.dispatchEvent(new Event("d"
/* SyntheticEvent.ENTRANCE_ANIMATION_END */
));
node.removeEventListener('animationend', onEntered);
node.removeEventListener('animationcancel', onEntered);
if (animationStep.current === 0
/* AnimationStep.Enter */
&& e.type !== 'animationcancel') {
node.className = baseClassName.current;
}
}
function onExit() {
animationStep.current = 1
/* AnimationStep.Exit */
;
const node = nodeRef.current;
node.className += " " + exitClassName;
node.addEventListener('animationend', onExited);
}
function onExited() {
const node = nodeRef.current;
node.removeEventListener('animationend', onExited);
collapse ? collapseToast(node, done, collapseDuration) : done();
}
return React__default["default"].createElement(React__default["default"].Fragment, null, children);
};
}
function toToastItem(toast, status) {
return {
content: toast.content,
containerId: toast.props.containerId,
id: toast.props.toastId,
theme: toast.props.theme,
type: toast.props.type,
data: toast.props.data || {},
isLoading: toast.props.isLoading,
icon: toast.props.icon,
status
};
}
const eventManager = {
list: new Map(),
emitQueue: new Map(),
on(event, callback) {
this.list.has(event) || this.list.set(event, []);
this.list.get(event).push(callback);
return this;
},
off(event, callback) {
if (callback) {
const cb = this.list.get(event).filter(cb => cb !== callback);
this.list.set(event, cb);
return this;
}
this.list.delete(event);
return this;
},
cancelEmit(event) {
const timers = this.emitQueue.get(event);
if (timers) {
timers.forEach(clearTimeout);
this.emitQueue.delete(event);
}
return this;
},
/**
* Enqueue the event at the end of the call stack
* Doing so let the user call toast as follow:
* toast('1')
* toast('2')
* toast('3')
* Without setTimemout the code above will not work
*/
emit(event) {
this.list.has(event) && this.list.get(event).forEach(callback => {
const timer = setTimeout(() => {
// @ts-ignore
callback(...[].slice.call(arguments, 1));
}, 0);
this.emitQueue.has(event) || this.emitQueue.set(event, []);
this.emitQueue.get(event).push(timer);
});
}
};
const Svg = _ref => {
let {
theme,
type,
...rest
} = _ref;
return React__default["default"].createElement("svg", {
viewBox: "0 0 24 24",
width: "100%",
height: "100%",
fill: theme === 'colored' ? 'currentColor' : "var(--toastify-icon-color-" + type + ")",
...rest
});
};
function Warning(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M23.32 17.191L15.438 2.184C14.728.833 13.416 0 11.996 0c-1.42 0-2.733.833-3.443 2.184L.533 17.448a4.744 4.744 0 000 4.368C1.243 23.167 2.555 24 3.975 24h16.05C22.22 24 24 22.044 24 19.632c0-.904-.251-1.746-.68-2.44zm-9.622 1.46c0 1.033-.724 1.823-1.698 1.823s-1.698-.79-1.698-1.822v-.043c0-1.028.724-1.822 1.698-1.822s1.698.79 1.698 1.822v.043zm.039-12.285l-.84 8.06c-.057.581-.408.943-.897.943-.49 0-.84-.367-.896-.942l-.84-8.065c-.057-.624.25-1.095.779-1.095h1.91c.528.005.84.476.784 1.1z"
}));
}
function Info(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M12 0a12 12 0 1012 12A12.013 12.013 0 0012 0zm.25 5a1.5 1.5 0 11-1.5 1.5 1.5 1.5 0 011.5-1.5zm2.25 13.5h-4a1 1 0 010-2h.75a.25.25 0 00.25-.25v-4.5a.25.25 0 00-.25-.25h-.75a1 1 0 010-2h1a2 2 0 012 2v4.75a.25.25 0 00.25.25h.75a1 1 0 110 2z"
}));
}
function Success(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M12 0a12 12 0 1012 12A12.014 12.014 0 0012 0zm6.927 8.2l-6.845 9.289a1.011 1.011 0 01-1.43.188l-4.888-3.908a1 1 0 111.25-1.562l4.076 3.261 6.227-8.451a1 1 0 111.61 1.183z"
}));
}
function Error(props) {
return React__default["default"].createElement(Svg, { ...props
}, React__default["default"].createElement("path", {
d: "M11.983 0a12.206 12.206 0 00-8.51 3.653A11.8 11.8 0 000 12.207 11.779 11.779 0 0011.8 24h.214A12.111 12.111 0 0024 11.791 11.766 11.766 0 0011.983 0zM10.5 16.542a1.476 1.476 0 011.449-1.53h.027a1.527 1.527 0 011.523 1.47 1.475 1.475 0 01-1.449 1.53h-.027a1.529 1.529 0 01-1.523-1.47zM11 12.5v-6a1 1 0 012 0v6a1 1 0 11-2 0z"
}));
}
function Spinner() {
return React__default["default"].createElement("div", {
className: "Toastify"
/* Default.CSS_NAMESPACE */
+ "__spinner"
});
}
const Icons = {
info: Info,
warning: Warning,
success: Success,
error: Error,
spinner: Spinner
};
const maybeIcon = type => type in Icons;
function getIcon(_ref2) {
let {
theme,
type,
isLoading,
icon
} = _ref2;
let Icon = null;
const iconProps = {
theme,
type
};
if (icon === false) ; else if (isFn(icon)) {
Icon = icon(iconProps);
} else if (React.isValidElement(icon)) {
Icon = React.cloneElement(icon, iconProps);
} else if (isStr(icon) || isNum(icon)) {
Icon = icon;
} else if (isLoading) {
Icon = Icons.spinner();
} else if (maybeIcon(type)) {
Icon = Icons[type](iconProps);
}
return Icon;
}
function useToastContainer(props) {
const [, forceUpdate] = React.useReducer(x => x + 1, 0);
const [toastIds, setToastIds] = React.useState([]);
const containerRef = React.useRef(null);
const toastToRender = React.useRef(new Map()).current;
const isToastActive = id => toastIds.indexOf(id) !== -1;
const instance = React.useRef({
toastKey: 1,
displayedToast: 0,
count: 0,
queue: [],
props,
containerId: null,
isToastActive,
getToast: id => toastToRender.get(id)
}).current;
React.useEffect(() => {
instance.containerId = props.containerId;
eventManager.cancelEmit(3
/* Event.WillUnmount */
).on(0
/* Event.Show */
, buildToast).on(1
/* Event.Clear */
, toastId => containerRef.current && removeToast(toastId)).on(5
/* Event.ClearWaitingQueue */
, clearWaitingQueue).emit(2
/* Event.DidMount */
, instance);
return () => eventManager.emit(3
/* Event.WillUnmount */
, instance);
}, []);
React.useEffect(() => {
instance.props = props;
instance.isToastActive = isToastActive;
instance.displayedToast = toastIds.length;
});
function clearWaitingQueue(_ref) {
let {
containerId
} = _ref;
const {
limit
} = instance.props;
if (limit && (!containerId || instance.containerId === containerId)) {
instance.count -= instance.queue.length;
instance.queue = [];
}
}
function removeToast(toastId) {
setToastIds(state => isToastIdValid(toastId) ? state.filter(id => id !== toastId) : []);
}
function dequeueToast() {
const {
toastContent,
toastProps,
staleId
} = instance.queue.shift();
appendToast(toastContent, toastProps, staleId);
}
/**
* check if a container is attached to the dom
* check for multi-container, build only if associated
* check for duplicate toastId if no update
*/
function isNotValid(options) {
return !containerRef.current || instance.props.enableMultiContainer && options.containerId !== instance.props.containerId || toastToRender.has(options.toastId) && options.updateId == null;
} // this function and all the function called inside needs to rely on refs
function buildToast(content, _ref2) {
let {
delay,
staleId,
...options
} = _ref2;
if (!canBeRendered(content) || isNotValid(options)) return;
const {
toastId,
updateId,
data
} = options;
const {
props
} = instance;
const closeToast = () => removeToast(toastId);
const isNotAnUpdate = updateId == null;
if (isNotAnUpdate) instance.count++;
const toastProps = {
toastId,
updateId,
data,
containerId: options.containerId,
isLoading: options.isLoading,
theme: options.theme || props.theme,
icon: options.icon != null ? options.icon : props.icon,
isIn: false,
key: options.key || instance.toastKey++,
type: options.type,
closeToast: closeToast,
closeButton: options.closeButton,
rtl: props.rtl,
position: options.position || props.position,
transition: options.transition || props.transition,
className: parseClassName(options.className || props.toastClassName),
bodyClassName: parseClassName(options.bodyClassName || props.bodyClassName),
style: options.style || props.toastStyle,
bodyStyle: options.bodyStyle || props.bodyStyle,
onClick: options.onClick || props.onClick,
pauseOnHover: isBool(options.pauseOnHover) ? options.pauseOnHover : props.pauseOnHover,
pauseOnFocusLoss: isBool(options.pauseOnFocusLoss) ? options.pauseOnFocusLoss : props.pauseOnFocusLoss,
draggable: isBool(options.draggable) ? options.draggable : props.draggable,
draggablePercent: options.draggablePercent || props.draggablePercent,
draggableDirection: options.draggableDirection || props.draggableDirection,
closeOnClick: isBool(options.closeOnClick) ? options.closeOnClick : props.closeOnClick,
progressClassName: parseClassName(options.progressClassName || props.progressClassName),
progressStyle: options.progressStyle || props.progressStyle,
autoClose: options.isLoading ? false : getAutoCloseDelay(options.autoClose, props.autoClose),
hideProgressBar: isBool(options.hideProgressBar) ? options.hideProgressBar : props.hideProgressBar,
progress: options.progress,
role: options.role || props.role,
deleteToast() {
const removed = toToastItem(toastToRender.get(toastId), 'removed');
toastToRender.delete(toastId);
eventManager.emit(4
/* Event.Change */
, removed);
const queueLen = instance.queue.length;
instance.count = isToastIdValid(toastId) ? instance.count - 1 : instance.count - instance.displayedToast;
if (instance.count < 0) instance.count = 0;
if (queueLen > 0) {
const freeSlot = isToastIdValid(toastId) ? 1 : instance.props.limit;
if (queueLen === 1 || freeSlot === 1) {
instance.displayedToast++;
dequeueToast();
} else {
const toDequeue = freeSlot > queueLen ? queueLen : freeSlot;
instance.displayedToast = toDequeue;
for (let i = 0; i < toDequeue; i++) dequeueToast();
}
} else {
forceUpdate();
}
}
};
toastProps.iconOut = getIcon(toastProps);
if (isFn(options.onOpen)) toastProps.onOpen = options.onOpen;
if (isFn(options.onClose)) toastProps.onClose = options.onClose;
toastProps.closeButton = props.closeButton;
if (options.closeButton === false || canBeRendered(options.closeButton)) {
toastProps.closeButton = options.closeButton;
} else if (options.closeButton === true) {
toastProps.closeButton = canBeRendered(props.closeButton) ? props.closeButton : true;
}
let toastContent = content;
if (React.isValidElement(content) && !isStr(content.type)) {
toastContent = React.cloneElement(content, {
closeToast,
toastProps,
data
});
} else if (isFn(content)) {
toastContent = content({
closeToast,
toastProps,
data
});
} // not handling limit + delay by design. Waiting for user feedback first
if (props.limit && props.limit > 0 && instance.count > props.limit && isNotAnUpdate) {
instance.queue.push({
toastContent,
toastProps,
staleId
});
} else if (isNum(delay)) {
setTimeout(() => {
appendToast(toastContent, toastProps, staleId);
}, delay);
} else {
appendToast(toastContent, toastProps, staleId);
}
}
function appendToast(content, toastProps, staleId) {
const {
toastId
} = toastProps;
if (staleId) toastToRender.delete(staleId);
const toast = {
content,
props: toastProps
};
toastToRender.set(toastId, toast);
setToastIds(state => [...state, toastId].filter(id => id !== staleId));
eventManager.emit(4
/* Event.Change */
, toToastItem(toast, toast.props.updateId == null ? 'added' : 'updated'));
}
function getToastToRender(cb) {
const toRender = new Map();
const collection = Array.from(toastToRender.values());
if (props.newestOnTop) collection.reverse();
collection.forEach(toast => {
const {
position
} = toast.props;
toRender.has(position) || toRender.set(position, []);
toRender.get(position).push(toast);
});
return Array.from(toRender, p => cb(p[0], p[1]));
}
return {
getToastToRender,
containerRef,
isToastActive
};
}
function getX(e) {
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.clientX;
}
function getY(e) {
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.clientY;
}
function useToast(props) {
const [isRunning, setIsRunning] = React.useState(false);
const [preventExitTransition, setPreventExitTransition] = React.useState(false);
const toastRef = React.useRef(null);
const drag = React.useRef({
start: 0,
x: 0,
y: 0,
delta: 0,
removalDistance: 0,
canCloseOnClick: true,
canDrag: false,
boundingRect: null,
didMove: false
}).current;
const syncProps = React.useRef(props);
const {
autoClose,
pauseOnHover,
closeToast,
onClick,
closeOnClick
} = props;
React.useEffect(() => {
syncProps.current = props;
});
React.useEffect(() => {
if (toastRef.current) toastRef.current.addEventListener("d"
/* SyntheticEvent.ENTRANCE_ANIMATION_END */
, playToast, {
once: true
});
if (isFn(props.onOpen)) props.onOpen(React.isValidElement(props.children) && props.children.props);
return () => {
const props = syncProps.current;
if (isFn(props.onClose)) props.onClose(React.isValidElement(props.children) && props.children.props);
};
}, []);
React.useEffect(() => {
props.pauseOnFocusLoss && bindFocusEvents();
return () => {
props.pauseOnFocusLoss && unbindFocusEvents();
};
}, [props.pauseOnFocusLoss]);
function onDragStart(e) {
if (props.draggable) {
bindDragEvents();
const toast = toastRef.current;
drag.canCloseOnClick = true;
drag.canDrag = true;
drag.boundingRect = toast.getBoundingClientRect();
toast.style.transition = '';
drag.x = getX(e.nativeEvent);
drag.y = getY(e.nativeEvent);
if (props.draggableDirection === "x"
/* Direction.X */
) {
drag.start = drag.x;
drag.removalDistance = toast.offsetWidth * (props.draggablePercent / 100);
} else {
drag.start = drag.y;
drag.removalDistance = toast.offsetHeight * (props.draggablePercent === 80
/* Default.DRAGGABLE_PERCENT */
? props.draggablePercent * 1.5 : props.draggablePercent / 100);
}
}
}
function onDragTransitionEnd() {
if (drag.boundingRect) {
const {
top,
bottom,
left,
right
} = drag.boundingRect;
if (props.pauseOnHover && drag.x >= left && drag.x <= right && drag.y >= top && drag.y <= bottom) {
pauseToast();
} else {
playToast();
}
}
}
function playToast() {
setIsRunning(true);
}
function pauseToast() {
setIsRunning(false);
}
function bindFocusEvents() {
if (!document.hasFocus()) pauseToast();
window.addEventListener('focus', playToast);
window.addEventListener('blur', pauseToast);
}
function unbindFocusEvents() {
window.removeEventListener('focus', playToast);
window.removeEventListener('blur', pauseToast);
}
function bindDragEvents() {
drag.didMove = false;
document.addEventListener('mousemove', onDragMove);
document.addEventListener('mouseup', onDragEnd);
document.addEventListener('touchmove', onDragMove);
document.addEventListener('touchend', onDragEnd);
}
function unbindDragEvents() {
document.removeEventListener('mousemove', onDragMove);
document.removeEventListener('mouseup', onDragEnd);
document.removeEventListener('touchmove', onDragMove);
document.removeEventListener('touchend', onDragEnd);
}
function onDragMove(e) {
const toast = toastRef.current;
if (drag.canDrag && toast) {
drag.didMove = true;
if (isRunning) pauseToast();
drag.x = getX(e);
drag.y = getY(e);
if (props.draggableDirection === "x"
/* Direction.X */
) {
drag.delta = drag.x - drag.start;
} else {
drag.delta = drag.y - drag.start;
} // prevent false positif during a toast click
if (drag.start !== drag.x) drag.canCloseOnClick = false;
toast.style.transform = "translate" + props.draggableDirection + "(" + drag.delta + "px)";
toast.style.opacity = "" + (1 - Math.abs(drag.delta / drag.removalDistance));
}
}
function onDragEnd() {
unbindDragEvents();
const toast = toastRef.current;
if (drag.canDrag && drag.didMove && toast) {
drag.canDrag = false;
if (Math.abs(drag.delta) > drag.removalDistance) {
setPreventExitTransition(true);
props.closeToast();
return;
}
toast.style.transition = 'transform 0.2s, opacity 0.2s';
toast.style.transform = "translate" + props.draggableDirection + "(0)";
toast.style.opacity = '1';
}
}
const eventHandlers = {
onMouseDown: onDragStart,
onTouchStart: onDragStart,
onMouseUp: onDragTransitionEnd,
onTouchEnd: onDragTransitionEnd
};
if (autoClose && pauseOnHover) {
eventHandlers.onMouseEnter = pauseToast;
eventHandlers.onMouseLeave = playToast;
} // prevent toast from closing when user drags the toast
if (closeOnClick) {
eventHandlers.onClick = e => {
onClick && onClick(e);
drag.canCloseOnClick && closeToast();
};
}
return {
playToast,
pauseToast,
isRunning,
preventExitTransition,
toastRef,
eventHandlers
};
}
function CloseButton(_ref) {
let {
closeToast,
theme,
ariaLabel = 'close'
} = _ref;
return React__default["default"].createElement("button", {
className: "Toastify"
/* Default.CSS_NAMESPACE */
+ "__close-button " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__close-button--" + theme,
type: "button",
onClick: e => {
e.stopPropagation();
closeToast(e);
},
"aria-label": ariaLabel
}, React__default["default"].createElement("svg", {
"aria-hidden": "true",
viewBox: "0 0 14 16"
}, React__default["default"].createElement("path", {
fillRule: "evenodd",
d: "M7.71 8.23l3.75 3.75-1.48 1.48-3.75-3.75-3.75 3.75L1 11.98l3.75-3.75L1 4.48 2.48 3l3.75 3.75L9.98 3l1.48 1.48-3.75 3.75z"
})));
}
function ProgressBar(_ref) {
let {
delay,
isRunning,
closeToast,
type,
hide,
className,
style: userStyle,
controlledProgress,
progress,
rtl,
isIn,
theme
} = _ref;
const style = { ...userStyle,
animationDuration: delay + "ms",
animationPlayState: isRunning ? 'running' : 'paused',
opacity: hide ? 0 : 1
};
if (controlledProgress) style.transform = "scaleX(" + progress + ")";
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar", controlledProgress ? "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--controlled" : "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--animated", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar-theme--" + theme, "Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--" + type, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__progress-bar--rtl"]: rtl
});
const classNames = isFn(className) ? className({
rtl,
type,
defaultClassName
}) : cx__default["default"](defaultClassName, className); // 🧐 controlledProgress is derived from progress
// so if controlledProgress is set
// it means that this is also the case for progress
const animationEvent = {
[controlledProgress && progress >= 1 ? 'onTransitionEnd' : 'onAnimationEnd']: controlledProgress && progress < 1 ? null : () => {
isIn && closeToast();
}
}; // TODO: add aria-valuenow, aria-valuemax, aria-valuemin
return React__default["default"].createElement("div", {
role: "progressbar",
"aria-hidden": hide ? 'true' : 'false',
"aria-label": "notification timer",
className: classNames,
style: style,
...animationEvent
});
}
ProgressBar.defaultProps = {
type: TYPE.DEFAULT,
hide: false
};
const Toast = props => {
const {
isRunning,
preventExitTransition,
toastRef,
eventHandlers
} = useToast(props);
const {
closeButton,
children,
autoClose,
onClick,
type,
hideProgressBar,
closeToast,
transition: Transition,
position,
className,
style,
bodyClassName,
bodyStyle,
progressClassName,
progressStyle,
updateId,
role,
progress,
rtl,
toastId,
deleteToast,
isIn,
isLoading,
iconOut,
theme
} = props;
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-theme--" + theme, "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast--" + type, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast--rtl"]: rtl
});
const cssClasses = isFn(className) ? className({
rtl,
position,
type,
defaultClassName
}) : cx__default["default"](defaultClassName, className);
const isProgressControlled = !!progress;
const closeButtonProps = {
closeToast,
type,
theme
};
let Close = null;
if (closeButton === false) ; else if (isFn(closeButton)) {
Close = closeButton(closeButtonProps);
} else if (React__default["default"].isValidElement(closeButton)) {
Close = React__default["default"].cloneElement(closeButton, closeButtonProps);
} else {
Close = CloseButton(closeButtonProps);
}
return React__default["default"].createElement(Transition, {
isIn: isIn,
done: deleteToast,
position: position,
preventExitTransition: preventExitTransition,
nodeRef: toastRef
}, React__default["default"].createElement("div", {
id: toastId,
onClick: onClick,
className: cssClasses,
...eventHandlers,
style: style,
ref: toastRef
}, React__default["default"].createElement("div", { ...(isIn && {
role: role
}),
className: isFn(bodyClassName) ? bodyClassName({
type
}) : cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-body", bodyClassName),
style: bodyStyle
}, iconOut != null && React__default["default"].createElement("div", {
className: cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-icon", {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate-icon " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-enter"]: !isLoading
})
}, iconOut), React__default["default"].createElement("div", null, children)), Close, (autoClose || isProgressControlled) && React__default["default"].createElement(ProgressBar, { ...(updateId && !isProgressControlled ? {
key: "pb-" + updateId
} : {}),
rtl: rtl,
theme: theme,
delay: autoClose,
isRunning: isRunning,
isIn: isIn,
closeToast: closeToast,
hide: hideProgressBar,
type: type,
style: progressStyle,
className: progressClassName,
controlledProgress: isProgressControlled,
progress: progress
})));
};
const Bounce = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__bounce-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__bounce-exit",
appendPosition: true
});
const Slide = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__slide-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__slide-exit",
appendPosition: true
});
const Zoom = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__zoom-exit"
});
const Flip = cssTransition({
enter: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__flip-enter",
exit: "Toastify"
/* Default.CSS_NAMESPACE */
+ "--animate " + "Toastify"
/* Default.CSS_NAMESPACE */
+ "__flip-exit"
});
// https://github.com/yannickcr/eslint-plugin-react/issues/3140
const ToastContainer = React.forwardRef((props, ref) => {
const {
getToastToRender,
containerRef,
isToastActive
} = useToastContainer(props);
const {
className,
style,
rtl,
containerId
} = props;
function getClassName(position) {
const defaultClassName = cx__default["default"]("Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container", "Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container--" + position, {
["Toastify"
/* Default.CSS_NAMESPACE */
+ "__toast-container--rtl"]: rtl
});
return isFn(className) ? className({
position,
rtl,
defaultClassName
}) : cx__default["default"](defaultClassName, parseClassName(className));
}
React.useEffect(() => {
if (ref) {
ref.current = containerRef.current;
}
}, []);
return React__default["default"].createElement("div", {
ref: containerRef,
className: "Toastify"
/* Default.CSS_NAMESPACE */
,
id: containerId
}, getToastToRender((position, toastList) => {
const containerStyle = !toastList.length ? { ...style,
pointerEvents: 'none'
} : { ...style
};
return React__default["default"].createElement("div", {
className: getClassName(position),
style: containerStyle,
key: "container-" + position
}, toastList.map((_ref, i) => {
let {
content,
props: toastProps
} = _ref;
return React__default["default"].createElement(Toast, { ...toastProps,
isIn: isToastActive(toastProps.toastId),
style: { ...toastProps.style,
'--nth': i + 1,
'--len': toastList.length
},
key: "toast-" + toastProps.key
}, content);
}));
}));
});
ToastContainer.displayName = 'ToastContainer';
ToastContainer.defaultProps = {
position: POSITION.TOP_RIGHT,
transition: Bounce,
rtl: false,
autoClose: 5000,
hideProgressBar: false,
closeButton: CloseButton,
pauseOnHover: true,
pauseOnFocusLoss: true,
closeOnClick: true,
newestOnTop: false,
draggable: true,
draggablePercent: 80
/* Default.DRAGGABLE_PERCENT */
,
draggableDirection: "x"
/* Direction.X */
,
role: 'alert',
theme: 'light'
};
let containers = new Map();
let latestInstance;
let queue = [];
/**
* Get the toast by id, given it's in the DOM, otherwise returns null
*/
function getToast(toastId, _ref) {
let {
containerId
} = _ref;
const container = containers.get(containerId || latestInstance);
if (!container) return null;
return container.getToast(toastId);
}
/**
* Generate a random toastId
*/
function generateToastId() {
return Math.random().toString(36).substring(2, 9);
}
/**
* Generate a toastId or use the one provided
*/
function getToastId(options) {
if (options && (isStr(options.toastId) || isNum(options.toastId))) {
return options.toastId;
}
return generateToastId();
}
/**
* If the container is not mounted, the toast is enqueued and
* the container lazy mounted
*/
function dispatchToast(content, options) {
if (containers.size > 0) {
eventManager.emit(0
/* Event.Show */
, content, options);
} else {
queue.push({
content,
options
});
}
return options.toastId;
}
/**
* Merge provided options with the defaults settings and generate the toastId
*/
function mergeOptions(type, options) {
return { ...options,
type: options && options.type || type,
toastId: getToastId(options)
};
}
function createToastByType(type) {
return (content, options) => dispatchToast(content, mergeOptions(type, options));
}
function toast(content, options) {
return dispatchToast(content, mergeOptions(TYPE.DEFAULT, options));
}
toast.loading = (content, options) => dispatchToast(content, mergeOptions(TYPE.DEFAULT, {
isLoading: true,
autoClose: false,
closeOnClick: false,
closeButton: false,
draggable: false,
...options
}));
function handlePromise(promise, _ref2, options) {
let {
pending,
error,
success
} = _ref2;
let id;
if (pending) {
id = isStr(pending) ? toast.loading(pending, options) : toast.loading(pending.render, { ...options,
...pending
});
}
const resetParams = {
isLoading: null,
autoClose: null,
closeOnClick: null,
closeButton: null,
draggable: null,
delay: 100
};
const resolver = (type, input, result) => {
// Remove the toast if the input has not been provided. This prevents the toast from hanging
// in the pending state if a success/error toast has not been provided.
if (input == null) {
toast.dismiss(id);
return;
}
const baseParams = {
type,
...resetParams,
...options,
data: result
};
const params = isStr(input) ? {
render: input
} : input; // if the id is set we know that it's an update
if (id) {
toast.update(id, { ...baseParams,
...params
});
} else {
// using toast.promise without loading
toast(params.render, { ...baseParams,
...params
});
}
return result;
};
const p = isFn(promise) ? promise() : promise; //call the resolvers only when needed
p.then(result => resolver('success', success, result)).catch(err => resolver('error', error, err));
return p;
}
toast.promise = handlePromise;
toast.success = createToastByType(TYPE.SUCCESS);
toast.info = createToastByType(TYPE.INFO);
toast.error = createToastByType(TYPE.ERROR);
toast.warning = createToastByType(TYPE.WARNING);
toast.warn = toast.warning;
toast.dark = (content, options) => dispatchToast(content, mergeOptions(TYPE.DEFAULT, {
theme: 'dark',
...options
}));
/**
* Remove toast programmaticaly
*/
toast.dismiss = id => eventManager.emit(1
/* Event.Clear */
, id);
/**
* Clear waiting queue when limit is used
*/
toast.clearWaitingQueue = function (params) {
if (params === void 0) {
params = {};
}
return eventManager.emit(5
/* Event.ClearWaitingQueue */
, params);
};
/**
* return true if one container is displaying the toast
*/
toast.isActive = id => {
let isToastActive = false;
containers.forEach(container => {
if (container.isToastActive && container.isToastActive(id)) {
isToastActive = true;
}
});
return isToastActive;
};
toast.update = function (toastId, options) {
if (options === void 0) {
options = {};
}
// if you call toast and toast.update directly nothing will be displayed
// this is why I defered the update
setTimeout(() => {
const toast = getToast(toastId, options);
if (toast) {
const {
props: oldOptions,
content: oldContent
} = toast;
const nextOptions = { ...oldOptions,
...options,
toastId: options.toastId || toastId,
updateId: generateToastId()
};
if (nextOptions.toastId !== toastId) nextOptions.staleId = toastId;
const content = nextOptions.render || oldContent;
delete nextOptions.render;
dispatchToast(content, nextOptions);
}
}, 0);
};
/**
* Used for controlled progress bar.
*/
toast.done = id => {
toast.update(id, {
progress: 1
});
};
/**
* Subscribe to change when a toast is added, removed and updated
*
* Usage:
* ```
* const unsubscribe = toast.onChange((payload) => {
* switch (payload.status) {
* case "added":
* // new toast added
* break;
* case "updated":
* // toast updated
* break;
* case "removed":
* // toast has been removed
* break;
* }
* })
* ```
*/
toast.onChange = callback => {
eventManager.on(4
/* Event.Change */
, callback);
return () => {
eventManager.off(4
/* Event.Change */
, callback);
};
};
toast.POSITION = POSITION;
toast.TYPE = TYPE;
/**
* Wait until the ToastContainer is mounted to dispatch the toast
* and attach isActive method
*/
eventManager.on(2
/* Event.DidMount */
, containerInstance => {
latestInstance = containerInstance.containerId || containerInstance;
containers.set(latestInstance, containerInstance);
queue.forEach(item => {
eventManager.emit(0
/* Event.Show */
, item.content, item.options);
});
queue = [];
}).on(3
/* Event.WillUnmount */
, containerInstance => {
containers.delete(containerInstance.containerId || containerInstance);
if (containers.size === 0) {
eventManager.off(0
/* Event.Show */
).off(1
/* Event.Clear */
).off(5
/* Event.ClearWaitingQueue */
);
}
});
exports.Bounce = Bounce;
exports.Flip = Flip;
exports.Icons = Icons;
exports.Slide = Slide;
exports.ToastContainer = ToastContainer;
exports.Zoom = Zoom;
exports.collapseToast = collapseToast;
exports.cssTransition = cssTransition;
exports.toast = toast;
exports.useToast = useToast;
exports.useToastContainer = useToastContainer;
}));
//# sourceMappingURL=react-toastify.umd.js.map

2

package.json
{
"version": "9.0.5",
"version": "9.0.6-vite-1",
"license": "MIT",

@@ -4,0 +4,0 @@ "typings": "dist/index.d.ts",

addons/use-notification-center/index.esm.mjs.map

Sorry, the diff of this file is not supported yet

addons/use-notification-center/index.js.map

Sorry, the diff of this file is not supported yet

dist/react-toastify.esm.mjs

Sorry, the diff of this file is not supported yet

dist/react-toastify.esm.mjs.map

Sorry, the diff of this file is not supported yet

dist/react-toastify.js.map

Sorry, the diff of this file is not supported yet

dist/react-toastify.umd.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc