New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
solid-toast
Advanced tools
solid-toast - npm Package Compare versions
Comparing version 0.1.7-alpha.12 to 0.1.7-alpha.13
@@ -1,746 +0,2 @@ | ||
| '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; | ||
| 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; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,739 +0,2 @@ | ||
| 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 }; | ||
| 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}; | ||
| //# sourceMappingURL=index.js.map |
| { | ||
| "name": "solid-toast", | ||
| "version": "0.1.7-alpha.12", | ||
| "version": "0.1.7-alpha.13", | ||
| "description": "Customizable Toast Notifications for SolidJS", | ||
@@ -40,3 +40,4 @@ "source": "./src/index.tsx", | ||
| "build": "rollup -c", | ||
| "preview": "vite preview" | ||
| "preview": "vite preview", | ||
| "minify": "terser --compress --mangle --module -- dist/cjs/index.js > dist/cjs/index.min.js" | ||
| }, | ||
@@ -48,17 +49,16 @@ "homepage": "https://github.com/ardeora/solid-toast#readme", | ||
| "peerDependencies": { | ||
| "solid-js": "^1.4.3" | ||
| "solid-js": "^1.4.2" | ||
| }, | ||
| "devDependencies": { | ||
| "@rollup/plugin-babel": "^5.3.1", | ||
| "@types/node": "^17.0.35", | ||
| "rollup": "^2.75.7", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "rollup-plugin-uglify": "^6.0.4", | ||
| "rollup-preset-solid": "^1.4.0", | ||
| "solid-js": "^1.4.2", | ||
| "terser": "^5.14.1", | ||
| "typescript": "^4.6.4", | ||
| "vite": "^2.9.9", | ||
| "vite-plugin-dts": "^1.2.0", | ||
| "vite-plugin-solid": "^2.2.6", | ||
| "solid-js": "^1.4.3" | ||
| "vite-plugin-solid": "^2.2.6" | ||
| } | ||
| } |
@@ -24,3 +24,2 @@ <a href="https://github.com/ardeora/solid-toast"><img alt="Solid Toast header image showing a cute toaster with a toast popping out" src="https://github.com/ardeora/solid-toast/raw/main/assets/header.png"/></a> | ||
| - **Accessible** | ||
| - **SSR Compatible** | ||
@@ -27,0 +26,0 @@ ## Installation |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
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
- Dev dependency count
- decreased by-9.09%
10
Worsened metrics
- Total package byte prevSize
- decreased by-23.56%
151843
- Lines of code
- decreased by-45.53%
1384
- Number of low quality alerts
- increased by100%
2
- Number of lines in readme file
- decreased by-0.43%
232
No dependency changes