ublo-lib 1.7.2 → 1.7.4

package/es/common/components/carousel.js

@@ -58,13 +58,14 @@ const Thumbnails = ({
   carouselRef,
   count,
   current,
-  setCurrent
+  setCurrent,
+  targets
 }) => {
   const [thumbnails, setThumbnails] = React.useState([]);
   React.useEffect(() => {
     const carousel = carouselRef.current;
     if (carousel) {
-      const sections = carousel.querySelectorAll("section[data-class]");
+      const sections = carousel.querySelectorAll(targets);
       if (sections.length) {
         const images = Array.from(sections).reduce((acc, section) => {
           const image = section.querySelector("img");
@@ -74,7 +75,7 @@ const Thumbnails = ({
         setThumbnails(images);
       }
     }
-  }, [carouselRef, count]);
+  }, [carouselRef, count, targets]);
   if (!count || !thumbnails.length) return null;
   return _jsx("div", {
     className: "carousel__thumbnails",
@@ -115,6 +116,7 @@ const Carousel = ({
   const [dragging, setDragging] = React.useState(0);
   const editing = cmsMode === "editing";
   const draggingAllowed = !editing && allowDragOnDesktop;
+  const targets = editing ? "section" : "section:not([data-hidden])";
   const showNextArrow = current < count - 1;
   const showPrevArrow = current !== 0;
   const next = React.useCallback(e => {
@@ -218,9 +220,9 @@ const Carousel = ({
   };
   const updateSectionCount = React.useCallback(() => {
     const carousel = carouselRef.current;
-    const sections = carousel.querySelectorAll("section");
+    const sections = carousel.querySelectorAll(targets);
     setCount(sections?.length || 0);
-  }, []);
+  }, [targets]);
   React.useEffect(() => {
     const zone = carouselRef.current?.querySelector(".cms");
     if (zone) {
@@ -231,7 +233,7 @@ const Carousel = ({
   React.useEffect(() => {
     const carousel = carouselRef.current;
     const inner = carousel.firstElementChild;
-    const sections = Array.from(carousel.querySelectorAll("section"));
+    const sections = Array.from(carousel.querySelectorAll(targets));
     const undraggableElements = Array.from(carousel.querySelectorAll(UNDRAGGABLE_TAGS));
     setCount(sections.length);
     if (!editing) {
@@ -271,7 +273,7 @@ const Carousel = ({
       });
       if (fade) inner.style.removeProperty("transform");
     }
-  }, [children, current, editing, fade, count]);
+  }, [current, editing, fade, targets]);
   const onUndraggableElementClick = React.useCallback(e => {
     e.preventDefault();
     e.stopPropagation();
@@ -324,11 +326,12 @@ const Carousel = ({
       count: count,
       current: current,
       setCurrent: setCurrent
-    }), thumbnails && _jsx(Thumbnails, {
+    }), thumbnails && count > 1 && _jsx(Thumbnails, {
       carouselRef: carouselRef,
       count: count,
       current: current,
-      setCurrent: setCurrent
+      setCurrent: setCurrent,
+      targets: targets
     })]
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "peerDependencies": {
     "dt-design-system": "^2.1.0",
     "next": "^12.0.0",