uix-image-magnify 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,10 +1,9 @@
-import { forwardRef, useState, useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
+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, Thumbs, Keyboard } from 'swiper/modules';
+import { Navigation, Keyboard, A11y } from 'swiper/modules';
 import 'swiper/css';
 import 'swiper/css/navigation';
-import 'swiper/css/thumbs';
 
 // src/components/ImageMagnify.tsx
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
@@ -80,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") {
@@ -286,8 +294,6 @@ function useImageMagnify(options = {}) {
         setZoomed(!isZoomedRef.current);
       } else if (zoomType === "click") {
         setZoomed(!isZoomedRef.current);
-      } else if (zoomType === "wheel") {
-        setZoomed(!isZoomedRef.current);
       }
       schedule();
     },
@@ -504,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",
@@ -524,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,
@@ -691,6 +698,23 @@ var defaultArrowBaseStyle = {
   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,
@@ -719,6 +743,7 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
     style,
     viewportClassName,
     viewportStyle,
+    swiperStyle,
     thumbnailContainerClassName,
     thumbnailContainerStyle,
     thumbnailClassName,
@@ -735,13 +760,17 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
     ...magnifyProps
   } = props;
   const [swiper, setSwiper] = useState(null);
-  const [thumbsSwiper, setThumbsSwiper] = useState(null);
-  const [localIndex, setLocalIndex] = useState(defaultIndex);
+  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 activeIndex = isControlled ? controlledActiveIndex : localIndex;
+  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) {
@@ -751,22 +780,31 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
   useEffect(() => {
     if (!preloadAdjacent || typeof window === "undefined" || images.length <= 1)
       return;
-    const targets = /* @__PURE__ */ new Set([
-      (activeIndex + 1) % images.length,
-      (activeIndex - 1 + images.length) % images.length
-    ]);
+    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) => {
-      if (images[i]) {
+      const src = images[i];
+      if (src) {
         const img = new Image();
-        img.src = images[i];
+        img.src = src;
       }
     });
-  }, [activeIndex, images, preloadAdjacent]);
-  const modules = useMemo(() => {
-    const m = [Navigation, Thumbs];
-    if (enableKeyboard) m.push(Keyboard);
-    return m;
-  }, [enableKeyboard]);
+  }, [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 });
   }
@@ -792,36 +830,29 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
                   modules,
                   onSwiper: setSwiper,
                   initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
-                  onSlideChange: (s) => {
-                    if (!isControlled) setLocalIndex(s.activeIndex);
-                    onIndexChange?.(s.activeIndex);
-                  },
+                  onSlideChange: handleSlideChange,
                   onBeforeInit: (s) => {
                     if (!showArrows || !hasMultiple) return;
-                    if (s.params.navigation && typeof s.params.navigation === "object") {
-                      s.params.navigation.prevEl = prevRef.current;
-                      s.params.navigation.nextEl = nextRef.current;
+                    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 } : void 0,
-                  thumbs: {
-                    swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
-                  },
+                  keyboard: enableKeyboard ? { enabled: true } : false,
                   loop: loop && hasMultiple,
                   autoHeight: true,
                   spaceBetween: 10,
-                  style: {
-                    width: "100%",
-                    "--swiper-navigation-size": "20px",
-                    ...arrowStyle
-                  },
+                  observer: true,
+                  observeParents: true,
+                  style: { width: "100%", ...swiperStyle },
                   children: images.map((src, idx) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx(
                     ImageMagnify,
                     {
                       ...magnifyProps,
                       src,
-                      alt,
+                      alt: `${alt} \u2014 image ${idx + 1} of ${images.length}`,
                       width: "100%"
                     }
                   ) }, idx))
@@ -834,7 +865,7 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
                     ref: prevRef,
                     type: "button",
                     className: arrowClassName,
-                    style: { ...defaultArrowBaseStyle, left: 12 },
+                    style: { ...defaultArrowBaseStyle, left: 12, ...arrowStyle },
                     "aria-label": "Previous image",
                     children: prevArrow ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
                   }
@@ -845,7 +876,7 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
                     ref: nextRef,
                     type: "button",
                     className: arrowClassName,
-                    style: { ...defaultArrowBaseStyle, right: 12 },
+                    style: { ...defaultArrowBaseStyle, right: 12, ...arrowStyle },
                     "aria-label": "Next image",
                     children: nextArrow ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
                   }
@@ -885,41 +916,62 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
           }
         ),
         showThumbnails && hasMultiple && /* @__PURE__ */ jsx(
-          Swiper,
+          "div",
           {
-            modules,
-            onSwiper: setSwiper,
-            initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
-            onSlideChange: (s) => {
-              if (!isControlled) setLocalIndex(s.activeIndex);
-              onIndexChange?.(s.activeIndex);
-            },
-            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 } : void 0,
-            thumbs: {
-              swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
+            className: thumbnailContainerClassName,
+            role: "group",
+            "aria-label": "Image thumbnails",
+            style: {
+              display: "flex",
+              gap: thumbnailGap,
+              marginTop: 12,
+              overflowX: "auto",
+              overflowY: "hidden",
+              paddingBottom: 4,
+              scrollbarWidth: "thin",
+              ...thumbnailContainerStyle
             },
-            loop: loop && hasMultiple,
-            autoHeight: true,
-            spaceBetween: 10,
-            style: { width: "100%" },
-            children: images.map((src, idx) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx(
-              ImageMagnify,
-              {
-                ...magnifyProps,
-                src,
-                alt,
-                width: "100%"
-              }
-            ) }, idx))
+            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
+              );
+            })
           }
         )
       ]
@@ -934,7 +986,10 @@ function useImageSlider({
   onIndexChange,
   loop = true
 }) {
-  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const [internalIndex, setInternalIndex] = useState(() => {
+    const safeLength2 = Math.max(1, length);
+    return Math.max(0, Math.min(safeLength2 - 1, defaultIndex));
+  });
   const safeLength = Math.max(1, length);
   const rawIndex = controlledIndex ?? internalIndex;
   const index = Math.max(0, Math.min(safeLength - 1, rawIndex));