react-flash-modal
Version:
A lightweight and flexible React modal component with smooth animations and easy customization. Perfect for modern web applications. Can be easily integrated into any project.
684 lines (681 loc) • 23.7 kB
JavaScript
import De, { memo as cr, useRef as fr, useEffect as dr } from "react";
import vr from "react-dom";
var ae = { exports: {} }, W = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var je;
function pr() {
if (je) return W;
je = 1;
var A = De, O = Symbol.for("react.element"), P = Symbol.for("react.fragment"), b = Object.prototype.hasOwnProperty, S = A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, j = { key: !0, ref: !0, __self: !0, __source: !0 };
function w(h, c, _) {
var d, g = {}, y = null, k = null;
_ !== void 0 && (y = "" + _), c.key !== void 0 && (y = "" + c.key), c.ref !== void 0 && (k = c.ref);
for (d in c) b.call(c, d) && !j.hasOwnProperty(d) && (g[d] = c[d]);
if (h && h.defaultProps) for (d in c = h.defaultProps, c) g[d] === void 0 && (g[d] = c[d]);
return { $$typeof: O, type: h, key: y, ref: k, props: g, _owner: S.current };
}
return W.Fragment = P, W.jsx = w, W.jsxs = w, W;
}
var Y = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ke;
function mr() {
return ke || (ke = 1, process.env.NODE_ENV !== "production" && function() {
var A = De, O = Symbol.for("react.element"), P = Symbol.for("react.portal"), b = Symbol.for("react.fragment"), S = Symbol.for("react.strict_mode"), j = Symbol.for("react.profiler"), w = Symbol.for("react.provider"), h = Symbol.for("react.context"), c = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), g = Symbol.for("react.memo"), y = Symbol.for("react.lazy"), k = Symbol.for("react.offscreen"), M = Symbol.iterator, N = "@@iterator";
function V(e) {
if (e === null || typeof e != "object")
return null;
var r = M && e[M] || e[N];
return typeof r == "function" ? r : null;
}
var E = A.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function f(e) {
{
for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
t[n - 1] = arguments[n];
L("error", e, t);
}
}
function L(e, r, t) {
{
var n = E.ReactDebugCurrentFrame, i = n.getStackAddendum();
i !== "" && (r += "%s", t = t.concat([i]));
var u = t.map(function(o) {
return String(o);
});
u.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, u);
}
}
var U = !1, B = !1, z = !1, Fe = !1, Ae = !1, oe;
oe = Symbol.for("react.module.reference");
function Le(e) {
return !!(typeof e == "string" || typeof e == "function" || e === b || e === j || Ae || e === S || e === _ || e === d || Fe || e === k || U || B || z || typeof e == "object" && e !== null && (e.$$typeof === y || e.$$typeof === g || e.$$typeof === w || e.$$typeof === h || e.$$typeof === c || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === oe || e.getModuleId !== void 0));
}
function Ie(e, r, t) {
var n = e.displayName;
if (n)
return n;
var i = r.displayName || r.name || "";
return i !== "" ? t + "(" + i + ")" : t;
}
function ie(e) {
return e.displayName || "Context";
}
function R(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && f("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case b:
return "Fragment";
case P:
return "Portal";
case j:
return "Profiler";
case S:
return "StrictMode";
case _:
return "Suspense";
case d:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case h:
var r = e;
return ie(r) + ".Consumer";
case w:
var t = e;
return ie(t._context) + ".Provider";
case c:
return Ie(e, e.render, "ForwardRef");
case g:
var n = e.displayName || null;
return n !== null ? n : R(e.type) || "Memo";
case y: {
var i = e, u = i._payload, o = i._init;
try {
return R(o(u));
} catch {
return null;
}
}
}
return null;
}
var x = Object.assign, I = 0, ue, le, se, ce, fe, de, ve;
function pe() {
}
pe.__reactDisabledLog = !0;
function $e() {
{
if (I === 0) {
ue = console.log, le = console.info, se = console.warn, ce = console.error, fe = console.group, de = console.groupCollapsed, ve = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: pe,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
I++;
}
}
function We() {
{
if (I--, I === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: x({}, e, {
value: ue
}),
info: x({}, e, {
value: le
}),
warn: x({}, e, {
value: se
}),
error: x({}, e, {
value: ce
}),
group: x({}, e, {
value: fe
}),
groupCollapsed: x({}, e, {
value: de
}),
groupEnd: x({}, e, {
value: ve
})
});
}
I < 0 && f("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var X = E.ReactCurrentDispatcher, H;
function J(e, r, t) {
{
if (H === void 0)
try {
throw Error();
} catch (i) {
var n = i.stack.trim().match(/\n( *(at )?)/);
H = n && n[1] || "";
}
return `
` + H + e;
}
}
var Z = !1, q;
{
var Ye = typeof WeakMap == "function" ? WeakMap : Map;
q = new Ye();
}
function me(e, r) {
if (!e || Z)
return "";
{
var t = q.get(e);
if (t !== void 0)
return t;
}
var n;
Z = !0;
var i = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var u;
u = X.current, X.current = null, $e();
try {
if (r) {
var o = function() {
throw Error();
};
if (Object.defineProperty(o.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(o, []);
} catch (p) {
n = p;
}
Reflect.construct(e, [], o);
} else {
try {
o.call();
} catch (p) {
n = p;
}
e.call(o.prototype);
}
} else {
try {
throw Error();
} catch (p) {
n = p;
}
e();
}
} catch (p) {
if (p && n && typeof p.stack == "string") {
for (var a = p.stack.split(`
`), v = n.stack.split(`
`), l = a.length - 1, s = v.length - 1; l >= 1 && s >= 0 && a[l] !== v[s]; )
s--;
for (; l >= 1 && s >= 0; l--, s--)
if (a[l] !== v[s]) {
if (l !== 1 || s !== 1)
do
if (l--, s--, s < 0 || a[l] !== v[s]) {
var m = `
` + a[l].replace(" at new ", " at ");
return e.displayName && m.includes("<anonymous>") && (m = m.replace("<anonymous>", e.displayName)), typeof e == "function" && q.set(e, m), m;
}
while (l >= 1 && s >= 0);
break;
}
}
} finally {
Z = !1, X.current = u, We(), Error.prepareStackTrace = i;
}
var F = e ? e.displayName || e.name : "", C = F ? J(F) : "";
return typeof e == "function" && q.set(e, C), C;
}
function Me(e, r, t) {
return me(e, !1);
}
function Ne(e) {
var r = e.prototype;
return !!(r && r.isReactComponent);
}
function K(e, r, t) {
if (e == null)
return "";
if (typeof e == "function")
return me(e, Ne(e));
if (typeof e == "string")
return J(e);
switch (e) {
case _:
return J("Suspense");
case d:
return J("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case c:
return Me(e.render);
case g:
return K(e.type, r, t);
case y: {
var n = e, i = n._payload, u = n._init;
try {
return K(u(i), r, t);
} catch {
}
}
}
return "";
}
var $ = Object.prototype.hasOwnProperty, he = {}, ge = E.ReactDebugCurrentFrame;
function G(e) {
if (e) {
var r = e._owner, t = K(e.type, e._source, r ? r.type : null);
ge.setExtraStackFrame(t);
} else
ge.setExtraStackFrame(null);
}
function Ve(e, r, t, n, i) {
{
var u = Function.call.bind($);
for (var o in e)
if (u(e, o)) {
var a = void 0;
try {
if (typeof e[o] != "function") {
var v = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw v.name = "Invariant Violation", v;
}
a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (l) {
a = l;
}
a && !(a instanceof Error) && (G(i), f("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof a), G(null)), a instanceof Error && !(a.message in he) && (he[a.message] = !0, G(i), f("Failed %s type: %s", t, a.message), G(null));
}
}
}
var Ue = Array.isArray;
function Q(e) {
return Ue(e);
}
function Be(e) {
{
var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
return t;
}
}
function ze(e) {
try {
return ye(e), !1;
} catch {
return !0;
}
}
function ye(e) {
return "" + e;
}
function be(e) {
if (ze(e))
return f("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Be(e)), ye(e);
}
var _e = E.ReactCurrentOwner, Je = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, Ee, Re;
function qe(e) {
if ($.call(e, "ref")) {
var r = Object.getOwnPropertyDescriptor(e, "ref").get;
if (r && r.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function Ke(e) {
if ($.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function Ge(e, r) {
typeof e.ref == "string" && _e.current;
}
function Xe(e, r) {
{
var t = function() {
Ee || (Ee = !0, f("%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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "key", {
get: t,
configurable: !0
});
}
}
function He(e, r) {
{
var t = function() {
Re || (Re = !0, f("%s: `ref` 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://reactjs.org/link/special-props)", r));
};
t.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: t,
configurable: !0
});
}
}
var Ze = function(e, r, t, n, i, u, o) {
var a = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: O,
// Built-in properties that belong on the element
type: e,
key: r,
ref: t,
props: o,
// Record the component responsible for creating this element.
_owner: u
};
return a._store = {}, Object.defineProperty(a._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(a, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: n
}), Object.defineProperty(a, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: i
}), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
};
function Qe(e, r, t, n, i) {
{
var u, o = {}, a = null, v = null;
t !== void 0 && (be(t), a = "" + t), Ke(r) && (be(r.key), a = "" + r.key), qe(r) && (v = r.ref, Ge(r, i));
for (u in r)
$.call(r, u) && !Je.hasOwnProperty(u) && (o[u] = r[u]);
if (e && e.defaultProps) {
var l = e.defaultProps;
for (u in l)
o[u] === void 0 && (o[u] = l[u]);
}
if (a || v) {
var s = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
a && Xe(o, s), v && He(o, s);
}
return Ze(e, a, v, i, n, _e.current, o);
}
}
var ee = E.ReactCurrentOwner, Te = E.ReactDebugCurrentFrame;
function D(e) {
if (e) {
var r = e._owner, t = K(e.type, e._source, r ? r.type : null);
Te.setExtraStackFrame(t);
} else
Te.setExtraStackFrame(null);
}
var re;
re = !1;
function te(e) {
return typeof e == "object" && e !== null && e.$$typeof === O;
}
function Oe() {
{
if (ee.current) {
var e = R(ee.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function er(e) {
return "";
}
var we = {};
function rr(e) {
{
var r = Oe();
if (!r) {
var t = typeof e == "string" ? e : e.displayName || e.name;
t && (r = `
Check the top-level render call using <` + t + ">.");
}
return r;
}
}
function xe(e, r) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var t = rr(r);
if (we[t])
return;
we[t] = !0;
var n = "";
e && e._owner && e._owner !== ee.current && (n = " It was passed a child from " + R(e._owner.type) + "."), D(e), f('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), D(null);
}
}
function Ce(e, r) {
{
if (typeof e != "object")
return;
if (Q(e))
for (var t = 0; t < e.length; t++) {
var n = e[t];
te(n) && xe(n, r);
}
else if (te(e))
e._store && (e._store.validated = !0);
else if (e) {
var i = V(e);
if (typeof i == "function" && i !== e.entries)
for (var u = i.call(e), o; !(o = u.next()).done; )
te(o.value) && xe(o.value, r);
}
}
}
function tr(e) {
{
var r = e.type;
if (r == null || typeof r == "string")
return;
var t;
if (typeof r == "function")
t = r.propTypes;
else if (typeof r == "object" && (r.$$typeof === c || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
r.$$typeof === g))
t = r.propTypes;
else
return;
if (t) {
var n = R(r);
Ve(t, e.props, "prop", n, e);
} else if (r.PropTypes !== void 0 && !re) {
re = !0;
var i = R(r);
f("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", i || "Unknown");
}
typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && f("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function nr(e) {
{
for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
var n = r[t];
if (n !== "children" && n !== "key") {
D(e), f("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), D(null);
break;
}
}
e.ref !== null && (D(e), f("Invalid attribute `ref` supplied to `React.Fragment`."), D(null));
}
}
var Pe = {};
function Se(e, r, t, n, i, u) {
{
var o = Le(e);
if (!o) {
var a = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var v = er();
v ? a += v : a += Oe();
var l;
e === null ? l = "null" : Q(e) ? l = "array" : e !== void 0 && e.$$typeof === O ? (l = "<" + (R(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : l = typeof e, f("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", l, a);
}
var s = Qe(e, r, t, i, u);
if (s == null)
return s;
if (o) {
var m = r.children;
if (m !== void 0)
if (n)
if (Q(m)) {
for (var F = 0; F < m.length; F++)
Ce(m[F], e);
Object.freeze && Object.freeze(m);
} else
f("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
Ce(m, e);
}
if ($.call(r, "key")) {
var C = R(e), p = Object.keys(r).filter(function(sr) {
return sr !== "key";
}), ne = p.length > 0 ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}";
if (!Pe[C + ne]) {
var lr = p.length > 0 ? "{" + p.join(": ..., ") + ": ...}" : "{}";
f(`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} />`, ne, C, lr, C), Pe[C + ne] = !0;
}
}
return e === b ? nr(s) : tr(s), s;
}
}
function ar(e, r, t) {
return Se(e, r, t, !0);
}
function or(e, r, t) {
return Se(e, r, t, !1);
}
var ir = or, ur = ar;
Y.Fragment = b, Y.jsx = ir, Y.jsxs = ur;
}()), Y;
}
process.env.NODE_ENV === "production" ? ae.exports = pr() : ae.exports = mr();
var T = ae.exports;
const hr = (A) => {
const { isOpen: O = !1, onClose: P, background: b, modalContent: S, children: j = "" } = A, { color: w = "#00000050", blur: h, maxWidth: c, zIndex: _ = 2 } = b, { width: d = "60%", isModalTop: g } = S, { visible: y = !0, bgColor: k = "blue", name: M = "", textColor: N = "white", radiusTopX: V = "12px", fontSize: E = "18px", padding: f = "15px 20px" } = g, L = fr(), U = (B) => {
L.current && !L.current.contains(B.target) && P();
};
return dr(() => {
if (!document.getElementById("root_modal_overlay_element")) {
let z = document.createElement("div");
z.id = "root_modal_overlay_element", document.body.appendChild(z);
}
return document.addEventListener("mousedown", U), () => {
document.removeEventListener("mousedown", U);
};
}, []), O ? vr.createPortal(
/* @__PURE__ */ T.jsx(
"div",
{
className: "modal-overlay-container",
style: { backgroundColor: w, backdropFilter: `blur(${h == null ? void 0 : h.size})`, maxWidth: c, zIndex: _ },
children: /* @__PURE__ */ T.jsxs(
"div",
{
className: "modal-overlay-block",
ref: L,
style: { width: d },
children: [
y && /* @__PURE__ */ T.jsxs(
"div",
{
className: "modal-overlay-top",
style: {
backgroundColor: k,
color: N,
borderTopRightRadius: V,
borderTopLeftRadius: V,
padding: f
},
children: [
/* @__PURE__ */ T.jsx("div", { children: /* @__PURE__ */ T.jsx("span", { style: { fontSize: E }, children: M }) }),
/* @__PURE__ */ T.jsx("span", { onClick: P, className: "modal-overlay-close", children: /* @__PURE__ */ T.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: N, viewBox: "0 0 24 24", width: "19px", height: "19px", children: /* @__PURE__ */ T.jsx("path", { d: "M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" }) }) })
]
}
),
j
]
}
)
}
),
document.getElementById("root_modal_overlay_element")
// The DOM element where the portal is located.
) : null;
}, br = cr(hr);
export {
br as ModalPortal
};