@treely/strapi-slices 5.3.2 → 5.3.3

package/dist/components/FullScreenImage/FullScreenImage.d.ts

@@ -4,6 +4,7 @@ export interface FullScreenImageProps {
     images: StrapiImage[];
     isOpen: boolean;
     onClose: () => void;
-    openIndex?: number;
+    currentIndex?: number;
+    setCurrentIndex?: (callback: (c: number) => number) => void;
 }
-export declare const FullScreenImage: ({ images, isOpen, onClose, openIndex, }: FullScreenImageProps) => React.JSX.Element;
+export declare const FullScreenImage: ({ images, isOpen, onClose, currentIndex, setCurrentIndex, }: FullScreenImageProps) => React.JSX.Element;

package/dist/strapi-slices.cjs.development.js

@@ -734,45 +734,50 @@ var FullScreenImage = function FullScreenImage(_ref) {
   var images = _ref.images,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    openIndex = _ref.openIndex;
-  var _useState = React.useState(0),
-    imageIndex = _useState[0],
-    setImageIndex = _useState[1];
+    _ref$currentIndex = _ref.currentIndex,
+    currentIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+    setCurrentIndex = _ref.setCurrentIndex;
   var containerRef = React.useRef(null);
   reactUse.useLockBodyScroll(isOpen);
-  var canMoveRight = imageIndex < images.length - 1;
-  var canMoveLeft = imageIndex !== 0;
-  var onRight = function onRight() {
-    return setImageIndex(function (p) {
-      return canMoveRight ? p + 1 : p;
+  var canMoveRight = React.useMemo(function () {
+    return currentIndex < images.length - 1;
+  }, [currentIndex, images.length]);
+  var canMoveLeft = React.useMemo(function () {
+    return currentIndex !== 0;
+  }, [currentIndex]);
+  var onRight = React.useCallback(function () {
+    return canMoveRight && setCurrentIndex && setCurrentIndex(function (c) {
+      return c + 1;
     });
-  };
-  var onLeft = function onLeft() {
-    return setImageIndex(function (p) {
-      return canMoveLeft ? p - 1 : p;
+  }, [canMoveRight]);
+  var onLeft = React.useCallback(function () {
+    return canMoveLeft && setCurrentIndex && setCurrentIndex(function (c) {
+      return c - 1;
     });
-  };
+  }, [canMoveLeft]);
   reactUse.useKey('ArrowRight', onRight, {}, [onRight]);
   reactUse.useKey('ArrowLeft', onLeft, {}, [onLeft]);
   React.useEffect(function () {
-    if (openIndex !== undefined) {
-      setImageIndex(openIndex);
+    if (!!isOpen) {
+      setTimeout(function () {
+        var _containerRef$current;
+        containerRef == null || (_containerRef$current = containerRef.current) == null || _containerRef$current.scrollTo({
+          left: currentIndex * containerRef.current.clientWidth,
+          behavior: 'instant'
+        });
+      }, 10);
     }
-  }, [openIndex]);
+  }, [isOpen]);
   React.useEffect(function () {
     if (containerRef.current) {
       containerRef.current.scrollTo({
-        left: imageIndex * containerRef.current.clientWidth,
+        left: currentIndex * containerRef.current.clientWidth,
         behavior: 'smooth'
       });
     }
-  }, [imageIndex, containerRef]);
-  var onCloseLocal = function onCloseLocal() {
-    setImageIndex(0);
-    onClose();
-  };
+  }, [currentIndex, containerRef]);
   return React__default.default.createElement(boemly.BoemlyModal, {
-    onClose: onCloseLocal,
+    onClose: onClose,
     isOpen: isOpen,
     title: "",
     trigger: "",
@@ -3339,7 +3344,8 @@ var FullWidthImageSlider = function FullWidthImageSlider(_ref) {
     images: slice.images.map(function (image) {
       return image.img;
     }),
-    openIndex: sliderIndex,
+    currentIndex: sliderIndex,
+    setCurrentIndex: setSliderIndex,
     isOpen: isOpen,
     onClose: function onClose() {
       return setIsOpen(false);