react-toaster-service
Version:
A simple React toast notification service with auto CSS injection
315 lines (314 loc) • 11.3 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".toast-container{position:fixed;top:20px;right:20px;display:flex;flex-direction:column;gap:12px;z-index:9999}.toast{position:relative;padding:12px 16px;border-radius:6px;color:#fff;font-weight:700;min-width:200px;box-shadow:0 2px 8px #0003;animation:fadein .3s ease-in-out}.toast-success{background:#28a745}.toast-error{background:#dc3545}.toast-info{background:#17a2b8}.toast-warning{background:#ffc107;color:#333}.toast-close{background:transparent;border:none;color:inherit;font-size:14px;cursor:pointer;position:absolute;top:4px;right:8px;padding:0}.toast-progress{position:absolute;bottom:0;left:0;height:4px;background:#ffffffb3;animation:progress linear forwards}@keyframes fadein{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes progress{0%{width:100%}to{width:0%}}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import te, { createContext as ne, useContext as oe, useState as ae, useCallback as se } from "react";
var j = { exports: {} }, v = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var L;
function ce() {
if (L) return v;
L = 1;
var u = Symbol.for("react.transitional.element"), f = Symbol.for("react.fragment");
function l(d, n, i) {
var o = null;
if (i !== void 0 && (o = "" + i), n.key !== void 0 && (o = "" + n.key), "key" in n) {
i = {};
for (var a in n)
a !== "key" && (i[a] = n[a]);
} else i = n;
return n = i.ref, {
$$typeof: u,
type: d,
key: o,
ref: n !== void 0 ? n : null,
props: i
};
}
return v.Fragment = f, v.jsx = l, v.jsxs = l, v;
}
var _ = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var M;
function ue() {
return M || (M = 1, process.env.NODE_ENV !== "production" && function() {
function u(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === K ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case O:
return "Fragment";
case z:
return "Profiler";
case J:
return "StrictMode";
case B:
return "Suspense";
case H:
return "SuspenseList";
case Q:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case q:
return "Portal";
case G:
return (e.displayName || "Context") + ".Provider";
case V:
return (e._context.displayName || "Context") + ".Consumer";
case X:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Z:
return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
case y:
r = e._payload, e = e._init;
try {
return u(e(r));
} catch {
}
}
return null;
}
function f(e) {
return "" + e;
}
function l(e) {
try {
f(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, s = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
s
), f(e);
}
}
function d(e) {
if (e === O) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === y)
return "<...>";
try {
var r = u(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function n() {
var e = A.A;
return e === null ? null : e.getOwner();
}
function i() {
return Error("react-stack-top-frame");
}
function o(e) {
if (C.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function a(e, r) {
function t() {
Y || (Y = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
function T() {
var e = u(this.type);
return $[e] || ($[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function p(e, r, t, s, E, m, S, w) {
return t = m.ref, e = {
$$typeof: N,
type: e,
key: r,
props: m,
_owner: E
}, (t !== void 0 ? t : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: T
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: S
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: w
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function k(e, r, t, s, E, m, S, w) {
var c = r.children;
if (c !== void 0)
if (s)
if (ee(c)) {
for (s = 0; s < c.length; s++)
g(c[s]);
Object.freeze && Object.freeze(c);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else g(c);
if (C.call(r, "key")) {
c = u(e);
var b = Object.keys(r).filter(function(re) {
return re !== "key";
});
s = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", F[c + s] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
s,
c,
b,
c
), F[c + s] = !0);
}
if (c = null, t !== void 0 && (l(t), c = "" + t), o(r) && (l(r.key), c = "" + r.key), "key" in r) {
t = {};
for (var h in r)
h !== "key" && (t[h] = r[h]);
} else t = r;
return c && a(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), p(
e,
c,
m,
E,
n(),
t,
S,
w
);
}
function g(e) {
typeof e == "object" && e !== null && e.$$typeof === N && e._store && (e._store.validated = 1);
}
var x = te, N = Symbol.for("react.transitional.element"), q = Symbol.for("react.portal"), O = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), z = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), G = Symbol.for("react.context"), X = Symbol.for("react.forward_ref"), B = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), A = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, ee = Array.isArray, P = console.createTask ? console.createTask : function() {
return null;
};
x = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var Y, $ = {}, I = x["react-stack-bottom-frame"].bind(
x,
i
)(), D = P(d(i)), F = {};
_.Fragment = O, _.jsx = function(e, r, t, s, E) {
var m = 1e4 > A.recentlyCreatedOwnerStacks++;
return k(
e,
r,
t,
!1,
s,
E,
m ? Error("react-stack-top-frame") : I,
m ? P(d(e)) : D
);
}, _.jsxs = function(e, r, t, s, E) {
var m = 1e4 > A.recentlyCreatedOwnerStacks++;
return k(
e,
r,
t,
!0,
s,
E,
m ? Error("react-stack-top-frame") : I,
m ? P(d(e)) : D
);
};
}()), _;
}
var W;
function le() {
return W || (W = 1, process.env.NODE_ENV === "production" ? j.exports = ce() : j.exports = ue()), j.exports;
}
var R = le();
const ie = ({ id: u, type: f, message: l, duration: d, onClose: n }) => /* @__PURE__ */ R.jsxs("div", { className: `toast toast-${f}`, children: [
/* @__PURE__ */ R.jsx("span", { children: l }),
/* @__PURE__ */ R.jsx("button", { className: "toast-close", onClick: () => n(u), children: "✖" }),
/* @__PURE__ */ R.jsx(
"div",
{
className: "toast-progress",
style: { animationDuration: `${d}ms` }
}
)
] }), fe = ({ toasts: u, removeToast: f }) => /* @__PURE__ */ R.jsx("div", { className: "toast-container", children: u.map((l) => /* @__PURE__ */ R.jsx(ie, { ...l, onClose: f }, l.id)) }), U = ne(), Ee = () => oe(U);
let de = 0;
const Re = ({ children: u }) => {
const [f, l] = ae([]), d = (o) => {
l((a) => a.filter((T) => T.id !== o));
}, n = se((o, a, T = 3e3) => {
const p = de++;
l((k) => [...k, { id: p, type: o, message: a, duration: T }]), setTimeout(() => d(p), T);
}, []), i = {
success: (o, a) => n("success", o, a),
error: (o, a) => n("error", o, a),
info: (o, a) => n("info", o, a),
warning: (o, a) => n("warning", o, a)
};
return /* @__PURE__ */ R.jsxs(U.Provider, { value: i, children: [
u,
/* @__PURE__ */ R.jsx(fe, { toasts: f, removeToast: d })
] });
};
export {
Re as ToastProvider,
Ee as useToast
};