async-modal-react
Version:
A React modal that can be used with Promise.
593 lines (590 loc) • 19.9 kB
JavaScript
import je, { createContext as Re, useContext as ke, useState as Se, useRef as Oe, useEffect as B, createElement as Ae } from "react";
const we = Re({
modals: [],
setModals: () => {
},
modalIdRef: { current: 0 },
errorOnClose: !1
}), $e = () => {
const { setModals: u, modalIdRef: C, errorOnClose: p } = ke(we), h = (v, b, g) => new Promise((i, w) => {
const m = C.current++, _ = {
id: m,
component: v,
props: b,
options: g,
close: () => {
c(m);
const f = g == null ? void 0 : g.errorOnClose;
f === void 0 ? p && w("close") : f && w("close");
},
resolve: (f) => {
c(m), i(f);
},
reject: (f) => {
c(m), w(f);
}
};
u((f) => [...f, _]);
}), c = (v) => {
u((b) => b.filter((g) => g.id !== v));
};
return {
open: h,
closeAll: () => {
u([]);
}
};
};
var F = { exports: {} }, M = {};
/**
* @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 be;
function Ne() {
if (be)
return M;
be = 1;
var u = Symbol.for("react.transitional.element"), C = Symbol.for("react.fragment");
function p(h, c, a) {
var v = null;
if (a !== void 0 && (v = "" + a), c.key !== void 0 && (v = "" + c.key), "key" in c) {
a = {};
for (var b in c)
b !== "key" && (a[b] = c[b]);
} else
a = c;
return c = a.ref, {
$$typeof: u,
type: h,
key: v,
ref: c !== void 0 ? c : null,
props: a
};
}
return M.Fragment = C, M.jsx = p, M.jsxs = p, M;
}
var Y = {};
/**
* @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 ge;
function Pe() {
return ge || (ge = 1, process.env.NODE_ENV !== "production" && function() {
function u(e) {
if (e == null)
return null;
if (typeof e == "function")
return e.$$typeof === xe ? null : e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case U:
return "Fragment";
case Ce:
return "Portal";
case D:
return "Profiler";
case K:
return "StrictMode";
case z:
return "Suspense";
case I:
return "SuspenseList";
}
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 re:
return (e.displayName || "Context") + ".Provider";
case ee:
return (e._context.displayName || "Context") + ".Consumer";
case L:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case V:
return r = e.displayName || null, r !== null ? r : u(e.type) || "Memo";
case q:
r = e._payload, e = e._init;
try {
return u(e(r));
} catch {
}
}
return null;
}
function C(e) {
return "" + e;
}
function p(e) {
try {
C(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var o = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return o.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
n
), C(e);
}
}
function h() {
}
function c() {
if (N === 0) {
ne = console.log, ae = console.info, le = console.warn, se = console.error, ie = console.group, ue = console.groupCollapsed, ce = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: h,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
N++;
}
function a() {
if (N--, N === 0) {
var e = { configurable: !0, enumerable: !0, writable: !0 };
Object.defineProperties(console, {
log: S({}, e, { value: ne }),
info: S({}, e, { value: ae }),
warn: S({}, e, { value: le }),
error: S({}, e, { value: se }),
group: S({}, e, { value: ie }),
groupCollapsed: S({}, e, { value: ue }),
groupEnd: S({}, e, { value: ce })
});
}
0 > N && console.error(
"disabledDepth fell below zero. This is a bug in React. Please file an issue."
);
}
function v(e) {
if (J === void 0)
try {
throw Error();
} catch (o) {
var r = o.stack.trim().match(/\n( *(at )?)/);
J = r && r[1] || "", fe = -1 < o.stack.indexOf(`
at`) ? " (<anonymous>)" : -1 < o.stack.indexOf("@") ? "@unknown:0:0" : "";
}
return `
` + J + e + fe;
}
function b(e, r) {
if (!e || H)
return "";
var o = X.get(e);
if (o !== void 0)
return o;
H = !0, o = Error.prepareStackTrace, Error.prepareStackTrace = void 0;
var n = null;
n = k.H, k.H = null, c();
try {
var d = {
DetermineComponentFrameRoot: function() {
try {
if (r) {
var R = function() {
throw Error();
};
if (Object.defineProperty(R.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(R, []);
} catch (T) {
var $ = T;
}
Reflect.construct(e, [], R);
} else {
try {
R.call();
} catch (T) {
$ = T;
}
e.call(R.prototype);
}
} else {
try {
throw Error();
} catch (T) {
$ = T;
}
(R = e()) && typeof R.catch == "function" && R.catch(function() {
});
}
} catch (T) {
if (T && $ && typeof T.stack == "string")
return [T.stack, $.stack];
}
return [null, null];
}
};
d.DetermineComponentFrameRoot.displayName = "DetermineComponentFrameRoot";
var s = Object.getOwnPropertyDescriptor(
d.DetermineComponentFrameRoot,
"name"
);
s && s.configurable && Object.defineProperty(
d.DetermineComponentFrameRoot,
"name",
{ value: "DetermineComponentFrameRoot" }
);
var t = d.DetermineComponentFrameRoot(), y = t[0], A = t[1];
if (y && A) {
var E = y.split(`
`), O = A.split(`
`);
for (t = s = 0; s < E.length && !E[s].includes(
"DetermineComponentFrameRoot"
); )
s++;
for (; t < O.length && !O[t].includes(
"DetermineComponentFrameRoot"
); )
t++;
if (s === E.length || t === O.length)
for (s = E.length - 1, t = O.length - 1; 1 <= s && 0 <= t && E[s] !== O[t]; )
t--;
for (; 1 <= s && 0 <= t; s--, t--)
if (E[s] !== O[t]) {
if (s !== 1 || t !== 1)
do
if (s--, t--, 0 > t || E[s] !== O[t]) {
var P = `
` + E[s].replace(
" at new ",
" at "
);
return e.displayName && P.includes("<anonymous>") && (P = P.replace("<anonymous>", e.displayName)), typeof e == "function" && X.set(e, P), P;
}
while (1 <= s && 0 <= t);
break;
}
}
} finally {
H = !1, k.H = n, a(), Error.prepareStackTrace = o;
}
return E = (E = e ? e.displayName || e.name : "") ? v(E) : "", typeof e == "function" && X.set(e, E), E;
}
function g(e) {
if (e == null)
return "";
if (typeof e == "function") {
var r = e.prototype;
return b(
e,
!(!r || !r.isReactComponent)
);
}
if (typeof e == "string")
return v(e);
switch (e) {
case z:
return v("Suspense");
case I:
return v("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case L:
return e = b(e.render, !1), e;
case V:
return g(e.type);
case q:
r = e._payload, e = e._init;
try {
return g(e(r));
} catch {
}
}
return "";
}
function i() {
var e = k.A;
return e === null ? null : e.getOwner();
}
function w(e) {
if (te.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function m(e, r) {
function o() {
de || (de = !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
));
}
o.isReactWarning = !0, Object.defineProperty(e, "key", {
get: o,
configurable: !0
});
}
function _() {
var e = u(this.type);
return ve[e] || (ve[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 f(e, r, o, n, d, s) {
return o = s.ref, e = {
$$typeof: W,
type: e,
key: r,
props: s,
_owner: d
}, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: _
}) : 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.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function j(e, r, o, n, d, s) {
if (typeof e == "string" || typeof e == "function" || e === U || e === D || e === K || e === z || e === I || e === _e || typeof e == "object" && e !== null && (e.$$typeof === q || e.$$typeof === V || e.$$typeof === re || e.$$typeof === ee || e.$$typeof === L || e.$$typeof === ye || e.getModuleId !== void 0)) {
var t = r.children;
if (t !== void 0)
if (n)
if (G(t)) {
for (n = 0; n < t.length; n++)
l(t[n], e);
Object.freeze && Object.freeze(t);
} 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
l(t, e);
} else
t = "", (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (t += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."), e === null ? n = "null" : G(e) ? n = "array" : e !== void 0 && e.$$typeof === W ? (n = "<" + (u(e.type) || "Unknown") + " />", t = " Did you accidentally export a JSX literal instead of a component?") : n = typeof e, console.error(
"React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",
n,
t
);
if (te.call(r, "key")) {
t = u(e);
var y = Object.keys(r).filter(function(E) {
return E !== "key";
});
n = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", Ee[t + n] || (y = 0 < y.length ? "{" + y.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} />`,
n,
t,
y,
t
), Ee[t + n] = !0);
}
if (t = null, o !== void 0 && (p(o), t = "" + o), w(r) && (p(r.key), t = "" + r.key), "key" in r) {
o = {};
for (var A in r)
A !== "key" && (o[A] = r[A]);
} else
o = r;
return t && m(
o,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), f(e, t, s, d, i(), o);
}
function l(e, r) {
if (typeof e == "object" && e && e.$$typeof !== Te) {
if (G(e))
for (var o = 0; o < e.length; o++) {
var n = e[o];
x(n) && Q(n, r);
}
else if (x(e))
e._store && (e._store.validated = 1);
else if (e === null || typeof e != "object" ? o = null : (o = oe && e[oe] || e["@@iterator"], o = typeof o == "function" ? o : null), typeof o == "function" && o !== e.entries && (o = o.call(e), o !== e))
for (; !(e = o.next()).done; )
x(e.value) && Q(e.value, r);
}
}
function x(e) {
return typeof e == "object" && e !== null && e.$$typeof === W;
}
function Q(e, r) {
if (e._store && !e._store.validated && e.key == null && (e._store.validated = 1, r = pe(r), !me[r])) {
me[r] = !0;
var o = "";
e && e._owner != null && e._owner !== i() && (o = null, typeof e._owner.tag == "number" ? o = u(e._owner.type) : typeof e._owner.name == "string" && (o = e._owner.name), o = " It was passed a child from " + o + ".");
var n = k.getCurrentStack;
k.getCurrentStack = function() {
var d = g(e.type);
return n && (d += n() || ""), d;
}, console.error(
'Each child in a list should have a unique "key" prop.%s%s See https://react.dev/link/warning-keys for more information.',
r,
o
), k.getCurrentStack = n;
}
}
function pe(e) {
var r = "", o = i();
return o && (o = u(o.type)) && (r = `
Check the render method of \`` + o + "`."), r || (e = u(e)) && (r = `
Check the top-level render call using <` + e + ">."), r;
}
var he = je, W = Symbol.for("react.transitional.element"), Ce = Symbol.for("react.portal"), U = Symbol.for("react.fragment"), K = Symbol.for("react.strict_mode"), D = Symbol.for("react.profiler"), ee = Symbol.for("react.consumer"), re = Symbol.for("react.context"), L = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), I = Symbol.for("react.suspense_list"), V = Symbol.for("react.memo"), q = Symbol.for("react.lazy"), _e = Symbol.for("react.offscreen"), oe = Symbol.iterator, xe = Symbol.for("react.client.reference"), k = he.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, te = Object.prototype.hasOwnProperty, S = Object.assign, ye = Symbol.for("react.client.reference"), G = Array.isArray, N = 0, ne, ae, le, se, ie, ue, ce;
h.__reactDisabledLog = !0;
var J, fe, H = !1, X = new (typeof WeakMap == "function" ? WeakMap : Map)(), Te = Symbol.for("react.client.reference"), de, ve = {}, Ee = {}, me = {};
Y.Fragment = U, Y.jsx = function(e, r, o, n, d) {
return j(e, r, o, !1, n, d);
}, Y.jsxs = function(e, r, o, n, d) {
return j(e, r, o, !0, n, d);
};
}()), Y;
}
process.env.NODE_ENV === "production" ? F.exports = Ne() : F.exports = Pe();
var Z = F.exports;
const Me = ({ children: u }) => /* @__PURE__ */ Z.jsx(
"div",
{
id: "modal-root",
style: {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
background: "rgba(0, 0, 0, 0.5)",
display: "flex",
justifyContent: "center",
alignItems: "center"
},
children: u
}
), We = ({
children: u,
closeOnOutsideClick: C = !0,
closeOnRouteChange: p = !0,
disableBodyScrollWhenOpen: h = !0,
errorOnClose: c = !1
}) => {
const [a, v] = Se([]), b = Oe(0);
B(() => {
const i = document.getElementById("modal-root");
if (!i)
return;
const w = (m) => {
var f, j;
let _ = !1;
for (let l = 0; l < i.children.length; l++)
if (i.children[l].contains(m.target)) {
_ = !0;
break;
}
if (!_) {
const l = a[a.length - 1], x = ((f = l == null ? void 0 : l.options) == null ? void 0 : f.onClickOutsideClose) !== void 0 ? l.options.onClickOutsideClose : C;
l && x && (((j = l.options) == null ? void 0 : j.errorOnClose) === void 0 ? c ? l.reject("close") : l.close() : l.options.errorOnClose ? l.reject("close") : l.close());
}
};
return window.addEventListener("mousedown", w), () => {
window.removeEventListener("mousedown", w);
};
}, [a, C, h]), B(() => {
if (!p)
return;
const i = () => {
v([]);
};
return window.addEventListener("popstate", i), () => {
window.removeEventListener("popstate", i);
};
}, [p]), B(() => {
var _, f, j;
function i(l = !0, x = !0) {
l && (window.addEventListener("wheel", m, {
passive: !1
}), window.addEventListener("touchmove", m, {
passive: !1
})), x && (document.documentElement.style.overflow = "hidden");
}
function w() {
window.removeEventListener("wheel", m), window.removeEventListener("touchmove", m), document.documentElement.style.overflow = "visible";
}
function m(l) {
l.preventDefault(), l.stopPropagation();
}
if (a.length > 0) {
const l = ((_ = a[a.length - 1].options) == null ? void 0 : _.disableScroll) !== void 0 ? (f = a[a.length - 1].options) == null ? void 0 : f.disableScroll : h, x = ((j = a[a.length - 1].options) == null ? void 0 : j.enableInsideScroll) !== !0;
l ? i(x, !0) : w();
} else
w();
return () => {
w();
};
}, [a, h]);
const g = a.length > 0;
return /* @__PURE__ */ Z.jsxs(
we.Provider,
{
value: {
modals: a,
setModals: v,
modalIdRef: b,
errorOnClose: c
},
children: [
g && /* @__PURE__ */ Z.jsx(Me, { children: a.map((i) => Ae(i.component, {
...i.props,
close: i.close,
resolve: i.resolve,
reject: i.reject,
key: `modal-${i.id}`
})) }),
u
]
}
);
};
export {
we as ModalContext,
We as ModalProvider,
$e as useModal
};