simple-image-magnifier
Version:
Image Magnifier JavaScript (Typescript) | Image Zoom on Hover using | Image Hover Effect
371 lines (370 loc) • 11.5 kB
JavaScript
import ne, { useState as ae, useRef as x, useCallback as I, useEffect as Y } from "react";
import oe from "./simple-image-magnifier.js";
var S = { exports: {} }, k = {};
/**
* @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 U;
function se() {
if (U) return k;
U = 1;
var i = Symbol.for("react.transitional.element"), u = Symbol.for("react.fragment");
function l(c, o, s) {
var f = null;
if (s !== void 0 && (f = "" + s), o.key !== void 0 && (f = "" + o.key), "key" in o) {
s = {};
for (var d in o)
d !== "key" && (s[d] = o[d]);
} else s = o;
return o = s.ref, {
$$typeof: i,
type: c,
key: f,
ref: o !== void 0 ? o : null,
props: s
};
}
return k.Fragment = u, k.jsx = l, k.jsxs = l, k;
}
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 z;
function le() {
return z || (z = 1, process.env.NODE_ENV !== "production" && function() {
function i(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === ee ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case A:
return "Fragment";
case V:
return "Profiler";
case J:
return "StrictMode";
case H:
return "Suspense";
case Z:
return "SuspenseList";
case K:
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 E:
return "Portal";
case X:
return e.displayName || "Context";
case G:
return (e._context.displayName || "Context") + ".Consumer";
case B:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case Q:
return r = e.displayName || null, r !== null ? r : i(e.type) || "Memo";
case P:
r = e._payload, e = e._init;
try {
return i(e(r));
} catch {
}
}
return null;
}
function u(e) {
return "" + e;
}
function l(e) {
try {
u(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var t = r.error, n = 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.",
n
), u(e);
}
}
function c(e) {
if (e === A) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === P)
return "<...>";
try {
var r = i(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function o() {
var e = h.A;
return e === null ? null : e.getOwner();
}
function s() {
return Error("react-stack-top-frame");
}
function f(e) {
if (L.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function d(e, r) {
function t() {
F || (F = !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 b() {
var e = i(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 R(e, r, t, n, O, N) {
var a = t.ref;
return e = {
$$typeof: g,
type: e,
key: r,
props: t,
_owner: n
}, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: b
}) : 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: O
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: N
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function v(e, r, t, n, O, N) {
var a = r.children;
if (a !== void 0)
if (n)
if (re(a)) {
for (n = 0; n < a.length; n++)
T(a[n]);
Object.freeze && Object.freeze(a);
} 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 T(a);
if (L.call(r, "key")) {
a = i(e);
var p = Object.keys(r).filter(function(te) {
return te !== "key";
});
n = 0 < p.length ? "{key: someKey, " + p.join(": ..., ") + ": ...}" : "{key: someKey}", W[a + n] || (p = 0 < p.length ? "{" + p.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,
a,
p,
a
), W[a + n] = !0);
}
if (a = null, t !== void 0 && (l(t), a = "" + t), f(r) && (l(r.key), a = "" + r.key), "key" in r) {
t = {};
for (var C in r)
C !== "key" && (t[C] = r[C]);
} else t = r;
return a && d(
t,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), R(
e,
a,
t,
o(),
O,
N
);
}
function T(e) {
_(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === P && (e._payload.status === "fulfilled" ? _(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
}
function _(e) {
return typeof e == "object" && e !== null && e.$$typeof === g;
}
var m = ne, g = Symbol.for("react.transitional.element"), E = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), J = Symbol.for("react.strict_mode"), V = Symbol.for("react.profiler"), G = Symbol.for("react.consumer"), X = Symbol.for("react.context"), B = Symbol.for("react.forward_ref"), H = Symbol.for("react.suspense"), Z = Symbol.for("react.suspense_list"), Q = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), K = Symbol.for("react.activity"), ee = Symbol.for("react.client.reference"), h = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, re = Array.isArray, w = console.createTask ? console.createTask : function() {
return null;
};
m = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var F, $ = {}, D = m.react_stack_bottom_frame.bind(
m,
s
)(), M = w(c(s)), W = {};
y.Fragment = A, y.jsx = function(e, r, t) {
var n = 1e4 > h.recentlyCreatedOwnerStacks++;
return v(
e,
r,
t,
!1,
n ? Error("react-stack-top-frame") : D,
n ? w(c(e)) : M
);
}, y.jsxs = function(e, r, t) {
var n = 1e4 > h.recentlyCreatedOwnerStacks++;
return v(
e,
r,
t,
!0,
n ? Error("react-stack-top-frame") : D,
n ? w(c(e)) : M
);
};
}()), y;
}
var q;
function ie() {
return q || (q = 1, process.env.NODE_ENV === "production" ? S.exports = se() : S.exports = le()), S.exports;
}
var j = ie();
const fe = ({
srcPreview: i,
srcOriginal: u,
width: l = 400,
height: c = 600,
className: o = "",
objectFit: s = "cover"
}) => {
const [f, d] = ae(!1), b = x(null), R = x(null), v = x(null), T = x(() => {
}), _ = I(() => {
d(!0);
}, []), m = I(() => {
d(!1), console.error("Failed to load original image:", u);
}, [u]), g = I(() => {
b.current && R.current && v.current && f && (T.current = oe(
b.current,
R.current,
v.current
));
}, [f]);
return Y(() => {
g();
}, [g]), Y(() => {
const E = v.current;
return E && (E.addEventListener("load", _), E.addEventListener("error", m)), () => {
E && (E.removeEventListener("load", _), E.removeEventListener("error", m));
};
}, [_, m]), Y(() => {
T.current();
}, [u, i, l, c]), /* @__PURE__ */ j.jsxs(
"div",
{
ref: b,
className: o,
style: {
position: "relative",
overflow: "hidden",
width: typeof l == "number" ? l + "px" : l ?? "100%",
height: typeof c == "number" ? c + "px" : l ?? "100%"
},
children: [
/* @__PURE__ */ j.jsx(
"img",
{
ref: R,
src: i,
alt: "Preview",
style: {
position: "relative",
zIndex: "1",
objectFit: s ?? "cover",
width: "100%",
height: "100%",
transitionProperty: "opacity",
transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
transitionDuration: "300ms"
}
}
),
/* @__PURE__ */ j.jsx(
"img",
{
ref: v,
src: u,
alt: "Original",
style: { position: "absolute", maxWidth: "none", opacity: 0 }
}
),
!f && /* @__PURE__ */ j.jsx(
"div",
{
style: {
position: "absolute",
inset: 0,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "#fff",
backgroundColor: "rgba(107 114 128 / 0.5)"
},
children: "⏱"
}
)
]
}
);
};
export {
fe as default
};