uix-image-magnify 0.2.2 → 0.2.4

package/dist/ssr/index.js

@@ -1,5 +1,9 @@
-import { forwardRef, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Keyboard, A11y } from 'swiper/modules';
+import 'swiper/css';
+import 'swiper/css/navigation';
 
 // src/ssr/index.tsx
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
@@ -75,6 +79,15 @@ function useImageMagnify(options = {}) {
       isZoomedRef.current = z;
       setIsZoomed(z);
       if (z) {
+        if (modeRef.current === "inner" && dragModeRef.current === "pan") {
+          const container = containerRef.current;
+          if (container) {
+            const rect = container.getBoundingClientRect();
+            const s = scaleRef.current;
+            txRef.current = rect.width * (1 - s) / 2;
+            tyRef.current = rect.height * (1 - s) / 2;
+          }
+        }
         onZoomStart?.();
       } else {
         if (zoomType === "wheel") {
@@ -281,8 +294,6 @@ function useImageMagnify(options = {}) {
         setZoomed(!isZoomedRef.current);
       } else if (zoomType === "click") {
         setZoomed(!isZoomedRef.current);
-      } else if (zoomType === "wheel") {
-        setZoomed(!isZoomedRef.current);
       }
       schedule();
     },
@@ -499,7 +510,8 @@ var ImageMagnify = forwardRef(
     const showLens = (mode === "lens" || mode === "follow") && isZoomed;
     const showPane = mode === "side-by-side" && isZoomed;
     const showCursor = mode === "side-by-side" && isZoomed;
-    const cursorStyle = disabled ? "default" : zoomType === "hover" || zoomType === "hold" || zoomType === "wheel" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in";
+    const isInteractive = !disabled && zoomType !== "none";
+    const cursorStyle = !isInteractive ? "default" : zoomType === "hover" || zoomType === "hold" || zoomType === "wheel" ? "crosshair" : isZoomed ? "zoom-out" : "zoom-in";
     const outerWidth = isMobile ? "100%" : width;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -519,7 +531,7 @@ var ImageMagnify = forwardRef(
             "div",
             {
               ref: containerRef,
-              tabIndex: 0,
+              tabIndex: isInteractive ? 0 : -1,
               role: "img",
               "aria-label": alt,
               "aria-disabled": disabled || void 0,
@@ -635,6 +647,394 @@ var ImageMagnify = forwardRef(
   }
 );
 ImageMagnify.displayName = "ImageMagnify";
+var ArrowLeftIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+  }
+);
+var ArrowRightIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+  }
+);
+var defaultArrowBaseStyle = {
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  width: 40,
+  height: 40,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  background: "rgba(255,255,255,0.85)",
+  border: "1px solid rgba(0,0,0,0.12)",
+  borderRadius: 9999,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  cursor: "pointer",
+  zIndex: 10,
+  color: "#111",
+  padding: 0,
+  transition: "background 0.15s ease",
+  backdropFilter: "blur(4px)",
+  WebkitBackdropFilter: "blur(4px)"
+};
+var defaultThumbBaseStyle = {
+  flexShrink: 0,
+  padding: 0,
+  border: "2px solid #e5e5e5",
+  background: "#fff",
+  cursor: "pointer",
+  overflow: "hidden",
+  transition: "border-color 0.15s ease, opacity 0.15s ease",
+  borderRadius: 2,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  boxSizing: "border-box"
+};
+var defaultThumbActiveStyle = {
+  borderColor: "#111"
+};
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+var ImageMagnifyGallery = forwardRef((props, ref) => {
+  const {
+    images,
+    alt,
+    activeIndex: controlledActiveIndex,
+    defaultIndex = 0,
+    onIndexChange,
+    showArrows = true,
+    showThumbnails = true,
+    showCounter = false,
+    loop = true,
+    enableKeyboard = true,
+    preloadAdjacent = true,
+    className,
+    style,
+    viewportClassName,
+    viewportStyle,
+    swiperStyle,
+    thumbnailContainerClassName,
+    thumbnailContainerStyle,
+    thumbnailClassName,
+    thumbnailActiveClassName,
+    thumbnailStyle,
+    thumbnailActiveStyle,
+    arrowClassName,
+    arrowStyle,
+    thumbnailSize = 80,
+    thumbnailGap = 8,
+    prevArrow,
+    nextArrow,
+    width,
+    ...magnifyProps
+  } = props;
+  const [swiper, setSwiper] = useState(null);
+  const [localIndex, setLocalIndex] = useState(() => {
+    const safeLength = Math.max(1, images.length);
+    return Math.max(0, Math.min(safeLength - 1, defaultIndex));
+  });
+  const prevRef = useRef(null);
+  const nextRef = useRef(null);
+  const isControlled = controlledActiveIndex !== void 0;
+  const rawIndex = isControlled ? controlledActiveIndex : localIndex;
+  const activeIndex = images.length ? Math.max(0, Math.min(images.length - 1, rawIndex)) : 0;
+  const hasMultiple = images.length > 1;
+  const modules = useMemo(() => [Navigation, Keyboard, A11y], []);
+  useEffect(() => {
+    if (!swiper || swiper.destroyed) return;
+    if (isControlled && swiper.activeIndex !== controlledActiveIndex) {
+      swiper.slideTo(controlledActiveIndex);
+    }
+  }, [isControlled, controlledActiveIndex, swiper]);
+  useEffect(() => {
+    if (!preloadAdjacent || typeof window === "undefined" || images.length <= 1)
+      return;
+    const targets = /* @__PURE__ */ new Set();
+    if (loop) {
+      targets.add((activeIndex + 1) % images.length);
+      targets.add((activeIndex - 1 + images.length) % images.length);
+    } else {
+      if (activeIndex < images.length - 1) targets.add(activeIndex + 1);
+      if (activeIndex > 0) targets.add(activeIndex - 1);
+    }
+    targets.forEach((i) => {
+      const src = images[i];
+      if (src) {
+        const img = new Image();
+        img.src = src;
+      }
+    });
+  }, [activeIndex, images, preloadAdjacent, loop]);
+  const handleSlideChange = (s) => {
+    const idx = s.activeIndex;
+    if (!isControlled) setLocalIndex(idx);
+    onIndexChange?.(idx);
+  };
+  const handleThumbClick = (idx) => {
+    if (!swiper || swiper.destroyed) return;
+    swiper.slideTo(idx);
+  };
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx("div", { ref, className, style });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className,
+      style: { maxWidth: "100%", width, ...style },
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": `${alt} \u2014 image gallery`,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: viewportClassName,
+            style: { position: "relative", width: "100%", ...viewportStyle },
+            children: [
+              /* @__PURE__ */ jsx(
+                Swiper,
+                {
+                  modules,
+                  onSwiper: setSwiper,
+                  initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
+                  onSlideChange: handleSlideChange,
+                  onBeforeInit: (s) => {
+                    if (!showArrows || !hasMultiple) return;
+                    const nav = s.params.navigation;
+                    if (nav && typeof nav === "object") {
+                      nav.prevEl = prevRef.current;
+                      nav.nextEl = nextRef.current;
+                    }
+                  },
+                  navigation: showArrows && hasMultiple ? {} : false,
+                  keyboard: enableKeyboard ? { enabled: true } : false,
+                  loop: loop && hasMultiple,
+                  autoHeight: true,
+                  spaceBetween: 10,
+                  observer: true,
+                  observeParents: true,
+                  style: { width: "100%", ...swiperStyle },
+                  children: images.map((src, idx) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx(
+                    ImageMagnify,
+                    {
+                      ...magnifyProps,
+                      src,
+                      alt: `${alt} \u2014 image ${idx + 1} of ${images.length}`,
+                      width: "100%"
+                    }
+                  ) }, idx))
+                }
+              ),
+              showArrows && hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: prevRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, left: 12, ...arrowStyle },
+                    "aria-label": "Previous image",
+                    children: prevArrow ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: nextRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, right: 12, ...arrowStyle },
+                    "aria-label": "Next image",
+                    children: nextArrow ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                  }
+                )
+              ] }),
+              showCounter && hasMultiple && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    position: "absolute",
+                    top: 12,
+                    right: 12,
+                    background: "rgba(0,0,0,0.6)",
+                    color: "#fff",
+                    fontSize: 12,
+                    fontWeight: 600,
+                    padding: "4px 8px",
+                    borderRadius: 4,
+                    zIndex: 10,
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    activeIndex + 1,
+                    " / ",
+                    images.length
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: [
+                "Image ",
+                activeIndex + 1,
+                " of ",
+                images.length
+              ] })
+            ]
+          }
+        ),
+        showThumbnails && hasMultiple && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: thumbnailContainerClassName,
+            role: "group",
+            "aria-label": "Image thumbnails",
+            style: {
+              display: "flex",
+              gap: thumbnailGap,
+              marginTop: 12,
+              overflowX: "auto",
+              overflowY: "hidden",
+              paddingBottom: 4,
+              scrollbarWidth: "thin",
+              ...thumbnailContainerStyle
+            },
+            children: images.map((src, idx) => {
+              const isActive = idx === activeIndex;
+              const mergedClassName = [
+                thumbnailClassName,
+                isActive ? thumbnailActiveClassName : void 0
+              ].filter(Boolean).join(" ") || void 0;
+              return /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleThumbClick(idx),
+                  className: mergedClassName,
+                  style: {
+                    ...defaultThumbBaseStyle,
+                    width: thumbnailSize,
+                    height: thumbnailSize,
+                    ...thumbnailStyle,
+                    ...isActive ? { ...defaultThumbActiveStyle, ...thumbnailActiveStyle } : void 0
+                  },
+                  "aria-label": `View image ${idx + 1}`,
+                  "aria-current": isActive ? "true" : void 0,
+                  children: /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src,
+                      alt: "",
+                      loading: "lazy",
+                      draggable: false,
+                      style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                        display: "block",
+                        pointerEvents: "none"
+                      }
+                    }
+                  )
+                },
+                idx
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+ImageMagnifyGallery.displayName = "ImageMagnifyGallery";
+function ImageMagnifyGallerySSR(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    const {
+      images,
+      alt,
+      defaultIndex = 0,
+      activeIndex,
+      width,
+      className,
+      style,
+      imageClassName,
+      imageStyle,
+      imageProps,
+      lazy
+    } = props;
+    const idx = activeIndex ?? defaultIndex;
+    const src = images?.[idx] ?? images?.[0] ?? "";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: {
+          position: "relative",
+          display: "inline-block",
+          lineHeight: 0,
+          width,
+          ...style
+        },
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            ...imageProps,
+            src,
+            alt,
+            loading: lazy ? "lazy" : void 0,
+            draggable: false,
+            className: imageClassName,
+            style: {
+              display: "block",
+              width: "100%",
+              height: "auto",
+              userSelect: "none",
+              pointerEvents: "none",
+              ...imageStyle
+            }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ImageMagnifyGallery, { ...props });
+}
 function ImageMagnifySSR(props) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
@@ -692,6 +1092,6 @@ function ImageMagnifySSR(props) {
   return /* @__PURE__ */ jsx(ImageMagnify, { ...props });
 }
 
-export { ImageMagnify, ImageMagnifySSR };
+export { ImageMagnify, ImageMagnifyGallery, ImageMagnifyGallerySSR, ImageMagnifySSR };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map