uix-image-magnify 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,5 +1,10 @@
-import { forwardRef, useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useEffect, useMemo, 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 '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));
@@ -411,6 +416,19 @@ function useImageMagnify(options = {}) {
     handlers
   };
 }
+var useIsoLayoutEffect2 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useIsoLayoutEffect2(() => {
+    const media = window.matchMedia(query);
+    const listener = () => setMatches(media.matches);
+    listener();
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [query]);
+  return matches;
+}
+var MOBILE_QUERY = "(max-width: 768px)";
 var ImageMagnify = forwardRef(
   (props, ref) => {
     const {
@@ -439,6 +457,8 @@ var ImageMagnify = forwardRef(
       onError,
       ...hookOptions
     } = props;
+    const isMobile = useMediaQuery(MOBILE_QUERY);
+    const responsivePanePosition = isMobile ? "bottom" : panePosition;
     const {
       isZoomed,
       bgImage,
@@ -456,25 +476,36 @@ var ImageMagnify = forwardRef(
       disabled,
       ...hookOptions
     });
-    const paneOffset = {};
-    if (panePosition === "right") {
-      paneOffset.left = "calc(100% + 12px)";
-      paneOffset.top = 0;
-    } else if (panePosition === "left") {
-      paneOffset.right = "calc(100% + 12px)";
-      paneOffset.top = 0;
-    } else if (panePosition === "top") {
-      paneOffset.left = 0;
-      paneOffset.bottom = "calc(100% + 12px)";
+    const panePositionStyle = {};
+    if (responsivePanePosition === "right") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = "calc(100% + 12px)";
+      panePositionStyle.top = 0;
+    } else if (responsivePanePosition === "left") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.right = "calc(100% + 12px)";
+      panePositionStyle.top = 0;
+    } else if (responsivePanePosition === "top") {
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = 0;
+      panePositionStyle.bottom = "calc(100% + 12px)";
+    } else if (isMobile) {
+      panePositionStyle.position = "static";
+      panePositionStyle.display = "block";
+      panePositionStyle.marginTop = 12;
+      panePositionStyle.width = "100%";
+      panePositionStyle.boxSizing = "border-box";
     } else {
-      paneOffset.left = 0;
-      paneOffset.top = "calc(100% + 12px)";
+      panePositionStyle.position = "absolute";
+      panePositionStyle.left = 0;
+      panePositionStyle.top = "calc(100% + 12px)";
     }
     const isInner = mode === "inner";
     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 outerWidth = isMobile ? "100%" : width;
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -484,7 +515,8 @@ var ImageMagnify = forwardRef(
           position: "relative",
           display: "inline-block",
           lineHeight: 0,
-          width,
+          width: outerWidth,
+          maxWidth: "100%",
           ...style
         },
         children: [
@@ -501,7 +533,6 @@ var ImageMagnify = forwardRef(
                 overflow: "hidden",
                 width: "100%",
                 cursor: cursorStyle,
-                // Only block scrolling while zoomed so page scrolling still works.
                 touchAction: isZoomed ? "none" : "pan-y",
                 outline: "none",
                 lineHeight: 0
@@ -588,16 +619,17 @@ var ImageMagnify = forwardRef(
               className: paneClassName,
               "aria-hidden": "true",
               style: {
-                position: "absolute",
-                width: paneWidth,
+                width: isMobile && responsivePanePosition === "bottom" ? "100%" : paneWidth,
                 height: paneHeight,
+                maxWidth: "100%",
+                boxSizing: "border-box",
                 backgroundImage: bgImage ? `url("${bgImage}")` : void 0,
                 backgroundRepeat: "no-repeat",
                 border: "1px solid #e5e5e5",
                 borderRadius: 4,
                 boxShadow: "0 8px 24px rgba(0,0,0,0.12)",
                 pointerEvents: "none",
-                ...paneOffset,
+                ...panePositionStyle,
                 ...paneStyle
               }
             }
@@ -608,45 +640,6 @@ var ImageMagnify = forwardRef(
   }
 );
 ImageMagnify.displayName = "ImageMagnify";
-function useImageSlider({
-  length,
-  defaultIndex = 0,
-  index: controlledIndex,
-  onIndexChange,
-  loop = true
-}) {
-  const [internalIndex, setInternalIndex] = useState(defaultIndex);
-  const safeLength = Math.max(1, length);
-  const rawIndex = controlledIndex ?? internalIndex;
-  const index = Math.max(0, Math.min(safeLength - 1, rawIndex));
-  const setIndex = useCallback(
-    (next2) => {
-      if (length <= 0) return;
-      let resolved;
-      if (loop) {
-        resolved = (next2 % safeLength + safeLength) % safeLength;
-      } else {
-        resolved = Math.max(0, Math.min(safeLength - 1, next2));
-      }
-      if (resolved === index) return;
-      if (controlledIndex === void 0) {
-        setInternalIndex(resolved);
-      }
-      onIndexChange?.(resolved);
-    },
-    [length, safeLength, loop, index, controlledIndex, onIndexChange]
-  );
-  const prev = useCallback(() => setIndex(index - 1), [setIndex, index]);
-  const next = useCallback(() => setIndex(index + 1), [setIndex, index]);
-  return {
-    index,
-    canPrev: loop || index > 0,
-    canNext: loop || index < safeLength - 1,
-    setIndex,
-    prev,
-    next
-  };
-}
 var ArrowLeftIcon = () => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -698,30 +691,6 @@ var defaultArrowBaseStyle = {
   backdropFilter: "blur(4px)",
   WebkitBackdropFilter: "blur(4px)"
 };
-var defaultThumbStripStyle = {
-  display: "flex",
-  overflowX: "auto",
-  overflowY: "hidden",
-  paddingBottom: 4,
-  scrollbarWidth: "thin",
-  WebkitOverflowScrolling: "touch"
-};
-var defaultThumbBaseStyle = {
-  flexShrink: 0,
-  padding: 0,
-  border: "2px solid #e5e5e5",
-  background: "#fff",
-  cursor: "pointer",
-  overflow: "hidden",
-  transition: "border-color 0.15s ease",
-  borderRadius: 2,
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center"
-};
-var defaultThumbActiveStyle = {
-  borderColor: "#111"
-};
 var visuallyHidden = {
   position: "absolute",
   width: 1,
@@ -762,70 +731,51 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
     thumbnailGap = 8,
     prevArrow,
     nextArrow,
+    width,
     ...magnifyProps
   } = props;
-  const { index, canPrev, canNext, setIndex, prev, next } = useImageSlider({
-    length: images.length,
-    defaultIndex,
-    index: controlledActiveIndex,
-    onIndexChange,
-    loop
-  });
-  const currentSrc = images[index] ?? "";
-  const thumbStripRef = useRef(null);
-  const [hoveredThumb, setHoveredThumb] = useState(null);
+  const [swiper, setSwiper] = useState(null);
+  const [thumbsSwiper, setThumbsSwiper] = useState(null);
+  const [localIndex, setLocalIndex] = useState(defaultIndex);
+  const prevRef = useRef(null);
+  const nextRef = useRef(null);
+  const isControlled = controlledActiveIndex !== void 0;
+  const activeIndex = isControlled ? controlledActiveIndex : localIndex;
+  const hasMultiple = images.length > 1;
   useEffect(() => {
-    if (!preloadAdjacent || typeof window === "undefined") return;
-    if (images.length <= 1) return;
-    const targets = /* @__PURE__ */ new Set();
-    targets.add((index + 1) % images.length);
-    targets.add((index - 1 + images.length) % images.length);
+    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([
+      (activeIndex + 1) % images.length,
+      (activeIndex - 1 + images.length) % images.length
+    ]);
     targets.forEach((i) => {
       if (images[i]) {
         const img = new Image();
         img.src = images[i];
       }
     });
-  }, [index, images, preloadAdjacent]);
-  useEffect(() => {
-    const strip = thumbStripRef.current;
-    if (!strip) return;
-    const active = strip.children[index];
-    if (!active) return;
-    const sr = strip.getBoundingClientRect();
-    const ar = active.getBoundingClientRect();
-    if (ar.left < sr.left) {
-      strip.scrollBy({ left: ar.left - sr.left, behavior: "smooth" });
-    } else if (ar.right > sr.right) {
-      strip.scrollBy({ left: ar.right - sr.right, behavior: "smooth" });
-    }
-  }, [index]);
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (!enableKeyboard) return;
-      if (e.key === "ArrowLeft") {
-        if (!canPrev) return;
-        e.preventDefault();
-        prev();
-      } else if (e.key === "ArrowRight") {
-        if (!canNext) return;
-        e.preventDefault();
-        next();
-      }
-    },
-    [enableKeyboard, canPrev, canNext, prev, next]
-  );
-  const hasMultiple = images.length > 1;
-  const liveText = useMemo(
-    () => `Image ${index + 1} of ${images.length}`,
-    [index, images.length]
-  );
+  }, [activeIndex, images, preloadAdjacent]);
+  const modules = useMemo(() => {
+    const m = [Navigation, Thumbs];
+    if (enableKeyboard) m.push(Keyboard);
+    return m;
+  }, [enableKeyboard]);
+  if (images.length === 0) {
+    return /* @__PURE__ */ jsx("div", { ref, className, style });
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       className,
-      style,
+      style: { maxWidth: "100%", width, ...style },
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": `${alt} \u2014 image gallery`,
@@ -834,53 +784,80 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
           "div",
           {
             className: viewportClassName,
-            style: {
-              position: "relative",
-              width: "fit-content",
-              maxWidth: "100%",
-              ...viewportStyle
-            },
-            tabIndex: enableKeyboard && hasMultiple ? 0 : void 0,
-            onKeyDown: handleKeyDown,
+            style: { position: "relative", width: "100%", ...viewportStyle },
             children: [
-              /* @__PURE__ */ jsx(ImageMagnify, { ...magnifyProps, src: currentSrc, alt }),
-              showArrows && hasMultiple && canPrev && /* @__PURE__ */ jsx(
-                "button",
+              /* @__PURE__ */ jsx(
+                Swiper,
                 {
-                  type: "button",
-                  onClick: prev,
-                  className: arrowClassName,
-                  style: {
-                    ...defaultArrowBaseStyle,
-                    left: 12,
-                    ...arrowStyle
+                  modules,
+                  onSwiper: setSwiper,
+                  initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
+                  onSlideChange: (s) => {
+                    if (!isControlled) setLocalIndex(s.activeIndex);
+                    onIndexChange?.(s.activeIndex);
                   },
-                  "aria-label": "Previous image",
-                  children: prevArrow ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
-                }
-              ),
-              showArrows && hasMultiple && canNext && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: next,
-                  className: arrowClassName,
+                  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;
+                    }
+                  },
+                  navigation: showArrows && hasMultiple ? {} : false,
+                  keyboard: enableKeyboard ? { enabled: true } : void 0,
+                  thumbs: {
+                    swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null
+                  },
+                  loop: loop && hasMultiple,
+                  autoHeight: true,
+                  spaceBetween: 10,
                   style: {
-                    ...defaultArrowBaseStyle,
-                    right: 12,
+                    width: "100%",
+                    "--swiper-navigation-size": "20px",
                     ...arrowStyle
                   },
-                  "aria-label": "Next image",
-                  children: nextArrow ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                  children: images.map((src, idx) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsx(
+                    ImageMagnify,
+                    {
+                      ...magnifyProps,
+                      src,
+                      alt,
+                      width: "100%"
+                    }
+                  ) }, idx))
                 }
               ),
+              showArrows && hasMultiple && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: prevRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, left: 12 },
+                    "aria-label": "Previous image",
+                    children: prevArrow ?? /* @__PURE__ */ jsx(ArrowLeftIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: nextRef,
+                    type: "button",
+                    className: arrowClassName,
+                    style: { ...defaultArrowBaseStyle, right: 12 },
+                    "aria-label": "Next image",
+                    children: nextArrow ?? /* @__PURE__ */ jsx(ArrowRightIcon, {})
+                  }
+                )
+              ] }),
               showCounter && hasMultiple && /* @__PURE__ */ jsxs(
                 "div",
                 {
                   "aria-hidden": "true",
                   style: {
                     position: "absolute",
-                    bottom: 12,
+                    top: 12,
                     right: 12,
                     background: "rgba(0,0,0,0.6)",
                     color: "#fff",
@@ -892,74 +869,57 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
                     pointerEvents: "none"
                   },
                   children: [
-                    index + 1,
+                    activeIndex + 1,
                     " / ",
                     images.length
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: liveText })
+              /* @__PURE__ */ jsxs("div", { "aria-live": "polite", "aria-atomic": "true", style: visuallyHidden, children: [
+                "Image ",
+                activeIndex + 1,
+                " of ",
+                images.length
+              ] })
             ]
           }
         ),
         showThumbnails && hasMultiple && /* @__PURE__ */ jsx(
-          "div",
+          Swiper,
           {
-            ref: thumbStripRef,
-            className: thumbnailContainerClassName,
-            role: "tablist",
-            "aria-label": "Choose image",
-            style: {
-              ...defaultThumbStripStyle,
-              gap: thumbnailGap,
-              marginTop: 12,
-              ...thumbnailContainerStyle
+            modules,
+            onSwiper: setSwiper,
+            initialSlide: isControlled ? controlledActiveIndex : defaultIndex,
+            onSlideChange: (s) => {
+              if (!isControlled) setLocalIndex(s.activeIndex);
+              onIndexChange?.(s.activeIndex);
             },
-            children: images.map((img, idx) => {
-              const isActive = idx === index;
-              const isHovered = idx === hoveredThumb;
-              const cls = isActive ? thumbnailActiveClassName : thumbnailClassName;
-              return /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  role: "tab",
-                  onClick: () => setIndex(idx),
-                  onMouseEnter: () => setHoveredThumb(idx),
-                  onMouseLeave: () => setHoveredThumb(null),
-                  className: cls,
-                  style: {
-                    ...defaultThumbBaseStyle,
-                    width: thumbnailSize,
-                    height: thumbnailSize,
-                    ...thumbnailStyle,
-                    ...isActive ? defaultThumbActiveStyle : void 0,
-                    ...isActive ? thumbnailActiveStyle : void 0,
-                    ...isHovered && !isActive ? { borderColor: "#999" } : void 0
-                  },
-                  "aria-label": `View image ${idx + 1} of ${images.length}`,
-                  "aria-selected": isActive,
-                  children: /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: img,
-                      alt: "",
-                      loading: "lazy",
-                      draggable: false,
-                      style: {
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "contain",
-                        display: "block",
-                        pointerEvents: "none",
-                        userSelect: "none"
-                      }
-                    }
-                  )
-                },
-                idx
-              );
-            })
+            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
+            },
+            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))
           }
         )
       ]
@@ -967,6 +927,45 @@ var ImageMagnifyGallery = forwardRef((props, ref) => {
   );
 });
 ImageMagnifyGallery.displayName = "ImageMagnifyGallery";
+function useImageSlider({
+  length,
+  defaultIndex = 0,
+  index: controlledIndex,
+  onIndexChange,
+  loop = true
+}) {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex);
+  const safeLength = Math.max(1, length);
+  const rawIndex = controlledIndex ?? internalIndex;
+  const index = Math.max(0, Math.min(safeLength - 1, rawIndex));
+  const setIndex = useCallback(
+    (next2) => {
+      if (length <= 0) return;
+      let resolved;
+      if (loop) {
+        resolved = (next2 % safeLength + safeLength) % safeLength;
+      } else {
+        resolved = Math.max(0, Math.min(safeLength - 1, next2));
+      }
+      if (resolved === index) return;
+      if (controlledIndex === void 0) {
+        setInternalIndex(resolved);
+      }
+      onIndexChange?.(resolved);
+    },
+    [length, safeLength, loop, index, controlledIndex, onIndexChange]
+  );
+  const prev = useCallback(() => setIndex(index - 1), [setIndex, index]);
+  const next = useCallback(() => setIndex(index + 1), [setIndex, index]);
+  return {
+    index,
+    canPrev: loop || index > 0,
+    canNext: loop || index < safeLength - 1,
+    setIndex,
+    prev,
+    next
+  };
+}
 
 export { ImageMagnify, ImageMagnifyGallery, useImageMagnify, useImageSlider };
 //# sourceMappingURL=index.js.map