@treely/strapi-slices 5.3.2 → 5.3.3

package/dist/strapi-slices.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, Fragment, createRef, createContext, useContext, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback, useEffect, Fragment, createRef, createContext, useContext } from 'react';
 import Head from 'next/head';
 import { Box, BoemlyModal, Flex, IconButton, useMediaQuery, DefaultSectionContainer, Wrapper, DefaultSectionHeader, Button, Gradient, Spacer, SimpleGrid, Heading, Text, useToken, Grid, GridItem, BoemlyList, PortfolioCard, RichText, BoemlyAccordion, HeroCard, Shape, QuoteCard, Center, ShapesCard, TextCardWithIcon, ContactArea, ProjectCard, Tag, Link as Link$1, DatePersonPair, BoemlyThemeProvider, Badge, useDisclosure, Container, AvatarWithName, Divider, LabelNumberPair, BoemlyFormControl, InputRightAddon, LabelTextPair } from 'boemly';
 import Image from 'next/image';
@@ -721,45 +721,50 @@ var FullScreenImage = function FullScreenImage(_ref) {
   var images = _ref.images,
     isOpen = _ref.isOpen,
     onClose = _ref.onClose,
-    openIndex = _ref.openIndex;
-  var _useState = 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 = useRef(null);
   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 = useMemo(function () {
+    return currentIndex < images.length - 1;
+  }, [currentIndex, images.length]);
+  var canMoveLeft = useMemo(function () {
+    return currentIndex !== 0;
+  }, [currentIndex]);
+  var onRight = 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 = useCallback(function () {
+    return canMoveLeft && setCurrentIndex && setCurrentIndex(function (c) {
+      return c - 1;
     });
-  };
+  }, [canMoveLeft]);
   useKey('ArrowRight', onRight, {}, [onRight]);
   useKey('ArrowLeft', onLeft, {}, [onLeft]);
   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]);
   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.createElement(BoemlyModal, {
-    onClose: onCloseLocal,
+    onClose: onClose,
     isOpen: isOpen,
     title: "",
     trigger: "",
@@ -3326,7 +3331,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);