Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
solid-toast
Advanced tools
solid-toast - npm Package Compare versions
Comparing version 0.1.8-alpha.0 to 0.1.8-alpha.1
@@ -1,2 +0,746 @@ | ||
| "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("solid-js"),e=require("solid-js/store"),o=require("solid-js/web"),s=require("goober");const r=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;var i;exports.ActionType=void 0,(i=exports.ActionType||(exports.ActionType={}))[i.ADD_TOAST=0]="ADD_TOAST",i[i.UPDATE_TOAST=1]="UPDATE_TOAST",i[i.UPSERT_TOAST=2]="UPSERT_TOAST",i[i.DISMISS_TOAST=3]="DISMISS_TOAST",i[i.REMOVE_TOAST=4]="REMOVE_TOAST",i[i.START_PAUSE=5]="START_PAUSE",i[i.END_PAUSE=6]="END_PAUSE";const[n,a]=e.createStore({toasts:[],pausedAt:void 0}),c=new Map,l=(t,e)=>{if(c.has(t))return;const o=setTimeout((()=>{c.delete(t),p({type:exports.ActionType.REMOVE_TOAST,toastId:t})}),e);c.set(t,o)},p=t=>{switch(t.type){case exports.ActionType.ADD_TOAST:a("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case exports.ActionType.DISMISS_TOAST:const{toastId:o}=t,s=n.toasts;if(o){const t=s.find((t=>t.id===o));t&&l(o,t.unmountDelay)}else s.forEach((t=>{l(t.id,t.unmountDelay)}));a("toasts",(t=>t.id===o),e.produce((t=>t.visible=!1)));break;case exports.ActionType.REMOVE_TOAST:if(!t.toastId){a("toasts",[]);break}a("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case exports.ActionType.UPDATE_TOAST:t.toast.id&&(t=>{const e=c.get(t);c.delete(t),e&&clearTimeout(e)})(t.toast.id),a("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case exports.ActionType.UPSERT_TOAST:n.toasts.find((e=>e.id===t.toast.id))?p({type:exports.ActionType.UPDATE_TOAST,toast:t.toast}):p({type:exports.ActionType.ADD_TOAST,toast:t.toast});break;case exports.ActionType.START_PAUSE:a("pausedAt",Date.now());break;case exports.ActionType.END_PAUSE:const r=t.time-(n.pausedAt||0);a(e.produce((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=r}))})))}},d={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},y={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},u={position:"top-right",toastOptions:y,gutter:8,containerStyle:{},containerClassName:""},m={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},f=(()=>{let t=0;return()=>String(++t)})(),v=(t,e)=>(t.position||e).includes("top")?1:-1,T={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},g={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},A={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},_=s.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,h=s.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`,S=s.keyframes`to{stroke-dashoffset: 0;}`,x=s.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,$=s.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[b,P]=t.createSignal(u),E=t=>(e,o={})=>{const s=n.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...y,...b().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||f(),style:{...y.style,...b().toastOptions?.style,...o.style},duration:o.duration||b().toastOptions?.duration||d[e],position:o.position||b().toastOptions?.position||b().position||y.position}))(e,t,{...s,duration:void 0,...o});return p({type:exports.ActionType.UPSERT_TOAST,toast:r}),r.id},k=(t,e)=>E("blank")(t,e);k.error=E("error"),k.success=E("success"),k.loading=E("loading"),k.custom=E("custom"),k.dismiss=t=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t})},k.promise=(t,e,o)=>{const s=k.loading(e.loading,{...o});return t.then((t=>(k.success(r(e.success,t),{id:s,...o}),t))).catch((t=>{k.error(r(e.error,t),{id:s,...o})})),t},k.remove=t=>{p({type:exports.ActionType.REMOVE_TOAST,toastId:t})};const w=o.template("<div></div>",2),O=o.template("<div></div>",2),D=o.template("<div><div></div></div>",4),C=e=>{const[i,n]=t.createSignal("");return t.createEffect((()=>{var t;e.toast.visible?n(`${s.keyframes((t=v(e.toast,e.position),`\n0% {transform: translate3d(0,${-200*t}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`):n(`${s.keyframes((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(v(e.toast,e.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const s=D.cloneNode(!0),n=s.firstChild;return o.insert(s,o.createComponent(t.Switch,{get children(){return[o.createComponent(t.Match,{get when(){return e.toast.icon},get children(){const t=O.cloneNode(!0);return o.insert(t,(()=>e.toast.icon)),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"loading"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(B,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"success"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(U,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}}),o.createComponent(t.Match,{get when(){return"error"===e.toast.type},get children(){const t=O.cloneNode(!0);return o.insert(t,o.createComponent(z,o.mergeProps((()=>e.toast.iconTheme)))),o.effect((e=>o.style(t,A,e))),t}})]}}),n),o.spread(n,(()=>e.toast.ariaProps),!1,!0),o.insert(n,(()=>r(e.toast.message,e.toast))),o.effect((t=>{const r=e.toast.className,a={...T,animation:i(),...e.toast.style},c=g;return r!==t._v$&&o.className(s,t._v$=r),t._v$2=o.style(s,a,t._v$2),t._v$3=o.style(n,c,t._v$3),t}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),s})()},N=o.template("<div></div>",2),M=s.css`z-index: 9999;> * { pointer-events: auto;}`,I=e=>{const s=()=>{const t=e.toast.position||y.position,o=((t,e)=>{const{toasts:o}=n,s=b().gutter||u.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),a=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,a).reduce(((t,e)=>t+s+(e.height||0)),0)})(e.toast,t),s=((t,e)=>{const o=t.includes("top");return{left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,o);return s},[i,a]=t.createSignal(s());let c;return t.createEffect((()=>{const t=s();a(t)})),t.onMount((()=>{c&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&p({type:exports.ActionType.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(c,e.toast)})),(()=>{const t=N.cloneNode(!0);t.addEventListener("mouseleave",(()=>p({type:exports.ActionType.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>p({type:exports.ActionType.START_PAUSE,time:Date.now()})));return"function"==typeof c?c(t):c=t,o.insert(t,(()=>{const t=o.memo((()=>"custom"===e.toast.type),!0);return()=>t()?r(e.toast.message,e.toast):o.createComponent(C,{get toast(){return e.toast},get position(){return e.toast.position||y.position}})})()),o.effect((s=>{const r=i(),n=e.toast.visible?M:"";return s._v$=o.style(t,r,s._v$),n!==s._v$2&&o.className(t,s._v$2=n),s}),{_v$:void 0,_v$2:void 0}),t})()},F=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),U=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.2s ease-out forwards`;return(()=>{const i=F.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",s),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","250ms"),c.style.setProperty("animation",r),c.style.setProperty("stroke-dasharray","22"),c.style.setProperty("stroke-dashoffset","22"),c.style.setProperty("animation-delay","250ms"),o.effect((e=>{const s=t.primary||"#34C759",r=t.primary||"#34C759",i=t.secondary||"#FCFCFC";return s!==e._v$&&o.setAttribute(n,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(a,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(c,"stroke",e._v$3=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),i})()},R=o.template('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),z=t=>{const e=`${_} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,s=`${h} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,r=`${S} 0.1s ease-in forwards`,i=`${x} 0.2s ease-out forwards`;return(()=>{const n=R.cloneNode(!0),a=n.firstChild,c=a.nextSibling,l=c.nextSibling,p=l.nextSibling;return n.style.setProperty("overflow","visible"),a.style.setProperty("animation",e),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","100ms"),a.style.setProperty("opacity","0"),c.style.setProperty("animation",s),c.style.setProperty("transform-origin","50% 50%"),c.style.setProperty("animation-delay","320ms"),l.style.setProperty("animation",r),l.style.setProperty("stroke-dasharray","9"),l.style.setProperty("stroke-dashoffset","9"),l.style.setProperty("animation-delay","200ms"),p.style.setProperty("animation",i),p.style.setProperty("animation-delay","320ms"),p.style.setProperty("opacity","0"),o.effect((e=>{const s=t.primary||"#FF3B30",r=t.primary||"#FF3B30",i=t.secondary||"#FFFFFF",n=t.secondary||"#FFFFFF";return s!==e._v$&&o.setAttribute(a,"fill",e._v$=s),r!==e._v$2&&o.setAttribute(c,"fill",e._v$2=r),i!==e._v$3&&o.setAttribute(l,"stroke",e._v$3=i),n!==e._v$4&&o.setAttribute(p,"fill",e._v$4=n),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),n})()},j=o.template('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),B=t=>{const e=`${$} 0.75s linear infinite`;return(()=>{const s=j.cloneNode(!0),r=s.firstChild,i=r.nextSibling;return s.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),o.effect((e=>{const s=t.primary||"#E5E7EB",n=t.secondary||"#4b5563";return s!==e._v$&&o.setAttribute(r,"stroke",e._v$=s),n!==e._v$2&&o.setAttribute(i,"stroke",e._v$2=n),e}),{_v$:void 0,_v$2:void 0}),s})()};var V=k;exports.Toaster=e=>(t.createEffect((()=>{(t=>{P((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(e)})),t.createEffect((()=>{const e=(()=>{const{pausedAt:t,toasts:e}=n;if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&p({type:exports.ActionType.DISMISS_TOAST,toastId:t.id})}));return s})();t.onCleanup((()=>{e&&e.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const s=w.cloneNode(!0);return o.insert(s,o.createComponent(t.For,{get each(){return n.toasts},children:t=>o.createComponent(I,{toast:t})})),o.effect((t=>{const r={...m,...e.containerStyle},i=e.containerClassName;return t._v$=o.style(s,r,t._v$),i!==t._v$2&&o.className(s,t._v$2=i),t}),{_v$:void 0,_v$2:void 0}),s})()),exports.default=V,exports.resolveValue=r,exports.toast=k; | ||
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var solidJs = require('solid-js'); | ||
| var store$1 = require('solid-js/store'); | ||
| var web = require('solid-js/web'); | ||
| var goober = require('goober'); | ||
| const isFunction = valOrFunction => typeof valOrFunction === 'function'; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| exports.ActionType = void 0; | ||
| (function (ActionType) { | ||
| ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST"; | ||
| ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST"; | ||
| ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST"; | ||
| ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST"; | ||
| ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST"; | ||
| ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE"; | ||
| ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE"; | ||
| })(exports.ActionType || (exports.ActionType = {})); | ||
| const [store, setStore] = store$1.createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| const { | ||
| pausedAt, | ||
| toasts | ||
| } = store; | ||
| if (pausedAt) return; | ||
| const now = Date.now(); | ||
| const timers = toasts.map(toast => { | ||
| if (toast.duration === Infinity) return; | ||
| const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
| if (durationLeft <= 0) { | ||
| if (toast.visible) { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| } | ||
| return; | ||
| } | ||
| return setTimeout(() => { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| }, durationLeft); | ||
| }); | ||
| return timers; | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }, unmountDelay); | ||
| removalQueue.set(toastId, timeout); | ||
| }; | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| switch (action.type) { | ||
| case exports.ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| }); | ||
| break; | ||
| case exports.ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
| }); | ||
| } | ||
| setStore('toasts', t => t.id === toastId, store$1.produce(t => t.visible = false)); | ||
| break; | ||
| case exports.ActionType.REMOVE_TOAST: | ||
| if (!action.toastId) { | ||
| setStore('toasts', []); | ||
| break; | ||
| } | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| }); | ||
| break; | ||
| case exports.ActionType.UPDATE_TOAST: | ||
| if (action.toast.id) { | ||
| unscheduleRemoval(action.toast.id); | ||
| } | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| return { ...toast, | ||
| ...action.toast | ||
| }; | ||
| }); | ||
| break; | ||
| case exports.ActionType.UPSERT_TOAST: | ||
| store.toasts.find(t => t.id === action.toast.id) ? dispatch({ | ||
| type: exports.ActionType.UPDATE_TOAST, | ||
| toast: action.toast | ||
| }) : dispatch({ | ||
| type: exports.ActionType.ADD_TOAST, | ||
| toast: action.toast | ||
| }); | ||
| break; | ||
| case exports.ActionType.START_PAUSE: | ||
| setStore('pausedAt', Date.now()); | ||
| break; | ||
| case exports.ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(store$1.produce(s => { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| t.pauseDuration += pauseInterval; | ||
| }); | ||
| })); | ||
| break; | ||
| } | ||
| }; | ||
| const defaultTimeouts = { | ||
| blank: 4000, | ||
| error: 4000, | ||
| success: 2000, | ||
| loading: Infinity, | ||
| custom: 4000 | ||
| }; | ||
| const defaultToastOptions = { | ||
| id: '', | ||
| icon: '', | ||
| unmountDelay: 500, | ||
| duration: 3000, | ||
| ariaProps: { | ||
| role: 'status', | ||
| 'aria-live': 'polite' | ||
| }, | ||
| className: '', | ||
| style: {}, | ||
| position: 'top-right', | ||
| iconTheme: {} | ||
| }; | ||
| const defaultToasterOptions = { | ||
| position: 'top-right', | ||
| toastOptions: defaultToastOptions, | ||
| gutter: 8, | ||
| containerStyle: {}, | ||
| containerClassName: '' | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| position: 'fixed', | ||
| 'z-index': 9999, | ||
| top: defaultContainerPadding, | ||
| bottom: defaultContainerPadding, | ||
| left: defaultContainerPadding, | ||
| right: defaultContainerPadding, | ||
| "pointer-events": 'none' | ||
| }; | ||
| const generateID = (() => { | ||
| let count = 0; | ||
| return () => String(++count); | ||
| })(); | ||
| const mergeContainerOptions = props => { | ||
| setDefaultOpts(s => ({ | ||
| containerClassName: props.containerClassName ?? s.containerClassName, | ||
| containerStyle: props.containerStyle ?? s.containerStyle, | ||
| gutter: props.gutter ?? s.gutter, | ||
| position: props.position ?? s.position, | ||
| toastOptions: { ...props.toastOptions | ||
| } | ||
| })); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| top: 0 | ||
| } : { | ||
| bottom: 0 | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
| } : position.includes('right') ? { | ||
| 'justify-content': 'flex-end' | ||
| } : {}; | ||
| return { | ||
| left: 0, | ||
| right: 0, | ||
| display: 'flex', | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
| dispatch({ | ||
| type: exports.ActionType.UPDATE_TOAST, | ||
| toast: { | ||
| id: toast.id, | ||
| height: boundingRect.height | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| const getWrapperYAxisOffset = (toast, position) => { | ||
| const { | ||
| toasts | ||
| } = store; | ||
| const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| const relevantToasts = toasts.filter(t => (t.position || position) === position && t.height); | ||
| const toastIndex = relevantToasts.findIndex(t => t.id === toast.id); | ||
| const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length; | ||
| const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| background: 'white', | ||
| color: '#363636', | ||
| 'box-shadow': '0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)', | ||
| 'max-width': '350px', | ||
| 'pointer-events': 'auto', | ||
| padding: '8px 10px', | ||
| 'border-radius': '4px', | ||
| 'line-height': '1.3', | ||
| 'will-change': 'transform' | ||
| }; | ||
| const entranceAnimation = direction => ` | ||
| 0% {transform: translate3d(0,${direction * -200}%,0) scale(.6); opacity:.5;} | ||
| 100% {transform: translate3d(0,0,0) scale(1); opacity:1;} | ||
| `; | ||
| const exitAnimation = direction => ` | ||
| 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;} | ||
| 100% {transform: translate3d(0,${direction * -150}%,-1px) scale(.4); opacity:0;} | ||
| `; | ||
| const messageContainer = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| flex: '1 1 auto', | ||
| margin: '4px 10px', | ||
| 'white-space': 'pre-line' | ||
| }; | ||
| const iconContainer = { | ||
| 'flex-shrink': 0, | ||
| 'min-width': '20px', | ||
| 'min-height': '20px', | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| 'justify-content': 'center', | ||
| 'text-align': 'center' | ||
| }; | ||
| const iconCircle = goober.keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`; | ||
| const pingCircle = goober.keyframes`75%,100%{transform: scale(2.25);opacity:0;}`; | ||
| const icon = goober.keyframes`to{stroke-dashoffset: 0;}`; | ||
| const infoDot = goober.keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`; | ||
| const rotate = goober.keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`; | ||
| const [defaultOpts, setDefaultOpts] = solidJs.createSignal(defaultToasterOptions); | ||
| const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions, | ||
| ...defaultOpts().toastOptions, | ||
| ...options, | ||
| type, | ||
| message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: { ...defaultToastOptions.style, | ||
| ...defaultOpts().toastOptions?.style, | ||
| ...options.style | ||
| }, | ||
| duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type], | ||
| position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position | ||
| }); | ||
| const createToastCreator = type => (message, options = {}) => { | ||
| const existingToast = store.toasts.find(t => t.id === options.id); | ||
| const toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| }); | ||
| dispatch({ | ||
| type: exports.ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast$1 = (message, opts) => createToastCreator('blank')(message, opts); | ||
| toast$1.error = createToastCreator('error'); | ||
| toast$1.success = createToastCreator('success'); | ||
| toast$1.loading = createToastCreator('loading'); | ||
| toast$1.custom = createToastCreator('custom'); | ||
| toast$1.dismiss = toastId => { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| toast$1.promise = (promise, msgs, opts) => { | ||
| const id = toast$1.loading(msgs.loading, { ...opts | ||
| }); | ||
| promise.then(p => { | ||
| toast$1.success(resolveValue(msgs.success, p), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| return p; | ||
| }).catch(e => { | ||
| toast$1.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| }); | ||
| return promise; | ||
| }; | ||
| toast$1.remove = toastId => { | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| solidJs.createEffect(() => { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| const timers = createTimers(); | ||
| solidJs.onCleanup(() => { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| web.insert(_el$, web.createComponent(solidJs.For, { | ||
| get each() { | ||
| return store.toasts; | ||
| }, | ||
| children: toast => web.createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| })); | ||
| web.effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$4 = /*#__PURE__*/web.template(`<div></div>`, 2), | ||
| _tmpl$2 = /*#__PURE__*/web.template(`<div><div></div></div>`, 4); | ||
| const ToastBar = props => { | ||
| const [animation, setAnimation] = solidJs.createSignal(''); | ||
| solidJs.createEffect(() => { | ||
| props.toast.visible ? setAnimation(`${goober.keyframes(entranceAnimation(getToastYDirection(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`) : setAnimation(`${goober.keyframes(exitAnimation(getToastYDirection(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
| web.insert(_el$, web.createComponent(solidJs.Switch, { | ||
| get children() { | ||
| return [web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.icon; | ||
| }, | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$2, () => props.toast.icon); | ||
| web.effect(_$p => web.style(_el$2, iconContainer, _$p)); | ||
| return _el$2; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'loading'; | ||
| }, | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$3, web.createComponent(Loader, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$3, iconContainer, _$p)); | ||
| return _el$3; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'success'; | ||
| }, | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$4, web.createComponent(Success, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$4, iconContainer, _$p)); | ||
| return _el$4; | ||
| } | ||
| }), web.createComponent(solidJs.Match, { | ||
| get when() { | ||
| return props.toast.type === 'error'; | ||
| }, | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$5, web.createComponent(Error, web.mergeProps(() => props.toast.iconTheme))); | ||
| web.effect(_$p => web.style(_el$5, iconContainer, _$p)); | ||
| return _el$5; | ||
| } | ||
| })]; | ||
| } | ||
| }), _el$6); | ||
| web.spread(_el$6, () => props.toast.ariaProps, false, true); | ||
| web.insert(_el$6, () => resolveValue(props.toast.message, props.toast)); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.toast.className, | ||
| _v$2 = { ...toastBarBase, | ||
| animation: animation(), | ||
| ...props.toast.style | ||
| }, | ||
| _v$3 = messageContainer; | ||
| _v$ !== _p$._v$ && web.className(_el$, _p$._v$ = _v$); | ||
| _p$._v$2 = web.style(_el$, _v$2, _p$._v$2); | ||
| _p$._v$3 = web.style(_el$6, _v$3, _p$._v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$3 = /*#__PURE__*/web.template(`<div></div>`, 2); | ||
| const activeClass = goober.css`z-index: 9999;> * { pointer-events: auto;}`; | ||
| const ToastContainer = props => { | ||
| const calculatePosition = () => { | ||
| const position = props.toast.position || defaultToastOptions.position; | ||
| const offset = getWrapperYAxisOffset(props.toast, position); | ||
| const positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = solidJs.createSignal(calculatePosition()); | ||
| solidJs.createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| solidJs.onMount(() => { | ||
| if (el) { | ||
| updateToastHeight(el, props.toast); | ||
| } | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: exports.ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: exports.ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| const _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| web.insert(_el$, (() => { | ||
| const _c$ = web.memo(() => props.toast.type === 'custom', true); | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : web.createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| })()); | ||
| web.effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$2 = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>`, 8); | ||
| const Success = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const check = `${icon} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "250ms"); | ||
| _el$4.style.setProperty("animation", check); | ||
| _el$4.style.setProperty("stroke-dasharray", "22"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "22"); | ||
| _el$4.style.setProperty("animation-delay", "250ms"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && web.setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$1 = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>`, 10); | ||
| const Error = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const infoDash = `${icon} 0.1s ease-in forwards`; | ||
| const infoCircle = `${infoDot} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$1.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling, | ||
| _el$5 = _el$4.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "320ms"); | ||
| _el$4.style.setProperty("animation", infoDash); | ||
| _el$4.style.setProperty("stroke-dasharray", "9"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "9"); | ||
| _el$4.style.setProperty("animation-delay", "200ms"); | ||
| _el$5.style.setProperty("animation", infoCircle); | ||
| _el$5.style.setProperty("animation-delay", "320ms"); | ||
| _el$5.style.setProperty("opacity", "0"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && web.setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| _v$4 !== _p$._v$4 && web.setAttribute(_el$5, "fill", _p$._v$4 = _v$4); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined, | ||
| _v$4: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$ = /*#__PURE__*/web.template(`<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>`, 6); | ||
| const Loader = props => { | ||
| const animation = `${rotate} 0.75s linear infinite`; | ||
| return (() => { | ||
| const _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$3.style.setProperty("animation", animation); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| _v$ !== _p$._v$ && web.setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && web.setAttribute(_el$3, "stroke", _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| var toast = toast$1; | ||
| exports.Toaster = Toaster; | ||
| exports["default"] = toast; | ||
| exports.resolveValue = resolveValue; | ||
| exports.toast = toast$1; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,739 @@ | ||
| import{createSignal as t,createEffect as e,onCleanup as o,For as s,Switch as r,Match as i,onMount as n}from"solid-js";import{createStore as a,produce as c}from"solid-js/store";import{insert as l,createComponent as d,effect as p,style as y,className as u,template as v,mergeProps as m,spread as f,memo as _,setAttribute as g}from"solid-js/web";import{keyframes as T,css as h}from"goober";const S=(t,e)=>(t=>"function"==typeof t)(t)?t(e):t;let $;!function(t){t[t.ADD_TOAST=0]="ADD_TOAST",t[t.UPDATE_TOAST=1]="UPDATE_TOAST",t[t.UPSERT_TOAST=2]="UPSERT_TOAST",t[t.DISMISS_TOAST=3]="DISMISS_TOAST",t[t.REMOVE_TOAST=4]="REMOVE_TOAST",t[t.START_PAUSE=5]="START_PAUSE",t[t.END_PAUSE=6]="END_PAUSE"}($||($={}));const[A,b]=a({toasts:[],pausedAt:void 0}),x=new Map,P=(t,e)=>{if(x.has(t))return;const o=setTimeout((()=>{x.delete(t),E({type:$.REMOVE_TOAST,toastId:t})}),e);x.set(t,o)},E=t=>{switch(t.type){case $.ADD_TOAST:b("toasts",(e=>{const o=e;return[t.toast,...o]}));break;case $.DISMISS_TOAST:const{toastId:e}=t,o=A.toasts;if(e){const t=o.find((t=>t.id===e));t&&P(e,t.unmountDelay)}else o.forEach((t=>{P(t.id,t.unmountDelay)}));b("toasts",(t=>t.id===e),c((t=>t.visible=!1)));break;case $.REMOVE_TOAST:if(!t.toastId){b("toasts",[]);break}b("toasts",(e=>e.filter((e=>e.id!==t.toastId))));break;case $.UPDATE_TOAST:t.toast.id&&(t=>{const e=x.get(t);x.delete(t),e&&clearTimeout(e)})(t.toast.id),b("toasts",(e=>e.id===t.toast.id),(e=>({...e,...t.toast})));break;case $.UPSERT_TOAST:A.toasts.find((e=>e.id===t.toast.id))?E({type:$.UPDATE_TOAST,toast:t.toast}):E({type:$.ADD_TOAST,toast:t.toast});break;case $.START_PAUSE:b("pausedAt",Date.now());break;case $.END_PAUSE:const s=t.time-(A.pausedAt||0);b(c((t=>{t.pausedAt=void 0,t.toasts.forEach((t=>{t.pauseDuration+=s}))})))}},w={blank:4e3,error:4e3,success:2e3,loading:1/0,custom:4e3},O={id:"",icon:"",unmountDelay:500,duration:3e3,ariaProps:{role:"status","aria-live":"polite"},className:"",style:{},position:"top-right",iconTheme:{}},D={position:"top-right",toastOptions:O,gutter:8,containerStyle:{},containerClassName:""},k={position:"fixed","z-index":9999,top:"16px",bottom:"16px",left:"16px",right:"16px","pointer-events":"none"},I=(()=>{let t=0;return()=>String(++t)})(),N=(t,e)=>(t.position||e).includes("top")?1:-1,F={display:"flex","align-items":"center",background:"white",color:"#363636","box-shadow":"0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)","max-width":"350px","pointer-events":"auto",padding:"8px 10px","border-radius":"4px","line-height":"1.3","will-change":"transform"},U={display:"flex","align-items":"center",flex:"1 1 auto",margin:"4px 10px","white-space":"pre-line"},M={"flex-shrink":0,"min-width":"20px","min-height":"20px",display:"flex","align-items":"center","justify-content":"center","text-align":"center"},C=T`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`,R=T`75%,100%{transform: scale(2.25);opacity:0;}`,z=T`to{stroke-dashoffset: 0;}`,B=T`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`,j=T`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`,[V,L]=t(D),Y=t=>(e,o={})=>{const s=A.toasts.find((t=>t.id===o.id)),r=((t,e="blank",o)=>({...O,...V().toastOptions,...o,type:e,message:t,pauseDuration:0,createdAt:Date.now(),visible:!0,id:o.id||I(),style:{...O.style,...V().toastOptions?.style,...o.style},duration:o.duration||V().toastOptions?.duration||w[e],position:o.position||V().toastOptions?.position||V().position||O.position}))(e,t,{...s,duration:void 0,...o});return E({type:$.UPSERT_TOAST,toast:r}),r.id},q=(t,e)=>Y("blank")(t,e);q.error=Y("error"),q.success=Y("success"),q.loading=Y("loading"),q.custom=Y("custom"),q.dismiss=t=>{E({type:$.DISMISS_TOAST,toastId:t})},q.promise=(t,e,o)=>{const s=q.loading(e.loading,{...o});return t.then((t=>(q.success(S(e.success,t),{id:s,...o}),t))).catch((t=>{q.error(S(e.error,t),{id:s,...o})})),t},q.remove=t=>{E({type:$.REMOVE_TOAST,toastId:t})};const G=v("<div></div>",2),H=t=>(e((()=>{(t=>{L((e=>({containerClassName:t.containerClassName??e.containerClassName,containerStyle:t.containerStyle??e.containerStyle,gutter:t.gutter??e.gutter,position:t.position??e.position,toastOptions:{...t.toastOptions}})))})(t)})),e((()=>{const t=(()=>{const{pausedAt:t,toasts:e}=A;if(t)return;const o=Date.now(),s=e.map((t=>{if(t.duration===1/0)return;const e=(t.duration||0)+t.pauseDuration-(o-t.createdAt);if(!(e<=0))return setTimeout((()=>{E({type:$.DISMISS_TOAST,toastId:t.id})}),e);t.visible&&E({type:$.DISMISS_TOAST,toastId:t.id})}));return s})();o((()=>{t&&t.forEach((t=>t&&clearTimeout(t)))}))})),(()=>{const e=G.cloneNode(!0);return l(e,d(s,{get each(){return A.toasts},children:t=>d(Z,{toast:t})})),p((o=>{const s={...k,...t.containerStyle},r=t.containerClassName;return o._v$=y(e,s,o._v$),r!==o._v$2&&u(e,o._v$2=r),o}),{_v$:void 0,_v$2:void 0}),e})()),J=v("<div></div>",2),K=v("<div><div></div></div>",4),Q=o=>{const[s,n]=t("");return e((()=>{var t;o.toast.visible?n(`${T((t=N(o.toast,o.position),`\n0% {transform: translate3d(0,${-200*t}%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n`))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`):n(`${T((t=>`\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,${-150*t}%,-1px) scale(.4); opacity:0;}\n`)(N(o.toast,o.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`)})),(()=>{const t=K.cloneNode(!0),e=t.firstChild;return l(t,d(r,{get children(){return[d(i,{get when(){return o.toast.icon},get children(){const t=J.cloneNode(!0);return l(t,(()=>o.toast.icon)),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"loading"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(it,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"success"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(et,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}}),d(i,{get when(){return"error"===o.toast.type},get children(){const t=J.cloneNode(!0);return l(t,d(st,m((()=>o.toast.iconTheme)))),p((e=>y(t,M,e))),t}})]}}),e),f(e,(()=>o.toast.ariaProps),!1,!0),l(e,(()=>S(o.toast.message,o.toast))),p((r=>{const i=o.toast.className,n={...F,animation:s(),...o.toast.style},a=U;return i!==r._v$&&u(t,r._v$=i),r._v$2=y(t,n,r._v$2),r._v$3=y(e,a,r._v$3),r}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),t})()},W=v("<div></div>",2),X=h`z-index: 9999;> * { pointer-events: auto;}`,Z=o=>{const s=()=>{const t=o.toast.position||O.position,e=((t,e)=>{const{toasts:o}=A,s=V().gutter||D.gutter||8,r=o.filter((t=>(t.position||e)===e&&t.height)),i=r.findIndex((e=>e.id===t.id)),n=r.filter(((t,e)=>e<i&&t.visible)).length;return r.slice(0,n).reduce(((t,e)=>t+s+(e.height||0)),0)})(o.toast,t),s=((t,e)=>{const o=t.includes("top");return{left:0,right:0,display:"flex",position:"absolute",transition:"all 230ms cubic-bezier(.21,1.02,.73,1)",transform:`translateY(${e*(o?1:-1)}px)`,...o?{top:0}:{bottom:0},...t.includes("center")?{"justify-content":"center"}:t.includes("right")?{"justify-content":"flex-end"}:{}}})(t,e);return s},[r,i]=t(s());let a;return e((()=>{const t=s();i(t)})),n((()=>{a&&((t,e)=>{const o=t.getBoundingClientRect();o.height!==e.height&&E({type:$.UPDATE_TOAST,toast:{id:e.id,height:o.height}})})(a,o.toast)})),(()=>{const t=W.cloneNode(!0);t.addEventListener("mouseleave",(()=>E({type:$.END_PAUSE,time:Date.now()}))),t.addEventListener("mouseenter",(()=>E({type:$.START_PAUSE,time:Date.now()})));return"function"==typeof a?a(t):a=t,l(t,(()=>{const t=_((()=>"custom"===o.toast.type),!0);return()=>t()?S(o.toast.message,o.toast):d(Q,{get toast(){return o.toast},get position(){return o.toast.position||O.position}})})()),p((e=>{const s=r(),i=o.toast.visible?X:"";return e._v$=y(t,s,e._v$),i!==e._v$2&&u(t,e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),t})()},tt=v('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>',8),et=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.2s ease-out forwards`;return(()=>{const r=tt.cloneNode(!0),i=r.firstChild,n=i.nextSibling,a=n.nextSibling;return r.style.setProperty("overflow","visible"),i.style.setProperty("animation",e),i.style.setProperty("transform-origin","50% 50%"),i.style.setProperty("animation-delay","100ms"),i.style.setProperty("opacity","0"),n.style.setProperty("animation",o),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","250ms"),a.style.setProperty("animation",s),a.style.setProperty("stroke-dasharray","22"),a.style.setProperty("stroke-dashoffset","22"),a.style.setProperty("animation-delay","250ms"),p((e=>{const o=t.primary||"#34C759",s=t.primary||"#34C759",r=t.secondary||"#FCFCFC";return o!==e._v$&&g(i,"fill",e._v$=o),s!==e._v$2&&g(n,"fill",e._v$2=s),r!==e._v$3&&g(a,"stroke",e._v$3=r),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0}),r})()},ot=v('<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>',10),st=t=>{const e=`${C} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`,o=`${R} 1s cubic-bezier(0, 0, 0.2, 1) forwards`,s=`${z} 0.1s ease-in forwards`,r=`${B} 0.2s ease-out forwards`;return(()=>{const i=ot.cloneNode(!0),n=i.firstChild,a=n.nextSibling,c=a.nextSibling,l=c.nextSibling;return i.style.setProperty("overflow","visible"),n.style.setProperty("animation",e),n.style.setProperty("transform-origin","50% 50%"),n.style.setProperty("animation-delay","100ms"),n.style.setProperty("opacity","0"),a.style.setProperty("animation",o),a.style.setProperty("transform-origin","50% 50%"),a.style.setProperty("animation-delay","320ms"),c.style.setProperty("animation",s),c.style.setProperty("stroke-dasharray","9"),c.style.setProperty("stroke-dashoffset","9"),c.style.setProperty("animation-delay","200ms"),l.style.setProperty("animation",r),l.style.setProperty("animation-delay","320ms"),l.style.setProperty("opacity","0"),p((e=>{const o=t.primary||"#FF3B30",s=t.primary||"#FF3B30",r=t.secondary||"#FFFFFF",i=t.secondary||"#FFFFFF";return o!==e._v$&&g(n,"fill",e._v$=o),s!==e._v$2&&g(a,"fill",e._v$2=s),r!==e._v$3&&g(c,"stroke",e._v$3=r),i!==e._v$4&&g(l,"fill",e._v$4=i),e}),{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),i})()},rt=v('<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>',6),it=t=>{const e=`${j} 0.75s linear infinite`;return(()=>{const o=rt.cloneNode(!0),s=o.firstChild,r=s.nextSibling;return o.style.setProperty("overflow","visible"),r.style.setProperty("animation",e),r.style.setProperty("transform-origin","50% 50%"),p((e=>{const o=t.primary||"#E5E7EB",i=t.secondary||"#4b5563";return o!==e._v$&&g(s,"stroke",e._v$=o),i!==e._v$2&&g(r,"stroke",e._v$2=i),e}),{_v$:void 0,_v$2:void 0}),o})()};var nt=q;export{$ as ActionType,H as Toaster,nt as default,S as resolveValue,q as toast}; | ||
| import { createSignal, createEffect, onCleanup, For, Switch, Match, onMount } from 'solid-js'; | ||
| import { createStore, produce } from 'solid-js/store'; | ||
| import { insert, createComponent, effect, style, className, template, mergeProps, spread, memo, setAttribute } from 'solid-js/web'; | ||
| import { keyframes, css } from 'goober'; | ||
| const isFunction = valOrFunction => typeof valOrFunction === 'function'; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| let ActionType; | ||
| (function (ActionType) { | ||
| ActionType[ActionType["ADD_TOAST"] = 0] = "ADD_TOAST"; | ||
| ActionType[ActionType["UPDATE_TOAST"] = 1] = "UPDATE_TOAST"; | ||
| ActionType[ActionType["UPSERT_TOAST"] = 2] = "UPSERT_TOAST"; | ||
| ActionType[ActionType["DISMISS_TOAST"] = 3] = "DISMISS_TOAST"; | ||
| ActionType[ActionType["REMOVE_TOAST"] = 4] = "REMOVE_TOAST"; | ||
| ActionType[ActionType["START_PAUSE"] = 5] = "START_PAUSE"; | ||
| ActionType[ActionType["END_PAUSE"] = 6] = "END_PAUSE"; | ||
| })(ActionType || (ActionType = {})); | ||
| const [store, setStore] = createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| const { | ||
| pausedAt, | ||
| toasts | ||
| } = store; | ||
| if (pausedAt) return; | ||
| const now = Date.now(); | ||
| const timers = toasts.map(toast => { | ||
| if (toast.duration === Infinity) return; | ||
| const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
| if (durationLeft <= 0) { | ||
| if (toast.visible) { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| } | ||
| return; | ||
| } | ||
| return setTimeout(() => { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId: toast.id | ||
| }); | ||
| }, durationLeft); | ||
| }); | ||
| return timers; | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }, unmountDelay); | ||
| removalQueue.set(toastId, timeout); | ||
| }; | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| switch (action.type) { | ||
| case ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| }); | ||
| break; | ||
| case ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
| }); | ||
| } | ||
| setStore('toasts', t => t.id === toastId, produce(t => t.visible = false)); | ||
| break; | ||
| case ActionType.REMOVE_TOAST: | ||
| if (!action.toastId) { | ||
| setStore('toasts', []); | ||
| break; | ||
| } | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| }); | ||
| break; | ||
| case ActionType.UPDATE_TOAST: | ||
| if (action.toast.id) { | ||
| unscheduleRemoval(action.toast.id); | ||
| } | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| return { ...toast, | ||
| ...action.toast | ||
| }; | ||
| }); | ||
| break; | ||
| case ActionType.UPSERT_TOAST: | ||
| store.toasts.find(t => t.id === action.toast.id) ? dispatch({ | ||
| type: ActionType.UPDATE_TOAST, | ||
| toast: action.toast | ||
| }) : dispatch({ | ||
| type: ActionType.ADD_TOAST, | ||
| toast: action.toast | ||
| }); | ||
| break; | ||
| case ActionType.START_PAUSE: | ||
| setStore('pausedAt', Date.now()); | ||
| break; | ||
| case ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(produce(s => { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| t.pauseDuration += pauseInterval; | ||
| }); | ||
| })); | ||
| break; | ||
| } | ||
| }; | ||
| const defaultTimeouts = { | ||
| blank: 4000, | ||
| error: 4000, | ||
| success: 2000, | ||
| loading: Infinity, | ||
| custom: 4000 | ||
| }; | ||
| const defaultToastOptions = { | ||
| id: '', | ||
| icon: '', | ||
| unmountDelay: 500, | ||
| duration: 3000, | ||
| ariaProps: { | ||
| role: 'status', | ||
| 'aria-live': 'polite' | ||
| }, | ||
| className: '', | ||
| style: {}, | ||
| position: 'top-right', | ||
| iconTheme: {} | ||
| }; | ||
| const defaultToasterOptions = { | ||
| position: 'top-right', | ||
| toastOptions: defaultToastOptions, | ||
| gutter: 8, | ||
| containerStyle: {}, | ||
| containerClassName: '' | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| position: 'fixed', | ||
| 'z-index': 9999, | ||
| top: defaultContainerPadding, | ||
| bottom: defaultContainerPadding, | ||
| left: defaultContainerPadding, | ||
| right: defaultContainerPadding, | ||
| "pointer-events": 'none' | ||
| }; | ||
| const generateID = (() => { | ||
| let count = 0; | ||
| return () => String(++count); | ||
| })(); | ||
| const mergeContainerOptions = props => { | ||
| setDefaultOpts(s => ({ | ||
| containerClassName: props.containerClassName ?? s.containerClassName, | ||
| containerStyle: props.containerStyle ?? s.containerStyle, | ||
| gutter: props.gutter ?? s.gutter, | ||
| position: props.position ?? s.position, | ||
| toastOptions: { ...props.toastOptions | ||
| } | ||
| })); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| top: 0 | ||
| } : { | ||
| bottom: 0 | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
| } : position.includes('right') ? { | ||
| 'justify-content': 'flex-end' | ||
| } : {}; | ||
| return { | ||
| left: 0, | ||
| right: 0, | ||
| display: 'flex', | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
| dispatch({ | ||
| type: ActionType.UPDATE_TOAST, | ||
| toast: { | ||
| id: toast.id, | ||
| height: boundingRect.height | ||
| } | ||
| }); | ||
| } | ||
| }; | ||
| const getWrapperYAxisOffset = (toast, position) => { | ||
| const { | ||
| toasts | ||
| } = store; | ||
| const gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| const relevantToasts = toasts.filter(t => (t.position || position) === position && t.height); | ||
| const toastIndex = relevantToasts.findIndex(t => t.id === toast.id); | ||
| const toastsBefore = relevantToasts.filter((toast, i) => i < toastIndex && toast.visible).length; | ||
| const offset = relevantToasts.slice(0, toastsBefore).reduce((acc, t) => acc + gutter + (t.height || 0), 0); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| background: 'white', | ||
| color: '#363636', | ||
| 'box-shadow': '0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)', | ||
| 'max-width': '350px', | ||
| 'pointer-events': 'auto', | ||
| padding: '8px 10px', | ||
| 'border-radius': '4px', | ||
| 'line-height': '1.3', | ||
| 'will-change': 'transform' | ||
| }; | ||
| const entranceAnimation = direction => ` | ||
| 0% {transform: translate3d(0,${direction * -200}%,0) scale(.6); opacity:.5;} | ||
| 100% {transform: translate3d(0,0,0) scale(1); opacity:1;} | ||
| `; | ||
| const exitAnimation = direction => ` | ||
| 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;} | ||
| 100% {transform: translate3d(0,${direction * -150}%,-1px) scale(.4); opacity:0;} | ||
| `; | ||
| const messageContainer = { | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| flex: '1 1 auto', | ||
| margin: '4px 10px', | ||
| 'white-space': 'pre-line' | ||
| }; | ||
| const iconContainer = { | ||
| 'flex-shrink': 0, | ||
| 'min-width': '20px', | ||
| 'min-height': '20px', | ||
| display: 'flex', | ||
| 'align-items': 'center', | ||
| 'justify-content': 'center', | ||
| 'text-align': 'center' | ||
| }; | ||
| const iconCircle = keyframes`from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}`; | ||
| const pingCircle = keyframes`75%,100%{transform: scale(2.25);opacity:0;}`; | ||
| const icon = keyframes`to{stroke-dashoffset: 0;}`; | ||
| const infoDot = keyframes`0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}`; | ||
| const rotate = keyframes`from{transform: rotate(0deg);}to{transform: rotate(360deg);}`; | ||
| const [defaultOpts, setDefaultOpts] = createSignal(defaultToasterOptions); | ||
| const createToast = (message, type = 'blank', options) => ({ ...defaultToastOptions, | ||
| ...defaultOpts().toastOptions, | ||
| ...options, | ||
| type, | ||
| message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: { ...defaultToastOptions.style, | ||
| ...defaultOpts().toastOptions?.style, | ||
| ...options.style | ||
| }, | ||
| duration: options.duration || defaultOpts().toastOptions?.duration || defaultTimeouts[type], | ||
| position: options.position || defaultOpts().toastOptions?.position || defaultOpts().position || defaultToastOptions.position | ||
| }); | ||
| const createToastCreator = type => (message, options = {}) => { | ||
| const existingToast = store.toasts.find(t => t.id === options.id); | ||
| const toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| }); | ||
| dispatch({ | ||
| type: ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast$1 = (message, opts) => createToastCreator('blank')(message, opts); | ||
| toast$1.error = createToastCreator('error'); | ||
| toast$1.success = createToastCreator('success'); | ||
| toast$1.loading = createToastCreator('loading'); | ||
| toast$1.custom = createToastCreator('custom'); | ||
| toast$1.dismiss = toastId => { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| toast$1.promise = (promise, msgs, opts) => { | ||
| const id = toast$1.loading(msgs.loading, { ...opts | ||
| }); | ||
| promise.then(p => { | ||
| toast$1.success(resolveValue(msgs.success, p), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| return p; | ||
| }).catch(e => { | ||
| toast$1.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| }); | ||
| return promise; | ||
| }; | ||
| toast$1.remove = toastId => { | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| createEffect(() => { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| createEffect(() => { | ||
| const timers = createTimers(); | ||
| onCleanup(() => { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| insert(_el$, createComponent(For, { | ||
| get each() { | ||
| return store.toasts; | ||
| }, | ||
| children: toast => createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| })); | ||
| effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$4 = /*#__PURE__*/template(`<div></div>`, 2), | ||
| _tmpl$2 = /*#__PURE__*/template(`<div><div></div></div>`, 4); | ||
| const ToastBar = props => { | ||
| const [animation, setAnimation] = createSignal(''); | ||
| createEffect(() => { | ||
| props.toast.visible ? setAnimation(`${keyframes(entranceAnimation(getToastYDirection(props.toast, props.position)))} 0.35s cubic-bezier(.21,1.02,.73,1) forwards`) : setAnimation(`${keyframes(exitAnimation(getToastYDirection(props.toast, props.position)))} 0.4s forwards cubic-bezier(.06,.71,.55,1)`); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
| insert(_el$, createComponent(Switch, { | ||
| get children() { | ||
| return [createComponent(Match, { | ||
| get when() { | ||
| return props.toast.icon; | ||
| }, | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$2, () => props.toast.icon); | ||
| effect(_$p => style(_el$2, iconContainer, _$p)); | ||
| return _el$2; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'loading'; | ||
| }, | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$3, createComponent(Loader, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$3, iconContainer, _$p)); | ||
| return _el$3; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'success'; | ||
| }, | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$4, createComponent(Success, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$4, iconContainer, _$p)); | ||
| return _el$4; | ||
| } | ||
| }), createComponent(Match, { | ||
| get when() { | ||
| return props.toast.type === 'error'; | ||
| }, | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$5, createComponent(Error, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$5, iconContainer, _$p)); | ||
| return _el$5; | ||
| } | ||
| })]; | ||
| } | ||
| }), _el$6); | ||
| spread(_el$6, () => props.toast.ariaProps, false, true); | ||
| insert(_el$6, () => resolveValue(props.toast.message, props.toast)); | ||
| effect(_p$ => { | ||
| const _v$ = props.toast.className, | ||
| _v$2 = { ...toastBarBase, | ||
| animation: animation(), | ||
| ...props.toast.style | ||
| }, | ||
| _v$3 = messageContainer; | ||
| _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$); | ||
| _p$._v$2 = style(_el$, _v$2, _p$._v$2); | ||
| _p$._v$3 = style(_el$6, _v$3, _p$._v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$3 = /*#__PURE__*/template(`<div></div>`, 2); | ||
| const activeClass = css`z-index: 9999;> * { pointer-events: auto;}`; | ||
| const ToastContainer = props => { | ||
| const calculatePosition = () => { | ||
| const position = props.toast.position || defaultToastOptions.position; | ||
| const offset = getWrapperYAxisOffset(props.toast, position); | ||
| const positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = createSignal(calculatePosition()); | ||
| createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| onMount(() => { | ||
| if (el) { | ||
| updateToastHeight(el, props.toast); | ||
| } | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| const _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| insert(_el$, (() => { | ||
| const _c$ = memo(() => props.toast.type === 'custom', true); | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| })()); | ||
| effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
| _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$2 = /*#__PURE__*/template(`<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M9.8,17.2l3.8,3.6c0.1,0.1,0.3,0.1,0.4,0l9.6-9.7"></path></svg>`, 8); | ||
| const Success = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const check = `${icon} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "250ms"); | ||
| _el$4.style.setProperty("animation", check); | ||
| _el$4.style.setProperty("stroke-dasharray", "22"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "22"); | ||
| _el$4.style.setProperty("animation-delay", "250ms"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$$1 = /*#__PURE__*/template(`<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="16"></circle><circle cx="16" cy="16" r="12"></circle><path fill="none" stroke-width="4" stroke-linecap="round" d="M16,7l0,9"></path><circle cx="16" cy="16" r="2.5"></circle></svg>`, 10); | ||
| const Error = props => { | ||
| const mainCircle = `${iconCircle} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards`; | ||
| const secondaryCircle = `${pingCircle} 1s cubic-bezier(0, 0, 0.2, 1) forwards`; | ||
| const infoDash = `${icon} 0.1s ease-in forwards`; | ||
| const infoCircle = `${infoDot} 0.2s ease-out forwards`; | ||
| return (() => { | ||
| const _el$ = _tmpl$$1.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling, | ||
| _el$5 = _el$4.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$2.style.setProperty("animation", mainCircle); | ||
| _el$2.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$2.style.setProperty("animation-delay", "100ms"); | ||
| _el$2.style.setProperty("opacity", "0"); | ||
| _el$3.style.setProperty("animation", secondaryCircle); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| _el$3.style.setProperty("animation-delay", "320ms"); | ||
| _el$4.style.setProperty("animation", infoDash); | ||
| _el$4.style.setProperty("stroke-dasharray", "9"); | ||
| _el$4.style.setProperty("stroke-dashoffset", "9"); | ||
| _el$4.style.setProperty("animation-delay", "200ms"); | ||
| _el$5.style.setProperty("animation", infoCircle); | ||
| _el$5.style.setProperty("animation-delay", "320ms"); | ||
| _el$5.style.setProperty("opacity", "0"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "fill", _p$._v$2 = _v$2); | ||
| _v$3 !== _p$._v$3 && setAttribute(_el$4, "stroke", _p$._v$3 = _v$3); | ||
| _v$4 !== _p$._v$4 && setAttribute(_el$5, "fill", _p$._v$4 = _v$4); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined, | ||
| _v$3: undefined, | ||
| _v$4: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| const _tmpl$ = /*#__PURE__*/template(`<svg viewBox="0 0 32 32"><path fill="none" stroke-width="4" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c1.5,1.8,2.5,4,2.5,6.6c0,5.5-4.5,10-10,10S6,21.6,6,16S10.5,6,16,6z"></path><path fill="none" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M16,6c3,0,5.7,1.3,7.5,3.4c0.6,0.7,1.1,1.4,1.5,2.2"></path></svg>`, 6); | ||
| const Loader = props => { | ||
| const animation = `${rotate} 0.75s linear infinite`; | ||
| return (() => { | ||
| const _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
| _el$3.style.setProperty("animation", animation); | ||
| _el$3.style.setProperty("transform-origin", "50% 50%"); | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| _v$ !== _p$._v$ && setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| _v$2 !== _p$._v$2 && setAttribute(_el$3, "stroke", _p$._v$2 = _v$2); | ||
| return _p$; | ||
| }, { | ||
| _v$: undefined, | ||
| _v$2: undefined | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }; | ||
| var toast = toast$1; | ||
| export { ActionType, Toaster, toast as default, resolveValue, toast$1 as toast }; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "solid-toast", | ||
| "version": "0.1.8-alpha.0", | ||
| "version": "0.1.8-alpha.1", | ||
| "description": "Customizable Toast Notifications for SolidJS", | ||
@@ -5,0 +5,0 @@ "source": "./src/index.tsx", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by30.77%
198925
- Lines of code
- increased by83.6%
2541
- Number of low quality alerts
- decreased by-50%
1
No dependency changes