react-spring-carousel 3.0.0-beta067 → 3.0.0-beta070

package/dist/useSpringCarousel.js

@@ -0,0 +1,658 @@
+import { u as Ve, a as De, j as F } from "./useThumbsModule-db93025f.js";
+import { useSpring as qe, config as B, useIsomorphicLayoutEffect as ze } from "@react-spring/web";
+import { createContext as Be, useRef as v, useCallback as He, useEffect as N, useContext as Oe } from "react";
+import { useDrag as Xe } from "@use-gesture/react";
+import { u as Ye } from "./useFullscreenModule-55ea7b9d.js";
+import Je from "resize-observer-polyfill";
+import "screenfull";
+function tt({
+  items: n,
+  init: p = !0,
+  withThumbs: le,
+  thumbsSlideAxis: he = "x",
+  itemsPerSlide: se = 1,
+  slideType: k = "fixed",
+  gutter: R = 0,
+  withLoop: o = !1,
+  startEndGutter: C = 0,
+  carouselSlideAxis: u = "x",
+  disableGestures: ae = !1,
+  draggingSlideTreshold: U,
+  slideWhenThresholdIsReached: fe = !1,
+  freeScroll: c,
+  enableFreeScrollDrag: pe,
+  initialStartingPosition: Z,
+  prepareThumbsData: xe,
+  initialActiveItem: T = 0,
+  animateWhenActiveItemChange: ye = !0,
+  getControllerRef: _
+}) {
+  const b = se > n.length ? n.length : se, H = v(!1), O = v(U ?? 0), M = v("initial"), G = v("initial"), L = v(
+    "initial"
+  ), g = v(T), s = v(T === 0), l = v(
+    k === "fixed" && T === n.length - 1
+  ), a = v(null), h = v(null), A = v(!0), S = v(0), ee = v(0), f = v(0), Ie = v(o), Te = v(k), be = v(c), W = v(!1), X = He(() => o ? [
+    ...n.map((e) => ({
+      ...e,
+      id: `prev-repeated-item-${e.id}`
+    })),
+    ...n,
+    ...n.map((e) => ({
+      ...e,
+      id: `next-repeated-item-${e.id}`
+    }))
+  ] : [...n], [n, o])(), [$, x] = qe(
+    () => ({
+      val: 0,
+      pause: !p,
+      onChange: ({ value: e }) => {
+        c && a.current ? (u === "x" ? a.current.scrollLeft = Math.abs(e.val) : a.current.scrollTop = Math.abs(e.val), Q()) : h.current && (u === "x" ? h.current.style.transform = `translate3d(${e.val}px, 0px,0px)` : h.current.style.transform = `translate3d(0px,${e.val}px,0px)`);
+      }
+    }),
+    [c]
+  ), { emitEvent: Y, useListenToCustomEvent: J } = Ve(), { thumbsFragment: Me, handleScroll: we } = De({
+    withThumbs: !!le,
+    thumbsSlideAxis: he,
+    prepareThumbsData: xe,
+    items: n,
+    renderThumbFnProps: {
+      getIsActiveItem: ie,
+      getIsPrevItem: ue,
+      useListenToCustomEvent: J,
+      getIsNextItem: ce
+    }
+  }), { enterFullscreen: de, exitFullscreen: me, getIsFullscreen: ve } = Ye({
+    mainCarouselWrapperRef: a,
+    handleResize: () => K(),
+    onFullScreenChange: (e) => {
+      Y({
+        eventName: "onFullscreenChange",
+        isFullscreen: e
+      });
+    }
+  });
+  function Ce(e) {
+    return k === "fixed" && !c ? {
+      marginRight: `${e ? 0 : R}px`,
+      flex: `1 0 calc(100% / ${b} - ${R * (b - 1) / b}px)`
+    } : {
+      marginRight: `${e ? 0 : R}px`
+    };
+  }
+  function d() {
+    var r;
+    const e = (r = a.current) == null ? void 0 : r.querySelector(
+      ".use-spring-carousel-item"
+    );
+    if (!e)
+      throw Error("No carousel items available!");
+    return e.getBoundingClientRect()[u === "x" ? "width" : "height"] + R;
+  }
+  function P({
+    from: e,
+    to: r,
+    nextActiveItem: t,
+    immediate: i = !1,
+    slideMode: I
+  }) {
+    G.current = I, typeof t == "number" && (c || (g.current = t), Y({
+      eventName: "onSlideStartChange",
+      slideActionType: M.current,
+      slideMode: G.current,
+      nextItem: {
+        startReached: s.current,
+        endReached: l.current,
+        index: c ? -1 : g.current,
+        id: c ? "" : n[g.current].id
+      }
+    })), f.current = r, x.start({
+      immediate: i,
+      from: {
+        val: e
+      },
+      to: {
+        val: r
+      },
+      config: {
+        ...B.default,
+        velocity: $.val.velocity
+      },
+      onRest(D) {
+        !i && D.finished && Y({
+          eventName: "onSlideChange",
+          slideActionType: M.current,
+          slideMode: G.current,
+          currentItem: {
+            startReached: s.current,
+            endReached: l.current,
+            index: c ? -1 : g.current,
+            id: c ? "" : n[g.current].id
+          }
+        });
+      }
+    }), le && !i && we(g.current);
+  }
+  function m() {
+    var e;
+    return o ? d() * n.length : Math.round(
+      Number(
+        (e = h.current) == null ? void 0 : e[u === "x" ? "scrollWidth" : "scrollHeight"]
+      ) - h.current.getBoundingClientRect()[u === "x" ? "width" : "height"] - C * 2
+    );
+  }
+  function ke() {
+    const e = `calc(100% - ${C * 2}px)`;
+    return {
+      width: u === "x" ? e : "100%",
+      height: u === "y" ? e : "100%"
+    };
+  }
+  function te() {
+    var r;
+    const e = (r = h.current) == null ? void 0 : r.querySelector(
+      ".use-spring-carousel-item"
+    );
+    if (!e)
+      throw Error("No carousel items available!");
+    return e.getBoundingClientRect()[u === "x" ? "width" : "height"] + R;
+  }
+  function re(e) {
+    const r = u === "x" ? "left" : "top", t = h.current;
+    t && (o ? (t.style.top = "0px", t.style.left = "0px", t.style[r] = `-${e - C}px`, s.current = !1, l.current = !1) : (t.style.left = "0px", t.style.top = "0px"));
+  }
+  function K(e = !1) {
+    if (h.current && e && (h.current.style.transform = "translate3d(0px, 0px,0px)", h.current.style.left = "0", h.current.style.top = "0"), k === "fixed" && re(
+      Z === "center" ? te() * n.length - d() * Math.round((b - 1) / 2) : Z === "end" ? te() * n.length - d() * Math.round(b - 1) : te() * n.length
+    ), k === "fluid") {
+      if (l.current && m() !== Math.abs(f.current) && !o) {
+        const r = -m();
+        f.current = r, x.start({
+          immediate: !0,
+          val: f.current
+        });
+        return;
+      }
+      if (Math.abs(f.current) > 0 && m() !== Math.abs(f.current) && !o && !c && L.current === "backward") {
+        const r = S.current - m(), t = f.current + r;
+        return x.start({
+          immediate: !0,
+          val: t
+        }), () => {
+          f.current = t;
+        };
+      }
+      return;
+    }
+    if (!c && k === "fixed") {
+      const r = -(d() * g.current);
+      if (Math.abs(r) > m() && !o) {
+        const t = -m();
+        l.current = !0, f.current = t, x.start({
+          immediate: !0,
+          val: f.current
+        });
+      } else
+        f.current = r, x.start({
+          immediate: !0,
+          val: r
+        });
+      setTimeout(() => {
+        H.current = !1;
+      }, 0);
+    }
+  }
+  function w() {
+    return c && a.current ? a.current[u === "x" ? "scrollLeft" : "scrollTop"] : $.val.get();
+  }
+  function z(e, r) {
+    if (c && e === "next") {
+      const t = f.current + d();
+      return t > m() ? m() : t;
+    }
+    if (c && e === "prev") {
+      const t = f.current - d();
+      return t < 0 ? 0 : t;
+    }
+    return e === "next" ? typeof r == "number" ? -(r * d()) : f.current - d() : typeof r == "number" ? -(r * d()) : f.current + d();
+  }
+  function j({ type: e, index: r, immediate: t }) {
+    if (!p || W.current || s.current && !o)
+      return;
+    l.current && (L.current = "backward"), M.current = "prev", l.current = !1;
+    const i = typeof r == "number" ? r : g.current - 1;
+    if (c && Q(), !o) {
+      const I = c ? z("prev", r) - d() / 3 < 0 : z("prev", r) + d() / 3 > 0;
+      if (s.current)
+        return;
+      if (I) {
+        s.current = !0, l.current = !1, P({
+          slideMode: e,
+          from: w(),
+          to: 0,
+          nextActiveItem: 0,
+          immediate: t
+        });
+        return;
+      }
+    }
+    if (o && (s.current || i < 0)) {
+      s.current = !1, l.current = !0, P({
+        slideMode: e,
+        from: w() - d() * n.length,
+        to: -(d() * n.length) + d(),
+        nextActiveItem: n.length - 1,
+        immediate: t
+      });
+      return;
+    }
+    i === 0 && (s.current = !0), (i === n.length - 1 || i === -1) && (l.current = !0), P({
+      slideMode: e,
+      from: w(),
+      to: z("prev", r),
+      nextActiveItem: i,
+      immediate: t
+    });
+  }
+  function E({ type: e, index: r, immediate: t }) {
+    if (!p || W.current || l.current && !o)
+      return;
+    s.current && (L.current = "forward"), M.current = "next", s.current = !1;
+    const i = r || g.current + 1;
+    if (c && Q(), !o) {
+      const I = Math.abs(z("next", r)) > m() - d() / 3;
+      if (l.current)
+        return;
+      if (I) {
+        s.current = !1, l.current = !0, P({
+          slideMode: e,
+          from: w(),
+          to: c ? m() : -m(),
+          nextActiveItem: i,
+          immediate: t
+        });
+        return;
+      }
+    }
+    if (o && (l.current || i > n.length - 1)) {
+      l.current = !1, s.current = !0, P({
+        slideMode: e,
+        from: w() + d() * n.length,
+        to: 0,
+        nextActiveItem: 0,
+        immediate: t
+      });
+      return;
+    }
+    i === 0 && (s.current = !0), i === n.length - 1 && (l.current = !0), P({
+      slideMode: e,
+      from: w(),
+      to: z("next", r),
+      nextActiveItem: i,
+      immediate: t
+    });
+  }
+  function $e() {
+    U ? O.current = U : O.current = Math.floor(d() / 2 / 2);
+  }
+  function ge() {
+    !A.current && h.current && (S.current = m(), Ie.current = o, Te.current = k, be.current = c, ee.current = window.innerWidth, f.current = 0, ne({ id: 0, immediate: !0, shouldReset: !0 }), $e(), K());
+  }
+  const Fe = Xe(
+    (e) => {
+      const r = e.dragging, t = e.offset[u === "x" ? 0 : 1], i = e.movement[u === "x" ? 0 : 1], I = e.direction[u === "x" ? 0 : 1], D = i > O.current, q = i < -O.current, Ee = m();
+      if (r) {
+        if (I > 0 ? M.current = "prev" : M.current = "next", Y({
+          ...e,
+          eventName: "onDrag",
+          slideActionType: M.current
+        }), c) {
+          if (t > 0) {
+            x.start({
+              from: {
+                val: w()
+              },
+              to: {
+                val: 0
+              },
+              config: {
+                velocity: e.velocity,
+                friction: 50,
+                tension: 1e3
+              }
+            }), e.cancel();
+            return;
+          }
+          x.start({
+            from: {
+              val: w()
+            },
+            to: {
+              val: -t
+            },
+            config: {
+              velocity: e.velocity,
+              friction: 50,
+              tension: 1e3
+            }
+          });
+          return;
+        }
+        x.start({
+          val: t,
+          config: {
+            velocity: e.velocity,
+            friction: 50,
+            tension: 1e3
+          }
+        }), fe && q ? (E({ type: "drag" }), e.cancel()) : fe && D && (j({ type: "drag" }), e.cancel()), Ee - Math.abs(t) < -(d() * 2) && e.cancel();
+        return;
+      }
+      if (e.last && c && t > 0) {
+        x.start({
+          from: {
+            val: w()
+          },
+          to: {
+            val: 0
+          },
+          config: {
+            velocity: e.velocity,
+            friction: 50,
+            tension: 1e3
+          }
+        });
+        return;
+      }
+      e.last && !e.canceled && c && (M.current === "prev" && j({ type: "drag" }), M.current === "next" && E({ type: "drag" })), e.last && !e.canceled && !c && (q ? !o && l.current ? x.start({
+        val: -m(),
+        config: {
+          ...B.default,
+          velocity: e.velocity
+        }
+      }) : E({ type: "drag" }) : D ? !o && s.current ? x.start({
+        val: 0,
+        config: {
+          ...B.default,
+          velocity: e.velocity
+        }
+      }) : j({ type: "drag" }) : x.start({
+        val: f.current,
+        config: {
+          ...B.default,
+          velocity: e.velocity
+        }
+      })), e.last && e.canceled && x.start({
+        val: f.current,
+        config: {
+          ...B.default,
+          velocity: e.velocity
+        }
+      });
+    },
+    {
+      enabled: p && !ae && !c || !!c && !!pe,
+      axis: u,
+      from: () => c && a.current ? [
+        -a.current.scrollLeft,
+        -a.current.scrollTop
+      ] : u === "x" ? [$.val.get(), $.val.get()] : [$.val.get(), $.val.get()]
+    }
+  );
+  function Ne() {
+    return c ? u === "x" ? {
+      overflowX: "auto"
+    } : {
+      overflowY: "auto"
+    } : {};
+  }
+  function Q() {
+    a.current && (f.current = a.current[u === "x" ? "scrollLeft" : "scrollTop"], a.current[u === "x" ? "scrollLeft" : "scrollTop"] === 0 && (s.current = !0, l.current = !1), a.current[u === "x" ? "scrollLeft" : "scrollTop"] > 0 && a.current[u === "x" ? "scrollLeft" : "scrollTop"] < m() && (s.current = !1, l.current = !1), a.current[u === "x" ? "scrollLeft" : "scrollTop"] === m() && (s.current = !1, l.current = !0));
+  }
+  function Re() {
+    return c ? {
+      onWheel() {
+        $.val.stop(), Q();
+      }
+    } : {};
+  }
+  function V(e, r) {
+    let t = 0;
+    if (typeof e == "string" ? t = n.findIndex((i) => i.id === e) : t = e, t < 0 || t >= n.length) {
+      if (r)
+        throw new Error(r);
+      console.error(
+        `The item doesn't exist; check that the id provided - ${e} - is correct.`
+      ), t = -1;
+    }
+    return t;
+  }
+  function ne({
+    id: e,
+    immediate: r,
+    shouldReset: t,
+    type: i
+  }) {
+    if (!p || W.current)
+      return;
+    s.current = !1, l.current = !1;
+    const I = V(
+      e,
+      "The item you want to slide to doesn't exist; check the provided id."
+    );
+    if (I === g.current && !t)
+      return;
+    const D = V(n[g.current].id), q = V(n[I].id);
+    q > D ? E({
+      type: i || t ? "initial" : "click",
+      index: q,
+      immediate: r
+    }) : j({
+      type: i || t ? "initial" : "click",
+      index: q,
+      immediate: r
+    });
+  }
+  function ce(e) {
+    const r = V(e, "The item doesn't exist; check the provided id."), t = g.current;
+    return o && t === n.length - 1 ? r === 0 : r === t + 1;
+  }
+  function ue(e) {
+    const r = V(e, "The item doesn't exist; check the provided id."), t = g.current;
+    return o && t === 0 ? r === n.length - 1 : r === t - 1;
+  }
+  function ie(e) {
+    return V(
+      e,
+      "The item you want to check doesn't exist; check the provided id."
+    ) === g.current;
+  }
+  function We() {
+    return ae ? "unset" : u === "x" ? "pan-y" : "pan-x";
+  }
+  const y = c ? {
+    useListenToCustomEvent: J,
+    enterFullscreen: de,
+    exitFullscreen: me,
+    getIsFullscreen: ve,
+    slideToPrevItem: (e = !0) => {
+      j({
+        type: "click",
+        immediate: !e
+      });
+    },
+    slideToNextItem: (e = !0) => {
+      E({
+        type: "click",
+        immediate: !e
+      });
+    }
+  } : {
+    useListenToCustomEvent: J,
+    enterFullscreen: de,
+    exitFullscreen: me,
+    getIsFullscreen: ve,
+    slideToPrevItem: (e = !0) => {
+      j({
+        type: "click",
+        immediate: !e
+      });
+    },
+    slideToNextItem: (e = !0) => {
+      E({
+        type: "click",
+        immediate: !e
+      });
+    },
+    slideToItem: (e, r = !0) => {
+      ne({ id: e, immediate: !r });
+    },
+    getIsNextItem: ce,
+    getIsPrevItem: ue,
+    getIsActiveItem: ie
+  };
+  ze(() => {
+    h.current && p && (H.current = !0, ge());
+  }, [p]), N(() => {
+    g.current !== T && ne({
+      id: T,
+      immediate: !ye
+    });
+  }, [T]), N(() => {
+    if (p) {
+      if (T > n.length - 1)
+        throw new Error(
+          `initialActiveItem (${T}) is greater than the total quantity available items (${n.length}).`
+        );
+      b > n.length && console.warn(
+        `itemsPerSlide (${b}) is greater than the total quantity available items (${n.length}). Fallback to ${n.length})`
+      );
+    }
+  }, [T, n.length, b, p]), N(() => {
+    ee.current = window.innerWidth;
+  }, []), N(() => {
+    p && (H.current = !0, ge());
+  }, [Z, b, C, R, p, o]), N(() => {
+    if (!p)
+      return;
+    function e() {
+      document.hidden ? W.current = !0 : W.current = !1;
+    }
+    return document.addEventListener("visibilitychange", e), () => {
+      document.removeEventListener("visibilitychange", e);
+    };
+  }, [p]), N(() => {
+    if (a.current) {
+      let e;
+      const r = new Je(() => {
+        if (A.current) {
+          A.current = !1;
+          return;
+        }
+        if (!W.current && !H.current) {
+          ee.current = window.innerWidth;
+          const t = K();
+          window.clearTimeout(e), e = setTimeout(() => {
+            S.current = m(), typeof t == "function" && t();
+          }, 100);
+        }
+      });
+      return r.observe(a.current), () => {
+        r.disconnect();
+      };
+    }
+  }, [K, m]), N(() => {
+    _ && _({
+      slideToNextItem: y.slideToNextItem,
+      slideToPrevItem: y.slideToPrevItem,
+      slideToItem: y == null ? void 0 : y.slideToItem
+    });
+  }, [_, y.slideToItem, y.slideToNextItem, y.slideToPrevItem]);
+  const Pe = /* @__PURE__ */ F.jsx(oe.Provider, { value: y, children: Me }), je = /* @__PURE__ */ F.jsx(oe.Provider, { value: y, children: /* @__PURE__ */ F.jsx(
+    "div",
+    {
+      className: "use-spring-carousel-main-wrapper",
+      ref: a,
+      ...Re(),
+      style: {
+        display: "flex",
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        ...Ne()
+      },
+      children: /* @__PURE__ */ F.jsxs(
+        "div",
+        {
+          className: "use-spring-carousel-track-wrapper",
+          ref: h,
+          ...Fe(),
+          style: {
+            position: "relative",
+            display: "flex",
+            flexDirection: u === "x" ? "row" : "column",
+            touchAction: We(),
+            ...ke()
+          },
+          children: [
+            (c || !o) && C ? /* @__PURE__ */ F.jsx(
+              "div",
+              {
+                style: {
+                  flexShrink: 0,
+                  width: C
+                }
+              }
+            ) : null,
+            X.map((e, r) => /* @__PURE__ */ F.jsx(
+              "div",
+              {
+                className: "use-spring-carousel-item",
+                "data-testid": "use-spring-carousel-item-wrapper",
+                style: {
+                  display: "flex",
+                  position: "relative",
+                  flex: "1",
+                  ...Ce(
+                    r === X.findIndex(
+                      (t) => t.id === X[X.length - 1].id
+                    )
+                  )
+                },
+                children: typeof e.renderItem == "function" ? e.renderItem({
+                  getIsActiveItem: ie,
+                  getIsNextItem: ce,
+                  getIsPrevItem: ue,
+                  useListenToCustomEvent: J
+                }) : e.renderItem
+              },
+              `${e.id}-${r}`
+            )),
+            (c || !o) && C ? /* @__PURE__ */ F.jsx(
+              "div",
+              {
+                style: {
+                  flexShrink: 0,
+                  width: C
+                }
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  ) });
+  return { ...y, carouselFragment: je, thumbsFragment: Pe };
+}
+const oe = Be(
+  void 0
+);
+function rt() {
+  const n = Oe(oe);
+  if (!n)
+    throw new Error("useSpringCarouselContext must be used within the carousel.");
+  return n;
+}
+export {
+  tt as useSpringCarousel,
+  rt as useSpringCarouselContext
+};