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.6-alpha.0 to 0.1.7-alpha.0
| 'use strict'; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; | ||
| function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } | ||
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
| function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
| function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
| function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
| function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| 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'; | ||
| var isFunction = function isFunction(valOrFunction) { | ||
| return typeof valOrFunction === 'function'; | ||
| }; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| var resolveValue = function resolveValue(valOrFunction, arg) { | ||
| return isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| }; | ||
@@ -26,16 +65,18 @@ exports.ActionType = void 0; | ||
| const [store, setStore] = store$1.createStore({ | ||
| var _store$1$createStore = store$1.createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| const { | ||
| pausedAt, | ||
| toasts | ||
| } = store; | ||
| }), | ||
| _store$1$createStore2 = _slicedToArray(_store$1$createStore, 2), | ||
| store = _store$1$createStore2[0], | ||
| setStore = _store$1$createStore2[1]; | ||
| var createTimers = function createTimers() { | ||
| var pausedAt = store.pausedAt, | ||
| toasts = store.toasts; | ||
| if (pausedAt) return; | ||
| const now = Date.now(); | ||
| const timers = toasts.map(toast => { | ||
| var now = Date.now(); | ||
| var timers = toasts.map(function (toast) { | ||
| if (toast.duration === Infinity) return; | ||
| const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
| var durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
@@ -53,3 +94,3 @@ if (durationLeft <= 0) { | ||
| return setTimeout(() => { | ||
| return setTimeout(function () { | ||
| dispatch({ | ||
@@ -63,11 +104,12 @@ type: exports.ActionType.DISMISS_TOAST, | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| var removalQueue = new Map(); | ||
| var scheduleRemoval = function scheduleRemoval(toastId, unmountDelay) { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| var timeout = setTimeout(function () { | ||
| removalQueue["delete"](toastId); | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| toastId: toastId | ||
| }); | ||
@@ -78,14 +120,14 @@ }, unmountDelay); | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| var unscheduleRemoval = function unscheduleRemoval(toastId) { | ||
| var timeout = removalQueue.get(toastId); | ||
| removalQueue["delete"](toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| var dispatch = function dispatch(action) { | ||
| switch (action.type) { | ||
| case exports.ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| setStore('toasts', function (t) { | ||
| var toasts = t; | ||
| return [action.toast].concat(_toConsumableArray(toasts)); | ||
| }); | ||
@@ -95,12 +137,12 @@ break; | ||
| case exports.ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| var toastId = action.toastId; | ||
| var toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| var toastToRemove = toasts.find(function (t) { | ||
| return t.id === toastId; | ||
| }); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| toasts.forEach(function (t) { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
@@ -110,3 +152,7 @@ }); | ||
| setStore('toasts', t => t.id === toastId, store$1.produce(t => t.visible = false)); | ||
| setStore('toasts', function (t) { | ||
| return t.id === toastId; | ||
| }, store$1.produce(function (t) { | ||
| return t.visible = false; | ||
| })); | ||
| break; | ||
@@ -120,5 +166,7 @@ | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| setStore('toasts', function (t) { | ||
| var toasts = t; | ||
| return toasts.filter(function (t) { | ||
| return t.id !== action.toastId; | ||
| }); | ||
| }); | ||
@@ -132,7 +180,7 @@ break; | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| return { ...toast, | ||
| ...action.toast | ||
| }; | ||
| setStore('toasts', function (t) { | ||
| return t.id === action.toast.id; | ||
| }, function (t) { | ||
| var toast = t; | ||
| return _objectSpread(_objectSpread({}, toast), action.toast); | ||
| }); | ||
@@ -142,3 +190,5 @@ break; | ||
| case exports.ActionType.UPSERT_TOAST: | ||
| store.toasts.find(t => t.id === action.toast.id) ? dispatch({ | ||
| store.toasts.find(function (t) { | ||
| return t.id === action.toast.id; | ||
| }) ? dispatch({ | ||
| type: exports.ActionType.UPDATE_TOAST, | ||
@@ -157,6 +207,6 @@ toast: action.toast | ||
| case exports.ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(store$1.produce(s => { | ||
| var pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(store$1.produce(function (s) { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| s.toasts.forEach(function (t) { | ||
| t.pauseDuration += pauseInterval; | ||
@@ -169,3 +219,3 @@ }); | ||
| const defaultTimeouts = { | ||
| var defaultTimeouts = { | ||
| blank: 4000, | ||
@@ -177,3 +227,3 @@ error: 4000, | ||
| }; | ||
| const defaultToastOptions = { | ||
| var defaultToastOptions = { | ||
| id: '', | ||
@@ -192,3 +242,3 @@ icon: '', | ||
| }; | ||
| const defaultToasterOptions = { | ||
| var defaultToasterOptions = { | ||
| position: 'top-right', | ||
@@ -200,4 +250,4 @@ toastOptions: defaultToastOptions, | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| var defaultContainerPadding = '16px'; | ||
| var defaultContainerStyle = { | ||
| position: 'fixed', | ||
@@ -212,19 +262,26 @@ 'z-index': 9999, | ||
| 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 | ||
| } | ||
| })); | ||
| var generateID = function () { | ||
| var count = 0; | ||
| return function () { | ||
| return String(++count); | ||
| }; | ||
| }(); | ||
| var mergeContainerOptions = function mergeContainerOptions(props) { | ||
| setDefaultOpts(function (s) { | ||
| var _props$containerClass, _props$containerStyle, _props$gutter, _props$position; | ||
| return { | ||
| containerClassName: (_props$containerClass = props.containerClassName) !== null && _props$containerClass !== void 0 ? _props$containerClass : s.containerClassName, | ||
| containerStyle: (_props$containerStyle = props.containerStyle) !== null && _props$containerStyle !== void 0 ? _props$containerStyle : s.containerStyle, | ||
| gutter: (_props$gutter = props.gutter) !== null && _props$gutter !== void 0 ? _props$gutter : s.gutter, | ||
| position: (_props$position = props.position) !== null && _props$position !== void 0 ? _props$position : s.position, | ||
| toastOptions: _objectSpread({}, props.toastOptions) | ||
| }; | ||
| }); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| var getToastWrapperStyles = function getToastWrapperStyles(position, offset) { | ||
| var top = position.includes('top'); | ||
| var verticalStyle = top ? { | ||
| top: 0 | ||
@@ -234,3 +291,3 @@ } : { | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| var horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
@@ -240,3 +297,3 @@ } : position.includes('right') ? { | ||
| } : {}; | ||
| return { | ||
| return _objectSpread(_objectSpread({ | ||
| left: 0, | ||
@@ -246,11 +303,10 @@ right: 0, | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| transition: "all 230ms cubic-bezier(.21,1.02,.73,1)", | ||
| transform: "translateY(".concat(offset * (top ? 1 : -1), "px)") | ||
| }, verticalStyle), horizontalStyle); | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| var updateToastHeight = function updateToastHeight(ref, toast) { | ||
| var boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
@@ -266,20 +322,28 @@ dispatch({ | ||
| }; | ||
| 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); | ||
| var getWrapperYAxisOffset = function getWrapperYAxisOffset(toast, position) { | ||
| var toasts = store.toasts; | ||
| var gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| var relevantToasts = toasts.filter(function (t) { | ||
| return (t.position || position) === position && t.height; | ||
| }); | ||
| var toastIndex = relevantToasts.findIndex(function (t) { | ||
| return t.id === toast.id; | ||
| }); | ||
| var toastsBefore = relevantToasts.filter(function (toast, i) { | ||
| return i < toastIndex && toast.visible; | ||
| }).length; | ||
| var offset = relevantToasts.slice(0, toastsBefore).reduce(function (acc, t) { | ||
| return acc + gutter + (t.height || 0); | ||
| }, 0); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| var getToastYDirection = function getToastYDirection(toast, defaultPos) { | ||
| var position = toast.position || defaultPos; | ||
| var top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| var toastBarBase = { | ||
| display: 'flex', | ||
@@ -297,11 +361,12 @@ 'align-items': 'center', | ||
| }; | ||
| 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 = { | ||
| var entranceAnimation = function entranceAnimation(direction) { | ||
| return "\n0% {transform: translate3d(0,".concat(direction * -200, "%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n"); | ||
| }; | ||
| var exitAnimation = function exitAnimation(direction) { | ||
| return "\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,".concat(direction * -150, "%,-1px) scale(.4); opacity:0;}\n"); | ||
| }; | ||
| var messageContainer = { | ||
| display: 'flex', | ||
@@ -313,3 +378,3 @@ 'align-items': 'center', | ||
| }; | ||
| const iconContainer = { | ||
| var iconContainer = { | ||
| 'flex-shrink': 0, | ||
@@ -323,41 +388,52 @@ 'min-width': '20px', | ||
| }; | ||
| 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);}`; | ||
| var iconCircle = goober.keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}"]))); | ||
| var pingCircle = goober.keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["75%,100%{transform: scale(2.25);opacity:0;}"]))); | ||
| var icon = goober.keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["to{stroke-dashoffset: 0;}"]))); | ||
| var infoDot = goober.keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}"]))); | ||
| var rotate = goober.keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["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 | ||
| }); | ||
| var _solidJs$createSignal = solidJs.createSignal(defaultToasterOptions), | ||
| _solidJs$createSignal2 = _slicedToArray(_solidJs$createSignal, 2), | ||
| defaultOpts = _solidJs$createSignal2[0], | ||
| setDefaultOpts = _solidJs$createSignal2[1]; | ||
| const createToastCreator = type => (message, options = {}) => { | ||
| const existingToast = store.toasts.find(t => t.id === options.id); | ||
| const toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| var createToast = function createToast(message) { | ||
| var _defaultOpts$toastOpt, _defaultOpts$toastOpt2, _defaultOpts$toastOpt3; | ||
| var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'blank'; | ||
| var options = arguments.length > 2 ? arguments[2] : undefined; | ||
| return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultToastOptions), defaultOpts().toastOptions), options), {}, { | ||
| type: type, | ||
| message: message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: _objectSpread(_objectSpread(_objectSpread({}, defaultToastOptions.style), (_defaultOpts$toastOpt = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt === void 0 ? void 0 : _defaultOpts$toastOpt.style), options.style), | ||
| duration: options.duration || ((_defaultOpts$toastOpt2 = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt2 === void 0 ? void 0 : _defaultOpts$toastOpt2.duration) || defaultTimeouts[type], | ||
| position: options.position || ((_defaultOpts$toastOpt3 = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt3 === void 0 ? void 0 : _defaultOpts$toastOpt3.position) || defaultOpts().position || defaultToastOptions.position | ||
| }); | ||
| dispatch({ | ||
| type: exports.ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast$1 = (message, opts) => createToastCreator('blank')(message, opts); | ||
| var createToastCreator = function createToastCreator(type) { | ||
| return function (message) { | ||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var existingToast = store.toasts.find(function (t) { | ||
| return t.id === options.id; | ||
| }); | ||
| var toast = createToast(message, type, _objectSpread(_objectSpread({}, existingToast), {}, { | ||
| duration: undefined | ||
| }, options)); | ||
| dispatch({ | ||
| type: exports.ActionType.UPSERT_TOAST, | ||
| toast: toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| }; | ||
| var toast$1 = function toast$1(message, opts) { | ||
| return createToastCreator('blank')(message, opts); | ||
| }; | ||
| toast$1.error = createToastCreator('error'); | ||
@@ -368,23 +444,20 @@ toast$1.success = createToastCreator('success'); | ||
| toast$1.dismiss = toastId => { | ||
| toast$1.dismiss = function (toastId) { | ||
| dispatch({ | ||
| type: exports.ActionType.DISMISS_TOAST, | ||
| toastId | ||
| toastId: 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 | ||
| }); | ||
| toast$1.promise = function (promise, msgs, opts) { | ||
| var id = toast$1.loading(msgs.loading, _objectSpread({}, opts)); | ||
| promise.then(function (p) { | ||
| toast$1.success(resolveValue(msgs.success, p), _objectSpread({ | ||
| id: id | ||
| }, opts)); | ||
| return p; | ||
| }).catch(e => { | ||
| toast$1.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| })["catch"](function (e) { | ||
| toast$1.error(resolveValue(msgs.error, e), _objectSpread({ | ||
| id: id | ||
| }, opts)); | ||
| }); | ||
@@ -394,23 +467,26 @@ return promise; | ||
| toast$1.remove = toastId => { | ||
| toast$1.remove = function (toastId) { | ||
| dispatch({ | ||
| type: exports.ActionType.REMOVE_TOAST, | ||
| toastId | ||
| toastId: toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/web.template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| solidJs.createEffect(() => { | ||
| var _tmpl$$5 = /*#__PURE__*/web.template("<div></div>", 2); | ||
| var Toaster = function Toaster(props) { | ||
| solidJs.createEffect(function () { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| solidJs.createEffect(() => { | ||
| const timers = createTimers(); | ||
| solidJs.onCleanup(() => { | ||
| solidJs.createEffect(function () { | ||
| var timers = createTimers(); | ||
| solidJs.onCleanup(function () { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| timers.forEach(function (timer) { | ||
| return timer && clearTimeout(timer); | ||
| }); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| return function () { | ||
| var _el$ = _tmpl$$5.cloneNode(true); | ||
@@ -422,12 +498,12 @@ web.insert(_el$, web.createComponent(solidJs.For, { | ||
| children: toast => web.createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| children: function children(toast) { | ||
| return web.createComponent(ToastContainer, { | ||
| toast: toast | ||
| }); | ||
| } | ||
| })); | ||
| web.effect(function (_p$) { | ||
| var _v$ = _objectSpread(_objectSpread({}, defaultContainerStyle), props.containerStyle), | ||
| _v$2 = props.containerClassName; | ||
| web.effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
@@ -440,17 +516,21 @@ _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| }); | ||
| 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)`); | ||
| var _tmpl$$4 = /*#__PURE__*/web.template("<div></div>", 2), | ||
| _tmpl$2 = /*#__PURE__*/web.template("<div><div></div></div>", 4); | ||
| var ToastBar = function ToastBar(props) { | ||
| var _solidJs$createSignal3 = solidJs.createSignal(''), | ||
| _solidJs$createSignal4 = _slicedToArray(_solidJs$createSignal3, 2), | ||
| animation = _solidJs$createSignal4[0], | ||
| setAnimation = _solidJs$createSignal4[1]; | ||
| solidJs.createEffect(function () { | ||
| props.toast.visible ? setAnimation("".concat(goober.keyframes(entranceAnimation(getToastYDirection(props.toast, props.position))), " 0.35s cubic-bezier(.21,1.02,.73,1) forwards")) : setAnimation("".concat(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; | ||
| return function () { | ||
| var _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
@@ -465,8 +545,10 @@ web.insert(_el$, web.createComponent(solidJs.Switch, { | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| var _el$2 = _tmpl$$4.cloneNode(true); | ||
| web.insert(_el$2, () => props.toast.icon); | ||
| web.effect(_$p => web.style(_el$2, iconContainer, _$p)); | ||
| web.insert(_el$2, function () { | ||
| return props.toast.icon; | ||
| }); | ||
| web.effect(function (_$p) { | ||
| return web.style(_el$2, iconContainer, _$p); | ||
| }); | ||
| return _el$2; | ||
@@ -481,8 +563,10 @@ } | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| var _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)); | ||
| web.insert(_el$3, web.createComponent(Loader, web.mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| web.effect(function (_$p) { | ||
| return web.style(_el$3, iconContainer, _$p); | ||
| }); | ||
| return _el$3; | ||
@@ -497,8 +581,10 @@ } | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| var _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)); | ||
| web.insert(_el$4, web.createComponent(Success, web.mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| web.effect(function (_$p) { | ||
| return web.style(_el$4, iconContainer, _$p); | ||
| }); | ||
| return _el$4; | ||
@@ -513,8 +599,10 @@ } | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| var _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)); | ||
| web.insert(_el$5, web.createComponent(Error, web.mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| web.effect(function (_$p) { | ||
| return web.style(_el$5, iconContainer, _$p); | ||
| }); | ||
| return _el$5; | ||
@@ -527,14 +615,15 @@ } | ||
| }), _el$6); | ||
| web.spread(_el$6, function () { | ||
| return props.toast.ariaProps; | ||
| }, false, true); | ||
| web.insert(_el$6, function () { | ||
| return resolveValue(props.toast.message, props.toast); | ||
| }); | ||
| web.effect(function (_p$) { | ||
| var _v$ = props.toast.className, | ||
| _v$2 = _objectSpread(_objectSpread({}, toastBarBase), {}, { | ||
| animation: animation() | ||
| }, props.toast.style), | ||
| _v$3 = messageContainer; | ||
| 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$); | ||
@@ -549,24 +638,29 @@ _p$._v$2 = web.style(_el$, _v$2, _p$._v$2); | ||
| }); | ||
| 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); | ||
| var _tmpl$$3 = /*#__PURE__*/web.template("<div></div>", 2); | ||
| var activeClass = goober.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["z-index: 9999;> * { pointer-events: auto;}"]))); | ||
| var ToastContainer = function ToastContainer(props) { | ||
| var calculatePosition = function calculatePosition() { | ||
| var position = props.toast.position || defaultToastOptions.position; | ||
| var offset = getWrapperYAxisOffset(props.toast, position); | ||
| var positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = solidJs.createSignal(calculatePosition()); | ||
| solidJs.createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| var _solidJs$createSignal5 = solidJs.createSignal(calculatePosition()), | ||
| _solidJs$createSignal6 = _slicedToArray(_solidJs$createSignal5, 2), | ||
| positionStyle = _solidJs$createSignal6[0], | ||
| setPositionStyle = _solidJs$createSignal6[1]; | ||
| solidJs.createEffect(function () { | ||
| var newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| solidJs.onMount(() => { | ||
| var el = undefined; | ||
| solidJs.onMount(function () { | ||
| if (el) { | ||
@@ -576,37 +670,43 @@ updateToastHeight(el, props.toast); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| return function () { | ||
| var _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: exports.ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseleave", function () { | ||
| return dispatch({ | ||
| type: exports.ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| }); | ||
| }); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: exports.ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", function () { | ||
| return dispatch({ | ||
| type: exports.ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| }); | ||
| }); | ||
| const _ref$ = el; | ||
| var _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| web.insert(_el$, function () { | ||
| var _c$ = web.memo(function () { | ||
| return props.toast.type === 'custom'; | ||
| }, true); | ||
| web.insert(_el$, (() => { | ||
| const _c$ = web.memo(() => props.toast.type === 'custom', true); | ||
| return function () { | ||
| return _c$() ? resolveValue(props.toast.message, props.toast) : web.createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : web.createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| }; | ||
| }()); | ||
| web.effect(function (_p$) { | ||
| var _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| }); | ||
| })()); | ||
| web.effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = web.style(_el$, _v$, _p$._v$); | ||
@@ -619,18 +719,18 @@ _v$2 !== _p$._v$2 && web.className(_el$, _p$._v$2 = _v$2); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Success = function Success(props) { | ||
| var mainCircle = "".concat(iconCircle, " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"); | ||
| var secondaryCircle = "".concat(pingCircle, " 1s cubic-bezier(0, 0, 0.2, 1) forwards"); | ||
| var check = "".concat(icon, " 0.2s ease-out forwards"); | ||
| return function () { | ||
| var _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
@@ -660,6 +760,6 @@ | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| web.effect(function (_p$) { | ||
| var _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
@@ -675,20 +775,20 @@ _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Error = function Error(props) { | ||
| var mainCircle = "".concat(iconCircle, " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"); | ||
| var secondaryCircle = "".concat(pingCircle, " 1s cubic-bezier(0, 0, 0.2, 1) forwards"); | ||
| var infoDash = "".concat(icon, " 0.1s ease-in forwards"); | ||
| var infoCircle = "".concat(infoDot, " 0.2s ease-out forwards"); | ||
| return function () { | ||
| var _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"); | ||
@@ -724,7 +824,7 @@ | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| web.effect(function (_p$) { | ||
| var _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
@@ -742,15 +842,15 @@ _v$ !== _p$._v$ && web.setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Loader = function Loader(props) { | ||
| var animation = "".concat(rotate, " 0.75s linear infinite"); | ||
| return function () { | ||
| var _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
@@ -762,5 +862,5 @@ | ||
| web.effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| web.effect(function (_p$) { | ||
| var _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
@@ -774,9 +874,7 @@ _v$ !== _p$._v$ && web.setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| }); | ||
| return _el$; | ||
| })(); | ||
| }(); | ||
| }; | ||
| var toast = toast$1; | ||
| exports.Toaster = Toaster; | ||
@@ -783,0 +881,0 @@ exports["default"] = toast; |
@@ -0,1 +1,31 @@ | ||
| var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6; | ||
| function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); } | ||
| function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; } | ||
| function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } | ||
| function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } | ||
| function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
| function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
| function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
| function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
| function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
| function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } | ||
| function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } | ||
| function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } | ||
| function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
| import { createSignal, createEffect, onCleanup, For, Switch, Match, onMount } from 'solid-js'; | ||
@@ -6,7 +36,11 @@ import { createStore, produce } from 'solid-js/store'; | ||
| const isFunction = valOrFunction => typeof valOrFunction === 'function'; | ||
| var isFunction = function isFunction(valOrFunction) { | ||
| return typeof valOrFunction === 'function'; | ||
| }; | ||
| const resolveValue = (valOrFunction, arg) => isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| var resolveValue = function resolveValue(valOrFunction, arg) { | ||
| return isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction; | ||
| }; | ||
| let ActionType; | ||
| var ActionType; | ||
@@ -23,16 +57,18 @@ (function (ActionType) { | ||
| const [store, setStore] = createStore({ | ||
| var _createStore = createStore({ | ||
| toasts: [], | ||
| pausedAt: undefined | ||
| }); | ||
| const createTimers = () => { | ||
| const { | ||
| pausedAt, | ||
| toasts | ||
| } = store; | ||
| }), | ||
| _createStore2 = _slicedToArray(_createStore, 2), | ||
| store = _createStore2[0], | ||
| setStore = _createStore2[1]; | ||
| var createTimers = function createTimers() { | ||
| var pausedAt = store.pausedAt, | ||
| toasts = store.toasts; | ||
| if (pausedAt) return; | ||
| const now = Date.now(); | ||
| const timers = toasts.map(toast => { | ||
| var now = Date.now(); | ||
| var timers = toasts.map(function (toast) { | ||
| if (toast.duration === Infinity) return; | ||
| const durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
| var durationLeft = (toast.duration || 0) + toast.pauseDuration - (now - toast.createdAt); | ||
@@ -50,3 +86,3 @@ if (durationLeft <= 0) { | ||
| return setTimeout(() => { | ||
| return setTimeout(function () { | ||
| dispatch({ | ||
@@ -60,11 +96,12 @@ type: ActionType.DISMISS_TOAST, | ||
| }; | ||
| const removalQueue = new Map(); | ||
| const scheduleRemoval = (toastId, unmountDelay) => { | ||
| var removalQueue = new Map(); | ||
| var scheduleRemoval = function scheduleRemoval(toastId, unmountDelay) { | ||
| if (removalQueue.has(toastId)) return; | ||
| const timeout = setTimeout(() => { | ||
| removalQueue.delete(toastId); | ||
| var timeout = setTimeout(function () { | ||
| removalQueue["delete"](toastId); | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| toastId: toastId | ||
| }); | ||
@@ -75,14 +112,14 @@ }, unmountDelay); | ||
| const unscheduleRemoval = toastId => { | ||
| const timeout = removalQueue.get(toastId); | ||
| removalQueue.delete(toastId); | ||
| var unscheduleRemoval = function unscheduleRemoval(toastId) { | ||
| var timeout = removalQueue.get(toastId); | ||
| removalQueue["delete"](toastId); | ||
| if (timeout) clearTimeout(timeout); | ||
| }; | ||
| const dispatch = action => { | ||
| var dispatch = function dispatch(action) { | ||
| switch (action.type) { | ||
| case ActionType.ADD_TOAST: | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return [action.toast, ...toasts]; | ||
| setStore('toasts', function (t) { | ||
| var toasts = t; | ||
| return [action.toast].concat(_toConsumableArray(toasts)); | ||
| }); | ||
@@ -92,12 +129,12 @@ break; | ||
| case ActionType.DISMISS_TOAST: | ||
| const { | ||
| toastId | ||
| } = action; | ||
| const toasts = store.toasts; | ||
| var toastId = action.toastId; | ||
| var toasts = store.toasts; | ||
| if (toastId) { | ||
| const toastToRemove = toasts.find(t => t.id === toastId); | ||
| var toastToRemove = toasts.find(function (t) { | ||
| return t.id === toastId; | ||
| }); | ||
| if (toastToRemove) scheduleRemoval(toastId, toastToRemove.unmountDelay); | ||
| } else { | ||
| toasts.forEach(t => { | ||
| toasts.forEach(function (t) { | ||
| scheduleRemoval(t.id, t.unmountDelay); | ||
@@ -107,3 +144,7 @@ }); | ||
| setStore('toasts', t => t.id === toastId, produce(t => t.visible = false)); | ||
| setStore('toasts', function (t) { | ||
| return t.id === toastId; | ||
| }, produce(function (t) { | ||
| return t.visible = false; | ||
| })); | ||
| break; | ||
@@ -117,5 +158,7 @@ | ||
| setStore('toasts', t => { | ||
| const toasts = t; | ||
| return toasts.filter(t => t.id !== action.toastId); | ||
| setStore('toasts', function (t) { | ||
| var toasts = t; | ||
| return toasts.filter(function (t) { | ||
| return t.id !== action.toastId; | ||
| }); | ||
| }); | ||
@@ -129,7 +172,7 @@ break; | ||
| setStore('toasts', t => t.id === action.toast.id, t => { | ||
| const toast = t; | ||
| return { ...toast, | ||
| ...action.toast | ||
| }; | ||
| setStore('toasts', function (t) { | ||
| return t.id === action.toast.id; | ||
| }, function (t) { | ||
| var toast = t; | ||
| return _objectSpread(_objectSpread({}, toast), action.toast); | ||
| }); | ||
@@ -139,3 +182,5 @@ break; | ||
| case ActionType.UPSERT_TOAST: | ||
| store.toasts.find(t => t.id === action.toast.id) ? dispatch({ | ||
| store.toasts.find(function (t) { | ||
| return t.id === action.toast.id; | ||
| }) ? dispatch({ | ||
| type: ActionType.UPDATE_TOAST, | ||
@@ -154,6 +199,6 @@ toast: action.toast | ||
| case ActionType.END_PAUSE: | ||
| const pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(produce(s => { | ||
| var pauseInterval = action.time - (store.pausedAt || 0); | ||
| setStore(produce(function (s) { | ||
| s.pausedAt = undefined; | ||
| s.toasts.forEach(t => { | ||
| s.toasts.forEach(function (t) { | ||
| t.pauseDuration += pauseInterval; | ||
@@ -166,3 +211,3 @@ }); | ||
| const defaultTimeouts = { | ||
| var defaultTimeouts = { | ||
| blank: 4000, | ||
@@ -174,3 +219,3 @@ error: 4000, | ||
| }; | ||
| const defaultToastOptions = { | ||
| var defaultToastOptions = { | ||
| id: '', | ||
@@ -189,3 +234,3 @@ icon: '', | ||
| }; | ||
| const defaultToasterOptions = { | ||
| var defaultToasterOptions = { | ||
| position: 'top-right', | ||
@@ -197,4 +242,4 @@ toastOptions: defaultToastOptions, | ||
| }; | ||
| const defaultContainerPadding = '16px'; | ||
| const defaultContainerStyle = { | ||
| var defaultContainerPadding = '16px'; | ||
| var defaultContainerStyle = { | ||
| position: 'fixed', | ||
@@ -209,19 +254,26 @@ 'z-index': 9999, | ||
| 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 | ||
| } | ||
| })); | ||
| var generateID = function () { | ||
| var count = 0; | ||
| return function () { | ||
| return String(++count); | ||
| }; | ||
| }(); | ||
| var mergeContainerOptions = function mergeContainerOptions(props) { | ||
| setDefaultOpts(function (s) { | ||
| var _props$containerClass, _props$containerStyle, _props$gutter, _props$position; | ||
| return { | ||
| containerClassName: (_props$containerClass = props.containerClassName) !== null && _props$containerClass !== void 0 ? _props$containerClass : s.containerClassName, | ||
| containerStyle: (_props$containerStyle = props.containerStyle) !== null && _props$containerStyle !== void 0 ? _props$containerStyle : s.containerStyle, | ||
| gutter: (_props$gutter = props.gutter) !== null && _props$gutter !== void 0 ? _props$gutter : s.gutter, | ||
| position: (_props$position = props.position) !== null && _props$position !== void 0 ? _props$position : s.position, | ||
| toastOptions: _objectSpread({}, props.toastOptions) | ||
| }; | ||
| }); | ||
| }; | ||
| const getToastWrapperStyles = (position, offset) => { | ||
| const top = position.includes('top'); | ||
| const verticalStyle = top ? { | ||
| var getToastWrapperStyles = function getToastWrapperStyles(position, offset) { | ||
| var top = position.includes('top'); | ||
| var verticalStyle = top ? { | ||
| top: 0 | ||
@@ -231,3 +283,3 @@ } : { | ||
| }; | ||
| const horizontalStyle = position.includes('center') ? { | ||
| var horizontalStyle = position.includes('center') ? { | ||
| 'justify-content': 'center' | ||
@@ -237,3 +289,3 @@ } : position.includes('right') ? { | ||
| } : {}; | ||
| return { | ||
| return _objectSpread(_objectSpread({ | ||
| left: 0, | ||
@@ -243,11 +295,10 @@ right: 0, | ||
| position: 'absolute', | ||
| transition: `all 230ms cubic-bezier(.21,1.02,.73,1)`, | ||
| transform: `translateY(${offset * (top ? 1 : -1)}px)`, | ||
| ...verticalStyle, | ||
| ...horizontalStyle | ||
| }; | ||
| transition: "all 230ms cubic-bezier(.21,1.02,.73,1)", | ||
| transform: "translateY(".concat(offset * (top ? 1 : -1), "px)") | ||
| }, verticalStyle), horizontalStyle); | ||
| }; | ||
| const updateToastHeight = (ref, toast) => { | ||
| const boundingRect = ref.getBoundingClientRect(); | ||
| var updateToastHeight = function updateToastHeight(ref, toast) { | ||
| var boundingRect = ref.getBoundingClientRect(); | ||
| if (boundingRect.height !== toast.height) { | ||
@@ -263,20 +314,28 @@ dispatch({ | ||
| }; | ||
| 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); | ||
| var getWrapperYAxisOffset = function getWrapperYAxisOffset(toast, position) { | ||
| var toasts = store.toasts; | ||
| var gutter = defaultOpts().gutter || defaultToasterOptions.gutter || 8; | ||
| var relevantToasts = toasts.filter(function (t) { | ||
| return (t.position || position) === position && t.height; | ||
| }); | ||
| var toastIndex = relevantToasts.findIndex(function (t) { | ||
| return t.id === toast.id; | ||
| }); | ||
| var toastsBefore = relevantToasts.filter(function (toast, i) { | ||
| return i < toastIndex && toast.visible; | ||
| }).length; | ||
| var offset = relevantToasts.slice(0, toastsBefore).reduce(function (acc, t) { | ||
| return acc + gutter + (t.height || 0); | ||
| }, 0); | ||
| return offset; | ||
| }; | ||
| const getToastYDirection = (toast, defaultPos) => { | ||
| const position = toast.position || defaultPos; | ||
| const top = position.includes('top'); | ||
| var getToastYDirection = function getToastYDirection(toast, defaultPos) { | ||
| var position = toast.position || defaultPos; | ||
| var top = position.includes('top'); | ||
| return top ? 1 : -1; | ||
| }; | ||
| const toastBarBase = { | ||
| var toastBarBase = { | ||
| display: 'flex', | ||
@@ -294,11 +353,12 @@ 'align-items': 'center', | ||
| }; | ||
| 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 = { | ||
| var entranceAnimation = function entranceAnimation(direction) { | ||
| return "\n0% {transform: translate3d(0,".concat(direction * -200, "%,0) scale(.6); opacity:.5;}\n100% {transform: translate3d(0,0,0) scale(1); opacity:1;}\n"); | ||
| }; | ||
| var exitAnimation = function exitAnimation(direction) { | ||
| return "\n0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}\n100% {transform: translate3d(0,".concat(direction * -150, "%,-1px) scale(.4); opacity:0;}\n"); | ||
| }; | ||
| var messageContainer = { | ||
| display: 'flex', | ||
@@ -310,3 +370,3 @@ 'align-items': 'center', | ||
| }; | ||
| const iconContainer = { | ||
| var iconContainer = { | ||
| 'flex-shrink': 0, | ||
@@ -320,41 +380,52 @@ 'min-width': '20px', | ||
| }; | ||
| 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);}`; | ||
| var iconCircle = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["from{transform:scale(0)rotate(45deg);opacity:0;}to{transform:scale(1)rotate(45deg);opacity:1;}"]))); | ||
| var pingCircle = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["75%,100%{transform: scale(2.25);opacity:0;}"]))); | ||
| var icon = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["to{stroke-dashoffset: 0;}"]))); | ||
| var infoDot = keyframes(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["0%{transform:translate3d(0,0,0);opacity:1;}100%{transform:translate3d(0,7px,0)scale(1);opacity:1;}"]))); | ||
| var rotate = keyframes(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["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 | ||
| }); | ||
| var _createSignal = createSignal(defaultToasterOptions), | ||
| _createSignal2 = _slicedToArray(_createSignal, 2), | ||
| defaultOpts = _createSignal2[0], | ||
| setDefaultOpts = _createSignal2[1]; | ||
| const createToastCreator = type => (message, options = {}) => { | ||
| const existingToast = store.toasts.find(t => t.id === options.id); | ||
| const toast = createToast(message, type, { ...existingToast, | ||
| duration: undefined, | ||
| ...options | ||
| var createToast = function createToast(message) { | ||
| var _defaultOpts$toastOpt, _defaultOpts$toastOpt2, _defaultOpts$toastOpt3; | ||
| var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'blank'; | ||
| var options = arguments.length > 2 ? arguments[2] : undefined; | ||
| return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, defaultToastOptions), defaultOpts().toastOptions), options), {}, { | ||
| type: type, | ||
| message: message, | ||
| pauseDuration: 0, | ||
| createdAt: Date.now(), | ||
| visible: true, | ||
| id: options.id || generateID(), | ||
| style: _objectSpread(_objectSpread(_objectSpread({}, defaultToastOptions.style), (_defaultOpts$toastOpt = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt === void 0 ? void 0 : _defaultOpts$toastOpt.style), options.style), | ||
| duration: options.duration || ((_defaultOpts$toastOpt2 = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt2 === void 0 ? void 0 : _defaultOpts$toastOpt2.duration) || defaultTimeouts[type], | ||
| position: options.position || ((_defaultOpts$toastOpt3 = defaultOpts().toastOptions) === null || _defaultOpts$toastOpt3 === void 0 ? void 0 : _defaultOpts$toastOpt3.position) || defaultOpts().position || defaultToastOptions.position | ||
| }); | ||
| dispatch({ | ||
| type: ActionType.UPSERT_TOAST, | ||
| toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| const toast$1 = (message, opts) => createToastCreator('blank')(message, opts); | ||
| var createToastCreator = function createToastCreator(type) { | ||
| return function (message) { | ||
| var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; | ||
| var existingToast = store.toasts.find(function (t) { | ||
| return t.id === options.id; | ||
| }); | ||
| var toast = createToast(message, type, _objectSpread(_objectSpread({}, existingToast), {}, { | ||
| duration: undefined | ||
| }, options)); | ||
| dispatch({ | ||
| type: ActionType.UPSERT_TOAST, | ||
| toast: toast | ||
| }); | ||
| return toast.id; | ||
| }; | ||
| }; | ||
| var toast$1 = function toast$1(message, opts) { | ||
| return createToastCreator('blank')(message, opts); | ||
| }; | ||
| toast$1.error = createToastCreator('error'); | ||
@@ -365,23 +436,20 @@ toast$1.success = createToastCreator('success'); | ||
| toast$1.dismiss = toastId => { | ||
| toast$1.dismiss = function (toastId) { | ||
| dispatch({ | ||
| type: ActionType.DISMISS_TOAST, | ||
| toastId | ||
| toastId: 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 | ||
| }); | ||
| toast$1.promise = function (promise, msgs, opts) { | ||
| var id = toast$1.loading(msgs.loading, _objectSpread({}, opts)); | ||
| promise.then(function (p) { | ||
| toast$1.success(resolveValue(msgs.success, p), _objectSpread({ | ||
| id: id | ||
| }, opts)); | ||
| return p; | ||
| }).catch(e => { | ||
| toast$1.error(resolveValue(msgs.error, e), { | ||
| id, | ||
| ...opts | ||
| }); | ||
| })["catch"](function (e) { | ||
| toast$1.error(resolveValue(msgs.error, e), _objectSpread({ | ||
| id: id | ||
| }, opts)); | ||
| }); | ||
@@ -391,23 +459,26 @@ return promise; | ||
| toast$1.remove = toastId => { | ||
| toast$1.remove = function (toastId) { | ||
| dispatch({ | ||
| type: ActionType.REMOVE_TOAST, | ||
| toastId | ||
| toastId: toastId | ||
| }); | ||
| }; | ||
| const _tmpl$$5 = /*#__PURE__*/template(`<div></div>`, 2); | ||
| const Toaster = props => { | ||
| createEffect(() => { | ||
| var _tmpl$$5 = /*#__PURE__*/template("<div></div>", 2); | ||
| var Toaster = function Toaster(props) { | ||
| createEffect(function () { | ||
| mergeContainerOptions(props); | ||
| }); | ||
| createEffect(() => { | ||
| const timers = createTimers(); | ||
| onCleanup(() => { | ||
| createEffect(function () { | ||
| var timers = createTimers(); | ||
| onCleanup(function () { | ||
| if (!timers) return; | ||
| timers.forEach(timer => timer && clearTimeout(timer)); | ||
| timers.forEach(function (timer) { | ||
| return timer && clearTimeout(timer); | ||
| }); | ||
| }); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$5.cloneNode(true); | ||
| return function () { | ||
| var _el$ = _tmpl$$5.cloneNode(true); | ||
@@ -419,12 +490,12 @@ insert(_el$, createComponent(For, { | ||
| children: toast => createComponent(ToastContainer, { | ||
| toast: toast | ||
| }) | ||
| children: function children(toast) { | ||
| return createComponent(ToastContainer, { | ||
| toast: toast | ||
| }); | ||
| } | ||
| })); | ||
| effect(function (_p$) { | ||
| var _v$ = _objectSpread(_objectSpread({}, defaultContainerStyle), props.containerStyle), | ||
| _v$2 = props.containerClassName; | ||
| effect(_p$ => { | ||
| const _v$ = { ...defaultContainerStyle, | ||
| ...props.containerStyle | ||
| }, | ||
| _v$2 = props.containerClassName; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
@@ -437,17 +508,21 @@ _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| }); | ||
| 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)`); | ||
| var _tmpl$$4 = /*#__PURE__*/template("<div></div>", 2), | ||
| _tmpl$2 = /*#__PURE__*/template("<div><div></div></div>", 4); | ||
| var ToastBar = function ToastBar(props) { | ||
| var _createSignal3 = createSignal(''), | ||
| _createSignal4 = _slicedToArray(_createSignal3, 2), | ||
| animation = _createSignal4[0], | ||
| setAnimation = _createSignal4[1]; | ||
| createEffect(function () { | ||
| props.toast.visible ? setAnimation("".concat(keyframes(entranceAnimation(getToastYDirection(props.toast, props.position))), " 0.35s cubic-bezier(.21,1.02,.73,1) forwards")) : setAnimation("".concat(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; | ||
| return function () { | ||
| var _el$ = _tmpl$2.cloneNode(true), | ||
| _el$6 = _el$.firstChild; | ||
@@ -462,8 +537,10 @@ insert(_el$, createComponent(Switch, { | ||
| get children() { | ||
| const _el$2 = _tmpl$$4.cloneNode(true); | ||
| var _el$2 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$2, () => props.toast.icon); | ||
| effect(_$p => style(_el$2, iconContainer, _$p)); | ||
| insert(_el$2, function () { | ||
| return props.toast.icon; | ||
| }); | ||
| effect(function (_$p) { | ||
| return style(_el$2, iconContainer, _$p); | ||
| }); | ||
| return _el$2; | ||
@@ -478,8 +555,10 @@ } | ||
| get children() { | ||
| const _el$3 = _tmpl$$4.cloneNode(true); | ||
| var _el$3 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$3, createComponent(Loader, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$3, iconContainer, _$p)); | ||
| insert(_el$3, createComponent(Loader, mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| effect(function (_$p) { | ||
| return style(_el$3, iconContainer, _$p); | ||
| }); | ||
| return _el$3; | ||
@@ -494,8 +573,10 @@ } | ||
| get children() { | ||
| const _el$4 = _tmpl$$4.cloneNode(true); | ||
| var _el$4 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$4, createComponent(Success, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$4, iconContainer, _$p)); | ||
| insert(_el$4, createComponent(Success, mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| effect(function (_$p) { | ||
| return style(_el$4, iconContainer, _$p); | ||
| }); | ||
| return _el$4; | ||
@@ -510,8 +591,10 @@ } | ||
| get children() { | ||
| const _el$5 = _tmpl$$4.cloneNode(true); | ||
| var _el$5 = _tmpl$$4.cloneNode(true); | ||
| insert(_el$5, createComponent(Error, mergeProps(() => props.toast.iconTheme))); | ||
| effect(_$p => style(_el$5, iconContainer, _$p)); | ||
| insert(_el$5, createComponent(Error, mergeProps(function () { | ||
| return props.toast.iconTheme; | ||
| }))); | ||
| effect(function (_$p) { | ||
| return style(_el$5, iconContainer, _$p); | ||
| }); | ||
| return _el$5; | ||
@@ -524,14 +607,15 @@ } | ||
| }), _el$6); | ||
| spread(_el$6, function () { | ||
| return props.toast.ariaProps; | ||
| }, false, true); | ||
| insert(_el$6, function () { | ||
| return resolveValue(props.toast.message, props.toast); | ||
| }); | ||
| effect(function (_p$) { | ||
| var _v$ = props.toast.className, | ||
| _v$2 = _objectSpread(_objectSpread({}, toastBarBase), {}, { | ||
| animation: animation() | ||
| }, props.toast.style), | ||
| _v$3 = messageContainer; | ||
| 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$); | ||
@@ -546,24 +630,29 @@ _p$._v$2 = style(_el$, _v$2, _p$._v$2); | ||
| }); | ||
| 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); | ||
| var _tmpl$$3 = /*#__PURE__*/template("<div></div>", 2); | ||
| var activeClass = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["z-index: 9999;> * { pointer-events: auto;}"]))); | ||
| var ToastContainer = function ToastContainer(props) { | ||
| var calculatePosition = function calculatePosition() { | ||
| var position = props.toast.position || defaultToastOptions.position; | ||
| var offset = getWrapperYAxisOffset(props.toast, position); | ||
| var positionStyle = getToastWrapperStyles(position, offset); | ||
| return positionStyle; | ||
| }; | ||
| const [positionStyle, setPositionStyle] = createSignal(calculatePosition()); | ||
| createEffect(() => { | ||
| const newStyles = calculatePosition(); | ||
| var _createSignal5 = createSignal(calculatePosition()), | ||
| _createSignal6 = _slicedToArray(_createSignal5, 2), | ||
| positionStyle = _createSignal6[0], | ||
| setPositionStyle = _createSignal6[1]; | ||
| createEffect(function () { | ||
| var newStyles = calculatePosition(); | ||
| setPositionStyle(newStyles); | ||
| }); | ||
| let el = undefined; | ||
| onMount(() => { | ||
| var el = undefined; | ||
| onMount(function () { | ||
| if (el) { | ||
@@ -573,37 +662,43 @@ updateToastHeight(el, props.toast); | ||
| }); | ||
| return (() => { | ||
| const _el$ = _tmpl$$3.cloneNode(true); | ||
| return function () { | ||
| var _el$ = _tmpl$$3.cloneNode(true); | ||
| _el$.addEventListener("mouseleave", () => dispatch({ | ||
| type: ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseleave", function () { | ||
| return dispatch({ | ||
| type: ActionType.END_PAUSE, | ||
| time: Date.now() | ||
| }); | ||
| }); | ||
| _el$.addEventListener("mouseenter", () => dispatch({ | ||
| type: ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| })); | ||
| _el$.addEventListener("mouseenter", function () { | ||
| return dispatch({ | ||
| type: ActionType.START_PAUSE, | ||
| time: Date.now() | ||
| }); | ||
| }); | ||
| const _ref$ = el; | ||
| var _ref$ = el; | ||
| typeof _ref$ === "function" ? _ref$(_el$) : el = _el$; | ||
| insert(_el$, function () { | ||
| var _c$ = memo(function () { | ||
| return props.toast.type === 'custom'; | ||
| }, true); | ||
| insert(_el$, (() => { | ||
| const _c$ = memo(() => props.toast.type === 'custom', true); | ||
| return function () { | ||
| return _c$() ? resolveValue(props.toast.message, props.toast) : createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| return () => _c$() ? resolveValue(props.toast.message, props.toast) : createComponent(ToastBar, { | ||
| get toast() { | ||
| return props.toast; | ||
| }, | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| get position() { | ||
| return props.toast.position || defaultToastOptions.position; | ||
| } | ||
| }); | ||
| }; | ||
| }()); | ||
| effect(function (_p$) { | ||
| var _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| }); | ||
| })()); | ||
| effect(_p$ => { | ||
| const _v$ = positionStyle(), | ||
| _v$2 = props.toast.visible ? activeClass : ''; | ||
| _p$._v$ = style(_el$, _v$, _p$._v$); | ||
@@ -616,18 +711,18 @@ _v$2 !== _p$._v$2 && className(_el$, _p$._v$2 = _v$2); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Success = function Success(props) { | ||
| var mainCircle = "".concat(iconCircle, " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"); | ||
| var secondaryCircle = "".concat(pingCircle, " 1s cubic-bezier(0, 0, 0.2, 1) forwards"); | ||
| var check = "".concat(icon, " 0.2s ease-out forwards"); | ||
| return function () { | ||
| var _el$ = _tmpl$$2.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling, | ||
| _el$4 = _el$3.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
@@ -657,6 +752,6 @@ | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
| effect(function (_p$) { | ||
| var _v$ = props.primary || '#34C759', | ||
| _v$2 = props.primary || '#34C759', | ||
| _v$3 = props.secondary || '#FCFCFC'; | ||
@@ -672,20 +767,20 @@ _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Error = function Error(props) { | ||
| var mainCircle = "".concat(iconCircle, " 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards"); | ||
| var secondaryCircle = "".concat(pingCircle, " 1s cubic-bezier(0, 0, 0.2, 1) forwards"); | ||
| var infoDash = "".concat(icon, " 0.1s ease-in forwards"); | ||
| var infoCircle = "".concat(infoDot, " 0.2s ease-out forwards"); | ||
| return function () { | ||
| var _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"); | ||
@@ -721,7 +816,7 @@ | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
| effect(function (_p$) { | ||
| var _v$ = props.primary || "#FF3B30", | ||
| _v$2 = props.primary || "#FF3B30", | ||
| _v$3 = props.secondary || "#FFFFFF", | ||
| _v$4 = props.secondary || "#FFFFFF"; | ||
@@ -739,15 +834,15 @@ _v$ !== _p$._v$ && setAttribute(_el$2, "fill", _p$._v$ = _v$); | ||
| }); | ||
| 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; | ||
| var _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); | ||
| var Loader = function Loader(props) { | ||
| var animation = "".concat(rotate, " 0.75s linear infinite"); | ||
| return function () { | ||
| var _el$ = _tmpl$.cloneNode(true), | ||
| _el$2 = _el$.firstChild, | ||
| _el$3 = _el$2.nextSibling; | ||
| _el$.style.setProperty("overflow", "visible"); | ||
@@ -759,5 +854,5 @@ | ||
| effect(_p$ => { | ||
| const _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
| effect(function (_p$) { | ||
| var _v$ = props.primary || "#E5E7EB", | ||
| _v$2 = props.secondary || "#4b5563"; | ||
@@ -771,10 +866,8 @@ _v$ !== _p$._v$ && setAttribute(_el$2, "stroke", _p$._v$ = _v$); | ||
| }); | ||
| 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.6-alpha.0", | ||
| "version": "0.1.7-alpha.0", | ||
| "description": "Customizable Toast Notifications for SolidJS", | ||
@@ -50,2 +50,3 @@ "source": "./src/index.tsx", | ||
| "devDependencies": { | ||
| "@rollup/plugin-babel": "^5.3.1", | ||
| "@types/node": "^17.0.35", | ||
@@ -52,0 +53,0 @@ "rollup": "^2.75.7", |
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
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.7%
211773
- Lines of code
- increased by6.3%
2701
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by14.29%
8
No dependency changes