mirror of
https://github.com/CommunityOx/ox_lib.git
synced 2026-11-03 05:45:05 +00:00
fix(web): re-apply patch for react-hot-toast (#13)
This commit is contained in:
ANTOND. authored and 
GitHub committed
1 parent
b5fdd8a160
commit
22b3600a14
5 files changed
+288
-235
No files matched your search
+4
-1
@@ -21,7 +21,7 @@
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.41.3",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-hot-toast": "^2.5.2",
|
||||
"react-markdown": "^8.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"tinycolor2": "^1.6.0",
|
||||
@@ -46,6 +46,9 @@
|
||||
},
|
||||
},
|
||||
},
|
||||
"patchedDependencies": {
|
||||
"react-hot-toast@2.5.2": "patches/react-hot-toast@2.5.2.patch",
|
||||
},
|
||||
"packages": {
|
||||
"@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
|
||||
|
||||
|
||||
+3
-5
@@ -21,7 +21,7 @@
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hook-form": "^7.41.3",
|
||||
"react-hot-toast": "^2.4.0",
|
||||
"react-hot-toast": "^2.5.2",
|
||||
"react-markdown": "^8.0.1",
|
||||
"remark-gfm": "^3.0.1",
|
||||
"tinycolor2": "^1.6.0",
|
||||
@@ -50,9 +50,7 @@
|
||||
"prop-types": "^15.8.1",
|
||||
"rimraf": "^3.0.2"
|
||||
},
|
||||
"pnpm": {
|
||||
"patchedDependencies": {
|
||||
"react-hot-toast@2.4.0": "patches/react-hot-toast@2.4.0.patch"
|
||||
}
|
||||
"patchedDependencies": {
|
||||
"react-hot-toast@2.5.2": "patches/react-hot-toast@2.5.2.patch"
|
||||
}
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
diff --git a/dist/index.d.ts b/dist/index.d.ts
|
||||
index 4b208397b30693e124aa0d8802be41104bb4ae23..8c9d448c9e10173616d58ac3ab443ea726bb2806 100644
|
||||
--- a/dist/index.d.ts
|
||||
+++ b/dist/index.d.ts
|
||||
@@ -3,7 +3,7 @@ import { CSSProperties } from 'react';
|
||||
import * as goober from 'goober';
|
||||
|
||||
declare type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
|
||||
-declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
||||
+declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-right' | 'center-left';
|
||||
declare type Renderable = JSX.Element | string | null;
|
||||
interface IconTheme {
|
||||
primary: string;
|
||||
diff --git a/dist/index.js b/dist/index.js
|
||||
index 3cf68f6f3f944047d29538341561ed58d6484823..34dd98b4d79a6dace516caa4435d214d1c920804 100644
|
||||
--- a/dist/index.js
|
||||
+++ b/dist/index.js
|
||||
@@ -1,4 +1,4 @@
|
||||
-"use strict";var Y=Object.create;var E=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var o in t)E(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of G(t))!Z.call(e,r)&&r!==o&&E(e,r,{get:()=>t[r],enumerable:!(s=q(t,r))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?Y(K(e)):{},j(t||!e||!e.__esModule?E(o,"default",{value:e,enumerable:!0}):o,e)),te=e=>j(E({},"__esModule",{value:!0}),e);var Ve={};ee(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>M,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>J,default:()=>_e,resolveValue:()=>u,toast:()=>n,useToaster:()=>V,useToasterStore:()=>_});module.exports=te(Ve);var oe=e=>typeof e=="function",u=(e,t)=>oe(e)?e(t):e;var Q=(()=>{let e=0;return()=>(++e).toString()})(),R=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var k=require("react"),re=20;var v=new Map,se=1e3,X=e=>{if(v.has(e))return;let t=setTimeout(()=>{v.delete(e),l({type:4,toastId:e})},se);v.set(e,t)},ae=e=>{let t=v.get(e);t&&clearTimeout(t)},H=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,re)};case 1:return t.toast.id&&ae(t.toast.id),{...e,toasts:e.toasts.map(a=>a.id===t.toast.id?{...a,...t.toast}:a)};case 2:let{toast:o}=t;return e.toasts.find(a=>a.id===o.id)?H(e,{type:1,toast:o}):H(e,{type:0,toast:o});case 3:let{toastId:s}=t;return s?X(s):e.toasts.forEach(a=>{X(a.id)}),{...e,toasts:e.toasts.map(a=>a.id===s||s===void 0?{...a,visible:!1}:a)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(a=>a.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let r=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(a=>({...a,pauseDuration:a.pauseDuration+r}))}}},I=[],D={toasts:[],pausedAt:void 0},l=e=>{D=H(D,e),I.forEach(t=>{t(D)})},ie={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},_=(e={})=>{let[t,o]=(0,k.useState)(D);(0,k.useEffect)(()=>(I.push(o),()=>{let r=I.indexOf(o);r>-1&&I.splice(r,1)}),[t]);let s=t.toasts.map(r=>{var a,c;return{...e,...e[r.type],...r,duration:r.duration||((a=e[r.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||ie[r.type],style:{...e.style,...(c=e[r.type])==null?void 0:c.style,...r.style}}});return{...t,toasts:s}};var ce=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||Q()}),S=e=>(t,o)=>{let s=ce(t,e,o);return l({type:2,toast:s}),s.id},n=(e,t)=>S("blank")(e,t);n.error=S("error");n.success=S("success");n.loading=S("loading");n.custom=S("custom");n.dismiss=e=>{l({type:3,toastId:e})};n.remove=e=>l({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return e.then(r=>(n.success(u(t.success,r),{id:s,...o,...o==null?void 0:o.success}),r)).catch(r=>{n.error(u(t.error,r),{id:s,...o,...o==null?void 0:o.error})}),e};var A=require("react");var pe=(e,t)=>{l({type:1,toast:{id:e,height:t}})},de=()=>{l({type:5,time:Date.now()})},V=e=>{let{toasts:t,pausedAt:o}=_(e);(0,A.useEffect)(()=>{if(o)return;let a=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(a-i.createdAt);if(d<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),d)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=(0,A.useCallback)(()=>{o&&l({type:6,time:Date.now()})},[o]),r=(0,A.useCallback)((a,c)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:p}=c||{},g=t.filter(m=>(m.position||p)===(a.position||p)&&m.height),z=g.findIndex(m=>m.id===a.id),O=g.filter((m,B)=>B<z&&m.visible).length;return g.filter(m=>m.visible).slice(...i?[O+1]:[0,O]).reduce((m,B)=>m+(B.height||0)+d,0)},[t]);return{toasts:t,handlers:{updateHeight:pe,startPause:de,endPause:s,calculateOffset:r}}};var T=W(require("react")),b=require("goober");var y=W(require("react")),x=require("goober");var h=require("goober"),me=h.keyframes`
|
||||
+"use strict";var Y=Object.create;var E=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Z=Object.prototype.hasOwnProperty;var ee=(e,t)=>{for(var o in t)E(e,o,{get:t[o],enumerable:!0})},j=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of G(t))!Z.call(e,r)&&r!==o&&E(e,r,{get:()=>t[r],enumerable:!(s=q(t,r))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?Y(K(e)):{},j(t||!e||!e.__esModule?E(o,"default",{value:e,enumerable:!0}):o,e)),te=e=>j(E({},"__esModule",{value:!0}),e);var Ve={};ee(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>M,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>J,default:()=>_e,resolveValue:()=>m,toast:()=>i,useToaster:()=>V,useToasterStore:()=>_});module.exports=te(Ve);var oe=e=>typeof e=="function",m=(e,t)=>oe(e)?e(t):e;var Q=(()=>{let e=0;return()=>(++e).toString()})(),R=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var k=require("react"),re=20;var v=new Map,se=1e3,X=e=>{if(v.has(e))return;let t=setTimeout(()=>{v.delete(e),l({type:4,toastId:e})},se);v.set(e,t)},ae=e=>{let t=v.get(e);t&&clearTimeout(t)},H=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,re)};case 1:return t.toast.id&&ae(t.toast.id),{...e,toasts:e.toasts.map(a=>a.id===t.toast.id?{...a,...t.toast}:a)};case 2:let{toast:o}=t;return e.toasts.find(a=>a.id===o.id)?H(e,{type:1,toast:o}):H(e,{type:0,toast:o});case 3:let{toastId:s}=t;return s?X(s):e.toasts.forEach(a=>{X(a.id)}),{...e,toasts:e.toasts.map(a=>a.id===s||s===void 0?{...a,visible:!1}:a)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(a=>a.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let r=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(a=>({...a,pauseDuration:a.pauseDuration+r}))}}},I=[],D={toasts:[],pausedAt:void 0},l=e=>{D=H(D,e),I.forEach(t=>{t(D)})},ne={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},_=(e={})=>{let[t,o]=(0,k.useState)(D);(0,k.useEffect)(()=>(I.push(o),()=>{let r=I.indexOf(o);r>-1&&I.splice(r,1)}),[t]);let s=t.toasts.map(r=>{var a,c;return{...e,...e[r.type],...r,duration:r.duration||((a=e[r.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||ne[r.type],style:{...e.style,...(c=e[r.type])==null?void 0:c.style,...r.style}}});return{...t,toasts:s}};var ce=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||Q()}),S=e=>(t,o)=>{let s=ce(t,e,o);return l({type:2,toast:s}),s.id},i=(e,t)=>S("blank")(e,t);i.error=S("error");i.success=S("success");i.loading=S("loading");i.custom=S("custom");i.dismiss=e=>{l({type:3,toastId:e})};i.remove=e=>l({type:4,toastId:e});i.promise=(e,t,o)=>{let s=i.loading(t.loading,{...o,...o==null?void 0:o.loading});return e.then(r=>(i.success(m(t.success,r),{id:s,...o,...o==null?void 0:o.success}),r)).catch(r=>{i.error(m(t.error,r),{id:s,...o,...o==null?void 0:o.error})}),e};var A=require("react");var pe=(e,t)=>{l({type:1,toast:{id:e,height:t}})},de=()=>{l({type:5,time:Date.now()})},V=e=>{let{toasts:t,pausedAt:o}=_(e);(0,A.useEffect)(()=>{if(o)return;let a=Date.now(),c=t.map(n=>{if(n.duration===1/0)return;let d=(n.duration||0)+n.pauseDuration-(a-n.createdAt);if(d<0){n.visible&&i.dismiss(n.id);return}return setTimeout(()=>i.dismiss(n.id),d)});return()=>{c.forEach(n=>n&&clearTimeout(n))}},[t,o]);let s=(0,A.useCallback)(()=>{o&&l({type:6,time:Date.now()})},[o]),r=(0,A.useCallback)((a,c)=>{let{reverseOrder:n=!1,gutter:d=8,defaultPosition:p}=c||{},g=t.filter(u=>(u.position||p)===(a.position||p)&&u.height),z=g.findIndex(u=>u.id===a.id),O=g.filter((u,B)=>B<z&&u.visible).length;return g.filter(u=>u.visible).slice(...n?[O+1]:[0,O]).reduce((u,B)=>u+(B.height||0)+d,0)},[t]);return{toasts:t,handlers:{updateHeight:pe,startPause:de,endPause:s,calculateOffset:r}}};var f=W(require("react")),b=require("goober");var y=W(require("react")),x=require("goober");var h=require("goober"),ue=h.keyframes`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
opacity: 0;
|
||||
@@ -6,7 +6,7 @@ from {
|
||||
to {
|
||||
transform: scale(1) rotate(45deg);
|
||||
opacity: 1;
|
||||
-}`,ue=h.keyframes`
|
||||
+}`,me=h.keyframes`
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
@@ -31,14 +31,14 @@ to {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
- animation: ${me} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
+ animation: ${ue} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
forwards;
|
||||
animation-delay: 100ms;
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
- animation: ${ue} 0.15s ease-out forwards;
|
||||
+ animation: ${me} 0.15s ease-out forwards;
|
||||
animation-delay: 150ms;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
@@ -55,7 +55,7 @@ to {
|
||||
animation-delay: 180ms;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
-`;var C=require("goober"),Te=C.keyframes`
|
||||
+`;var C=require("goober"),fe=C.keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@@ -70,8 +70,8 @@ to {
|
||||
border-radius: 100%;
|
||||
border-color: ${e=>e.secondary||"#e0e0e0"};
|
||||
border-right-color: ${e=>e.primary||"#616161"};
|
||||
- animation: ${Te} 1s linear infinite;
|
||||
-`;var P=require("goober"),fe=P.keyframes`
|
||||
+ animation: ${fe} 1s linear infinite;
|
||||
+`;var P=require("goober"),Te=P.keyframes`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
opacity: 0;
|
||||
@@ -102,7 +102,7 @@ to {
|
||||
position: relative;
|
||||
transform: rotate(45deg);
|
||||
|
||||
- animation: ${fe} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
+ animation: ${Te} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
forwards;
|
||||
animation-delay: 100ms;
|
||||
&:after {
|
||||
@@ -169,10 +169,10 @@ to {
|
||||
color: inherit;
|
||||
flex: 1 1 auto;
|
||||
white-space: pre-line;
|
||||
-`,ve=(e,t)=>{let s=e.includes("top")?1:-1,[r,a]=R()?[Pe,Oe]:[Se(s),Ae(s)];return{animation:t?`${(0,b.keyframes)(r)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,b.keyframes)(a)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=T.memo(({toast:e,position:t,style:o,children:s})=>{let r=e.height?ve(e.position||t||"top-center",e.visible):{opacity:0},a=T.createElement(U,{toast:e}),c=T.createElement(Re,{...e.ariaProps},u(e.message,e));return T.createElement(Ee,{className:e.className,style:{...r,...o,...e.style}},typeof s=="function"?s({icon:a,message:c}):T.createElement(T.Fragment,null,a,c))});var N=require("goober"),f=W(require("react"));(0,N.setup)(f.createElement);var Ie=({id:e,className:t,style:o,onHeightUpdate:s,children:r})=>{let a=f.useCallback(c=>{if(c){let i=()=>{let d=c.getBoundingClientRect().height;s(e,d)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return f.createElement("div",{ref:a,className:t,style:o},r)},De=(e,t)=>{let o=e.includes("top"),s=o?{top:0}:{bottom:0},r=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:R()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...r}},ke=N.css`
|
||||
+`,ve=(e,t)=>{let s=e.includes("top")?1:-1,[r,a]=R()?[Pe,Oe]:[Se(s),Ae(s)];return{animation:t?`${(0,b.keyframes)(r)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,b.keyframes)(a)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=f.memo(({toast:e,position:t,style:o,children:s})=>{let r=e.height?ve(e.position||t||"top-center",e.visible):{opacity:0},a=f.createElement(U,{toast:e}),c=f.createElement(Re,{...e.ariaProps},m(e.message,e));return f.createElement(Ee,{className:e.className,style:{...r,...o,...e.style}},typeof s=="function"?s({icon:a,message:c}):f.createElement(f.Fragment,null,a,c))});var N=require("goober"),T=W(require("react"));(0,N.setup)(T.createElement);var Ie=({id:e,className:t,style:o,onHeightUpdate:s,children:r})=>{let a=T.useCallback(c=>{if(c){let n=()=>{let d=c.getBoundingClientRect().height;s(e,d)};n(),new MutationObserver(n).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:a,className:t,style:o},r)},De=(e,t)=>{let o=e.includes("top")||e.includes("center-"),s=o?{top:e.includes("center-")?"50%":0}:{bottom:0},r=e.includes("center-right")?{justifyContent:"flex-end"}:e.includes("center-left")?{justifyContent:"flex-start"}:e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:R()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...r}},ke=N.css`
|
||||
z-index: 9999;
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
-`,L=16,J=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:r,containerStyle:a,containerClassName:c})=>{let{toasts:i,handlers:d}=V(o);return f.createElement("div",{style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...a},className:c,onMouseEnter:d.startPause,onMouseLeave:d.endPause},i.map(p=>{let g=p.position||t,z=d.calculateOffset(p,{reverseOrder:e,gutter:s,defaultPosition:t}),O=De(g,z);return f.createElement(Ie,{id:p.id,key:p.id,onHeightUpdate:d.updateHeight,className:p.visible?ke:"",style:O},p.type==="custom"?u(p.message,p):r?r(p):f.createElement($,{toast:p,position:g}))}))};var _e=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
|
||||
+`,L=16,J=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:r,containerStyle:a,containerClassName:c})=>{let{toasts:n,handlers:d}=V(o);return T.createElement("div",{style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...a},className:c,onMouseEnter:d.startPause,onMouseLeave:d.endPause},n.map(p=>{let g=p.position||t,z=d.calculateOffset(p,{reverseOrder:e,gutter:s,defaultPosition:t}),O=De(g,z);return T.createElement(Ie,{id:p.id,key:p.id,onHeightUpdate:d.updateHeight,className:p.visible?ke:"",style:O},p.type==="custom"?m(p.message,p):r?r(p):T.createElement($,{toast:p,position:g}))}))};var _e=i;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
|
||||
//# sourceMappingURL=index.js.map
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.js.map b/dist/index.js.map
|
||||
index d7510655f2644f5a0b9d8c104d0a6d23ee4a7717..53d2c71f53732a2041b232d1a73593d16e025723 100644
|
||||
--- a/dist/index.js.map
|
||||
+++ b/dist/index.js.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx"],"sourcesContent":["import { toast } from './core/toast';\n\nexport * from './headless';\n\nexport { ToastBar } from './components/toast-bar';\nexport { ToastIcon } from './components/toast-icon';\nexport { Toaster } from './components/toaster';\nexport { CheckmarkIcon } from './components/checkmark';\nexport { ErrorIcon } from './components/error';\nexport { LoaderIcon } from './components/loader';\n\nexport { toast };\nexport default toast;\n","import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = JSX.Element | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => JSX.Element;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nconst toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();\n\nexport const TOAST_EXPIRE_DISMISS_DELAY = 1000;\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionType.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_EXPIRE_DISMISS_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nconst clearFromRemoveQueue = (toastId: string) => {\n const timeout = toastTimeouts.get(toastId);\n if (timeout) {\
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx"],"sourcesContent":["import { toast } from './core/toast';\r\n\r\nexport * from './headless';\r\n\r\nexport { ToastBar } from './components/toast-bar';\r\nexport { ToastIcon } from './components/toast-icon';\r\nexport { Toaster } from './components/toaster';\r\nexport { CheckmarkIcon } from './components/checkmark';\r\nexport { ErrorIcon } from './components/error';\r\nexport { LoaderIcon } from './components/loader';\r\n\r\nexport { toast };\r\nexport default toast;\r\n","import { CSSProperties } from 'react';\r\n\r\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\r\nexport type ToastPosition =\r\n | 'top-left'\r\n | 'top-center'\r\n | 'top-right'\r\n | 'bottom-left'\r\n | 'bottom-center'\r\n | 'bottom-right'\r\n | 'center-right'\r\n | 'center-left';\r\n\r\nexport type Renderable = JSX.Element | string | null;\r\n\r\nexport interface IconTheme {\r\n primary: string;\r\n secondary: string;\r\n}\r\n\r\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\r\nexport type ValueOrFunction<TValue, TArg> =\r\n | TValue\r\n | ValueFunction<TValue, TArg>;\r\n\r\nconst isFunction = <TValue, TArg>(\r\n valOrFunction: ValueOrFunction<TValue, TArg>\r\n): valOrFunction is ValueFunction<TValue, TArg> =>\r\n typeof valOrFunction === 'function';\r\n\r\nexport const resolveValue = <TValue, TArg>(\r\n valOrFunction: ValueOrFunction<TValue, TArg>,\r\n arg: TArg\r\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\r\n\r\nexport interface Toast {\r\n type: ToastType;\r\n id: string;\r\n message: ValueOrFunction<Renderable, Toast>;\r\n icon?: Renderable;\r\n duration?: number;\r\n pauseDuration: number;\r\n position?: ToastPosition;\r\n\r\n ariaProps: {\r\n role: 'status' | 'alert';\r\n 'aria-live': 'assertive' | 'off' | 'polite';\r\n };\r\n\r\n style?: CSSProperties;\r\n className?: string;\r\n iconTheme?: IconTheme;\r\n\r\n createdAt: number;\r\n visible: boolean;\r\n height?: number;\r\n}\r\n\r\nexport type ToastOptions = Partial<\r\n Pick<\r\n Toast,\r\n | 'id'\r\n | 'icon'\r\n | 'duration'\r\n | 'ariaProps'\r\n | 'className'\r\n | 'style'\r\n | 'position'\r\n | 'iconTheme'\r\n >\r\n>;\r\n\r\nexport type DefaultToastOptions = ToastOptions & {\r\n [key in ToastType]?: ToastOptions;\r\n};\r\n\r\nexport interface ToasterProps {\r\n position?: ToastPosition;\r\n toastOptions?: DefaultToastOptions;\r\n reverseOrder?: boolean;\r\n gutter?: number;\r\n containerStyle?: React.CSSProperties;\r\n containerClassName?: string;\r\n children?: (toast: Toast) => JSX.Element;\r\n}\r\n\r\nexport interface ToastWrapperProps {\r\n id: string;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n onHeightUpdate: (id: string, height: number) => void;\r\n children?: React.ReactNode;\r\n}\r\n","export const genId = (() => {\r\n let count = 0;\r\n return () => {\r\n return (++count).toString();\r\n };\r\n})();\r\n\r\nexport const prefersReducedMotion = (() => {\r\n // Cache result\r\n let shouldReduceMotion: boolean | undefined = undefined;\r\n\r\n return () => {\r\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\r\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\r\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\r\n }\r\n return shouldReduceMotion;\r\n };\r\n})();\r\n","import { useEffect, useState } from 'react';\r\nimport { DefaultToastOptions, Toast, ToastType } from './types';\r\n\r\nconst TOAST_LIMIT = 20;\r\n\r\nexport enum ActionType {\r\n ADD_TOAST,\r\n UPDATE_TOAST,\r\n UPSERT_TOAST,\r\n DISMISS_TOAST,\r\n REMOVE_TOAST,\r\n START_PAUSE,\r\n END_PAUSE,\r\n}\r\n\r\ntype Action =\r\n | {\r\n type: ActionType.ADD_TOAST;\r\n toast: Toast;\r\n }\r\n | {\r\n type: ActionType.UPSERT_TOAST;\r\n toast: Toast;\r\n }\r\n | {\r\n type: ActionType.UPDATE_TOAST;\r\n toast: Partial<Toast>;\r\n }\r\n | {\r\n type: ActionType.DISMISS_TOAST;\r\n toastId?: string;\r\n }\r\n | {\r\n type: ActionType.REMOVE_TOAST;\r\n toastId?: string;\r\n }\r\n | {\r\n type: ActionType.START_PAUSE;\r\n time: number;\r\n }\r\n | {\r\n type: ActionType.END_PAUSE;\r\n time: number;\r\n };\r\n\r\ninterface State {\r\n toasts: Toast[];\r\n pausedAt: number | undefined;\r\n}\r\n\r\nconst toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();\r\n\r\nexport const TOAST_EXPIRE_DISMISS_DELAY = 1000;\r\n\r\nconst addToRemoveQueue = (toastId: string) => {\r\n if (toastTimeouts.
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.mjs b/dist/index.mjs
|
||||
index 9d9e5a07f2526134ccffc5d501ad60baa913e6ba..c36187d9f1d5a05b493f5032e868d0a56c4869b8 100644
|
||||
--- a/dist/index.mjs
|
||||
+++ b/dist/index.mjs
|
||||
@@ -1,4 +1,4 @@
|
||||
-var W=e=>typeof e=="function",T=(e,t)=>W(e)?e(t):e;var U=(()=>{let e=0;return()=>(++e).toString()})(),b=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as H,useState as j}from"react";var Q=20;var S=new Map,X=1e3,$=e=>{if(S.has(e))return;let t=setTimeout(()=>{S.delete(e),u({type:4,toastId:e})},X);S.set(e,t)},J=e=>{let t=S.get(e);t&&clearTimeout(t)},v=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,Q)};case 1:return t.toast.id&&J(t.toast.id),{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return e.toasts.find(r=>r.id===o.id)?v(e,{type:1,toast:o}):v(e,{type:0,toast:o});case 3:let{toastId:s}=t;return s?$(s):e.toasts.forEach(r=>{$(r.id)}),{...e,toasts:e.toasts.map(r=>r.id===s||s===void 0?{...r,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+a}))}}},A=[],P={toasts:[],pausedAt:void 0},u=e=>{P=v(P,e),A.forEach(t=>{t(P)})},Y={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},I=(e={})=>{let[t,o]=j(P);H(()=>(A.push(o),()=>{let a=A.indexOf(o);a>-1&&A.splice(a,1)}),[t]);let s=t.toasts.map(a=>{var r,c;return{...e,...e[a.type],...a,duration:a.duration||((r=e[a.type])==null?void 0:r.duration)||(e==null?void 0:e.duration)||Y[a.type],style:{...e.style,...(c=e[a.type])==null?void 0:c.style,...a.style}}});return{...t,toasts:s}};var G=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||U()}),h=e=>(t,o)=>{let s=G(t,e,o);return u({type:2,toast:s}),s.id},n=(e,t)=>h("blank")(e,t);n.error=h("error");n.success=h("success");n.loading=h("loading");n.custom=h("custom");n.dismiss=e=>{u({type:3,toastId:e})};n.remove=e=>u({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return e.then(a=>(n.success(T(t.success,a),{id:s,...o,...o==null?void 0:o.success}),a)).catch(a=>{n.error(T(t.error,a),{id:s,...o,...o==null?void 0:o.error})}),e};import{useEffect as K,useCallback as L}from"react";var Z=(e,t)=>{u({type:1,toast:{id:e,height:t}})},ee=()=>{u({type:5,time:Date.now()})},D=e=>{let{toasts:t,pausedAt:o}=I(e);K(()=>{if(o)return;let r=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(d<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),d)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=L(()=>{o&&u({type:6,time:Date.now()})},[o]),a=L((r,c)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:p}=c||{},g=t.filter(m=>(m.position||p)===(r.position||p)&&m.height),E=g.findIndex(m=>m.id===r.id),x=g.filter((m,R)=>R<E&&m.visible).length;return g.filter(m=>m.visible).slice(...i?[x+1]:[0,x]).reduce((m,R)=>m+(R.height||0)+d,0)},[t]);return{toasts:t,handlers:{updateHeight:Z,startPause:ee,endPause:s,calculateOffset:a}}};import*as l from"react";import{styled as B,keyframes as z}from"goober";import*as y from"react";import{styled as C,keyframes as me}from"goober";import{styled as te,keyframes as k}from"goober";var oe=k`
|
||||
+var W=e=>typeof e=="function",f=(e,t)=>W(e)?e(t):e;var U=(()=>{let e=0;return()=>(++e).toString()})(),b=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as H,useState as j}from"react";var Q=20;var S=new Map,X=1e3,$=e=>{if(S.has(e))return;let t=setTimeout(()=>{S.delete(e),m({type:4,toastId:e})},X);S.set(e,t)},J=e=>{let t=S.get(e);t&&clearTimeout(t)},v=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,Q)};case 1:return t.toast.id&&J(t.toast.id),{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return e.toasts.find(r=>r.id===o.id)?v(e,{type:1,toast:o}):v(e,{type:0,toast:o});case 3:let{toastId:s}=t;return s?$(s):e.toasts.forEach(r=>{$(r.id)}),{...e,toasts:e.toasts.map(r=>r.id===s||s===void 0?{...r,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+a}))}}},A=[],P={toasts:[],pausedAt:void 0},m=e=>{P=v(P,e),A.forEach(t=>{t(P)})},Y={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},I=(e={})=>{let[t,o]=j(P);H(()=>(A.push(o),()=>{let a=A.indexOf(o);a>-1&&A.splice(a,1)}),[t]);let s=t.toasts.map(a=>{var r,c;return{...e,...e[a.type],...a,duration:a.duration||((r=e[a.type])==null?void 0:r.duration)||(e==null?void 0:e.duration)||Y[a.type],style:{...e.style,...(c=e[a.type])==null?void 0:c.style,...a.style}}});return{...t,toasts:s}};var G=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||U()}),h=e=>(t,o)=>{let s=G(t,e,o);return m({type:2,toast:s}),s.id},i=(e,t)=>h("blank")(e,t);i.error=h("error");i.success=h("success");i.loading=h("loading");i.custom=h("custom");i.dismiss=e=>{m({type:3,toastId:e})};i.remove=e=>m({type:4,toastId:e});i.promise=(e,t,o)=>{let s=i.loading(t.loading,{...o,...o==null?void 0:o.loading});return e.then(a=>(i.success(f(t.success,a),{id:s,...o,...o==null?void 0:o.success}),a)).catch(a=>{i.error(f(t.error,a),{id:s,...o,...o==null?void 0:o.error})}),e};import{useEffect as K,useCallback as L}from"react";var Z=(e,t)=>{m({type:1,toast:{id:e,height:t}})},ee=()=>{m({type:5,time:Date.now()})},D=e=>{let{toasts:t,pausedAt:o}=I(e);K(()=>{if(o)return;let r=Date.now(),c=t.map(n=>{if(n.duration===1/0)return;let d=(n.duration||0)+n.pauseDuration-(r-n.createdAt);if(d<0){n.visible&&i.dismiss(n.id);return}return setTimeout(()=>i.dismiss(n.id),d)});return()=>{c.forEach(n=>n&&clearTimeout(n))}},[t,o]);let s=L(()=>{o&&m({type:6,time:Date.now()})},[o]),a=L((r,c)=>{let{reverseOrder:n=!1,gutter:d=8,defaultPosition:p}=c||{},g=t.filter(u=>(u.position||p)===(r.position||p)&&u.height),E=g.findIndex(u=>u.id===r.id),x=g.filter((u,R)=>R<E&&u.visible).length;return g.filter(u=>u.visible).slice(...n?[x+1]:[0,x]).reduce((u,R)=>u+(R.height||0)+d,0)},[t]);return{toasts:t,handlers:{updateHeight:Z,startPause:ee,endPause:s,calculateOffset:a}}};import*as l from"react";import{styled as B,keyframes as z}from"goober";import*as y from"react";import{styled as C,keyframes as ue}from"goober";import{styled as te,keyframes as k}from"goober";var oe=k`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
opacity: 0;
|
||||
@@ -55,7 +55,7 @@ to {
|
||||
animation-delay: 180ms;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
-`;import{styled as ae,keyframes as ie}from"goober";var ne=ie`
|
||||
+`;import{styled as ae,keyframes as ne}from"goober";var ie=ne`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@@ -70,7 +70,7 @@ to {
|
||||
border-radius: 100%;
|
||||
border-color: ${e=>e.secondary||"#e0e0e0"};
|
||||
border-right-color: ${e=>e.primary||"#616161"};
|
||||
- animation: ${ne} 1s linear infinite;
|
||||
+ animation: ${ie} 1s linear infinite;
|
||||
`;import{styled as ce,keyframes as N}from"goober";var pe=N`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
@@ -120,7 +120,7 @@ to {
|
||||
height: 10px;
|
||||
width: 6px;
|
||||
}
|
||||
-`;var ue=C("div")`
|
||||
+`;var me=C("div")`
|
||||
position: absolute;
|
||||
`,le=C("div")`
|
||||
position: relative;
|
||||
@@ -129,7 +129,7 @@ to {
|
||||
align-items: center;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
-`,Te=me`
|
||||
+`,fe=ue`
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.4;
|
||||
@@ -137,14 +137,14 @@ from {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
-}`,fe=C("div")`
|
||||
+}`,Te=C("div")`
|
||||
position: relative;
|
||||
transform: scale(0.6);
|
||||
opacity: 0.4;
|
||||
min-width: 20px;
|
||||
- animation: ${Te} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
+ animation: ${fe} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
forwards;
|
||||
-`,M=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?y.createElement(fe,null,t):t:o==="blank"?null:y.createElement(le,null,y.createElement(V,{...s}),o!=="loading"&&y.createElement(ue,null,o==="error"?y.createElement(_,{...s}):y.createElement(w,{...s})))};var ye=e=>`
|
||||
+`,M=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?y.createElement(Te,null,t):t:o==="blank"?null:y.createElement(le,null,y.createElement(V,{...s}),o!=="loading"&&y.createElement(me,null,o==="error"?y.createElement(_,{...s}):y.createElement(w,{...s})))};var ye=e=>`
|
||||
0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
|
||||
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
|
||||
`,ge=e=>`
|
||||
@@ -169,10 +169,10 @@ to {
|
||||
color: inherit;
|
||||
flex: 1 1 auto;
|
||||
white-space: pre-line;
|
||||
-`,Ae=(e,t)=>{let s=e.includes("top")?1:-1,[a,r]=b()?[he,xe]:[ye(s),ge(s)];return{animation:t?`${z(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${z(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},F=l.memo(({toast:e,position:t,style:o,children:s})=>{let a=e.height?Ae(e.position||t||"top-center",e.visible):{opacity:0},r=l.createElement(M,{toast:e}),c=l.createElement(Se,{...e.ariaProps},T(e.message,e));return l.createElement(be,{className:e.className,style:{...a,...o,...e.style}},typeof s=="function"?s({icon:r,message:c}):l.createElement(l.Fragment,null,r,c))});import{css as Pe,setup as Oe}from"goober";import*as f from"react";Oe(f.createElement);var Ee=({id:e,className:t,style:o,onHeightUpdate:s,children:a})=>{let r=f.useCallback(c=>{if(c){let i=()=>{let d=c.getBoundingClientRect().height;s(e,d)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return f.createElement("div",{ref:r,className:t,style:o},a)},Re=(e,t)=>{let o=e.includes("top"),s=o?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:b()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...a}},ve=Pe`
|
||||
+`,Ae=(e,t)=>{let s=e.includes("top")?1:-1,[a,r]=b()?[he,xe]:[ye(s),ge(s)];return{animation:t?`${z(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${z(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},F=l.memo(({toast:e,position:t,style:o,children:s})=>{let a=e.height?Ae(e.position||t||"top-center",e.visible):{opacity:0},r=l.createElement(M,{toast:e}),c=l.createElement(Se,{...e.ariaProps},f(e.message,e));return l.createElement(be,{className:e.className,style:{...a,...o,...e.style}},typeof s=="function"?s({icon:r,message:c}):l.createElement(l.Fragment,null,r,c))});import{css as Pe,setup as Oe}from"goober";import*as T from"react";Oe(T.createElement);var Ee=({id:e,className:t,style:o,onHeightUpdate:s,children:a})=>{let r=T.useCallback(c=>{if(c){let n=()=>{let d=c.getBoundingClientRect().height;s(e,d)};n(),new MutationObserver(n).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:r,className:t,style:o},a)},Re=(e,t)=>{let o=e.includes("top")||e.includes("center-"),s=o?{top:e.includes("center-")?"50%":0}:{bottom:0},a=e.includes("center-right")?{justifyContent:"flex-end"}:e.includes("center-left")?{justifyContent:"flex-start"}:e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:b()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...a}},ve=Pe`
|
||||
z-index: 9999;
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
-`,O=16,Ie=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:a,containerStyle:r,containerClassName:c})=>{let{toasts:i,handlers:d}=D(o);return f.createElement("div",{style:{position:"fixed",zIndex:9999,top:O,left:O,right:O,bottom:O,pointerEvents:"none",...r},className:c,onMouseEnter:d.startPause,onMouseLeave:d.endPause},i.map(p=>{let g=p.position||t,E=d.calculateOffset(p,{reverseOrder:e,gutter:s,defaultPosition:t}),x=Re(g,E);return f.createElement(Ee,{id:p.id,key:p.id,onHeightUpdate:d.updateHeight,className:p.visible?ve:"",style:x},p.type==="custom"?T(p.message,p):a?a(p):f.createElement(F,{toast:p,position:g}))}))};var _t=n;export{w as CheckmarkIcon,_ as ErrorIcon,V as LoaderIcon,F as ToastBar,M as ToastIcon,Ie as Toaster,_t as default,T as resolveValue,n as toast,D as useToaster,I as useToasterStore};
|
||||
+`,O=16,Ie=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:a,containerStyle:r,containerClassName:c})=>{let{toasts:n,handlers:d}=D(o);return T.createElement("div",{style:{position:"fixed",zIndex:9999,top:O,left:O,right:O,bottom:O,pointerEvents:"none",...r},className:c,onMouseEnter:d.startPause,onMouseLeave:d.endPause},n.map(p=>{let g=p.position||t,E=d.calculateOffset(p,{reverseOrder:e,gutter:s,defaultPosition:t}),x=Re(g,E);return T.createElement(Ee,{id:p.id,key:p.id,onHeightUpdate:d.updateHeight,className:p.visible?ve:"",style:x},p.type==="custom"?f(p.message,p):a?a(p):T.createElement(F,{toast:p,position:g}))}))};var _t=i;export{w as CheckmarkIcon,_ as ErrorIcon,V as LoaderIcon,F as ToastBar,M as ToastIcon,Ie as Toaster,_t as default,f as resolveValue,i as toast,D as useToaster,I as useToasterStore};
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.mjs.map b/dist/index.mjs.map
|
||||
index 43971e037c7a5c4986c7cad876afff9d85dd0da0..c71b1f52b35a2a880d78f53e2c8376ae2dd7227f 100644
|
||||
--- a/dist/index.mjs.map
|
||||
+++ b/dist/index.mjs.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx","../src/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = JSX.Element | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => JSX.Element;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nconst toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();\n\nexport const TOAST_EXPIRE_DISMISS_DELAY = 1000;\n\nconst addToRemoveQueue = (toastId: string) => {\n if (toastTimeouts.has(toastId)) {\n return;\n }\n\n const timeout = setTimeout(() => {\n toastTimeouts.delete(toastId);\n dispatch({\n type: ActionType.REMOVE_TOAST,\n toastId: toastId,\n });\n }, TOAST_EXPIRE_DISMISS_DELAY);\n\n toastTimeouts.set(toastId, timeout);\n};\n\nconst clearFromRemoveQueue = (toastId: string) => {\n const timeout = toastTimeouts.get(toastId);\n if (timeout) {\n clearTimeout(timeout);\n }\n};\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n // ! Side effects !\n if (action.toast.id) {\n clearFromRemoveQueue(action.toast.id);\n
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx","../src/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\r\n\r\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\r\nexport type ToastPosition =\r\n | 'top-left'\r\n | 'top-center'\r\n | 'top-right'\r\n | 'bottom-left'\r\n | 'bottom-center'\r\n | 'bottom-right'\r\n | 'center-right'\r\n | 'center-left';\r\n\r\nexport type Renderable = JSX.Element | string | null;\r\n\r\nexport interface IconTheme {\r\n primary: string;\r\n secondary: string;\r\n}\r\n\r\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\r\nexport type ValueOrFunction<TValue, TArg> =\r\n | TValue\r\n | ValueFunction<TValue, TArg>;\r\n\r\nconst isFunction = <TValue, TArg>(\r\n valOrFunction: ValueOrFunction<TValue, TArg>\r\n): valOrFunction is ValueFunction<TValue, TArg> =>\r\n typeof valOrFunction === 'function';\r\n\r\nexport const resolveValue = <TValue, TArg>(\r\n valOrFunction: ValueOrFunction<TValue, TArg>,\r\n arg: TArg\r\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\r\n\r\nexport interface Toast {\r\n type: ToastType;\r\n id: string;\r\n message: ValueOrFunction<Renderable, Toast>;\r\n icon?: Renderable;\r\n duration?: number;\r\n pauseDuration: number;\r\n position?: ToastPosition;\r\n\r\n ariaProps: {\r\n role: 'status' | 'alert';\r\n 'aria-live': 'assertive' | 'off' | 'polite';\r\n };\r\n\r\n style?: CSSProperties;\r\n className?: string;\r\n iconTheme?: IconTheme;\r\n\r\n createdAt: number;\r\n visible: boolean;\r\n height?: number;\r\n}\r\n\r\nexport type ToastOptions = Partial<\r\n Pick<\r\n Toast,\r\n | 'id'\r\n | 'icon'\r\n | 'duration'\r\n | 'ariaProps'\r\n | 'className'\r\n | 'style'\r\n | 'position'\r\n | 'iconTheme'\r\n >\r\n>;\r\n\r\nexport type DefaultToastOptions = ToastOptions & {\r\n [key in ToastType]?: ToastOptions;\r\n};\r\n\r\nexport interface ToasterProps {\r\n position?: ToastPosition;\r\n toastOptions?: DefaultToastOptions;\r\n reverseOrder?: boolean;\r\n gutter?: number;\r\n containerStyle?: React.CSSProperties;\r\n containerClassName?: string;\r\n children?: (toast: Toast) => JSX.Element;\r\n}\r\n\r\nexport interface ToastWrapperProps {\r\n id: string;\r\n className?: string;\r\n style?: React.CSSProperties;\r\n onHeightUpdate: (id: string, height: number) => void;\r\n children?: React.ReactNode;\r\n}\r\n","export const genId = (() => {\r\n let count = 0;\r\n return () => {\r\n return (++count).toString();\r\n };\r\n})();\r\n\r\nexport const prefersReducedMotion = (() => {\r\n // Cache result\r\n let shouldReduceMotion: boolean | undefined = undefined;\r\n\r\n return () => {\r\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\r\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\r\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\r\n }\r\n return shouldReduceMotion;\r\n };\r\n})();\r\n","import { useEffect, useState } from 'react';\r\nimport { DefaultToastOptions, Toast, ToastType } from './types';\r\n\r\nconst TOAST_LIMIT = 20;\r\n\r\nexport enum ActionType {\r\n ADD_TOAST,\r\n UPDATE_TOAST,\r\n UPSERT_TOAST,\r\n DISMISS_TOAST,\r\n REMOVE_TOAST,\r\n START_PAUSE,\r\n END_PAUSE,\r\n}\r\n\r\ntype Action =\r\n | {\r\n type: ActionType.ADD_TOAST;\r\n toast: Toast;\r\n }\r\n | {\r\n type: ActionType.UPSERT_TOAST;\r\n toast: Toast;\r\n }\r\n | {\r\n type: ActionType.UPDATE_TOAST;\r\n toast: Partial<Toast>;\r\n }\r\n | {\r\n type: ActionType.DISMISS_TOAST;\r\n toastId?: string;\r\n }\r\n | {\r\n type: ActionType.REMOVE_TOAST;\r\n toastId?: string;\r\n }\r\n | {\r\n type: ActionType.START_PAUSE;\r\n time: number;\r\n }\r\n | {\r\n type: ActionType.END_PAUSE;\r\n time: number;\r\n };\r\n\r\ninterface State {\r\n toasts: Toast[];\r\n pausedAt: number | undefined;\r\n}\r\n\r\nconst toastTimeouts = new Map<Toast['id'], ReturnType<typeof setTimeout>>();\r\n\r\nexport const TOAST_EXPIRE_DISMISS_DELAY = 1000;\r\n\r\nconst addToRemoveQueue = (toastId: string) => {\r\n if (toastTimeouts.has(toastId)) {\r\n return;\r\n }\r\n\r\n const timeout = setTimeout(() => {\r\n toastTimeouts.delete(toastId);\r\n dispatch({\r\n type: ActionType.REMOVE_TOAST,\r\n toastId: toastId,\r\n });\r\n }, TOAST_EXPIRE_DISMISS_DELAY);\r\n\r\n toastTimeouts.set(toastId, timeout);\r\n};\r\n\r\nconst clearFromRemoveQueue = (toastId: string) => {\r\n const timeout = toastTimeouts.get(toastId);\r\n if (timeout) {\r\n clearTimeout(time
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
|
||||
index 16182faddcaa2b6d2c40d448068db6421f39b64c..9d03025e1b04dc511091a10918f2fe53aad57fc1 100644
|
||||
--- a/src/components/toaster.tsx
|
||||
+++ b/src/components/toaster.tsx
|
||||
@@ -48,9 +48,17 @@ const getPositionStyle = (
|
||||
position: ToastPosition,
|
||||
offset: number
|
||||
): React.CSSProperties => {
|
||||
- const top = position.includes('top');
|
||||
- const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
|
||||
- const horizontalStyle: React.CSSProperties = position.includes('center')
|
||||
+ const top = position.includes('top') || position.includes('center-');
|
||||
+ const verticalStyle: React.CSSProperties = top
|
||||
+ ? {
|
||||
+ top: position.includes('center-') ? '50%' : 0,
|
||||
+ }
|
||||
+ : { bottom: 0 };
|
||||
+ const horizontalStyle: React.CSSProperties = position.includes('center-right')
|
||||
+ ? { justifyContent: 'flex-end' }
|
||||
+ : position.includes('center-left')
|
||||
+ ? { justifyContent: 'flex-start' }
|
||||
+ : position.includes('center')
|
||||
? {
|
||||
justifyContent: 'center',
|
||||
}
|
||||
diff --git a/src/core/types.ts b/src/core/types.ts
|
||||
index cd6f67af4cea51b73ce9225c2f6fd9ff0c3e0d2e..4789baa61b9a40ac9726777a8d1a1f93bc09d2b2 100644
|
||||
--- a/src/core/types.ts
|
||||
+++ b/src/core/types.ts
|
||||
@@ -7,7 +7,9 @@ export type ToastPosition =
|
||||
| 'top-right'
|
||||
| 'bottom-left'
|
||||
| 'bottom-center'
|
||||
- | 'bottom-right';
|
||||
+ | 'bottom-right'
|
||||
+ | 'center-right'
|
||||
+ | 'center-left';
|
||||
|
||||
export type Renderable = JSX.Element | string | null;
|
||||
|
||||
@@ -0,0 +1,280 @@
|
||||
diff --git a/dist/index.d.ts b/dist/index.d.ts
|
||||
index c797608a39b3b437c54f7966760b4e355fea7f81..7fa003924520972e1196b4c3f50420953146d646 100644
|
||||
--- a/dist/index.d.ts
|
||||
+++ b/dist/index.d.ts
|
||||
@@ -3,7 +3,7 @@ import { CSSProperties } from 'react';
|
||||
import * as goober from 'goober';
|
||||
|
||||
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
|
||||
-type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
||||
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-right' | 'center-left';
|
||||
type Renderable = React.ReactElement | string | null;
|
||||
interface IconTheme {
|
||||
primary: string;
|
||||
diff --git a/dist/index.js b/dist/index.js
|
||||
index a89124854a2a137e10d8369f641450b9f4f2b7d4..36722063f0ac32cc8328b18596751b54c2589b12 100644
|
||||
--- a/dist/index.js
|
||||
+++ b/dist/index.js
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
-"use strict";var q=Object.create;var O=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)O(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of J(t))!X.call(e,a)&&a!==o&&O(e,a,{get:()=>t[a],enumerable:!(s=G(t,a))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?q(K(e)):{},H(t||!e||!e.__esModule?O(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>H(O({},"__esModule",{value:!0}),e);var Ve={};Z(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>C,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>Y,default:()=>ke,resolveValue:()=>u,toast:()=>n,useToaster:()=>_,useToasterStore:()=>V});module.exports=ee(Ve);var te=e=>typeof e=="function",u=(e,t)=>te(e)?e(t):e;var j=(()=>{let e=0;return()=>(++e).toString()})(),I=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var x=require("react"),oe=20;var Q=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,oe)};case 1:return{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return Q(e,{type:e.toasts.find(r=>r.id===o.id)?1:0,toast:o});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(r=>r.id===s||s===void 0?{...r,dismissed:!0,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+a}))}}},k=[],y={toasts:[],pausedAt:void 0},l=e=>{y=Q(y,e),k.forEach(t=>{t(y)})},re={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},V=(e={})=>{let[t,o]=(0,x.useState)(y),s=(0,x.useRef)(y);(0,x.useEffect)(()=>(s.current!==y&&o(y),k.push(o),()=>{let r=k.indexOf(o);r>-1&&k.splice(r,1)}),[]);let a=t.toasts.map(r=>{var c,i,p;return{...e,...e[r.type],...r,removeDelay:r.removeDelay||((c=e[r.type])==null?void 0:c.removeDelay)||(e==null?void 0:e.removeDelay),duration:r.duration||((i=e[r.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||re[r.type],style:{...e.style,...(p=e[r.type])==null?void 0:p.style,...r.style}}});return{...t,toasts:a}};var ae=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||j()}),R=e=>(t,o)=>{let s=ae(t,e,o);return l({type:2,toast:s}),s.id},n=(e,t)=>R("blank")(e,t);n.error=R("error");n.success=R("success");n.loading=R("loading");n.custom=R("custom");n.dismiss=e=>{l({type:3,toastId:e})};n.remove=e=>l({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let r=t.success?u(t.success,a):void 0;return r?n.success(r,{id:s,...o,...o==null?void 0:o.success}):n.dismiss(s),a}).catch(a=>{let r=t.error?u(t.error,a):void 0;r?n.error(r,{id:s,...o,...o==null?void 0:o.error}):n.dismiss(s)}),e};var b=require("react");var ie=(e,t)=>{l({type:1,toast:{id:e,height:t}})},ne=()=>{l({type:5,time:Date.now()})},v=new Map,ce=1e3,pe=(e,t=ce)=>{if(v.has(e))return;let o=setTimeout(()=>{v.delete(e),l({type:4,toastId:e})},t);v.set(e,o)},_=e=>{let{toasts:t,pausedAt:o}=V(e);(0,b.useEffect)(()=>{if(o)return;let r=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(p<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),p)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=(0,b.useCallback)(()=>{o&&l({type:6,time:Date.now()})},[o]),a=(0,b.useCallback)((r,c)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=c||{},h=t.filter(m=>(m.position||d)===(r.position||d)&&m.height),z=h.findIndex(m=>m.id===r.id),D=h.filter((m,B)=>B<z&&m.visible).length;return h.filter(m=>m.visible).slice(...i?[D+1]:[0,D]).reduce((m,B)=>m+(B.height||0)+p,0)},[t]);return(0,b.useEffect)(()=>{t.forEach(r=>{if(r.dismissed)pe(r.id,r.removeDelay);else{let c=v.get(r.id);c&&(clearTimeout(c),v.delete(r.id))}})},[t]),{toasts:t,handlers:{updateHeight:ie,startPause:ne,endPause:s,calculateOffset:a}}};var f=W(require("react")),P=require("goober");var g=W(require("react")),A=require("goober");var S=require("goober"),de=S.keyframes`
|
||||
+"use strict";var q=Object.create;var O=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var J=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,X=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var o in t)O(e,o,{get:t[o],enumerable:!0})},H=(e,t,o,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of J(t))!X.call(e,a)&&a!==o&&O(e,a,{get:()=>t[a],enumerable:!(s=G(t,a))||s.enumerable});return e};var W=(e,t,o)=>(o=e!=null?q(K(e)):{},H(t||!e||!e.__esModule?O(o,"default",{value:e,enumerable:!0}):o,e)),ee=e=>H(O({},"__esModule",{value:!0}),e);var Ve={};Z(Ve,{CheckmarkIcon:()=>F,ErrorIcon:()=>w,LoaderIcon:()=>M,ToastBar:()=>$,ToastIcon:()=>U,Toaster:()=>Y,default:()=>ke,resolveValue:()=>m,toast:()=>n,useToaster:()=>_,useToasterStore:()=>V});module.exports=ee(Ve);var te=e=>typeof e=="function",m=(e,t)=>te(e)?e(t):e;var j=(()=>{let e=0;return()=>(++e).toString()})(),I=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var x=require("react"),oe=20;var Q=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,oe)};case 1:return{...e,toasts:e.toasts.map(r=>r.id===t.toast.id?{...r,...t.toast}:r)};case 2:let{toast:o}=t;return Q(e,{type:e.toasts.find(r=>r.id===o.id)?1:0,toast:o});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(r=>r.id===s||s===void 0?{...r,dismissed:!0,visible:!1}:r)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(r=>r.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(r=>({...r,pauseDuration:r.pauseDuration+a}))}}},k=[],y={toasts:[],pausedAt:void 0},u=e=>{y=Q(y,e),k.forEach(t=>{t(y)})},re={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},V=(e={})=>{let[t,o]=(0,x.useState)(y),s=(0,x.useRef)(y);(0,x.useEffect)(()=>(s.current!==y&&o(y),k.push(o),()=>{let r=k.indexOf(o);r>-1&&k.splice(r,1)}),[]);let a=t.toasts.map(r=>{var c,i,p;return{...e,...e[r.type],...r,removeDelay:r.removeDelay||((c=e[r.type])==null?void 0:c.removeDelay)||(e==null?void 0:e.removeDelay),duration:r.duration||((i=e[r.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||re[r.type],style:{...e.style,...(p=e[r.type])==null?void 0:p.style,...r.style}}});return{...t,toasts:a}};var ae=(e,t="blank",o)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...o,id:(o==null?void 0:o.id)||j()}),R=e=>(t,o)=>{let s=ae(t,e,o);return u({type:2,toast:s}),s.id},n=(e,t)=>R("blank")(e,t);n.error=R("error");n.success=R("success");n.loading=R("loading");n.custom=R("custom");n.dismiss=e=>{u({type:3,toastId:e})};n.remove=e=>u({type:4,toastId:e});n.promise=(e,t,o)=>{let s=n.loading(t.loading,{...o,...o==null?void 0:o.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let r=t.success?m(t.success,a):void 0;return r?n.success(r,{id:s,...o,...o==null?void 0:o.success}):n.dismiss(s),a}).catch(a=>{let r=t.error?m(t.error,a):void 0;r?n.error(r,{id:s,...o,...o==null?void 0:o.error}):n.dismiss(s)}),e};var b=require("react");var ie=(e,t)=>{u({type:1,toast:{id:e,height:t}})},ne=()=>{u({type:5,time:Date.now()})},v=new Map,ce=1e3,pe=(e,t=ce)=>{if(v.has(e))return;let o=setTimeout(()=>{v.delete(e),u({type:4,toastId:e})},t);v.set(e,o)},_=e=>{let{toasts:t,pausedAt:o}=V(e);(0,b.useEffect)(()=>{if(o)return;let r=Date.now(),c=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(r-i.createdAt);if(p<0){i.visible&&n.dismiss(i.id);return}return setTimeout(()=>n.dismiss(i.id),p)});return()=>{c.forEach(i=>i&&clearTimeout(i))}},[t,o]);let s=(0,b.useCallback)(()=>{o&&u({type:6,time:Date.now()})},[o]),a=(0,b.useCallback)((r,c)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=c||{},h=t.filter(l=>(l.position||d)===(r.position||d)&&l.height),z=h.findIndex(l=>l.id===r.id),D=h.filter((l,B)=>B<z&&l.visible).length;return h.filter(l=>l.visible).slice(...i?[D+1]:[0,D]).reduce((l,B)=>l+(B.height||0)+p,0)},[t]);return(0,b.useEffect)(()=>{t.forEach(r=>{if(r.dismissed)pe(r.id,r.removeDelay);else{let c=v.get(r.id);c&&(clearTimeout(c),v.delete(r.id))}})},[t]),{toasts:t,handlers:{updateHeight:ie,startPause:ne,endPause:s,calculateOffset:a}}};var f=W(require("react")),P=require("goober");var g=W(require("react")),A=require("goober");var S=require("goober"),de=S.keyframes`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
opacity: 0;
|
||||
@@ -7,7 +7,7 @@ from {
|
||||
to {
|
||||
transform: scale(1) rotate(45deg);
|
||||
opacity: 1;
|
||||
-}`,me=S.keyframes`
|
||||
+}`,le=S.keyframes`
|
||||
from {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
@@ -15,7 +15,7 @@ from {
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
-}`,ue=S.keyframes`
|
||||
+}`,me=S.keyframes`
|
||||
from {
|
||||
transform: scale(0) rotate(90deg);
|
||||
opacity: 0;
|
||||
@@ -39,7 +39,7 @@ to {
|
||||
&:after,
|
||||
&:before {
|
||||
content: '';
|
||||
- animation: ${me} 0.15s ease-out forwards;
|
||||
+ animation: ${le} 0.15s ease-out forwards;
|
||||
animation-delay: 150ms;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
@@ -52,18 +52,18 @@ to {
|
||||
}
|
||||
|
||||
&:before {
|
||||
- animation: ${ue} 0.15s ease-out forwards;
|
||||
+ animation: ${me} 0.15s ease-out forwards;
|
||||
animation-delay: 180ms;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
-`;var M=require("goober"),le=M.keyframes`
|
||||
+`;var C=require("goober"),ue=C.keyframes`
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
-`,C=(0,M.styled)("div")`
|
||||
+`,M=(0,C.styled)("div")`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
box-sizing: border-box;
|
||||
@@ -71,7 +71,7 @@ to {
|
||||
border-radius: 100%;
|
||||
border-color: ${e=>e.secondary||"#e0e0e0"};
|
||||
border-right-color: ${e=>e.primary||"#616161"};
|
||||
- animation: ${le} 1s linear infinite;
|
||||
+ animation: ${ue} 1s linear infinite;
|
||||
`;var E=require("goober"),fe=E.keyframes`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
@@ -145,7 +145,7 @@ to {
|
||||
min-width: 20px;
|
||||
animation: ${he} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
forwards;
|
||||
-`,U=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(xe,null,t):t:o==="blank"?null:g.createElement(ge,null,g.createElement(C,{...s}),o!=="loading"&&g.createElement(ye,null,o==="error"?g.createElement(w,{...s}):g.createElement(F,{...s})))};var be=e=>`
|
||||
+`,U=({toast:e})=>{let{icon:t,type:o,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(xe,null,t):t:o==="blank"?null:g.createElement(ge,null,g.createElement(M,{...s}),o!=="loading"&&g.createElement(ye,null,o==="error"?g.createElement(w,{...s}):g.createElement(F,{...s})))};var be=e=>`
|
||||
0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
|
||||
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
|
||||
`,Se=e=>`
|
||||
@@ -170,10 +170,10 @@ to {
|
||||
color: inherit;
|
||||
flex: 1 1 auto;
|
||||
white-space: pre-line;
|
||||
-`,Ee=(e,t)=>{let s=e.includes("top")?1:-1,[a,r]=I()?[Ae,Pe]:[be(s),Se(s)];return{animation:t?`${(0,P.keyframes)(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,P.keyframes)(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=f.memo(({toast:e,position:t,style:o,children:s})=>{let a=e.height?Ee(e.position||t||"top-center",e.visible):{opacity:0},r=f.createElement(U,{toast:e}),c=f.createElement(ve,{...e.ariaProps},u(e.message,e));return f.createElement(Re,{className:e.className,style:{...a,...o,...e.style}},typeof s=="function"?s({icon:r,message:c}):f.createElement(f.Fragment,null,r,c))});var N=require("goober"),T=W(require("react"));(0,N.setup)(T.createElement);var De=({id:e,className:t,style:o,onHeightUpdate:s,children:a})=>{let r=T.useCallback(c=>{if(c){let i=()=>{let p=c.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:r,className:t,style:o},a)},Oe=(e,t)=>{let o=e.includes("top"),s=o?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:I()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...a}},Ie=N.css`
|
||||
+`,Ee=(e,t)=>{let s=e.includes("top")?1:-1,[a,r]=I()?[Ae,Pe]:[be(s),Se(s)];return{animation:t?`${(0,P.keyframes)(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${(0,P.keyframes)(r)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},$=f.memo(({toast:e,position:t,style:o,children:s})=>{let a=e.height?Ee(e.position||t||"top-center",e.visible):{opacity:0},r=f.createElement(U,{toast:e}),c=f.createElement(ve,{...e.ariaProps},m(e.message,e));return f.createElement(Re,{className:e.className,style:{...a,...o,...e.style}},typeof s=="function"?s({icon:r,message:c}):f.createElement(f.Fragment,null,r,c))});var N=require("goober"),T=W(require("react"));(0,N.setup)(T.createElement);var De=({id:e,className:t,style:o,onHeightUpdate:s,children:a})=>{let r=T.useCallback(c=>{if(c){let i=()=>{let p=c.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(c,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:r,className:t,style:o},a)},Oe=(e,t)=>{let o=e.includes("top")||e.includes("center-"),s=o?{top:e.includes("center-")?"50%":0}:{bottom:0},a=e.includes("center-right")?{justifyContent:"flex-end"}:e.includes("center-left")?{justifyContent:"flex-start"}:e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:I()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(o?1:-1)}px)`,...s,...a}},Ie=N.css`
|
||||
z-index: 9999;
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
-`,L=16,Y=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:a,containerStyle:r,containerClassName:c})=>{let{toasts:i,handlers:p}=_(o);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...r},className:c,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,z=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),D=Oe(h,z);return T.createElement(De,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?Ie:"",style:D},d.type==="custom"?u(d.message,d):a?a(d):T.createElement($,{toast:d,position:h}))}))};var ke=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
|
||||
+`,L=16,Y=({reverseOrder:e,position:t="top-center",toastOptions:o,gutter:s,children:a,containerStyle:r,containerClassName:c})=>{let{toasts:i,handlers:p}=_(o);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:L,left:L,right:L,bottom:L,pointerEvents:"none",...r},className:c,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,z=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),D=Oe(h,z);return T.createElement(De,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?Ie:"",style:D},d.type==="custom"?m(d.message,d):a?a(d):T.createElement($,{toast:d,position:h}))}))};var ke=n;0&&(module.exports={CheckmarkIcon,ErrorIcon,LoaderIcon,ToastBar,ToastIcon,Toaster,resolveValue,toast,useToaster,useToasterStore});
|
||||
//# sourceMappingURL=index.js.map
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.js.map b/dist/index.js.map
|
||||
index 2989273cd20dc4472472fe8b7d57b42243b9d062..66495e740fdfae2c7c96691808b50e8dbea25ecf 100644
|
||||
--- a/dist/index.js.map
|
||||
+++ b/dist/index.js.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx"],"sourcesContent":["import { toast } from './core/toast';\n\nexport * from './headless';\n\nexport { ToastBar } from './components/toast-bar';\nexport { ToastIcon } from './components/toast-icon';\nexport { Toaster } from './components/toaster';\nexport { CheckmarkIcon } from './components/checkmark';\nexport { ErrorIcon } from './components/error';\nexport { LoaderIcon } from './components/loader';\n\nexport { toast };\nexport default toast;\n","import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = ac
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx"],"sourcesContent":["import { toast } from './core/toast';\n\nexport * from './headless';\n\nexport { ToastBar } from './components/toast-bar';\nexport { ToastIcon } from './components/toast-icon';\nexport { Toaster } from './components/toaster';\nexport { CheckmarkIcon } from './components/checkmark';\nexport { ErrorIcon } from './components/error';\nexport { LoaderIcon } from './components/loader';\n\nexport { toast };\nexport default toast;\n","import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'center-right'\n | 'center-left';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UP
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.mjs b/dist/index.mjs
|
||||
index 060ee23fbf2dae93e59de98cb2953625b9855e66..2267b62058167f2abaef74e9c75a5c1372d728c7 100644
|
||||
--- a/dist/index.mjs
|
||||
+++ b/dist/index.mjs
|
||||
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
-var W=e=>typeof e=="function",f=(e,t)=>W(e)?e(t):e;var F=(()=>{let e=0;return()=>(++e).toString()})(),A=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as H,useState as j,useRef as Q}from"react";var Y=20;var U=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,Y)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return U(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(o=>o.id===s||s===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+a}))}}},P=[],y={toasts:[],pausedAt:void 0},u=e=>{y=U(y,e),P.forEach(t=>{t(y)})},q={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},D=(e={})=>{let[t,r]=j(y),s=Q(y);H(()=>(s.current!==y&&r(y),P.push(r),()=>{let o=P.indexOf(r);o>-1&&P.splice(o,1)}),[]);let a=t.toasts.map(o=>{var n,i,p;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((n=e[o.type])==null?void 0:n.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||q[o.type],style:{...e.style,...(p=e[o.type])==null?void 0:p.style,...o.style}}});return{...t,toasts:a}};var J=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||F()}),x=e=>(t,r)=>{let s=J(t,e,r);return u({type:2,toast:s}),s.id},c=(e,t)=>x("blank")(e,t);c.error=x("error");c.success=x("success");c.loading=x("loading");c.custom=x("custom");c.dismiss=e=>{u({type:3,toastId:e})};c.remove=e=>u({type:4,toastId:e});c.promise=(e,t,r)=>{let s=c.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let o=t.success?f(t.success,a):void 0;return o?c.success(o,{id:s,...r,...r==null?void 0:r.success}):c.dismiss(s),a}).catch(a=>{let o=t.error?f(t.error,a):void 0;o?c.error(o,{id:s,...r,...r==null?void 0:r.error}):c.dismiss(s)}),e};import{useEffect as $,useCallback as L}from"react";var K=(e,t)=>{u({type:1,toast:{id:e,height:t}})},X=()=>{u({type:5,time:Date.now()})},b=new Map,Z=1e3,ee=(e,t=Z)=>{if(b.has(e))return;let r=setTimeout(()=>{b.delete(e),u({type:4,toastId:e})},t);b.set(e,r)},O=e=>{let{toasts:t,pausedAt:r}=D(e);$(()=>{if(r)return;let o=Date.now(),n=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(p<0){i.visible&&c.dismiss(i.id);return}return setTimeout(()=>c.dismiss(i.id),p)});return()=>{n.forEach(i=>i&&clearTimeout(i))}},[t,r]);let s=L(()=>{r&&u({type:6,time:Date.now()})},[r]),a=L((o,n)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=n||{},h=t.filter(m=>(m.position||d)===(o.position||d)&&m.height),v=h.findIndex(m=>m.id===o.id),S=h.filter((m,E)=>E<v&&m.visible).length;return h.filter(m=>m.visible).slice(...i?[S+1]:[0,S]).reduce((m,E)=>m+(E.height||0)+p,0)},[t]);return $(()=>{t.forEach(o=>{if(o.dismissed)ee(o.id,o.removeDelay);else{let n=b.get(o.id);n&&(clearTimeout(n),b.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:K,startPause:X,endPause:s,calculateOffset:a}}};import*as l from"react";import{styled as B,keyframes as z}from"goober";import*as g from"react";import{styled as w,keyframes as me}from"goober";import{styled as te,keyframes as I}from"goober";var oe=I`
|
||||
+var W=e=>typeof e=="function",f=(e,t)=>W(e)?e(t):e;var F=(()=>{let e=0;return()=>(++e).toString()})(),A=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as H,useState as j,useRef as Q}from"react";var Y=20;var U=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,Y)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return U(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:s}=t;return{...e,toasts:e.toasts.map(o=>o.id===s||s===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let a=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+a}))}}},P=[],y={toasts:[],pausedAt:void 0},m=e=>{y=U(y,e),P.forEach(t=>{t(y)})},q={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},D=(e={})=>{let[t,r]=j(y),s=Q(y);H(()=>(s.current!==y&&r(y),P.push(r),()=>{let o=P.indexOf(r);o>-1&&P.splice(o,1)}),[]);let a=t.toasts.map(o=>{var n,i,p;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((n=e[o.type])==null?void 0:n.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||q[o.type],style:{...e.style,...(p=e[o.type])==null?void 0:p.style,...o.style}}});return{...t,toasts:a}};var J=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||F()}),x=e=>(t,r)=>{let s=J(t,e,r);return m({type:2,toast:s}),s.id},c=(e,t)=>x("blank")(e,t);c.error=x("error");c.success=x("success");c.loading=x("loading");c.custom=x("custom");c.dismiss=e=>{m({type:3,toastId:e})};c.remove=e=>m({type:4,toastId:e});c.promise=(e,t,r)=>{let s=c.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(a=>{let o=t.success?f(t.success,a):void 0;return o?c.success(o,{id:s,...r,...r==null?void 0:r.success}):c.dismiss(s),a}).catch(a=>{let o=t.error?f(t.error,a):void 0;o?c.error(o,{id:s,...r,...r==null?void 0:r.error}):c.dismiss(s)}),e};import{useEffect as $,useCallback as L}from"react";var K=(e,t)=>{m({type:1,toast:{id:e,height:t}})},X=()=>{m({type:5,time:Date.now()})},b=new Map,Z=1e3,ee=(e,t=Z)=>{if(b.has(e))return;let r=setTimeout(()=>{b.delete(e),m({type:4,toastId:e})},t);b.set(e,r)},O=e=>{let{toasts:t,pausedAt:r}=D(e);$(()=>{if(r)return;let o=Date.now(),n=t.map(i=>{if(i.duration===1/0)return;let p=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(p<0){i.visible&&c.dismiss(i.id);return}return setTimeout(()=>c.dismiss(i.id),p)});return()=>{n.forEach(i=>i&&clearTimeout(i))}},[t,r]);let s=L(()=>{r&&m({type:6,time:Date.now()})},[r]),a=L((o,n)=>{let{reverseOrder:i=!1,gutter:p=8,defaultPosition:d}=n||{},h=t.filter(l=>(l.position||d)===(o.position||d)&&l.height),v=h.findIndex(l=>l.id===o.id),S=h.filter((l,E)=>E<v&&l.visible).length;return h.filter(l=>l.visible).slice(...i?[S+1]:[0,S]).reduce((l,E)=>l+(E.height||0)+p,0)},[t]);return $(()=>{t.forEach(o=>{if(o.dismissed)ee(o.id,o.removeDelay);else{let n=b.get(o.id);n&&(clearTimeout(n),b.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:K,startPause:X,endPause:s,calculateOffset:a}}};import*as u from"react";import{styled as B,keyframes as z}from"goober";import*as g from"react";import{styled as w,keyframes as le}from"goober";import{styled as te,keyframes as I}from"goober";var oe=I`
|
||||
from {
|
||||
transform: scale(0) rotate(45deg);
|
||||
opacity: 0;
|
||||
@@ -121,16 +121,16 @@ to {
|
||||
height: 10px;
|
||||
width: 6px;
|
||||
}
|
||||
-`;var ue=w("div")`
|
||||
+`;var me=w("div")`
|
||||
position: absolute;
|
||||
-`,le=w("div")`
|
||||
+`,ue=w("div")`
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
-`,fe=me`
|
||||
+`,fe=le`
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
opacity: 0.4;
|
||||
@@ -145,7 +145,7 @@ to {
|
||||
min-width: 20px;
|
||||
animation: ${fe} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
|
||||
forwards;
|
||||
-`,M=({toast:e})=>{let{icon:t,type:r,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(Te,null,t):t:r==="blank"?null:g.createElement(le,null,g.createElement(V,{...s}),r!=="loading"&&g.createElement(ue,null,r==="error"?g.createElement(k,{...s}):g.createElement(_,{...s})))};var ye=e=>`
|
||||
+`,C=({toast:e})=>{let{icon:t,type:r,iconTheme:s}=e;return t!==void 0?typeof t=="string"?g.createElement(Te,null,t):t:r==="blank"?null:g.createElement(ue,null,g.createElement(V,{...s}),r!=="loading"&&g.createElement(me,null,r==="error"?g.createElement(k,{...s}):g.createElement(_,{...s})))};var ye=e=>`
|
||||
0% {transform: translate3d(0,${e*-200}%,0) scale(.6); opacity:.5;}
|
||||
100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
|
||||
`,ge=e=>`
|
||||
@@ -170,10 +170,10 @@ to {
|
||||
color: inherit;
|
||||
flex: 1 1 auto;
|
||||
white-space: pre-line;
|
||||
-`,Ae=(e,t)=>{let s=e.includes("top")?1:-1,[a,o]=A()?[he,xe]:[ye(s),ge(s)];return{animation:t?`${z(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${z(o)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},C=l.memo(({toast:e,position:t,style:r,children:s})=>{let a=e.height?Ae(e.position||t||"top-center",e.visible):{opacity:0},o=l.createElement(M,{toast:e}),n=l.createElement(Se,{...e.ariaProps},f(e.message,e));return l.createElement(be,{className:e.className,style:{...a,...r,...e.style}},typeof s=="function"?s({icon:o,message:n}):l.createElement(l.Fragment,null,o,n))});import{css as Pe,setup as Re}from"goober";import*as T from"react";Re(T.createElement);var ve=({id:e,className:t,style:r,onHeightUpdate:s,children:a})=>{let o=T.useCallback(n=>{if(n){let i=()=>{let p=n.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(n,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:o,className:t,style:r},a)},Ee=(e,t)=>{let r=e.includes("top"),s=r?{top:0}:{bottom:0},a=e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:A()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(r?1:-1)}px)`,...s,...a}},De=Pe`
|
||||
+`,Ae=(e,t)=>{let s=e.includes("top")?1:-1,[a,o]=A()?[he,xe]:[ye(s),ge(s)];return{animation:t?`${z(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`:`${z(o)} 0.4s forwards cubic-bezier(.06,.71,.55,1)`}},M=u.memo(({toast:e,position:t,style:r,children:s})=>{let a=e.height?Ae(e.position||t||"top-center",e.visible):{opacity:0},o=u.createElement(C,{toast:e}),n=u.createElement(Se,{...e.ariaProps},f(e.message,e));return u.createElement(be,{className:e.className,style:{...a,...r,...e.style}},typeof s=="function"?s({icon:o,message:n}):u.createElement(u.Fragment,null,o,n))});import{css as Pe,setup as Re}from"goober";import*as T from"react";Re(T.createElement);var ve=({id:e,className:t,style:r,onHeightUpdate:s,children:a})=>{let o=T.useCallback(n=>{if(n){let i=()=>{let p=n.getBoundingClientRect().height;s(e,p)};i(),new MutationObserver(i).observe(n,{subtree:!0,childList:!0,characterData:!0})}},[e,s]);return T.createElement("div",{ref:o,className:t,style:r},a)},Ee=(e,t)=>{let r=e.includes("top")||e.includes("center-"),s=r?{top:e.includes("center-")?"50%":0}:{bottom:0},a=e.includes("center-right")?{justifyContent:"flex-end"}:e.includes("center-left")?{justifyContent:"flex-start"}:e.includes("center")?{justifyContent:"center"}:e.includes("right")?{justifyContent:"flex-end"}:{};return{left:0,right:0,display:"flex",position:"absolute",transition:A()?void 0:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${t*(r?1:-1)}px)`,...s,...a}},De=Pe`
|
||||
z-index: 9999;
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
-`,R=16,Oe=({reverseOrder:e,position:t="top-center",toastOptions:r,gutter:s,children:a,containerStyle:o,containerClassName:n})=>{let{toasts:i,handlers:p}=O(r);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:R,left:R,right:R,bottom:R,pointerEvents:"none",...o},className:n,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,v=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),S=Ee(h,v);return T.createElement(ve,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?De:"",style:S},d.type==="custom"?f(d.message,d):a?a(d):T.createElement(C,{toast:d,position:h}))}))};var Vt=c;export{_ as CheckmarkIcon,k as ErrorIcon,V as LoaderIcon,C as ToastBar,M as ToastIcon,Oe as Toaster,Vt as default,f as resolveValue,c as toast,O as useToaster,D as useToasterStore};
|
||||
+`,R=16,Oe=({reverseOrder:e,position:t="top-center",toastOptions:r,gutter:s,children:a,containerStyle:o,containerClassName:n})=>{let{toasts:i,handlers:p}=O(r);return T.createElement("div",{id:"_rht_toaster",style:{position:"fixed",zIndex:9999,top:R,left:R,right:R,bottom:R,pointerEvents:"none",...o},className:n,onMouseEnter:p.startPause,onMouseLeave:p.endPause},i.map(d=>{let h=d.position||t,v=p.calculateOffset(d,{reverseOrder:e,gutter:s,defaultPosition:t}),S=Ee(h,v);return T.createElement(ve,{id:d.id,key:d.id,onHeightUpdate:p.updateHeight,className:d.visible?De:"",style:S},d.type==="custom"?f(d.message,d):a?a(d):T.createElement(M,{toast:d,position:h}))}))};var Vt=c;export{_ as CheckmarkIcon,k as ErrorIcon,V as LoaderIcon,M as ToastBar,C as ToastIcon,Oe as Toaster,Vt as default,f as resolveValue,c as toast,O as useToaster,D as useToasterStore};
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
\ No newline at end of file
|
||||
diff --git a/dist/index.mjs.map b/dist/index.mjs.map
|
||||
index 63cee938c6514cff7d02c20f501c401b3acf86a5..ff1b988e596dff551c403dd37f8fd93aa0fe043e 100644
|
||||
--- a/dist/index.mjs.map
|
||||
+++ b/dist/index.mjs.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx","../src/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.UPDATE_TOAST\n : ActionType.ADD_TOAST,\n toast,\n });\n\n case ActionType.DISMISS_TOAST:\n const { toastId } = action;\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/components/toast-bar.tsx","../src/components/toast-icon.tsx","../src/components/error.tsx","../src/components/loader.tsx","../src/components/checkmark.tsx","../src/components/toaster.tsx","../src/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'center-right'\n | 'center-left';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.UPDATE_TOAST\n : ActionType.ADD_TOAST,\n toast,\n });\n\n case ActionType.DISMISS_TOAST:\n const { toastId } = action;\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === und
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/headless/index.d.ts b/headless/index.d.ts
|
||||
index 578bacd309a1884da11a50a6debbb20a0c41547d..33ec2c8d34759408718ffeed05ff396e592194c4 100644
|
||||
--- a/headless/index.d.ts
|
||||
+++ b/headless/index.d.ts
|
||||
@@ -1,7 +1,7 @@
|
||||
import { CSSProperties } from 'react';
|
||||
|
||||
type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';
|
||||
-type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
||||
+type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-right' | 'center-left';
|
||||
type Renderable = React.ReactElement | string | null;
|
||||
interface IconTheme {
|
||||
primary: string;
|
||||
diff --git a/headless/index.js b/headless/index.js
|
||||
index 92d20307002cebc4cfed14ad1529bc242233fd9b..6a242a062c810e4096746bfe81a1393febd5e369 100644
|
||||
--- a/headless/index.js
|
||||
+++ b/headless/index.js
|
||||
@@ -1,2 +1,2 @@
|
||||
-"use strict";var P=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var r in t)P(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of v(t))!I.call(e,n)&&n!==r&&P(e,n,{get:()=>t[n],enumerable:!(a=_(t,n))||a.enumerable});return e};var F=e=>U(P({},"__esModule",{value:!0}),e);var j={};M(j,{default:()=>Y,resolveValue:()=>m,toast:()=>s,useToaster:()=>V,useToasterStore:()=>g});module.exports=F(j);var w=e=>typeof e=="function",m=(e,t)=>w(e)?e(t):e;var R=(()=>{let e=0;return()=>(++e).toString()})(),J=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var p=require("react"),N=20;var h=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,N)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return h(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:a}=t;return{...e,toasts:e.toasts.map(o=>o.id===a||a===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let n=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+n}))}}},A=[],l={toasts:[],pausedAt:void 0},c=e=>{l=h(l,e),A.forEach(t=>{t(l)})},k={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=(0,p.useState)(l),a=(0,p.useRef)(l);(0,p.useEffect)(()=>(a.current!==l&&r(l),A.push(r),()=>{let o=A.indexOf(r);o>-1&&A.splice(o,1)}),[]);let n=t.toasts.map(o=>{var T,i,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||k[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:n}};var H=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||R()}),y=e=>(t,r)=>{let a=H(t,e,r);return c({type:2,toast:a}),a.id},s=(e,t)=>y("blank")(e,t);s.error=y("error");s.success=y("success");s.loading=y("loading");s.custom=y("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let a=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(n=>{let o=t.success?m(t.success,n):void 0;return o?s.success(o,{id:a,...r,...r==null?void 0:r.success}):s.dismiss(a),n}).catch(n=>{let o=t.error?m(t.error,n):void 0;o?s.error(o,{id:a,...r,...r==null?void 0:r.error}):s.dismiss(a)}),e};var f=require("react");var L=(e,t)=>{c({type:1,toast:{id:e,height:t}})},Q=()=>{c({type:5,time:Date.now()})},S=new Map,B=1e3,W=(e,t=B)=>{if(S.has(e))return;let r=setTimeout(()=>{S.delete(e),c({type:4,toastId:e})},t);S.set(e,r)},V=e=>{let{toasts:t,pausedAt:r}=g(e);(0,f.useEffect)(()=>{if(r)return;let o=Date.now(),T=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(d<0){i.visible&&s.dismiss(i.id);return}return setTimeout(()=>s.dismiss(i.id),d)});return()=>{T.forEach(i=>i&&clearTimeout(i))}},[t,r]);let a=(0,f.useCallback)(()=>{r&&c({type:6,time:Date.now()})},[r]),n=(0,f.useCallback)((o,T)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:b}=T||{},D=t.filter(u=>(u.position||b)===(o.position||b)&&u.height),x=D.findIndex(u=>u.id===o.id),E=D.filter((u,O)=>O<x&&u.visible).length;return D.filter(u=>u.visible).slice(...i?[E+1]:[0,E]).reduce((u,O)=>u+(O.height||0)+d,0)},[t]);return(0,f.useEffect)(()=>{t.forEach(o=>{if(o.dismissed)W(o.id,o.removeDelay);else{let T=S.get(o.id);T&&(clearTimeout(T),S.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:L,startPause:Q,endPause:a,calculateOffset:n}}};var Y=s;0&&(module.exports={resolveValue,toast,useToaster,useToasterStore});
|
||||
+"use strict";var P=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var r in t)P(e,r,{get:t[r],enumerable:!0})},U=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of v(t))!I.call(e,n)&&n!==r&&P(e,n,{get:()=>t[n],enumerable:!(a=_(t,n))||a.enumerable});return e};var F=e=>U(P({},"__esModule",{value:!0}),e);var j={};M(j,{default:()=>Y,resolveValue:()=>m,toast:()=>s,useToaster:()=>V,useToasterStore:()=>g});module.exports=F(j);var w=e=>typeof e=="function",m=(e,t)=>w(e)?e(t):e;var h=(()=>{let e=0;return()=>(++e).toString()})(),J=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();var p=require("react"),N=20;var R=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,N)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return R(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:a}=t;return{...e,toasts:e.toasts.map(o=>o.id===a||a===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let n=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+n}))}}},A=[],l={toasts:[],pausedAt:void 0},c=e=>{l=R(l,e),A.forEach(t=>{t(l)})},k={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=(0,p.useState)(l),a=(0,p.useRef)(l);(0,p.useEffect)(()=>(a.current!==l&&r(l),A.push(r),()=>{let o=A.indexOf(r);o>-1&&A.splice(o,1)}),[]);let n=t.toasts.map(o=>{var T,i,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((i=e[o.type])==null?void 0:i.duration)||(e==null?void 0:e.duration)||k[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:n}};var H=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||h()}),y=e=>(t,r)=>{let a=H(t,e,r);return c({type:2,toast:a}),a.id},s=(e,t)=>y("blank")(e,t);s.error=y("error");s.success=y("success");s.loading=y("loading");s.custom=y("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let a=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(n=>{let o=t.success?m(t.success,n):void 0;return o?s.success(o,{id:a,...r,...r==null?void 0:r.success}):s.dismiss(a),n}).catch(n=>{let o=t.error?m(t.error,n):void 0;o?s.error(o,{id:a,...r,...r==null?void 0:r.error}):s.dismiss(a)}),e};var f=require("react");var L=(e,t)=>{c({type:1,toast:{id:e,height:t}})},Q=()=>{c({type:5,time:Date.now()})},S=new Map,B=1e3,W=(e,t=B)=>{if(S.has(e))return;let r=setTimeout(()=>{S.delete(e),c({type:4,toastId:e})},t);S.set(e,r)},V=e=>{let{toasts:t,pausedAt:r}=g(e);(0,f.useEffect)(()=>{if(r)return;let o=Date.now(),T=t.map(i=>{if(i.duration===1/0)return;let d=(i.duration||0)+i.pauseDuration-(o-i.createdAt);if(d<0){i.visible&&s.dismiss(i.id);return}return setTimeout(()=>s.dismiss(i.id),d)});return()=>{T.forEach(i=>i&&clearTimeout(i))}},[t,r]);let a=(0,f.useCallback)(()=>{r&&c({type:6,time:Date.now()})},[r]),n=(0,f.useCallback)((o,T)=>{let{reverseOrder:i=!1,gutter:d=8,defaultPosition:b}=T||{},D=t.filter(u=>(u.position||b)===(o.position||b)&&u.height),x=D.findIndex(u=>u.id===o.id),E=D.filter((u,O)=>O<x&&u.visible).length;return D.filter(u=>u.visible).slice(...i?[E+1]:[0,E]).reduce((u,O)=>u+(O.height||0)+d,0)},[t]);return(0,f.useEffect)(()=>{t.forEach(o=>{if(o.dismissed)W(o.id,o.removeDelay);else{let T=S.get(o.id);T&&(clearTimeout(T),S.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:L,startPause:Q,endPause:a,calculateOffset:n}}};var Y=s;0&&(module.exports={resolveValue,toast,useToaster,useToasterStore});
|
||||
//# sourceMappingURL=index.js.map
|
||||
\ No newline at end of file
|
||||
diff --git a/headless/index.js.map b/headless/index.js.map
|
||||
index bf6172b08348e60acd5fd9118b15ccad79635b09..0d842dbfc2fb01ea326df4b914f38e2828d621b9 100644
|
||||
--- a/headless/index.js.map
|
||||
+++ b/headless/index.js.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/headless/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts"],"sourcesContent":["import { toast } from '../core/toast';\n\nexport type {\n DefaultToastOptions,\n IconTheme,\n Renderable,\n Toast,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastType,\n ValueFunction,\n ValueOrFunction,\n} from '../core/types';\n\nexport { resolveValue } from '../core/types';\nexport { useToaster } from '../core/use-toaster';\nexport { useStore as useToasterStore } from '../core/store';\n\nexport { toast };\nexport default toast;\n","import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.UPDATE_TOAST\n : ActionType.ADD
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/headless/index.ts","../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts"],"sourcesContent":["import { toast } from '../core/toast';\n\nexport type {\n DefaultToastOptions,\n IconTheme,\n Renderable,\n Toast,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastType,\n ValueFunction,\n ValueOrFunction,\n} from '../core/types';\n\nexport { resolveValue } from '../core/types';\nexport { useToaster } from '../core/use-toaster';\nexport { useStore as useToasterStore } from '../core/store';\n\nexport { toast };\nexport default toast;\n","import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'center-right'\n | 'center-left';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.U
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/headless/index.mjs b/headless/index.mjs
|
||||
index 59587dc32a2f543b8f66258f9e0133f715ef57a6..9f905be9e6a2be04abb95386ed45feeac0115b4a 100644
|
||||
--- a/headless/index.mjs
|
||||
+++ b/headless/index.mjs
|
||||
@@ -1,2 +1,2 @@
|
||||
-var V=e=>typeof e=="function",m=(e,t)=>V(e)?e(t):e;var P=(()=>{let e=0;return()=>(++e).toString()})(),B=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as x,useState as _,useRef as v}from"react";var I=20;var b=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,I)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return b(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:n}=t;return{...e,toasts:e.toasts.map(o=>o.id===n||n===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let i=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+i}))}}},y=[],l={toasts:[],pausedAt:void 0},c=e=>{l=b(l,e),y.forEach(t=>{t(l)})},M={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=_(l),n=v(l);x(()=>(n.current!==l&&r(l),y.push(r),()=>{let o=y.indexOf(r);o>-1&&y.splice(o,1)}),[]);let i=t.toasts.map(o=>{var T,a,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((a=e[o.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||M[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:i}};var F=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||P()}),p=e=>(t,r)=>{let n=F(t,e,r);return c({type:2,toast:n}),n.id},s=(e,t)=>p("blank")(e,t);s.error=p("error");s.success=p("success");s.loading=p("loading");s.custom=p("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let n=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(i=>{let o=t.success?m(t.success,i):void 0;return o?s.success(o,{id:n,...r,...r==null?void 0:r.success}):s.dismiss(n),i}).catch(i=>{let o=t.error?m(t.error,i):void 0;o?s.error(o,{id:n,...r,...r==null?void 0:r.error}):s.dismiss(n)}),e};import{useEffect as E,useCallback as R}from"react";var w=(e,t)=>{c({type:1,toast:{id:e,height:t}})},N=()=>{c({type:5,time:Date.now()})},f=new Map,k=1e3,C=(e,t=k)=>{if(f.has(e))return;let r=setTimeout(()=>{f.delete(e),c({type:4,toastId:e})},t);f.set(e,r)},H=e=>{let{toasts:t,pausedAt:r}=g(e);E(()=>{if(r)return;let o=Date.now(),T=t.map(a=>{if(a.duration===1/0)return;let d=(a.duration||0)+a.pauseDuration-(o-a.createdAt);if(d<0){a.visible&&s.dismiss(a.id);return}return setTimeout(()=>s.dismiss(a.id),d)});return()=>{T.forEach(a=>a&&clearTimeout(a))}},[t,r]);let n=R(()=>{r&&c({type:6,time:Date.now()})},[r]),i=R((o,T)=>{let{reverseOrder:a=!1,gutter:d=8,defaultPosition:D}=T||{},S=t.filter(u=>(u.position||D)===(o.position||D)&&u.height),h=S.findIndex(u=>u.id===o.id),O=S.filter((u,A)=>A<h&&u.visible).length;return S.filter(u=>u.visible).slice(...a?[O+1]:[0,O]).reduce((u,A)=>u+(A.height||0)+d,0)},[t]);return E(()=>{t.forEach(o=>{if(o.dismissed)C(o.id,o.removeDelay);else{let T=f.get(o.id);T&&(clearTimeout(T),f.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:w,startPause:N,endPause:n,calculateOffset:i}}};var ie=s;export{ie as default,m as resolveValue,s as toast,H as useToaster,g as useToasterStore};
|
||||
+var V=e=>typeof e=="function",m=(e,t)=>V(e)?e(t):e;var P=(()=>{let e=0;return()=>(++e).toString()})(),B=(()=>{let e;return()=>{if(e===void 0&&typeof window<"u"){let t=matchMedia("(prefers-reduced-motion: reduce)");e=!t||t.matches}return e}})();import{useEffect as x,useState as _,useRef as v}from"react";var I=20;var b=(e,t)=>{switch(t.type){case 0:return{...e,toasts:[t.toast,...e.toasts].slice(0,I)};case 1:return{...e,toasts:e.toasts.map(o=>o.id===t.toast.id?{...o,...t.toast}:o)};case 2:let{toast:r}=t;return b(e,{type:e.toasts.find(o=>o.id===r.id)?1:0,toast:r});case 3:let{toastId:n}=t;return{...e,toasts:e.toasts.map(o=>o.id===n||n===void 0?{...o,dismissed:!0,visible:!1}:o)};case 4:return t.toastId===void 0?{...e,toasts:[]}:{...e,toasts:e.toasts.filter(o=>o.id!==t.toastId)};case 5:return{...e,pausedAt:t.time};case 6:let i=t.time-(e.pausedAt||0);return{...e,pausedAt:void 0,toasts:e.toasts.map(o=>({...o,pauseDuration:o.pauseDuration+i}))}}},y=[],l={toasts:[],pausedAt:void 0},c=e=>{l=b(l,e),y.forEach(t=>{t(l)})},M={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},g=(e={})=>{let[t,r]=_(l),n=v(l);x(()=>(n.current!==l&&r(l),y.push(r),()=>{let o=y.indexOf(r);o>-1&&y.splice(o,1)}),[]);let i=t.toasts.map(o=>{var T,a,d;return{...e,...e[o.type],...o,removeDelay:o.removeDelay||((T=e[o.type])==null?void 0:T.removeDelay)||(e==null?void 0:e.removeDelay),duration:o.duration||((a=e[o.type])==null?void 0:a.duration)||(e==null?void 0:e.duration)||M[o.type],style:{...e.style,...(d=e[o.type])==null?void 0:d.style,...o.style}}});return{...t,toasts:i}};var F=(e,t="blank",r)=>({createdAt:Date.now(),visible:!0,dismissed:!1,type:t,ariaProps:{role:"status","aria-live":"polite"},message:e,pauseDuration:0,...r,id:(r==null?void 0:r.id)||P()}),p=e=>(t,r)=>{let n=F(t,e,r);return c({type:2,toast:n}),n.id},s=(e,t)=>p("blank")(e,t);s.error=p("error");s.success=p("success");s.loading=p("loading");s.custom=p("custom");s.dismiss=e=>{c({type:3,toastId:e})};s.remove=e=>c({type:4,toastId:e});s.promise=(e,t,r)=>{let n=s.loading(t.loading,{...r,...r==null?void 0:r.loading});return typeof e=="function"&&(e=e()),e.then(i=>{let o=t.success?m(t.success,i):void 0;return o?s.success(o,{id:n,...r,...r==null?void 0:r.success}):s.dismiss(n),i}).catch(i=>{let o=t.error?m(t.error,i):void 0;o?s.error(o,{id:n,...r,...r==null?void 0:r.error}):s.dismiss(n)}),e};import{useEffect as E,useCallback as h}from"react";var w=(e,t)=>{c({type:1,toast:{id:e,height:t}})},N=()=>{c({type:5,time:Date.now()})},f=new Map,k=1e3,C=(e,t=k)=>{if(f.has(e))return;let r=setTimeout(()=>{f.delete(e),c({type:4,toastId:e})},t);f.set(e,r)},H=e=>{let{toasts:t,pausedAt:r}=g(e);E(()=>{if(r)return;let o=Date.now(),T=t.map(a=>{if(a.duration===1/0)return;let d=(a.duration||0)+a.pauseDuration-(o-a.createdAt);if(d<0){a.visible&&s.dismiss(a.id);return}return setTimeout(()=>s.dismiss(a.id),d)});return()=>{T.forEach(a=>a&&clearTimeout(a))}},[t,r]);let n=h(()=>{r&&c({type:6,time:Date.now()})},[r]),i=h((o,T)=>{let{reverseOrder:a=!1,gutter:d=8,defaultPosition:D}=T||{},S=t.filter(u=>(u.position||D)===(o.position||D)&&u.height),R=S.findIndex(u=>u.id===o.id),O=S.filter((u,A)=>A<R&&u.visible).length;return S.filter(u=>u.visible).slice(...a?[O+1]:[0,O]).reduce((u,A)=>u+(A.height||0)+d,0)},[t]);return E(()=>{t.forEach(o=>{if(o.dismissed)C(o.id,o.removeDelay);else{let T=f.get(o.id);T&&(clearTimeout(T),f.delete(o.id))}})},[t]),{toasts:t,handlers:{updateHeight:w,startPause:N,endPause:n,calculateOffset:i}}};var ie=s;export{ie as default,m as resolveValue,s as toast,H as useToaster,g as useToasterStore};
|
||||
//# sourceMappingURL=index.mjs.map
|
||||
\ No newline at end of file
|
||||
diff --git a/headless/index.mjs.map b/headless/index.mjs.map
|
||||
index 122e18f6e916645b6622b708903e32e9d47957d4..f0ee18fcc0448d73ca2be04aa9aaf011a8340d74 100644
|
||||
--- a/headless/index.mjs.map
|
||||
+++ b/headless/index.mjs.map
|
||||
@@ -1 +1 @@
|
||||
-{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/headless/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.UPDATE_TOAST\n : ActionType.ADD_TOAST,\n toast,\n });\n\n case ActionType.DISMISS_TOAST:\n const { toastId } = action;\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n dismissed: true,\n visible: false,\n }\n : t\n ),\n };\n case ActionType.REMOVE_TOAST:\n if (action.toa
Line truncated
|
||||
\ No newline at end of file
|
||||
+{"version":3,"sources":["../src/core/types.ts","../src/core/utils.ts","../src/core/store.ts","../src/core/toast.ts","../src/core/use-toaster.ts","../src/headless/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nexport type ToastType = 'success' | 'error' | 'loading' | 'blank' | 'custom';\nexport type ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n | 'center-right'\n | 'center-left';\n\nexport type Renderable = React.ReactElement | string | null;\n\nexport interface IconTheme {\n primary: string;\n secondary: string;\n}\n\nexport type ValueFunction<TValue, TArg> = (arg: TArg) => TValue;\nexport type ValueOrFunction<TValue, TArg> =\n | TValue\n | ValueFunction<TValue, TArg>;\n\nconst isFunction = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>\n): valOrFunction is ValueFunction<TValue, TArg> =>\n typeof valOrFunction === 'function';\n\nexport const resolveValue = <TValue, TArg>(\n valOrFunction: ValueOrFunction<TValue, TArg>,\n arg: TArg\n): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction);\n\nexport interface Toast {\n type: ToastType;\n id: string;\n message: ValueOrFunction<Renderable, Toast>;\n icon?: Renderable;\n duration?: number;\n pauseDuration: number;\n position?: ToastPosition;\n removeDelay?: number;\n\n ariaProps: {\n role: 'status' | 'alert';\n 'aria-live': 'assertive' | 'off' | 'polite';\n };\n\n style?: CSSProperties;\n className?: string;\n iconTheme?: IconTheme;\n\n createdAt: number;\n visible: boolean;\n dismissed: boolean;\n height?: number;\n}\n\nexport type ToastOptions = Partial<\n Pick<\n Toast,\n | 'id'\n | 'icon'\n | 'duration'\n | 'ariaProps'\n | 'className'\n | 'style'\n | 'position'\n | 'iconTheme'\n | 'removeDelay'\n >\n>;\n\nexport type DefaultToastOptions = ToastOptions & {\n [key in ToastType]?: ToastOptions;\n};\n\nexport interface ToasterProps {\n position?: ToastPosition;\n toastOptions?: DefaultToastOptions;\n reverseOrder?: boolean;\n gutter?: number;\n containerStyle?: React.CSSProperties;\n containerClassName?: string;\n children?: (toast: Toast) => React.ReactElement;\n}\n\nexport interface ToastWrapperProps {\n id: string;\n className?: string;\n style?: React.CSSProperties;\n onHeightUpdate: (id: string, height: number) => void;\n children?: React.ReactNode;\n}\n","export const genId = (() => {\n let count = 0;\n return () => {\n return (++count).toString();\n };\n})();\n\nexport const prefersReducedMotion = (() => {\n // Cache result\n let shouldReduceMotion: boolean | undefined = undefined;\n\n return () => {\n if (shouldReduceMotion === undefined && typeof window !== 'undefined') {\n const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');\n shouldReduceMotion = !mediaQuery || mediaQuery.matches;\n }\n return shouldReduceMotion;\n };\n})();\n","import { useEffect, useState, useRef } from 'react';\nimport { DefaultToastOptions, Toast, ToastType } from './types';\n\nconst TOAST_LIMIT = 20;\n\nexport enum ActionType {\n ADD_TOAST,\n UPDATE_TOAST,\n UPSERT_TOAST,\n DISMISS_TOAST,\n REMOVE_TOAST,\n START_PAUSE,\n END_PAUSE,\n}\n\ntype Action =\n | {\n type: ActionType.ADD_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPSERT_TOAST;\n toast: Toast;\n }\n | {\n type: ActionType.UPDATE_TOAST;\n toast: Partial<Toast>;\n }\n | {\n type: ActionType.DISMISS_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.REMOVE_TOAST;\n toastId?: string;\n }\n | {\n type: ActionType.START_PAUSE;\n time: number;\n }\n | {\n type: ActionType.END_PAUSE;\n time: number;\n };\n\ninterface State {\n toasts: Toast[];\n pausedAt: number | undefined;\n}\n\nexport const reducer = (state: State, action: Action): State => {\n switch (action.type) {\n case ActionType.ADD_TOAST:\n return {\n ...state,\n toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),\n };\n\n case ActionType.UPDATE_TOAST:\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === action.toast.id ? { ...t, ...action.toast } : t\n ),\n };\n\n case ActionType.UPSERT_TOAST:\n const { toast } = action;\n return reducer(state, {\n type: state.toasts.find((t) => t.id === toast.id)\n ? ActionType.UPDATE_TOAST\n : ActionType.ADD_TOAST,\n toast,\n });\n\n case ActionType.DISMISS_TOAST:\n const { toastId } = action;\n\n return {\n ...state,\n toasts: state.toasts.map((t) =>\n t.id === toastId || toastId === undefined\n ? {\n ...t,\n dismissed: true,\n visible: false,\n }\n : t\n ),\n };\n case ActionT
Line truncated
|
||||
\ No newline at end of file
|
||||
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
|
||||
index 67c07e79e972c14d67dc16f531e11efc39c604c3..02b974fbebbb648285c923340e33aa3b6ddceceb 100644
|
||||
--- a/src/components/toaster.tsx
|
||||
+++ b/src/components/toaster.tsx
|
||||
@@ -48,17 +48,24 @@ const getPositionStyle = (
|
||||
position: ToastPosition,
|
||||
offset: number
|
||||
): React.CSSProperties => {
|
||||
- const top = position.includes('top');
|
||||
- const verticalStyle: React.CSSProperties = top ? { top: 0 } : { bottom: 0 };
|
||||
- const horizontalStyle: React.CSSProperties = position.includes('center')
|
||||
- ? {
|
||||
- justifyContent: 'center',
|
||||
- }
|
||||
- : position.includes('right')
|
||||
+ const top = position.includes('top') || position.includes('center-');
|
||||
+
|
||||
+ const verticalStyle: React.CSSProperties = top
|
||||
? {
|
||||
- justifyContent: 'flex-end',
|
||||
- }
|
||||
- : {};
|
||||
+ top: position.includes('center-') ? '50%' : 0,
|
||||
+ }
|
||||
+ : { bottom: 0 };
|
||||
+
|
||||
+ const horizontalStyle: React.CSSProperties = position.includes('center-right')
|
||||
+ ? { justifyContent: 'flex-end' }
|
||||
+ : position.includes('center-left')
|
||||
+ ? { justifyContent: 'flex-start' }
|
||||
+ : position.includes('center')
|
||||
+ ? { justifyContent: 'center' }
|
||||
+ : position.includes('right')
|
||||
+ ? { justifyContent: 'flex-end' }
|
||||
+ : {};
|
||||
+
|
||||
return {
|
||||
left: 0,
|
||||
right: 0,
|
||||
diff --git a/src/core/types.ts b/src/core/types.ts
|
||||
index 764a5d780cd5ffa1f51c9d26b41e94345a9fea02..281e222cdf1644a8b2edcd673c46fa4c358ddabc 100644
|
||||
--- a/src/core/types.ts
|
||||
+++ b/src/core/types.ts
|
||||
@@ -7,7 +7,9 @@ export type ToastPosition =
|
||||
| 'top-right'
|
||||
| 'bottom-left'
|
||||
| 'bottom-center'
|
||||
- | 'bottom-right';
|
||||
+ | 'bottom-right'
|
||||
+ | 'center-right'
|
||||
+ | 'center-left';
|
||||
|
||||
export type Renderable = React.ReactElement | string | null;
|
||||
|
||||
@@ -138,7 +138,7 @@ const Notifications: React.FC = () => {
|
||||
} else {
|
||||
iconColor = tinycolor(data.iconColor).toRgbString();
|
||||
}
|
||||
|
||||
|
||||
toast.custom(
|
||||
(t) => (
|
||||
<Box
|
||||
|
||||
Reference in new issue
Block a user