@transkripid/flowbite-react/lib/components/Carousel/Carousel.mjs

Official React components built for Flowbite and Tailwind CSS - Transkrip.id fork

import { jsxs as $, jsx as s, Fragment as x } from "react/jsx-runtime";
import { c as A } from "react/compiler-runtime";
import { useRef as j, useState as M, useMemo as z, Children as P, cloneElement as q, useCallback as D, useEffect as I } from "react";
import { HiOutlineChevronLeft as B, HiOutlineChevronRight as G } from "react-icons/hi";
import J from "react-indiana-drag-scroll";
import { twMerge as N } from "tailwind-merge";
import { isClient as K } from "../../helpers/is-client.mjs";
import { mergeDeep as E } from "../../helpers/merge-deep.mjs";
import { getTheme as L } from "../../theme-store/index.mjs";
const Q = ({
  children: p,
  indicators: e = !0,
  leftControl: a,
  rightControl: c,
  slide: m = !0,
  draggable: n = !0,
  slideInterval: t,
  className: o,
  theme: l = {},
  onSlideChange: C = null,
  pauseOnHover: H = !1,
  ...F
}) => {
  const i = E(L().carousel, l), O = K() && navigator.userAgent.indexOf("IEMobile") !== -1, f = j(null), [d, R] = M(0), [g, W] = M(!1), [S, b] = M(!1), T = j(!1), u = z(() => P.map(p, (r) => q(r, {
    className: N(i.item.base, r.props.className)
  })), [p, i.item.base]), v = D((r) => () => {
    u && (r = (r + u.length) % u.length, f.current && (f.current.scrollLeft = f.current.clientWidth * r), R(r));
  }, [u]);
  I(() => {
    f.current && !g && f.current.scrollLeft !== 0 && R(Math.round(f.current.scrollLeft / f.current.clientWidth));
  }, [g]), I(() => {
    if (m && !(H && S)) {
      const r = setInterval(() => !g && v(d + 1)(), t ?? 3e3);
      return () => clearInterval(r);
    }
  }, [d, g, v, m, t, H, S]), I(() => {
    T.current ? C && C(d) : T.current = !0;
  }, [C, d]);
  const k = (r) => () => W(r), w = D(() => b(!0), [b]), y = D(() => b(!1), [b]);
  return /* @__PURE__ */ $("div", { className: N(i.root.base, o), "data-testid": "carousel", onMouseEnter: w, onMouseLeave: y, onTouchStart: w, onTouchEnd: y, ...F, children: [
    /* @__PURE__ */ s(J, { className: N(i.scrollContainer.base, (O || !g) && i.scrollContainer.snap), draggingClassName: "cursor-grab", innerRef: f, onEndScroll: k(!1), onStartScroll: k(n), vertical: !1, horizontal: n, children: u == null ? void 0 : u.map((r, h) => /* @__PURE__ */ s("div", { className: i.item.wrapper[n ? "on" : "off"], "data-active": d === h, "data-testid": "carousel-item", children: r }, h)) }),
    e && /* @__PURE__ */ s("div", { className: i.indicators.wrapper, children: u == null ? void 0 : u.map((r, h) => /* @__PURE__ */ s("button", { className: N(i.indicators.base, i.indicators.active[h === d ? "on" : "off"]), onClick: v(h), "data-testid": "carousel-indicator", "aria-label": `Slide ${h + 1}` }, h)) }),
    u && /* @__PURE__ */ $(x, { children: [
      /* @__PURE__ */ s("div", { className: i.root.leftControl, children: /* @__PURE__ */ s("button", { className: "group", "data-testid": "carousel-left-control", onClick: v(d - 1), type: "button", "aria-label": "Previous slide", children: a || /* @__PURE__ */ s(U, { theme: l }) }) }),
      /* @__PURE__ */ s("div", { className: i.root.rightControl, children: /* @__PURE__ */ s("button", { className: "group", "data-testid": "carousel-right-control", onClick: v(d + 1), type: "button", "aria-label": "Next slide", children: c || /* @__PURE__ */ s(V, { theme: l }) }) })
    ] })
  ] });
}, U = (p) => {
  const e = A(9), {
    theme: a
  } = p;
  let c;
  e[0] !== a ? (c = a === void 0 ? {} : a, e[0] = a, e[1] = c) : c = e[1];
  const m = c;
  let n;
  e[2] !== m ? (n = E(L().carousel, m), e[2] = m, e[3] = n) : n = e[3];
  const t = n;
  let o;
  e[4] !== t.control.icon ? (o = /* @__PURE__ */ s(B, { className: t.control.icon }), e[4] = t.control.icon, e[5] = o) : o = e[5];
  let l;
  return e[6] !== o || e[7] !== t.control.base ? (l = /* @__PURE__ */ s("span", { className: t.control.base, children: o }), e[6] = o, e[7] = t.control.base, e[8] = l) : l = e[8], l;
}, V = (p) => {
  const e = A(9), {
    theme: a
  } = p;
  let c;
  e[0] !== a ? (c = a === void 0 ? {} : a, e[0] = a, e[1] = c) : c = e[1];
  const m = c;
  let n;
  e[2] !== m ? (n = E(L().carousel, m), e[2] = m, e[3] = n) : n = e[3];
  const t = n;
  let o;
  e[4] !== t.control.icon ? (o = /* @__PURE__ */ s(G, { className: t.control.icon }), e[4] = t.control.icon, e[5] = o) : o = e[5];
  let l;
  return e[6] !== o || e[7] !== t.control.base ? (l = /* @__PURE__ */ s("span", { className: t.control.base, children: o }), e[6] = o, e[7] = t.control.base, e[8] = l) : l = e[8], l;
};
Q.displayName = "Carousel";
export {
  Q as Carousel
};
//# sourceMappingURL=Carousel.mjs.map