Comparing version
@@ -1,12 +0,26 @@ | ||
import React from 'react'; | ||
import React, { CSSProperties } from 'react'; | ||
type ToastType = 'default' | 'success' | 'error' | 'loading'; | ||
type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'; | ||
type ToastState = 'enter' | 'idle' | 'leave'; | ||
type ToastOptions = Partial<Pick<IToast, 'style' | 'className'>>; | ||
type ToasterOptions = ToastOptions & { | ||
[key in ToastType]?: ToastOptions; | ||
}; | ||
interface ToasterProps { | ||
position?: ToasterPosition; | ||
options?: ToasterOptions; | ||
duration?: number; | ||
reverse?: boolean; | ||
style?: React.CSSProperties; | ||
className?: string; | ||
theme?: 'light' | 'dark'; | ||
} | ||
interface IToast { | ||
id: number; | ||
state: ToastState; | ||
type: ToastType; | ||
zIndex: number; | ||
title?: string; | ||
theme?: 'light' | 'dark'; | ||
style?: CSSProperties; | ||
className?: string; | ||
} | ||
@@ -18,3 +32,3 @@ /** | ||
*/ | ||
declare const Toaster: ({ position, duration, reverse, theme, style, className, }: ToasterProps) => React.JSX.Element; | ||
declare const Toaster: ({ position, duration, theme, options }: ToasterProps) => React.JSX.Element; | ||
@@ -21,0 +35,0 @@ declare const toast: ((message: string) => void) & { |
@@ -1,3 +0,3 @@ | ||
"use client";var H=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var Z=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var F=(t,e)=>{for(var s in e)f(t,s,{get:e[s],enumerable:!0})},v=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of O(e))!D.call(t,c)&&c!==s&&f(t,c,{get:()=>e[c],enumerable:!(r=M(e,c))||r.enumerable});return t};var b=(t,e,s)=>(s=t!=null?H(Z(t)):{},v(e||!t||!t.__esModule?f(s,"default",{value:t,enumerable:!0}):s,t)),Y=t=>v(f({},"__esModule",{value:!0}),t);var K={};F(K,{Toaster:()=>A,toast:()=>P});module.exports=Y(K);var i=b(require("react"));var T=class{constructor(){this.toasts=[],this.subscribers=[]}subscribe(e){return this.subscribers=[...this.subscribers,e],()=>{this.subscribers.splice(this.subscribers.indexOf(e),1)}}publish(e){this.subscribers.forEach(s=>s(e))}add(e,s){let r={id:this.toasts.length,state:"enter",type:s,title:e};return this.toasts=[...this.toasts,r],this.publish(r),r}update(e){let s=this.toasts.findIndex(r=>r.id===e.id);this.toasts[s]=e,this.publish(e)}},n=new T;var z=b(require("react"));function x(t,{insertAt:e}={}){if(!t||typeof document=="undefined")return;let s=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",e==="top"&&s.firstChild?s.insertBefore(r,s.firstChild):s.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}x(`.toast-enter{animation:enterAnimation .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast-leave{animation:leaveAnimation .4s cubic-bezier(.06,.71,.55,1) forwards}.loading-icon{width:16px;height:16px;margin-right:4px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:#e0e0e0;border-right-color:#111827;animation:rotateAnimation 1s linear infinite}@keyframes enterAnimation{0%{transform:translate3d(0,200%,0) scale(.6);opacity:.5}to{transform:translateZ(0) scale(1);opacity:1}}@keyframes leaveAnimation{0%{transform:translateZ(-1px) scale(1);opacity:1}to{transform:translate3d(0,150%,-1px) scale(.6);opacity:0}}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}} | ||
`);var m=b(require("react"));var I=m.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20","data-testid":"success-icon"},m.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"})),w=m.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20","data-testid":"error-icon"},m.default.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})),S=m.default.createElement("div",{className:"loading-icon","data-testid":"loading-icon"});var C=({toast:t})=>{let e=t.theme==="light"?"rgb(243, 244, 246)":"rgb(17, 24, 39)",s=t.theme==="light"?"rgb(17, 24, 39)":"rgb(243, 244, 246)";return z.default.createElement("div",{className:`toast-${t.state}`,style:{paddingTop:"0.5rem",paddingBottom:"0.5rem",paddingLeft:"1rem",paddingRight:"1rem",borderRadius:"0.375rem",backgroundColor:e,fontWeight:500,fontSize:"0.875rem",lineHeight:"1.25rem",color:s,zIndex:t.zIndex,display:"flex",gap:4,minWidth:220,position:"relative",alignItems:"center"},key:t.id},t.type==="success"&&I,t.type==="error"&&w,t.type==="loading"&&S,t.title)};var A=({position:t="bottom-right",duration:e=3e3,reverse:s=!1,theme:r="light",style:c,className:Q})=>{let[u,h]=(0,i.useState)([]),[k,E]=(0,i.useState)({}),[B,N]=(0,i.useState)(0);(0,i.useEffect)(()=>{let o=n.subscribe(a=>{h(d=>{var l=d.findIndex(g=>g.id===a.id);if(l===-1)return[...d,a];var p=[...d];return p[l]=a,p}),j(a)});return()=>{o()}},[]),(0,i.useEffect)(()=>{let[o,a]=t.split("-");E({[o]:0,[a]:0})},[t]),(0,i.useEffect)(()=>{N(u.length*41)},[u]);function j(o){setTimeout(()=>y(o,"idle"),300),o.type!=="loading"&&(setTimeout(()=>y(o,"leave"),e-100),setTimeout(()=>L(o),e))}function y(o,a){h(d=>{var l=d.slice(),p=l.findIndex(g=>g.id===o.id);return l[p]={...l[p],state:a},l})}let L=(0,i.useCallback)(o=>h(a=>a.filter(d=>d.id!==o.id)),[]),W=s?u.slice().reverse():u;return i.default.createElement("section",{style:{position:"fixed",zIndex:9999,display:"flex",flexDirection:"column",gap:5,margin:16,transform:"translateY(0)",height:B,transition:"all 230ms cubic-bezier(.21, 1.02, .73, 1)",...k}},t.startsWith("bottom")&&!s&&i.default.createElement("div",{className:"flex h-full w-full grow"}),W.map((o,a)=>i.default.createElement(C,{key:a,toast:{...o,zIndex:a,theme:r}})))};var $=(t,e)=>{var s=n.add(e.loading,"loading");return s.state="idle",t().then(r=>(s.type="success",s.title=e.success,n.update(s),r),r=>(s.type="error",s.title=e.error,n.update(s),Promise.reject(r)))},q=t=>{n.add(t,"success")},G=t=>{n.add(t,"error")},J=t=>{n.add(t,"default")},P=Object.assign(J,{success:q,error:G,promise:$});0&&(module.exports={Toaster,toast}); | ||
"use client";var M=Object.create;var u=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var O=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var F=(t,e,s)=>e in t?u(t,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[e]=s;var Y=(t,e)=>{for(var s in e)u(t,s,{get:e[s],enumerable:!0})},w=(t,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of H(e))!D.call(t,a)&&a!==s&&u(t,a,{get:()=>e[a],enumerable:!(r=$(e,a))||r.enumerable});return t};var b=(t,e,s)=>(s=t!=null?M(O(t)):{},w(e||!t||!t.__esModule?u(s,"default",{value:t,enumerable:!0}):s,t)),q=t=>w(u({},"__esModule",{value:!0}),t);var T=(t,e,s)=>(F(t,typeof e!="symbol"?e+"":e,s),s);var U={};Y(U,{Toaster:()=>B,toast:()=>C});module.exports=q(U);var o=b(require("react"));var x=class{constructor(){T(this,"toasts");T(this,"subscribers");this.toasts=[],this.subscribers=[]}subscribe(e){return this.subscribers=[...this.subscribers,e],()=>{this.subscribers.splice(this.subscribers.indexOf(e),1)}}publish(e){this.subscribers.forEach(s=>s(e))}add(e,s){let r={id:this.toasts.length,state:"enter",type:s,title:e};return this.toasts=[...this.toasts,r],this.publish(r),r}update(e){let s=this.toasts.findIndex(r=>r.id===e.id);this.toasts[s]=e,this.publish(e)}},d=new x;var v=b(require("react"));function y(t,{insertAt:e}={}){if(!t||typeof document=="undefined")return;let s=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css",e==="top"&&s.firstChild?s.insertBefore(r,s.firstChild):s.appendChild(r),r.styleSheet?r.styleSheet.cssText=t:r.appendChild(document.createTextNode(t))}y(`.toast-bottom-enter{animation:enterAnimationBottom .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast-bottom-leave{animation:leaveAnimationBottom .4s cubic-bezier(.06,.71,.55,1) forwards}.toast-top-enter{animation:enterAnimationTop .35s cubic-bezier(.21,1.02,.73,1) forwards}.toast-top-leave{animation:leaveAnimationTop .4s cubic-bezier(.06,.71,.55,1) forwards}.loading-icon{width:16px;height:16px;margin-right:4px;box-sizing:border-box;border:2px solid;border-radius:100%;border-color:#e0e0e0;border-right-color:#111827;animation:rotateAnimation 1s linear infinite}@keyframes enterAnimationBottom{0%{transform:translate3d(0,200%,0) scale(.6);opacity:.5}to{transform:translateZ(0) scale(1);opacity:1}}@keyframes leaveAnimationBottom{0%{transform:translateZ(-1px) scale(1);opacity:1}to{transform:translate3d(0,150%,-1px) scale(.6);opacity:0}}@keyframes enterAnimationTop{0%{transform:translate3d(0,-200%,0) scale(.6);opacity:.5}to{transform:translateZ(0) scale(1);opacity:1}}@keyframes leaveAnimationTop{0%{transform:translateZ(-1px) scale(1);opacity:1}to{transform:translate3d(0,-150%,-1px) scale(.6);opacity:0}}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(360deg)}} | ||
`);var m=b(require("react"));var z=m.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20","data-testid":"success-icon"},m.default.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z",clipRule:"evenodd"})),S=m.default.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",height:"20",width:"20","data-testid":"error-icon"},m.default.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z",clipRule:"evenodd"})),A=m.default.createElement("div",{className:"loading-icon","data-testid":"loading-icon"});var k=v.default.memo(({toast:t,position:e})=>{let s=t.theme==="light"?"rgb(243, 244, 246)":"rgb(17, 24, 39)",r=t.theme==="light"?"rgb(17, 24, 39)":"rgb(243, 244, 246)",a=e.startsWith("top");return v.default.createElement("div",{className:`toast-${a?"top":"bottom"}-${t.state} ${t.className}`,style:{paddingTop:"0.5rem",paddingBottom:"0.5rem",paddingLeft:"1rem",paddingRight:"1rem",borderRadius:"0.375rem",backgroundColor:s,fontWeight:500,fontSize:"0.875rem",lineHeight:"1.25rem",color:r,zIndex:a?9999-t.zIndex:t.zIndex,display:"flex",gap:4,minWidth:220,position:"relative",alignItems:"center",...t.style},key:t.id},t.type==="success"&&z,t.type==="error"&&S,t.type==="loading"&&A,t.title)});var B=({position:t="bottom-right",duration:e=3e3,theme:s="light",options:r})=>{let[a,h]=(0,o.useState)([]),[P,N]=(0,o.useState)({}),[E,j]=(0,o.useState)(0);(0,o.useEffect)(()=>{let i=d.subscribe(n=>{h(l=>{var c=l.findIndex(g=>g.id===n.id);if(c===-1)return[...l,n];var p=[...l];return p[c]=n,p}),W(n)});return()=>{i()}},[]),(0,o.useEffect)(()=>{let[i,n]=t.split("-");N({[i]:0,[n]:0})},[t]),(0,o.useEffect)(()=>{j(a.length*41)},[a]);function W(i){setTimeout(()=>I(i,"idle"),300),i.type!=="loading"&&(setTimeout(()=>I(i,"leave"),e-100),setTimeout(()=>Z(i),e))}function I(i,n){h(l=>{var c=l.slice(),p=c.findIndex(g=>g.id===i.id);return c[p]={...c[p],state:n},c})}let Z=(0,o.useCallback)(i=>h(n=>n.filter(l=>l.id!==i.id)),[]),f=t.startsWith("top"),L=(0,o.useMemo)(()=>f?a.slice().reverse():a,[f,a]);return o.default.createElement("section",{style:{position:"fixed",zIndex:9999,display:"flex",flexDirection:"column",gap:5,margin:16,transform:"translateY(0)",height:E,transition:"all 230ms cubic-bezier(.21, 1.02, .73, 1)",...P}},!f&&o.default.createElement("div",{className:"flex h-full w-full grow"}),L.map((i,n)=>o.default.createElement(k,{key:i.id,toast:{...i,zIndex:n,theme:s,...r,...r==null?void 0:r[i.type]},position:t})),f&&o.default.createElement("div",{className:"flex h-full w-full grow"}))};var G=(t,e)=>{var s=d.add(e.loading,"loading");return t().then(r=>(s.type="success",s.title=e.success,s.state="idle",d.update(s),r),r=>(s.type="error",s.title=e.error,s.state="idle",d.update(s),Promise.reject(r)))},J=t=>{d.add(t,"success")},K=t=>{d.add(t,"error")},Q=t=>{d.add(t,"default")},C=Object.assign(Q,{success:J,error:K,promise:G});0&&(module.exports={Toaster,toast}); | ||
//# sourceMappingURL=index.js.map |
MIT License | ||
Copyright (c) 2023 Patrick Gerstacker | ||
Copyright (c) 2024 Patrick Gerstacker | ||
@@ -21,2 +21,2 @@ Permission is hereby granted, free of charge, to any person obtaining a copy | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. | ||
SOFTWARE. |
{ | ||
"name": "alert", | ||
"version": "6.0.1", | ||
"version": "6.0.2", | ||
"description": "Customizable toast component for React", | ||
@@ -44,16 +44,16 @@ "author": "Patrick Gerstacker", | ||
"devDependencies": { | ||
"@testing-library/jest-dom": "^6.1.4", | ||
"@testing-library/react": "^14.0.0", | ||
"@types/jest": "^29.5.5", | ||
"@types/node": "^18.11.13", | ||
"@types/react": "^18.0.26", | ||
"@testing-library/jest-dom": "^6.4.2", | ||
"@testing-library/react": "^14.2.0", | ||
"@types/jest": "^29.5.11", | ||
"@types/node": "^20.11.17", | ||
"@types/react": "^18.2.48", | ||
"jest": "^29.7.0", | ||
"jest-environment-jsdom": "^29.7.0", | ||
"prettier": "^2.8.4", | ||
"prettier": "^3.2.4", | ||
"react": "^18.2.0", | ||
"react-dom": "^18.2.0", | ||
"ts-jest": "^29.1.1", | ||
"tsup": "^6.4.0", | ||
"turbo": "1.6", | ||
"typescript": "^4.8.4" | ||
"ts-jest": "^29.1.2", | ||
"tsup": "^8.0.1", | ||
"turbo": "1.10", | ||
"typescript": "^5.3.3" | ||
}, | ||
@@ -60,0 +60,0 @@ "peerDependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
50927
13.29%9
12.5%85
30.77%