@bothub-chat/ui/dist/utils/useCarousel.js

Bothub UI Components

import{useRef as e,useState as r,useCallback as n,useEffect as t}from"react";const o=({defaultIndex:o,slidesCount:c,enableSwipes:i=!0,slidesPerScreen:u=1,align:l="center",onSlideChange:s})=>{const a=e(null),d=e(0),h=e(0),[v,f]=r(!1),[g,m]=r(!1),[w,M]=r(null!=o?o:0),P=w>=u,x=w+u<c,p=n((e,r)=>(e-d.current)/(r-h.current),[]),b=e([]),D=e(0),S=e(0),X=n(()=>{if(!a.current)return;const e=a.current;D.current=e.clientWidth,b.current=Array.from(e.children).map(e=>e.clientWidth);const r=e.scrollWidth-b.current.reduce((e,r)=>e+r,0);S.current=r/(b.current.length-1)},[]),y=n((e,r=0)=>{if(!a.current||!b.current[e])return;const n=b.current[e],t=D.current,o=S.current,c=window.innerWidth,i=n*u+o*(u-1);let s=Math.floor(e/u)*(i+o);if("center"===l){const e=(t-i)/2;s=Math.max(0,s-e)}else{const e=b.current.length*n+(b.current.length-1)*o-t;s=Math.max(0,Math.min(s,e))}const d=-(s/c*100)+r/c*100;a.current.style.transform=`translateX(${d}vw)`},[u,l]);t(()=>{if(!a.current)return;let e;X();const r=new ResizeObserver(()=>{clearTimeout(e),e=window.setTimeout(()=>{X(),y(w),e=void 0},30)});return r.observe(a.current),()=>{e&&clearTimeout(e),r.disconnect()}},[X,w]),t(()=>{i||(f(!1),m(!1))},[i]);const T=n(e=>{const r=Math.floor(e/u)*u,n=Math.min(Math.max(0,r),c-1);return M(n),y(n),null==s||s(n),n},[y,c,s,u]),W=n(()=>P?T(w-u):w,[P,w,T,u]),A=n(()=>x?T(w+u):w,[x,w,T,u]),C=n(e=>{a.current&&(f(!0),d.current=e.clientX,h.current=Date.now(),a.current.style.transition="none")},[]),N=n(e=>{if(!v)return;m(!0);const r=e.clientX-d.current;y(w,r)},[v,y,w]),I=n(e=>{var r;if(!v||!a.current)return;const n=p(e.clientX,Date.now()),t=Math.abs(n),o=e.clientX-d.current,c=Math.abs(o);a.current.style.transition="transform 0.3s ease-in-out";const i=.1*(null!==(r=b.current[w])&&void 0!==r?r:100);c>i||c>i&&t>.4?o>0&&P?T(w-u):o<0&&x?T(w+u):y(w):y(w),f(!1),m(!1)},[v,P,x,w,T,p,y]),z=n(e=>{a.current=e,e&&(X(),y(w))},[w,X,y]);return{activeSlideIndex:w,isPrevAllowed:P,isNextAllowed:x,goPrev:W,goNext:A,goToSlide:T,isDragging:v,isDraggingNow:g,carouselProps:{ref:z,onPointerDown:i?C:void 0,onPointerMove:i?N:void 0,onPointerUp:i?I:void 0,onPointerLeave:i?I:void 0,onPointerCancel:i?I:void 0}}};export{o as useCarousel};