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

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

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