| 1 | import{useEffect as T}from"react";import{useEffect as b,useRef as S,useState as L}from"react";var y=({initialImageIndex:n,imagesCount:a,movementSensitivity:i,autoRotate:c})=>{let[m,o]=L(n),l=S(null),p=S(null);b(()=>{o(n)},[n]);let d=()=>{l.current&&(clearInterval(l.current),l.current=null)};return b(()=>(!c.disabled&&!l.current&&(l.current=setInterval(()=>{o(t=>{let r=t+1;return r>a?0:r})},c.interval||200)),c.disabled&&d(),()=>d()),[c,a]),b(()=>{let t=p.current,r=0,u=()=>{o(e=>e+1>a?0:e+1)},s=()=>{o(e=>e-1<0?a:e-1)},E=e=>{e.key==="ArrowLeft"?s():e.key==="ArrowRight"&&u()},v=e=>{let w=r-e.clientX;w<=-i&&(r=r+i,u()),w>=i&&(r=r-i,s())},f=()=>{window.removeEventListener("pointermove",v),window.removeEventListener("pointerup",f)},I=e=>{e.button!=2&&(r=e.clientX,window.addEventListener("pointermove",v,{passive:!0}),window.addEventListener("pointerup",f,{passive:!0}))};return t.addEventListener("keydown",E,{capture:!0}),t.addEventListener("pointerdown",I,{capture:!0}),()=>{t.removeEventListener("keydown",E,{capture:!0}),t.removeEventListener("pointerdown",I,{capture:!0}),window.removeEventListener("pointerup",f),window.removeEventListener("pointermove",v)}},[a,i]),{ref:p,activeImageIndex:m}};import{jsx as P}from"react/jsx-runtime";var g="__react-image-turntable-img",A=`${g}--primary`,R=`${g}--secondary`,h={maxWidth:"100%"},M=n=>{n.preventDefault()},F=({images:n,initialImageIndex:a=0,style:i,tabIndex:c=0,movementSensitivity:m=20,onIndexChange:o,autoRotate:l={disabled:!1},...p})=>{let{ref:d,activeImageIndex:t}=y({initialImageIndex:a,imagesCount:n.length-1,movementSensitivity:m,autoRotate:l}),r={position:"relative",touchAction:"none",userSelect:"none",...i};return T(()=>{o&&o(t)},[t,o]),P("div",{"aria-label":"Image turntable",...p,ref:d,role:"slider","aria-valuemin":1,"aria-valuemax":n.length,"aria-valuenow":t+1,"aria-valuetext":`${t+1} of ${n.length}`,style:r,tabIndex:c,children:n.map((u,s)=>P("img",{className:`${g} ${s===0?A:R}`,src:u,alt:`Turntable image ${s+1}`,draggable:!1,onDragStart:M,style:{...h,position:s===0?void 0:"absolute",opacity:s===t?1:0,left:0,top:0,right:0,bottom:0,width:"100%",height:"100%",objectFit:"cover"}},u))})};export{g as CLASS_NAME_IMG,A as CLASS_NAME_IMG_PRIMARY,R as CLASS_NAME_IMG_SECONDARY,F as ReactImageTurntable};
|