ublo-lib 1.31.43 → 1.31.44

package/es/common/components/carousel.js

@@ -2,364 +2,309 @@ import * as React from "react";
 import classNames from "classnames";
 import { useUbloContext } from "ublo/with-ublo";
 import * as Icons from "dt-design-system/es/icons";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const TARGETS = "section[data-class]";
 const UNDRAGGABLE_TAGS = "img, a, button";
 export default React.memo(Carousel);
-function Carousel({
-  delay = 4000,
-  fade = false,
-  controls,
-  dots,
-  thumbnails,
-  alwaysShowControls,
-  allowDragOnDesktop,
-  children,
-  onChange
-}) {
-  const carouselRef = React.useRef();
-  const {
-    cmsMode,
-    lang,
-    path
-  } = useUbloContext();
-  const [sections, setSections] = React.useState([]);
-  const [current, setCurrent] = React.useState(0);
-  const [touchStartPosition, setTouchStartPosition] = React.useState();
-  const [dragging, setDragging] = React.useState(0);
-  const editing = cmsMode === "editing";
-  const draggingAllowed = !editing && allowDragOnDesktop;
-  const count = sections.length;
-  const showNextArrow = current < count - 1;
-  const showPrevArrow = current !== 0;
-  const next = React.useCallback(e => {
-    e?.stopPropagation();
-    setCurrent(euclideanModulo(current + 1, count));
-  }, [current, count]);
-  const prev = React.useCallback(e => {
-    e?.stopPropagation();
-    setCurrent(euclideanModulo(current - 1, count));
-  }, [current, count]);
-  const onTouchStart = e => {
-    if (fade) return;
-    const {
-      type
-    } = e;
-    const mousedown = type === "mousedown";
-    const cancel = !draggingAllowed && mousedown;
-    if (cancel || touchStartPosition || !mousedown && !e.targetTouches?.length) {
-      const carousel = carouselRef.current;
-      const inner = carousel.firstElementChild;
-      inner.style.transform = `translateX(${-current * 100}%)`;
-      inner.style.removeProperty("transition");
-      setDragging(undefined);
-      setTouchStartPosition(undefined);
-      return;
-    }
-    const {
-      clientX: startX,
-      clientY: startY
-    } = mousedown ? e : e.targetTouches[0];
-    setTouchStartPosition({
-      startX,
-      startY
-    });
-  };
-  const onTouchMove = e => {
-    if (fade) return;
-    const {
-      type
-    } = e;
-    const mousemove = type === "mousemove";
-    const cancel = !draggingAllowed && mousemove;
-    if (!touchStartPosition || cancel || !mousemove && !e.targetTouches?.length) {
-      setTouchStartPosition(undefined);
-      return;
-    }
-    const {
-      startX
-    } = touchStartPosition;
-    const {
-      clientX: endX
-    } = mousemove ? e : e.targetTouches[0];
-    const deltaX = startX - endX;
-    const operator = deltaX > 0 ? "-" : "+";
-    const carousel = carouselRef.current;
-    const inner = carousel.firstElementChild;
-    const transform = `translateX(calc(${-current * 100}% ${operator} ${Math.abs(deltaX)}px))`;
-    Object.assign(inner.style, {
-      transform,
-      transition: "none"
-    });
-    setDragging(deltaX);
-  };
-  const onTouchEnd = e => {
-    if (fade) return;
-    const {
-      type
-    } = e;
-    const mouseup = type === "mouseup";
-    const cancel = !draggingAllowed && mouseup;
-    setDragging(undefined);
-    const carousel = carouselRef.current;
-    const inner = carousel.firstElementChild;
-    if (!touchStartPosition || cancel || !mouseup && !e.changedTouches?.length) {
-      inner.style.transform = `translateX(${-current * 100}%)`;
-      inner.style.removeProperty("transition");
-      setTouchStartPosition(undefined);
-      return;
-    }
-    inner.style.transform = `translateX(${-current * 100}%)`;
-    inner.style.removeProperty("transition");
-    const {
-      startX,
-      startY
-    } = touchStartPosition;
-    const {
-      clientX: endX,
-      clientY: endY
-    } = mouseup ? e : e.changedTouches[0];
-    const deltaX = Math.abs(startX - endX);
-    const deltaY = Math.abs(startY - endY);
-    if (deltaX < 80 && deltaX < deltaY) {
-      inner.style.transform = `translateX(${-current * 100}%)`;
-      inner.style.removeProperty("transition");
-      setTouchStartPosition(undefined);
-      return;
-    }
-    if (startX < endX && current > 0) prev();
-    if (startX > endX && current < count - 1) next();
-    setTouchStartPosition(undefined);
-  };
-  const getSections = React.useCallback(() => {
-    const carousel = carouselRef.current;
-    const sections = carousel.querySelectorAll(TARGETS);
-    const visibleSections = Array.from(sections).filter(section => {
-      return window.getComputedStyle(section).display !== "none";
-    });
-    return visibleSections;
-  }, []);
-  const updateSections = React.useCallback(() => {
-    const sections = getSections();
-    setSections(sections);
-  }, [getSections]);
-  React.useEffect(() => {
-    const zone = carouselRef.current?.querySelector(".cms");
-    if (zone) {
-      zone.addEventListener("ublo-section-created", updateSections);
-      zone.addEventListener("ublo-section-pasted", updateSections);
-      zone.addEventListener("ublo-section-removed", updateSections);
-      return () => {
-        zone.removeEventListener("ublo-section-removed", updateSections);
-        zone.removeEventListener("ublo-section-pasted", updateSections);
-        zone.removeEventListener("ublo-section-created", updateSections);
-      };
-    }
-  }, [updateSections]);
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    const inner = carousel.firstElementChild;
-    const sections = getSections();
-    const undraggableElements = Array.from(carousel.querySelectorAll(UNDRAGGABLE_TAGS));
-    setSections(sections);
-    if (!editing) {
-      sections.forEach((section, index) => {
-        const anchors = Array.from(section.querySelectorAll("a"));
-        anchors.forEach(anchor => {
-          anchor.setAttribute("tabindex", current === index ? "0" : "-1");
+function Carousel({ delay = 4000, fade = false, controls, dots, thumbnails, alwaysShowControls, allowDragOnDesktop, children, onChange, }) {
+    const carouselRef = React.useRef();
+    const { cmsMode, lang, path } = useUbloContext();
+    const [sections, setSections] = React.useState([]);
+    const [current, setCurrent] = React.useState(0);
+    const [touchStartPosition, setTouchStartPosition] = React.useState();
+    const [dragging, setDragging] = React.useState(0);
+    const editing = cmsMode === "editing";
+    const draggingAllowed = !editing && allowDragOnDesktop;
+    const count = sections.length;
+    const showNextArrow = current < count - 1;
+    const showPrevArrow = current !== 0;
+    const next = React.useCallback((e) => {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setCurrent(euclideanModulo(current + 1, count));
+    }, [current, count]);
+    const prev = React.useCallback((e) => {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        setCurrent(euclideanModulo(current - 1, count));
+    }, [current, count]);
+    const onTouchStart = (e) => {
+        var _a;
+        if (fade)
+            return;
+        const { type } = e;
+        const mousedown = type === "mousedown";
+        const cancel = !draggingAllowed && mousedown;
+        if (cancel ||
+            touchStartPosition ||
+            (!mousedown && !((_a = e.targetTouches) === null || _a === void 0 ? void 0 : _a.length))) {
+            const carousel = carouselRef.current;
+            const inner = carousel.firstElementChild;
+            inner.style.transform = `translateX(${-current * 100}%)`;
+            inner.style.removeProperty("transition");
+            setDragging(undefined);
+            setTouchStartPosition(undefined);
+            return;
+        }
+        const { clientX: startX, clientY: startY } = mousedown
+            ? e
+            : e.targetTouches[0];
+        setTouchStartPosition({ startX, startY });
+    };
+    const onTouchMove = (e) => {
+        var _a;
+        if (fade)
+            return;
+        const { type } = e;
+        const mousemove = type === "mousemove";
+        const cancel = !draggingAllowed && mousemove;
+        if (!touchStartPosition ||
+            cancel ||
+            (!mousemove && !((_a = e.targetTouches) === null || _a === void 0 ? void 0 : _a.length))) {
+            setTouchStartPosition(undefined);
+            return;
+        }
+        const { startX } = touchStartPosition;
+        const { clientX: endX } = mousemove ? e : e.targetTouches[0];
+        const deltaX = startX - endX;
+        const operator = deltaX > 0 ? "-" : "+";
+        const carousel = carouselRef.current;
+        const inner = carousel.firstElementChild;
+        const transform = `translateX(calc(${-current * 100}% ${operator} ${Math.abs(deltaX)}px))`;
+        Object.assign(inner.style, {
+            transform,
+            transition: "none",
         });
-      });
-      undraggableElements.forEach(preventDrag);
-    }
-    if (!fade || editing) {
-      sections.forEach((section, index) => {
-        show(section);
-        if (!editing && current === index) {
-          section.setAttribute("data-current", "");
-        } else {
-          section.removeAttribute("data-current");
+        setDragging(deltaX);
+    };
+    const onTouchEnd = (e) => {
+        var _a;
+        if (fade)
+            return;
+        const { type } = e;
+        const mouseup = type === "mouseup";
+        const cancel = !draggingAllowed && mouseup;
+        setDragging(undefined);
+        const carousel = carouselRef.current;
+        const inner = carousel.firstElementChild;
+        if (!touchStartPosition ||
+            cancel ||
+            (!mouseup && !((_a = e.changedTouches) === null || _a === void 0 ? void 0 : _a.length))) {
+            inner.style.transform = `translateX(${-current * 100}%)`;
+            inner.style.removeProperty("transition");
+            setTouchStartPosition(undefined);
+            return;
         }
-      });
-      inner.style.transform = `translateX(${-current * 100}%)`;
-      inner.style.removeProperty("transition");
-    } else {
-      undraggableElements.forEach(enableDrag);
-      sections.forEach((section, index) => {
-        if (current === index) {
-          show(section);
-          section.setAttribute("data-current", "");
-        } else {
-          section.removeAttribute("data-current");
-          Object.assign(section.style, {
-            opacity: 0,
-            pointerEvents: "none",
-            touchAction: "none"
-          });
+        inner.style.transform = `translateX(${-current * 100}%)`;
+        inner.style.removeProperty("transition");
+        const { startX, startY } = touchStartPosition;
+        const { clientX: endX, clientY: endY } = mouseup ? e : e.changedTouches[0];
+        const deltaX = Math.abs(startX - endX);
+        const deltaY = Math.abs(startY - endY);
+        if (deltaX < 80 && deltaX < deltaY) {
+            inner.style.transform = `translateX(${-current * 100}%)`;
+            inner.style.removeProperty("transition");
+            setTouchStartPosition(undefined);
+            return;
         }
-      });
-      if (fade) inner.style.removeProperty("transform");
-    }
-  }, [current, editing, fade, getSections, lang, path]);
-  const onUndraggableElementClick = React.useCallback(e => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-  React.useEffect(() => {
-    if (typeof onChange === "function") {
-      onChange(current);
-    }
-  }, [current, onChange]);
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    const inner = carousel.firstElementChild;
-    const undraggableElements = Array.from(inner.querySelectorAll(UNDRAGGABLE_TAGS));
-    if (dragging) {
-      undraggableElements.forEach(element => element.addEventListener("click", onUndraggableElementClick));
-    } else {
-      undraggableElements.forEach(element => setTimeout(() => element.removeEventListener("click", onUndraggableElementClick), 100));
-    }
-  }, [dragging, onUndraggableElementClick]);
-  useInterval(() => {
-    if (!editing) next();
-  }, delay, current, dragging);
-  const classes = classNames("carousel", {
-    carousel__fade: fade && !editing,
-    carousel__editing: editing
-  });
-  const eventHandlers = {
-    onMouseDown: onTouchStart,
-    onTouchStart,
-    onMouseMove: onTouchMove,
-    onTouchMove,
-    onMouseUp: onTouchEnd,
-    onTouchEnd,
-    onMouseLeave: onTouchEnd
-  };
-  return _jsxs("div", {
-    ref: carouselRef,
-    className: classes,
-    ...eventHandlers,
-    children: [children, (editing || controls && showPrevArrow || alwaysShowControls) && _jsx("button", {
-      className: "carousel--prev",
-      onClick: prev,
-      disabled: alwaysShowControls && !showPrevArrow,
-      "aria-label": "Pr\xE9cedent / Previous",
-      children: _jsx(Icons.ArrowLeft, {
-        className: "carousel--icon"
-      })
-    }), (editing || controls && showNextArrow || alwaysShowControls) && _jsx("button", {
-      className: "carousel--next",
-      onClick: next,
-      disabled: alwaysShowControls && !showNextArrow,
-      "aria-label": "Suivant / Next",
-      children: _jsx(Icons.ArrowRight, {
-        className: "carousel--icon"
-      })
-    }), dots && _jsx(Dots, {
-      count: count,
-      current: current,
-      setCurrent: setCurrent,
-      sections: sections
-    }), thumbnails && count > 1 && _jsx(Thumbnails, {
-      carouselRef: carouselRef,
-      count: count,
-      current: current,
-      setCurrent: setCurrent,
-      sections: sections
-    })]
-  });
-}
-function Dots({
-  count,
-  current,
-  setCurrent
-}) {
-  const length = [...new Array(count)];
-  return _jsx("div", {
-    className: "carousel__dots",
-    children: length.map((_, i) => {
-      const updateCurrent = e => {
+        if (startX < endX && current > 0)
+            prev();
+        if (startX > endX && current < count - 1)
+            next();
+        setTouchStartPosition(undefined);
+    };
+    const getSections = React.useCallback(() => {
+        const carousel = carouselRef.current;
+        const sections = carousel.querySelectorAll(TARGETS);
+        const visibleSections = Array.from(sections).filter((section) => {
+            return window.getComputedStyle(section).display !== "none";
+        });
+        return visibleSections;
+    }, []);
+    const updateSections = React.useCallback(() => {
+        const sections = getSections();
+        setSections(sections);
+    }, [getSections]);
+    React.useEffect(() => {
+        var _a;
+        const zone = (_a = carouselRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(".cms");
+        if (zone) {
+            zone.addEventListener("ublo-section-created", updateSections);
+            zone.addEventListener("ublo-section-pasted", updateSections);
+            zone.addEventListener("ublo-section-removed", updateSections);
+            return () => {
+                zone.removeEventListener("ublo-section-removed", updateSections);
+                zone.removeEventListener("ublo-section-pasted", updateSections);
+                zone.removeEventListener("ublo-section-created", updateSections);
+            };
+        }
+    }, [updateSections]);
+    React.useEffect(() => {
+        const carousel = carouselRef.current;
+        const inner = carousel.firstElementChild;
+        const sections = getSections();
+        const undraggableElements = Array.from(carousel.querySelectorAll(UNDRAGGABLE_TAGS));
+        setSections(sections);
+        if (!editing) {
+            sections.forEach((section, index) => {
+                const anchors = Array.from(section.querySelectorAll("a"));
+                anchors.forEach((anchor) => {
+                    anchor.setAttribute("tabindex", current === index ? "0" : "-1");
+                });
+            });
+            undraggableElements.forEach(preventDrag);
+        }
+        if (!fade || editing) {
+            sections.forEach((section, index) => {
+                show(section);
+                if (!editing && current === index) {
+                    section.setAttribute("data-current", "");
+                }
+                else {
+                    section.removeAttribute("data-current");
+                }
+            });
+            inner.style.transform = `translateX(${-current * 100}%)`;
+            inner.style.removeProperty("transition");
+        }
+        else {
+            undraggableElements.forEach(enableDrag);
+            sections.forEach((section, index) => {
+                if (current === index) {
+                    show(section);
+                    section.setAttribute("data-current", "");
+                }
+                else {
+                    section.removeAttribute("data-current");
+                    Object.assign(section.style, {
+                        opacity: 0,
+                        pointerEvents: "none",
+                        touchAction: "none",
+                    });
+                }
+            });
+            if (fade)
+                inner.style.removeProperty("transform");
+        }
+    }, [current, editing, fade, getSections, lang, path]);
+    const onUndraggableElementClick = React.useCallback((e) => {
+        e.preventDefault();
         e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__dot", {
-        "carousel__dot--current": i === current
-      });
-      return _jsx("button", {
-        className: classes,
-        onClick: updateCurrent,
-        "aria-label": i
-      }, i);
-    })
-  });
+    }, []);
+    React.useEffect(() => {
+        if (typeof onChange === "function") {
+            onChange(current);
+        }
+    }, [current, onChange]);
+    React.useEffect(() => {
+        const carousel = carouselRef.current;
+        const inner = carousel.firstElementChild;
+        const undraggableElements = Array.from(inner.querySelectorAll(UNDRAGGABLE_TAGS));
+        if (dragging) {
+            undraggableElements.forEach((element) => element.addEventListener("click", onUndraggableElementClick));
+        }
+        else {
+            undraggableElements.forEach((element) => setTimeout(() => element.removeEventListener("click", onUndraggableElementClick), 100));
+        }
+    }, [dragging, onUndraggableElementClick]);
+    useInterval(() => {
+        if (!editing)
+            next();
+    }, delay, current, dragging);
+    const classes = classNames("carousel", {
+        carousel__fade: fade && !editing,
+        carousel__editing: editing,
+    });
+    const eventHandlers = {
+        onMouseDown: onTouchStart,
+        onTouchStart,
+        onMouseMove: onTouchMove,
+        onTouchMove,
+        onMouseUp: onTouchEnd,
+        onTouchEnd,
+        onMouseLeave: onTouchEnd,
+    };
+    return (<div ref={carouselRef} className={classes} {...eventHandlers}>
+      {children}
+      {(editing || (controls && showPrevArrow) || alwaysShowControls) && (<button className="carousel--prev" onClick={prev} disabled={alwaysShowControls && !showPrevArrow} aria-label="Précedent / Previous">
+          <Icons.ArrowLeft className="carousel--icon"/>
+        </button>)}
+      {(editing || (controls && showNextArrow) || alwaysShowControls) && (<button className="carousel--next" onClick={next} disabled={alwaysShowControls && !showNextArrow} aria-label="Suivant / Next">
+          <Icons.ArrowRight className="carousel--icon"/>
+        </button>)}
+      {dots && (<Dots count={count} current={current} setCurrent={setCurrent} sections={sections}/>)}
+      {thumbnails && count > 1 && (<Thumbnails carouselRef={carouselRef} count={count} current={current} setCurrent={setCurrent} sections={sections}/>)}
+    </div>);
 }
-function Thumbnails({
-  carouselRef,
-  current,
-  setCurrent,
-  sections
-}) {
-  const [thumbnails, setThumbnails] = React.useState([]);
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    if (carousel) {
-      if (sections.length) {
-        const images = Array.from(sections).reduce((acc, section) => {
-          const image = section.querySelector("img");
-          if (!image?.src) return acc;
-          return [...acc, image.src];
-        }, []);
-        setThumbnails(images);
-      }
-    }
-  }, [carouselRef, sections]);
-  if (!thumbnails.length) return null;
-  return _jsx("div", {
-    className: "carousel__thumbnails",
-    children: thumbnails.map((thumbnail, i) => {
-      const updateCurrent = e => {
-        e.stopPropagation();
-        setCurrent(i);
-      };
-      const classes = classNames("carousel__thumbnail", {
-        "carousel__thumbnail--current": i === current
-      });
-      return _jsx("input", {
-        type: "image",
-        className: classes,
-        src: thumbnail,
-        onClick: updateCurrent
-      }, i);
-    })
-  });
+function Dots({ count, current, setCurrent }) {
+    const length = [...new Array(count)];
+    return (<div className="carousel__dots">
+      {length.map((_, i) => {
+            const updateCurrent = (e) => {
+                e.stopPropagation();
+                setCurrent(i);
+            };
+            const classes = classNames("carousel__dot", {
+                "carousel__dot--current": i === current,
+            });
+            return (<button key={i} className={classes} onClick={updateCurrent} aria-label={i}/>);
+        })}
+    </div>);
+}
+function Thumbnails({ carouselRef, current, setCurrent, sections }) {
+    const [thumbnails, setThumbnails] = React.useState([]);
+    React.useEffect(() => {
+        const carousel = carouselRef.current;
+        if (carousel) {
+            if (sections.length) {
+                const images = Array.from(sections).reduce((acc, section) => {
+                    const image = section.querySelector("img");
+                    if (!(image === null || image === void 0 ? void 0 : image.src))
+                        return acc;
+                    return [...acc, image.src];
+                }, []);
+                setThumbnails(images);
+            }
+        }
+    }, [carouselRef, sections]);
+    if (!thumbnails.length)
+        return null;
+    return (<div className="carousel__thumbnails">
+      {thumbnails.map((thumbnail, i) => {
+            const updateCurrent = (e) => {
+                e.stopPropagation();
+                setCurrent(i);
+            };
+            const classes = classNames("carousel__thumbnail", {
+                "carousel__thumbnail--current": i === current,
+            });
+            return (<input key={i} type="image" className={classes} src={thumbnail} onClick={updateCurrent}/>);
+        })}
+    </div>);
 }
 function euclideanModulo(a, b) {
-  const m = a % b;
-  return m < 0 ? b < 0 ? m - b : m + b : m;
+    const m = a % b;
+    return m < 0 ? (b < 0 ? m - b : m + b) : m;
 }
 function preventDrag(element) {
-  element.setAttribute("draggable", false);
+    element.setAttribute("draggable", false);
 }
 function enableDrag(element) {
-  element.removeAttribute("draggable");
+    element.removeAttribute("draggable");
 }
 function show(section) {
-  const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
-  propertiesToRemove.forEach(property => section.style.removeProperty(property));
+    const propertiesToRemove = ["opacity", "pointer-events", "touch-action"];
+    propertiesToRemove.forEach((property) => section.style.removeProperty(property));
 }
 function useInterval(callback, delay, current, dragging) {
-  const savedCallback = React.useRef();
-  React.useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-  React.useEffect(() => {
-    function tick() {
-      savedCallback.current();
-    }
-    if (!dragging && delay !== null && delay !== 0) {
-      const interval = setInterval(tick, delay);
-      return () => clearInterval(interval);
-    }
-  }, [current, delay, dragging]);
-}
+    const savedCallback = React.useRef();
+    React.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    React.useEffect(() => {
+        function tick() {
+            savedCallback.current();
+        }
+        if (!dragging && delay !== null && delay !== 0) {
+            const interval = setInterval(tick, delay);
+            return () => clearInterval(interval);
+        }
+    }, [current, delay, dragging]);
+}