react-smart-image-viewer 1.0.0

package/dist/index.js

@@ -0,0 +1,649 @@
+import { jsxs as R, jsx as o, Fragment as we } from "react/jsx-runtime";
+import { useRef as G, useCallback as a, useEffect as B, useState as z, useMemo as re } from "react";
+function be(e) {
+  return typeof e == "string" ? { src: e, alt: "" } : e;
+}
+function xe(e) {
+  return (Array.isArray(e) ? e : [e]).map(be);
+}
+function j(e, n, r) {
+  return Math.min(Math.max(e, n), r);
+}
+function J(e) {
+  if (e.length < 2) return 0;
+  const n = e[0].clientX - e[1].clientX, r = e[0].clientY - e[1].clientY;
+  return Math.sqrt(n * n + r * r);
+}
+function Q(e) {
+  var n, r;
+  return e.length < 2 ? { x: ((n = e[0]) == null ? void 0 : n.clientX) ?? 0, y: ((r = e[0]) == null ? void 0 : r.clientY) ?? 0 } : {
+    x: (e[0].clientX + e[1].clientX) / 2,
+    y: (e[0].clientY + e[1].clientY) / 2
+  };
+}
+function ke() {
+  if (typeof document > "u")
+    return () => {
+    };
+  const e = document.body.style.overflow, n = document.body.style.paddingRight, r = window.innerWidth - document.documentElement.clientWidth;
+  return document.body.style.overflow = "hidden", r > 0 && (document.body.style.paddingRight = `${r}px`), () => {
+    document.body.style.overflow = e, document.body.style.paddingRight = n;
+  };
+}
+function ee(e) {
+  let n = null, r = null;
+  return (...f) => {
+    r = f, n === null && (n = requestAnimationFrame(() => {
+      r && e(...r), n = null;
+    }));
+  };
+}
+function Ae() {
+  return typeof window > "u" ? !1 : "ontouchstart" in window || navigator.maxTouchPoints > 0;
+}
+let Le = 0;
+function te(e = "rsiv") {
+  return `${e}-${++Le}`;
+}
+function De() {
+  return typeof window > "u";
+}
+const Ye = [
+  "button:not([disabled])",
+  "[href]",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function Xe(e) {
+  const n = G(null), r = G(null), f = a(() => n.current ? Array.from(
+    n.current.querySelectorAll(Ye)
+  ) : [], []), v = a((t) => {
+    if (t.key !== "Tab") return;
+    const y = f();
+    if (y.length === 0) return;
+    const k = y[0], w = y[y.length - 1];
+    t.shiftKey ? document.activeElement === k && (t.preventDefault(), w.focus()) : document.activeElement === w && (t.preventDefault(), k.focus());
+  }, [f]);
+  return B(() => {
+    if (!e) return;
+    r.current = document.activeElement;
+    const t = f();
+    return t.length > 0 && requestAnimationFrame(() => {
+      t[0].focus();
+    }), document.addEventListener("keydown", v), () => {
+      document.removeEventListener("keydown", v), r.current instanceof HTMLElement && r.current.focus();
+    };
+  }, [e, f, v]), n;
+}
+const ne = {
+  scale: 1,
+  translateX: 0,
+  translateY: 0
+};
+function Pe(e) {
+  const { minZoom: n, maxZoom: r, zoomStep: f, onZoomChange: v } = e, [t, y] = z(ne), [k, w] = z(!1), b = G(null), P = G(null), c = G({
+    isGesturing: !1,
+    startDistance: 0,
+    startScale: 1,
+    lastPosition: null,
+    pinchCenter: null
+  });
+  B(() => {
+    v == null || v(t.scale);
+  }, [t.scale, v]);
+  const m = a((s) => {
+    y((u) => {
+      const h = { ...u, ...s };
+      return h.scale = j(h.scale, n, r), h;
+    });
+  }, [n, r]), M = a(() => {
+    m({ scale: t.scale + f });
+  }, [t.scale, f, m]), D = a(() => {
+    m({ scale: t.scale - f });
+  }, [t.scale, f, m]), Y = a(() => {
+    y(ne);
+  }, []), E = a((s) => {
+    const u = j(s, n, r);
+    y({
+      scale: u,
+      translateX: 0,
+      translateY: 0
+    });
+  }, [n, r]), T = a((s) => {
+    s.preventDefault();
+    const u = s.deltaY > 0 ? -f * 0.5 : f * 0.5, h = j(t.scale + u, n, r);
+    if (b.current) {
+      const i = b.current.getBoundingClientRect(), p = s.clientX - i.left - i.width / 2, g = s.clientY - i.top - i.height / 2, l = h / t.scale, d = t.translateX * l - p * (l - 1), S = t.translateY * l - g * (l - 1);
+      y({
+        scale: h,
+        translateX: d,
+        translateY: S
+      });
+    } else
+      m({ scale: h });
+  }, [t, f, n, r, m]), A = a((s) => {
+    if (s.preventDefault(), t.scale > 1)
+      Y();
+    else {
+      const u = Math.min(2, r);
+      if (b.current) {
+        const h = b.current.getBoundingClientRect(), i = s.clientX - h.left - h.width / 2, p = s.clientY - h.top - h.height / 2;
+        y({
+          scale: u,
+          translateX: -i * (u - 1),
+          translateY: -p * (u - 1)
+        });
+      } else
+        m({ scale: u });
+    }
+  }, [t.scale, r, Y, m]), L = a((s) => {
+    if (s.button !== 0 || t.scale <= 1) return;
+    s.preventDefault(), w(!0), c.current.lastPosition = { x: s.clientX, y: s.clientY };
+    const u = ee((i) => {
+      if (!c.current.lastPosition) return;
+      const p = i.clientX - c.current.lastPosition.x, g = i.clientY - c.current.lastPosition.y;
+      y((l) => ({
+        ...l,
+        translateX: l.translateX + p,
+        translateY: l.translateY + g
+      })), c.current.lastPosition = { x: i.clientX, y: i.clientY };
+    }), h = () => {
+      w(!1), c.current.lastPosition = null, document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", h);
+    };
+    document.addEventListener("mousemove", u), document.addEventListener("mouseup", h);
+  }, [t.scale]), Z = a((s) => {
+    s.touches.length === 2 ? (s.preventDefault(), c.current = {
+      isGesturing: !0,
+      startDistance: J(s.touches),
+      startScale: t.scale,
+      lastPosition: null,
+      pinchCenter: Q(s.touches)
+    }) : s.touches.length === 1 && t.scale > 1 && (c.current.lastPosition = {
+      x: s.touches[0].clientX,
+      y: s.touches[0].clientY
+    }, w(!0));
+    const u = ee((i) => {
+      if (i.touches.length === 2 && c.current.isGesturing) {
+        i.preventDefault();
+        const g = J(i.touches) / c.current.startDistance * c.current.startScale, l = j(g, n, r), d = Q(i.touches);
+        if (c.current.pinchCenter && b.current) {
+          const S = b.current.getBoundingClientRect(), x = c.current.pinchCenter.x - S.left - S.width / 2, O = c.current.pinchCenter.y - S.top - S.height / 2, C = l / t.scale;
+          y({
+            scale: l,
+            translateX: t.translateX * C - x * (C - 1) + (d.x - c.current.pinchCenter.x),
+            translateY: t.translateY * C - O * (C - 1) + (d.y - c.current.pinchCenter.y)
+          });
+        } else
+          m({ scale: l });
+      } else if (i.touches.length === 1 && c.current.lastPosition) {
+        const p = i.touches[0], g = p.clientX - c.current.lastPosition.x, l = p.clientY - c.current.lastPosition.y;
+        y((d) => ({
+          ...d,
+          translateX: d.translateX + g,
+          translateY: d.translateY + l
+        })), c.current.lastPosition = { x: p.clientX, y: p.clientY };
+      }
+    }), h = (i) => {
+      i.touches.length === 0 ? (c.current = {
+        isGesturing: !1,
+        startDistance: 0,
+        startScale: 1,
+        lastPosition: null,
+        pinchCenter: null
+      }, w(!1), document.removeEventListener("touchmove", u), document.removeEventListener("touchend", h)) : i.touches.length === 1 && (c.current.isGesturing = !1, c.current.lastPosition = {
+        x: i.touches[0].clientX,
+        y: i.touches[0].clientY
+      });
+    };
+    document.addEventListener("touchmove", u, { passive: !1 }), document.addEventListener("touchend", h);
+  }, [t, n, r, m]);
+  return {
+    transform: t,
+    isDragging: k,
+    zoomIn: M,
+    zoomOut: D,
+    resetZoom: Y,
+    setZoom: E,
+    handleWheel: T,
+    handleMouseDown: L,
+    handleTouchStart: Z,
+    handleDoubleClick: A,
+    containerRef: b,
+    imageRef: P
+  };
+}
+const Te = (e) => /* @__PURE__ */ R(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ o("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+), Se = (e) => /* @__PURE__ */ R(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ o("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ o("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+      /* @__PURE__ */ o("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+    ]
+  }
+), Re = (e) => /* @__PURE__ */ R(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("circle", { cx: "11", cy: "11", r: "8" }),
+      /* @__PURE__ */ o("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
+      /* @__PURE__ */ o("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
+    ]
+  }
+), Ee = (e) => /* @__PURE__ */ R(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: [
+      /* @__PURE__ */ o("polyline", { points: "1 4 1 10 7 10" }),
+      /* @__PURE__ */ o("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })
+    ]
+  }
+), Ce = (e) => /* @__PURE__ */ o(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: /* @__PURE__ */ o("polyline", { points: "15 18 9 12 15 6" })
+  }
+), Ie = (e) => /* @__PURE__ */ o(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...e,
+    children: /* @__PURE__ */ o("polyline", { points: "9 18 15 12 9 6" })
+  }
+), Ne = ({
+  images: e,
+  initialIndex: n = 0,
+  isOpen: r,
+  defaultOpen: f = !1,
+  onClose: v,
+  onIndexChange: t,
+  zoomStep: y = 0.5,
+  minZoom: k = 0.5,
+  maxZoom: w = 4,
+  showControls: b = !0,
+  showNavigation: P = !0,
+  showCounter: c = !0,
+  closeOnOverlayClick: m = !0,
+  closeOnEscape: M = !0,
+  enableKeyboardNavigation: D = !0,
+  loop: Y = !1,
+  className: E = "",
+  imageClassName: T = "",
+  animationDuration: A = 200,
+  ariaLabel: L = "Image viewer",
+  renderControls: Z,
+  renderNavigation: s
+}) => {
+  const u = r !== void 0, [h, i] = z(f), p = u ? r : h, g = re(() => xe(e), [e]), l = g.length > 1, [d, S] = z(n), x = g[d], [O, C] = z(!0), se = G(te("rsiv-viewer")), _ = G(te("rsiv-title")), {
+    transform: I,
+    isDragging: oe,
+    zoomIn: W,
+    zoomOut: q,
+    resetZoom: N,
+    handleWheel: le,
+    handleMouseDown: ce,
+    handleTouchStart: ie,
+    handleDoubleClick: ae,
+    containerRef: ue,
+    imageRef: de
+  } = Pe({
+    minZoom: k,
+    maxZoom: w,
+    zoomStep: y
+  }), fe = Xe(p);
+  B(() => {
+    De() || document.documentElement.style.setProperty(
+      "--rsiv-animation-duration",
+      `${A}ms`
+    );
+  }, [A]), B(() => {
+    if (p)
+      return ke();
+  }, [p]), B(() => {
+    N(), C(!0);
+  }, [d, N]), B(() => {
+    n !== d && n >= 0 && n < g.length && S(n);
+  }, [n, g.length]);
+  const F = a(() => {
+    u || i(!1), N(), v == null || v();
+  }, [u, v, N]), V = Y || d < g.length - 1, U = Y || d > 0, H = a(() => {
+    if (!V) return;
+    const X = d < g.length - 1 ? d + 1 : 0;
+    S(X), t == null || t(X);
+  }, [d, g.length, V, t]), K = a(() => {
+    if (!U) return;
+    const X = d > 0 ? d - 1 : g.length - 1;
+    S(X), t == null || t(X);
+  }, [d, g.length, U, t]);
+  B(() => {
+    if (!p) return;
+    const X = ($) => {
+      switch ($.key) {
+        case "Escape":
+          M && ($.preventDefault(), F());
+          break;
+        case "ArrowLeft":
+          D && l && ($.preventDefault(), K());
+          break;
+        case "ArrowRight":
+          D && l && ($.preventDefault(), H());
+          break;
+        case "+":
+        case "=":
+          $.preventDefault(), W();
+          break;
+        case "-":
+          $.preventDefault(), q();
+          break;
+        case "0":
+          $.preventDefault(), N();
+          break;
+      }
+    };
+    return document.addEventListener("keydown", X), () => document.removeEventListener("keydown", X);
+  }, [
+    p,
+    M,
+    D,
+    l,
+    F,
+    H,
+    K,
+    W,
+    q,
+    N
+  ]);
+  const me = a((X) => {
+    m && X.target === X.currentTarget && F();
+  }, [m, F]), he = a(() => {
+    C(!1);
+  }, []), ge = a(() => {
+    C(!1);
+  }, []), pe = {
+    transform: `translate(${I.translateX}px, ${I.translateY}px) scale(${I.scale})`,
+    transition: oe ? "none" : void 0
+  };
+  if (!p)
+    return null;
+  const ve = {
+    zoomIn: W,
+    zoomOut: q,
+    resetZoom: N,
+    currentZoom: I.scale,
+    minZoom: k,
+    maxZoom: w,
+    close: F
+  }, ye = {
+    goToPrevious: K,
+    goToNext: H,
+    currentIndex: d,
+    totalImages: g.length,
+    canGoPrevious: U,
+    canGoNext: V
+  };
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      ref: fe,
+      className: `rsiv-overlay ${E}`,
+      "data-open": p,
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": L,
+      "aria-labelledby": x != null && x.title ? _.current : void 0,
+      id: se.current,
+      onClick: me,
+      children: [
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: "rsiv-button rsiv-close",
+            onClick: F,
+            "aria-label": "Close image viewer",
+            type: "button",
+            children: /* @__PURE__ */ o(Te, { "aria-hidden": !0 })
+          }
+        ),
+        (x == null ? void 0 : x.title) && /* @__PURE__ */ o("div", { className: "rsiv-title", id: _.current, children: x.title }),
+        /* @__PURE__ */ R(
+          "div",
+          {
+            ref: ue,
+            className: "rsiv-container",
+            onWheel: le,
+            onTouchStart: ie,
+            children: [
+              O && /* @__PURE__ */ o("div", { className: "rsiv-loader", "aria-label": "Loading image" }),
+              /* @__PURE__ */ o("div", { className: "rsiv-image-wrapper", style: pe, children: x && /* @__PURE__ */ o(
+                "img",
+                {
+                  ref: de,
+                  src: x.src,
+                  alt: x.alt || "",
+                  className: `rsiv-image ${T}`,
+                  "data-loading": O,
+                  "data-zoomed": I.scale > 1,
+                  onLoad: he,
+                  onError: ge,
+                  onMouseDown: ce,
+                  onDoubleClick: ae,
+                  draggable: !1
+                }
+              ) })
+            ]
+          }
+        ),
+        l && P && (s ? s(ye) : /* @__PURE__ */ R(we, { children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              className: "rsiv-button rsiv-nav rsiv-nav-prev",
+              onClick: K,
+              disabled: !U,
+              "aria-label": "Previous image",
+              type: "button",
+              children: /* @__PURE__ */ o(Ce, { "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              className: "rsiv-button rsiv-nav rsiv-nav-next",
+              onClick: H,
+              disabled: !V,
+              "aria-label": "Next image",
+              type: "button",
+              children: /* @__PURE__ */ o(Ie, { "aria-hidden": !0 })
+            }
+          )
+        ] })),
+        l && c && /* @__PURE__ */ R("div", { className: "rsiv-counter", "aria-live": "polite", children: [
+          d + 1,
+          " / ",
+          g.length
+        ] }),
+        b && (Z ? Z(ve) : /* @__PURE__ */ R("div", { className: "rsiv-zoom-controls", children: [
+          /* @__PURE__ */ o(
+            "button",
+            {
+              className: "rsiv-button",
+              onClick: q,
+              disabled: I.scale <= k,
+              "aria-label": "Zoom out",
+              type: "button",
+              children: /* @__PURE__ */ o(Re, { "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              className: "rsiv-button",
+              onClick: N,
+              disabled: I.scale === 1,
+              "aria-label": "Reset zoom",
+              type: "button",
+              children: /* @__PURE__ */ o(Ee, { "aria-hidden": !0 })
+            }
+          ),
+          /* @__PURE__ */ o(
+            "button",
+            {
+              className: "rsiv-button",
+              onClick: W,
+              disabled: I.scale >= w,
+              "aria-label": "Zoom in",
+              type: "button",
+              children: /* @__PURE__ */ o(Se, { "aria-hidden": !0 })
+            }
+          )
+        ] })),
+        /* @__PURE__ */ R("div", { className: "rsiv-sr-only", "aria-live": "polite", "aria-atomic": "true", children: [
+          l && `Image ${d + 1} of ${g.length}`,
+          (x == null ? void 0 : x.alt) && `. ${x.alt}`
+        ] })
+      ]
+    }
+  );
+};
+Ne.displayName = "ImageViewer";
+function Ze(e = {}) {
+  const {
+    defaultOpen: n = !1,
+    defaultIndex: r = 0,
+    totalImages: f = 1,
+    zoomStep: v = 0.5,
+    minZoom: t = 0.5,
+    maxZoom: y = 4,
+    loop: k = !1,
+    onOpenChange: w,
+    onIndexChange: b
+  } = e, [P, c] = z(n), [m, M] = z(r), [D, Y] = z(1), E = a((l) => {
+    typeof l == "number" && (M(j(l, 0, f - 1)), b == null || b(l)), c(!0), w == null || w(!0);
+  }, [f, w, b]), T = a(() => {
+    c(!1), Y(1), w == null || w(!1);
+  }, [w]), A = a(() => {
+    P ? T() : E();
+  }, [P, E, T]), L = a((l) => {
+    const d = j(l, 0, f - 1);
+    M(d), Y(1), b == null || b(d);
+  }, [f, b]), Z = a(() => {
+    m < f - 1 ? L(m + 1) : k && L(0);
+  }, [m, f, k, L]), s = a(() => {
+    m > 0 ? L(m - 1) : k && L(f - 1);
+  }, [m, f, k, L]), u = a((l) => {
+    Y(j(l, t, y));
+  }, [t, y]), h = a(() => {
+    u(D + v);
+  }, [D, v, u]), i = a(() => {
+    u(D - v);
+  }, [D, v, u]), p = a(() => {
+    Y(1);
+  }, []), g = a(() => ({
+    isOpen: P,
+    onClose: T,
+    initialIndex: m,
+    onIndexChange: L,
+    zoomStep: v,
+    minZoom: t,
+    maxZoom: y,
+    loop: k
+  }), [P, T, m, L, v, t, y, k]);
+  return re(() => ({
+    isOpen: P,
+    open: E,
+    close: T,
+    toggle: A,
+    currentIndex: m,
+    setCurrentIndex: L,
+    goToNext: Z,
+    goToPrevious: s,
+    zoom: D,
+    zoomIn: h,
+    zoomOut: i,
+    resetZoom: p,
+    setZoom: u,
+    getViewerProps: g
+  }), [
+    P,
+    E,
+    T,
+    A,
+    m,
+    L,
+    Z,
+    s,
+    D,
+    h,
+    i,
+    p,
+    u,
+    g
+  ]);
+}
+export {
+  Ce as ChevronLeftIcon,
+  Ie as ChevronRightIcon,
+  Te as CloseIcon,
+  Ne as ImageViewer,
+  Ee as ResetIcon,
+  Se as ZoomInIcon,
+  Re as ZoomOutIcon,
+  j as clamp,
+  De as isSSR,
+  Ae as isTouchDevice,
+  be as normalizeImage,
+  xe as normalizeImages,
+  Ze as useImageViewer
+};
+//# sourceMappingURL=index.js.map