haptic-sound-toast
Version:
A customizable toast notification library for Next.js and React
3 lines (2 loc) • 8.38 kB
JavaScript
import t,{useEffect as e,useRef as n,useState as o,createContext as r,useContext as i}from"react";import{AlertTriangle as a,Info as s,AlertCircle as c,CheckCircle as u,X as l}from"lucide-react";import{motion as d,AnimatePresence as m}from"framer-motion";function v(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=Array(e);n<e;n++)o[n]=t[n];return o}function f(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=n){var o,r,i,a,s=[],c=!0,u=!1;try{if(i=(n=n.call(t)).next,0===e){if(Object(n)!==n)return;c=!1}else for(;!(c=(o=i.call(n)).done)&&(s.push(o.value),s.length!==e);c=!0);}catch(t){u=!0,r=t}finally{try{if(!c&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(u)throw r}}return s}}(t,e)||b(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(t){return function(t){if(Array.isArray(t))return v(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||b(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(t,e){if(t){if("string"==typeof t)return v(t,e);var n={}.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?v(t,e):void 0}}var y={success:{icon:u,className:"toast-success",buttonClass:"toast-success-button",sound:"/sounds/success.mp3",vibration:100},error:{icon:c,className:"toast-error",buttonClass:"toast-error-button",sound:"/sounds/error.mp3",vibration:[100,50,200]},info:{icon:s,className:"toast-info",buttonClass:"toast-info-button",sound:"/sounds/info.mp3",vibration:50},warning:{icon:a,className:"toast-warning",buttonClass:"toast-warning-button",sound:"/sounds/warning.mp3",vibration:[50,25,50,25,50]}},g=function(r){var i=r.message,a=void 0===i?"An error occurred":i,s=r.isVisible,c=void 0!==s&&s,u=r.onDismiss,m=void 0===u?function(){}:u,v=r.duration,p=void 0===v?2e3:v,b=r.type,g=void 0===b?"error":b;r.position;var w=r.sound,h=void 0===w||w,E=r.customSound,N=void 0===E?null:E,x=r.customIcon,O=void 0===x?null:x,j=r.description,A=void 0===j?"":j,C=r.showProgress,I=void 0!==C&&C,S=r.className,T=void 0===S?"":S,P=r.vibration,D=void 0===P||P,V=r.customVibration,H=void 0===V?null:V,M=r.action,k=void 0===M?null:M,z=r.pauseOnHover,L=void 0===z||z,Y=r.swipeToClose,U=void 0===Y||Y,W=r.role,$=void 0===W?"status":W;e((function(){if(c&&p){var t=setTimeout((function(){m()}),p);return function(){return clearTimeout(t)}}}),[c,p,m]),e((function(){if(c&&h){var t=new Audio;if(N)t.src=N;else{var e=y[g]||y.error;t.src=e.sound}t.play().catch((function(t){console.error("Error playing toast sound:",t)}))}}),[c,h,N,g]),e((function(){if(c&&D&&"undefined"!=typeof navigator&&navigator.vibrate){var t=H||(y[g]||y.error).vibration||100;return navigator.vibrate(t),function(){return navigator.vibrate(0)}}}),[c,D,H,g]);var q=y[g]||y.error,B=O||q.icon,F=n(null),G=f(o("100%"),2),J=G[0],K=G[1],Q=f(o(!1),2),R=Q[0],X=Q[1],Z=f(o(Date.now()),1)[0],_=f(o(0),2);_[0];var tt=_[1],et=f(o(p),2),nt=et[0],ot=et[1];e((function(){if(c&&p&&!R){var t=setInterval((function(){var t=Date.now()-Z;tt(t);var e=Math.max(0,p-t);ot(e),e<=0&&m()}),10);return function(){return clearInterval(t)}}}),[c,p,m,R,Z]),e((function(){F.current&&p>0&&K("".concat(nt/p*100,"%"))}),[nt,p]);return t.createElement("div",{className:"w-full",onMouseEnter:function(){return L&&X(!0)},onMouseLeave:function(){return L&&X(!1)},role:$,"aria-live":"polite"},t.createElement(d.div,{drag:!!U&&"x",dragConstraints:{left:0,right:0},onDragEnd:function(t,e){if(U){var n=Math.abs(e.velocity.x);(Math.abs(e.offset.x)>100||n>500)&&m()}},className:"toast-container"},t.createElement("div",{className:"toast-content ".concat(q.className," ").concat(T)},I&&p>0&&t.createElement(d.div,{ref:F,initial:{width:"100%"},animate:{width:R?J:"0%"},transition:{duration:p/1e3,ease:"linear",pause:R},className:"toast-progress",style:{zIndex:1}}),t.createElement(B,{className:"toast-icon"}),t.createElement("div",{className:"toast-message"},t.createElement("div",{className:"toast-title"},a),A&&t.createElement("div",{className:"toast-description"},A),k&&t.createElement("div",{className:"toast-action"},k)),t.createElement("button",{onClick:function(t){t.stopPropagation(),m()},className:"toast-close-button ".concat(q.buttonClass),"aria-label":"Dismiss",type:"button"},t.createElement(l,{className:"toast-close-icon"})))))},w=r(null),h=0,E=function(e){var n=e.children,r=f(o([]),2),i=r[0],a=r[1],s=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.id||"toast-".concat(h++),o={id:n,message:t,type:e.type||"info",duration:void 0!==e.duration?e.duration:5e3,position:e.position||"top-center",sound:void 0===e.sound||e.sound,customSound:void 0===e.customSound?void 0:null,customIcon:void 0===e.customIcon?void 0:null,description:e.description||"",showProgress:void 0!==e.showProgress&&e.showProgress,className:e.className||"",vibration:void 0===e.vibration||e.vibration,customVibration:void 0===e.customVibration?void 0:null,action:void 0===e.action?void 0:null,pauseOnHover:void 0===e.pauseOnHover||e.pauseOnHover,swipeToClose:void 0===e.swipeToClose||e.swipeToClose,role:e.role||"status",createdAt:Date.now()};return a((function(t){return[].concat(p(t),[o])})),n},c=function(t){a((function(e){return e.filter((function(e){return e.id!==t}))}))},u={info:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return s(t,Object.assign(Object.assign({},e),{type:"info"}))},success:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return s(t,Object.assign(Object.assign({},e),{type:"success"}))},error:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return s(t,Object.assign(Object.assign({},e),{type:"error"}))},warning:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return s(t,Object.assign(Object.assign({},e),{type:"warning"}))},custom:function(t){return s(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{})},dismiss:function(t){t?c(t):a([])}},l=i.reduce((function(t,e){var n=e.position;return t[n]||(t[n]=[]),t[n].push(e),t}),{});return Object.keys(l).forEach((function(t){l[t].sort((function(t,e){return t.createdAt-e.createdAt}))})),t.createElement(w.Provider,{value:u},n,Object.entries(l).map((function(e){var n=f(e,2),o=n[0],r=n[1];return t.createElement("div",{key:o,className:"fixed z-50 ".concat(o.includes("top")?"top-0":"bottom-0"," ").concat(o.includes("left")?"left-0":o.includes("right")?"right-0":"left-1/2 -translate-x-1/2"," ").concat(o.includes("center")?"w-full flex justify-center":"w-auto"," p-4 pointer-events-none"),style:{maxWidth:o.includes("center")?"100%":"auto",transform:o.includes("bottom")?"translateY(-100%)":"none"}},t.createElement("div",{className:"flex flex-col gap-3 ".concat(o.includes("left")?"items-start":o.includes("right")?"items-end":"items-center"," w-full max-w-sm sm:max-w-md")},t.createElement(m,{mode:"popLayout"},r.map((function(e,n){return t.createElement(d.div,{key:e.id,className:"pointer-events-auto w-full max-w-sm sm:max-w-md",initial:{opacity:0,y:o.includes("top")?-20:20,scale:.8},animate:{opacity:1,y:0,scale:1,transition:{type:"spring",stiffness:300,damping:30,delay:.05*n}},exit:{opacity:0,scale:.8,transition:{duration:.2}},layoutId:e.id,style:{transform:"translateY(".concat(80*n,"px)")}},t.createElement(g,{message:e.message,isVisible:!0,type:e.type,duration:e.duration,position:e.position,sound:e.sound,customSound:e.customSound,customIcon:e.customIcon,description:e.description,showProgress:e.showProgress,className:e.className,vibration:e.vibration,customVibration:e.customVibration,onDismiss:function(){return c(e.id)},action:e.action,pauseOnHover:e.pauseOnHover,swipeToClose:e.swipeToClose,role:e.role}))})))))})))},N=function(){var t=i(w);if(!t)throw new Error("useToast must be used within a ToastProvider");return t};export{g as Toast,E as ToastProvider,N as useToast};
//# sourceMappingURL=index.esm.js.map