react-image-previewer
Version:
An exquisite React photo preview component
2 lines • 20.1 kB
JavaScript
import{a as ne,b as g,c as K,d as ae,e as At,f as Z}from"./chunk-6RQQT5UF.mjs";import{forwardRef as io,useMemo as ao,useRef as so}from"react";import{useRef as Ut}from"react";function D(e){let{current:t}=Ut({fn:e,curr:void 0});if(t.fn=e,!t.curr){let n=Object.create(null);Object.keys(e).forEach(o=>{n[o]=(...i)=>t.fn[o].call(t.fn,...i)}),t.curr=n}return t.curr}import{useReducer as Zt}from"react";function oe(e){return Zt((t,n)=>g(g({},t),typeof n=="function"?n(t):n),e)}import{createContext as Gt}from"react";var Fe=Gt(void 0);import kt from"styled-components";import Et from"styled-components";import{css as Dt}from"styled-components";import{forwardRef as Gn,useMemo as Qn,useRef as Jn,useState as eo}from"react";var ot="cubic-bezier(0.25, 0.8, 0.25, 1)",Xt="ease";var ze=(e,t,n)=>Math.max(Math.min(e,n),t),ke=(e,t=!1,n=0,o=0)=>ze(e,t?.1:1*(1-o),Math.max(6,n)*(1+o));import{useEffect as en,useLayoutEffect as tn}from"react";var nn=typeof window=="undefined"||/ServerSideRendering/.test(navigator&&navigator.userAgent),ge=nn?en:tn;import{useMemo as on}from"react";function rt(e,t,n){return on(()=>{let o=e.length;if(n){let i=e.concat(e).concat(e),a=i[o+t],u=i.slice(o+t-1,o+t+2),s=[];for(let c=0;c<u.length;c++){let f=u[c];c!==1&&f.key===a.key?s.push(K(g({},f),{isCloned:!0})):s.push(f)}return s}return e.slice(Math.max(t-1,0),Math.min(t+2,o+1))},[e,t,n])}import{useEffect as rn,useRef as an}from"react";function re(e,t,n){let o=an(t);o.current=t,rn(()=>{function i(a){o.current(a)}return e&&window.addEventListener(e,i,n),()=>{e&&window.removeEventListener(e,i)}},[e])}import{useReducer as un,useRef as ln}from"react";import{useRef as sn,useMemo as cn}from"react";function it(e,t){let n=sn(e);function o(i){n.current=i}return cn(()=>{t(o)},[e]),[n.current,o]}function at(e,t){let[,n]=un(s=>!s,!1),o=ln(0),[i,a]=it(e,s=>{e?(s(e),o.current=1):o.current=2});function u(){n(),o.current===2&&(a(!1),t&&t()),o.current=0}return[i,o.current,u]}import st from"styled-components";import{forwardRef as dn}from"react";import{createPortal as mn}from"react-dom";import{jsx as hn}from"react/jsx-runtime";var fn=typeof st.default=="undefined"?st:st.default,_t=dn((o,n)=>{var i=o,{container:e=document.body}=i,t=ae(i,["container"]);return mn(hn(pn,g({ref:n},t)),e)});_t.displayName="SlidePortal";var Yt=_t,pn=fn("div").withConfig({componentId:"sc-1ab9qfp-0"})({position:"fixed",top:"0px",left:"0px",zIndex:"50",height:"100%",width:"100%",touchAction:"none",overflow:"hidden"});import{useEffect as bn}from"react";function ct(){return bn(()=>{let{style:e}=document.body,t=e.overflow;return e.overflow="hidden",()=>{e.overflow=t}},[]),null}import Rt from"styled-components";import{useRef as jn}from"react";function Ne(e){let{clientX:t,clientY:n}=e.touches[0];if(e.touches.length>=2){let{clientX:o,clientY:i}=e.touches[1];return[(t+o)/2,(n+i)/2,Math.sqrt(ne(o-t,2)+ne(i-n,2))]}return[t,n,0]}var Ot=(e,t,n,o)=>{if(t&&e===1||o==="x")return"x";if(n&&e>1||o==="y")return"y"},G=(e,t,n,o)=>{let i=n*t,a=(i-o)/2,u,s=e;return i<=o?(u=1,s=0):e>0&&a-e<=0?(u=2,s=a):e<0&&a+e<=0&&(u=3,s=-a),[u,s]};function ve(e,t,n,o,i,a,u,s,c,f=innerWidth/2,l=innerHeight/2,h=0,m=0){let[d]=G(t,c,e?a:o,innerWidth),[R]=G(n,c,e?u:i,innerHeight),E=innerWidth/2,T=innerHeight/2,P=E+t,C=T+n,B=f-(f-P)*(c/s)-E,v=l-(l-C)*(c/s)-T,$=(e?u/a:i/o)>=3&&(e?a:o)*c===innerWidth;return{x:B+($?0:d?h/2:h),y:v+(R?m/2:m),lastCX:f,lastCY:l}}function le(e,t,n){let o=e%180!==0;return o?[n,t,o]:[t,n,o]}function Ee(e,t,n,o,i=0){let[a,u,s]=le(o,innerWidth,innerHeight),c=i,f=a-i*2,l=u-i*2,h=t/n*u,m=n/t*a;t<a&&n<u?(f=t,l=n):t<a&&n>=u?f=h:t>=a&&n<u||t/n>a/u?l=m:n/t>=3&&!s?(l=m,c=(l-u)/2):f=h;let d={width:f,height:l,x:i,y:c,pause:!e};return e&&(d.scale=Math.min(l/n,f/t,1)),d}import{useCallback as gn,useRef as ut}from"react";function se(e,{leading:t=!1,maxWait:n,wait:o=n||0}){let i=ut(e);i.current=e;let a=ut(0),u=ut(),s=()=>u.current&&clearTimeout(u.current),c=gn((...f)=>{let l=Date.now();function h(){a.current=l,s(),i.current.apply(null,f)}let m=a.current,d=l-m;if(m===0&&(t&&h(),a.current=l),n!==void 0){if(d>n){h();return}}else d<o&&(a.current=l);s(),u.current=setTimeout(()=>{h(),a.current=0},o)},[o,n,t]);return c.cancel=s,c}import{useRef as vn}from"react";function lt(e,t){let n=vn(0),o=se((...i)=>{n.current=0,e(...i)},{wait:300});return function(...a){n.current+=1,o(...a),n.current>=2&&(o.cancel(),n.current=0,t(...a))}}var $t=(e,t,n)=>fe(e,t,n,400/4,o=>o,()=>fe(t,e,n));function ft(e,t,n){let o=D({X:i=>e(i),Y:i=>t(i),S:i=>n(i)});return(i,a,u,s,c,f,l,h,m,d,R,E,T)=>{let[P,C]=le(E,c,f),[B,v]=G(i,d,P,innerWidth),[$,J]=G(a,d,C,innerHeight),S=Date.now()-T;if(S>=200||d!=m||Math.abs(R-m)>1){let{x:L,y:O}=ve(!1,i,a,c,f,l,h,m,d),z=B?v:L!==i?L:null,N=$?J:O!==a?O:null;z!==null&&fe(i,z,o.X),N!==null&&fe(a,N,o.Y),d!=m&&fe(m,d,o.S);return}let j=(i-u)/S,I=(a-s)/S,M=Math.sqrt(ne(j,2)+ne(I,2)),y=!1,A=!1;Sn(M,L=>{let O=i+L*(j/M),z=a+L*(I/M),[N,W]=G(O,m,P,innerWidth),[U,V]=G(z,m,C,innerHeight);if(N&&!y&&(y=!0,B?fe(O,W,o.X):$t(W,O+(O-W),o.X)),U&&!A&&(A=!0,$?fe(z,V,o.Y):$t(V,z+(z-V),o.Y)),y&&A)return!1;let H=y||o.X(W),F=A||o.Y(V);return H&&F})}}var xn=-.001,Tn=2e-4;function Sn(e,t){let n=e,o=0,i,a=0,u=f=>{i||(i=f);let l=f-i,h=Math.sign(e),m=h*xn,d=Math.sign(-n)*ne(n,2)*Tn,R=n*l+(m+d)*ne(l,2)/2;if(n=n+(m+d)*l,o=o+R,i=f,h*n<=0){c();return}if(t(o)){s();return}c()};s();function s(){a=requestAnimationFrame(u)}function c(){cancelAnimationFrame(a)}}var Rn=e=>1-ne(1-e,4);function fe(e,t,n,o=400,i=Rn,a){let u=t-e;if(u===0)return;let s=Date.now(),c=0,f=()=>{let h=Math.min(1,(Date.now()-s)/o);if(n(e+i(h)*u)&&h<1){l();return}cancelAnimationFrame(c),h>=1&&a&&a()};l();function l(){c=requestAnimationFrame(f)}}import{useState as Lt,useEffect as Cn,useRef as Pn}from"react";var wn={T:0,L:0,W:0,H:0,FIT:void 0};function dt(e,t,n,o,i,a){let[u,s]=Lt(wn),[c,f]=Lt(e?3:0),l=Pn(),h=D({OK:()=>t&&f(4)});Cn(()=>{if(l.current||(l.current=Date.now()),!!o&&(kn(n,s),!e)){if(t){if(Date.now()-l.current<250){f(1),requestAnimationFrame(()=>{f(2),requestAnimationFrame(()=>m(3))}),setTimeout(h.OK,i);return}f(4);return}m(5)}},[t,o,e]);function m(d){a(!1),f(d)}return[c,u]}function kn(e,t){let n=e&&e.current;if(n&&n.nodeType===1){let{top:o,left:i,width:a,height:u}=n.getBoundingClientRect(),s=n.tagName==="IMG";t({T:o,L:i,W:a,H:u,FIT:s?getComputedStyle(n).objectFit:void 0})}}import{useRef as En}from"react";function mt(e,t,n,o,i,a,u,s){let c=En(!1),[{lead:f,scale:l},h]=oe({lead:!0,scale:a}),m=se(d=>At(this,null,function*(){s(!0),h({lead:!1,scale:d})}),{wait:u});return ge(()=>{if(!c.current||e){c.current=!0;return}s(!1),h({lead:!0}),m(a)},[a,e]),e?[o*a,i*a,a]:f?[t*l,n*l,a/l]:[t*a,n*a,1]}function pt(e,t,n,o,i,a,u,s,c,f,l,h,m){let[d,R,E]=mt(e,u,s,c,f,l,h,m),[T,P]=dt(e,t,n,o,h,m),{T:C,L:B,W:v,H:$,FIT:J}=P,S=innerWidth/2,j=innerHeight/2,I=S-(e?c:u)*l/2,M=j-(e?f:s)*l/2,y=T<3||T>4,A=y?v?B:S:i+I,L=y?v?C:j:a+M,O=v/((e?c:u)*l)||.01,z=y&&J?d*($/v):R;return[A,L,d,z,T===0?E:y?O:E,y?J?1:0:1,T,J]}import{useEffect as In,useRef as Mn}from"react";var An=()=>{let e=Mn(!1);return In(()=>(e.current=!0,()=>{e.current=!1}),[]),e},Ve=An;import yt from"styled-components";import gt from"styled-components";import vt from"styled-components";import xt from"styled-components";import{css as Wn}from"styled-components";import"react";import ht from"styled-components";import"react";import{keyframes as Wt}from"styled-components";import{jsx as bt,jsxs as Ln}from"react/jsx-runtime";var Xn=typeof ht.default=="undefined"?ht:ht.default,_n=Wt(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]),Yn=Wt(["0%,50%{opacity:0;}100%{opacity:1;}"]),On=Xn.div.withConfig({componentId:"sc-7ci1r2-0"})(["animation:"," 0.4s linear both;svg{animation:"," 0.6s linear infinite;}"],Yn,_n);function $n(n){var o=n,{className:e}=o,t=ae(o,["className"]);return bt(On,K(g({className:e},t),{children:Ln("svg",{viewBox:"0 0 32 32",width:"36",height:"36",fill:"white",children:[bt("path",{opacity:".25",d:"M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"}),bt("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})]})}))}var Ft=$n;import{Fragment as Vn,jsx as He,jsxs as Hn}from"react/jsx-runtime";var di=typeof yt.default=="undefined"?yt:yt.default,pi=typeof gt.default=="undefined"?gt:gt.default,bi=typeof vt.default=="undefined"?vt:vt.default,Be=typeof xt.default=="undefined"?xt:xt.default,Tt=[{position:"absolute",left:"0px",top:"0px",display:"inline-block","--tw-translate-x":"-50%",transform:"translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))","--tw-translate-y":"-50%"}];function St(c){var f=c,{src:e,loaded:t,broken:n,className:o,onPhotoLoad:i,loadingElement:a,brokenElement:u}=f,s=ae(f,["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"]);let l=Ve();function h(d){let{naturalWidth:R,naturalHeight:E}=d.target;l.current&&i({loaded:!0,naturalWidth:R,naturalHeight:E})}function m(){l.current&&i({broken:!0})}return e&&!n?Hn(Vn,{children:[He(Fn,K(g({className:o,src:e,onLoad:h,onError:m,alt:""},s),{$_css2:[{cursor:"grab","--tw-bg-opacity":"1",backgroundColor:"rgb(255 255 255 / var(--tw-bg-opacity))",":active":{cursor:"grabbing"}},Wn(["max-width:initial;"])]})),!t&&(He(zn,{children:a})||He(Nn,{}))]}):u?He(Dn,{children:typeof u=="function"?u({src:e}):u}):null}var Fn=Be("img").withConfig({componentId:"sc-r1gl4k-0"})(["",""],e=>e.$_css2),zn=Be("span").withConfig({componentId:"sc-r1gl4k-1"})(["",""],Tt),Nn=Be(Ft).withConfig({componentId:"sc-r1gl4k-2"})(["",""],Tt),Dn=Be("span").withConfig({componentId:"sc-r1gl4k-3"})(["",""],Tt);import{jsx as Ct}from"react/jsx-runtime";var Pt=typeof Rt.default=="undefined"?Rt:Rt.default,qn={naturalWidth:void 0,naturalHeight:void 0,width:void 0,height:void 0,loaded:void 0,broken:!1,x:0,y:0,touched:!1,maskTouched:!1,rotate:0,scale:1,CX:0,CY:0,lastX:0,lastY:0,lastCX:0,lastCY:0,lastScale:1,touchTime:0,touchLength:0,pause:!0,stopRaf:!0,reach:void 0},zt=Pt.div.withConfig({componentId:"sc-1mzwirp-0"})([""," direction:ltr"],{position:"absolute",top:"0px",right:"0px",bottom:"0px",left:"0px",width:"100%",touchAction:"none"}),Kn=Pt(zt).withConfig({componentId:"sc-1mzwirp-1"})(({isDragMode:e})=>[{zIndex:"10"},!e&&{overflow:"hidden"}]),Un=Pt(zt).withConfig({componentId:"sc-1mzwirp-2"})(["transform-origin:left top;"]);function wt({isDragMode:e=!1,item:{src:t,render:n,width:o=0,height:i=0,originRef:a},visible:u,speed:s,easing:c,wrapClassName:f,className:l,style:h,loadingElement:m,brokenElement:d,enableMouseZoom:R=!0,onPhotoTap:E,onMaskTap:T,onReachMove:P,onReachUp:C,onPhotoResize:B,isActive:v,expose:$}){let[J,S]=oe(qn),j=jn(0),I=Ve(),{naturalWidth:M=o,naturalHeight:y=i,width:A=o,height:L=i,loaded:O=!t,broken:z,x:N,y:W,touched:U,stopRaf:V,maskTouched:H,rotate:F,scale:X,CX:de,CY:Te,lastX:Se,lastY:Re,lastCX:Ie,lastCY:me,lastScale:Me,touchTime:k,touchLength:Ae,pause:ee,reach:ce}=J,pe=D({onScale:r=>q(ke(r,e)),onRotate(r){F!==r&&($({rotate:r}),S(K(g({rotate:r},Ee(e,M,y,r)),{scale:X})))}});function q(r,b,Y){X!==r&&($({scale:r}),S(g(g({scale:r},ve(e,N,W,A,L,M,y,X,r,b,Y)),(e?r<.1:r<=1)?{x:0,y:0}:{})))}let he=se((r,b,Y=0)=>{if((U||H)&&v){let[Pe,Qe]=le(F,A,L);if(Y===0&&j.current===0){let te=Math.abs(r-de)<=20,nt=Math.abs(b-Te)<=20;if(te&&nt){S({lastCX:r,lastCY:b});return}j.current=te?b>Te?3:2:1}let Je=r-Ie,et=b-me,we;if(Y===0){let[te]=G(Je+Se,X,Pe,innerWidth),[nt]=G(et+Re,X,Qe,innerHeight);we=Ot(j.current,te,nt,ce),we!==void 0&&P(we,r,b,X)}if(we==="x"||H||e){let te={reach:"x"};e&&(te.x=Se+Je,te.y=Re+et,te.pause=!1),S(te);return}let tt=ke(X+(Y-Ae)/100/2*X,e,M/A,.2);$({scale:tt}),S(g({touchLength:Y,reach:we,scale:tt},ve(e,N,W,A,L,M,y,X,tt,r,b,Je,et)))}},{maxWait:8});function Q(r){return V||U?!1:(I.current&&S(K(g({},r),{pause:u})),I.current)}let qe=ft(r=>Q({x:r}),r=>Q({y:r}),r=>(I.current&&($({scale:r}),S({scale:r})),!U&&I.current)),be=lt(E,(r,b)=>{if(!ce&&!e){let Y=X!==1?1:Math.max(2,M/A);q(Y,r,b)}});function ie(r,b){if(j.current=0,(U||H)&&v){S({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});let Y=ke(X,e,M/A);if(e||qe(N,W,Se,Re,A,L,M,y,X,Y,Me,F,k),C(r,b),de===r&&Te===b){if(U){be(r,b);return}H&&T(r,b)}}}re(Z?void 0:"mousemove",r=>{r.preventDefault(),he(r.clientX,r.clientY)}),re(Z?void 0:"mouseup",r=>{ie(r.clientX,r.clientY)}),re(Z?"touchmove":void 0,r=>{r.preventDefault();let b=Ne(r);he(...b)},{passive:!1}),re(Z?"touchend":void 0,({changedTouches:r})=>{let b=r[0];ie(b.clientX,b.clientY)},{passive:!1}),re("resize",se(()=>{O&&!U&&(S(e?{x:0,y:0}:Ee(e,M,y,F)),B())},{maxWait:8})),ge(()=>{v&&$(g({scale:X,rotate:F,loading:!O},pe))},[v]);function Xe(r){let b=r.loaded?Ee(e,r.naturalWidth||0,r.naturalHeight||0,F):{};e&&r.loaded&&v&&$({scale:b.scale,loading:!1}),S(g(g({},r),b))}function _e(r,b,Y=0){S({touched:!0,CX:r,CY:b,lastCX:r,lastCY:b,lastX:N,lastY:W,lastScale:X,touchLength:Y,touchTime:Date.now()})}function Ke(r){if(!ce&&R){let b=e?r.deltaY/100/16:r.deltaY/100/2,Y=ke(X-b,e,M/A);S({stopRaf:!0}),q(Y,r.clientX,r.clientY)}}function Ye(r){S({maskTouched:!0,CX:r.clientX,CY:r.clientY,lastX:N,lastY:W})}function Ue(r){r.stopPropagation(),_e(...Ne(r))}function Ze(r){r.stopPropagation(),r.button===0&&_e(r.clientX,r.clientY,0)}let[Oe,Ce,$e,Le,ue,We,ye,Ge]=pt(e,u,a,O,N,W,A,L,M,y,X,s,r=>S({pause:r})),p=ye<4?s/2:ye>4?s:0,w=`transform ${s}ms ${c}`,_={className:l,onMouseDown:Z?void 0:Ze,onTouchStart:Z?Ue:void 0,onWheel:Ke,style:{width:$e,height:Le,opacity:We,objectFit:ye===4?void 0:Ge,transform:F?`rotate(${F}deg)`:void 0,transition:ye>2?e?`${w}, width ${p}ms ${c}, height ${p}ms ${c}`:`${w}, opacity ${s}ms ease, height ${p}ms ${c}`:void 0}};return Ct(Kn,{isDragMode:e,className:f,style:h,onMouseDown:!Z&&v?Ye:void 0,onTouchStart:Z&&v?r=>Ye(r.touches[0]):void 0,children:Ct(Un,{style:{transform:e?void 0:`matrix(${ue}, 0, 0, ${ue}, ${Oe}, ${Ce})`,left:e?Oe:void 0,top:e?Ce:void 0,transition:U||ee?void 0:e?`left ${p}ms ${c}, top ${p}ms ${c}`:w,willChange:v?"transform":void 0},children:t?Ct(St,K(g({src:t,loaded:O,broken:z},_),{onPhotoLoad:Xe,loadingElement:m,brokenElement:d})):n&&n({attrs:_,scale:ue,rotate:F})})})}import{keyframes as to}from"styled-components";import{jsx as je,jsxs as ro}from"react/jsx-runtime";var Ji=typeof kt.default=="undefined"?kt:kt.default,Bt=typeof Et.default=="undefined"?Et:Et.default,Vt={loading:!1,x:0,y:0,touched:!1,pause:!1,lastCX:void 0,lastCY:void 0,bg:void 0,lastBg:void 0,overlay:!0,minimal:!0,scale:1,rotate:0},Ht=to(["from{opacity:0;}to{opacity:1;}"]),jt=Gn((e,t)=>{let{mode:n="slide",loop:o=3,speed:i,easing:a,photoClosable:u,maskClosable:s=!0,maskOpacity:c=1,pullClosable:f=!0,overlayRender:l,className:h,maskClassName:m,photoClassName:d,photoWrapClassName:R,loadingElement:E,brokenElement:T,images:P,index:C=0,onIndexChange:B,visible:v,onClose:$,afterClose:J,portalContainer:S,enableMouseZoom:j=!0}=e,I=Qn(()=>Z?!1:n==="drag",[n]),[M,y]=oe(Vt),[A,L]=eo(0),{loading:O,x:z,y:N,touched:W,pause:U,lastCX:V,lastCY:H,bg:F=c,lastBg:X,overlay:de,minimal:Te,scale:Se,rotate:Re,onScale:Ie,onRotate:me}=M,Me=e.hasOwnProperty("index"),k=Me?C:A,Ae=Me?B:L,ee=Jn(k),ce=P.length,pe=P[k],q=typeof o=="boolean"?o:ce>o,[he,Q,qe]=at(v,J);ge(()=>{if(he){y({pause:!0,x:k*-(innerWidth+20)}),ee.current=k;return}y(Vt)},[he]);let{close:be,changeIndex:ie}=D({close(p){me&&me(0),y({overlay:!0,lastBg:F}),$(p)},changeIndex(p,w=!1){let _=q?ee.current+(p-k):p,r=ce-1,b=ze(_,0,r),Y=q?_:b,Pe=innerWidth+20;y({touched:!1,lastCX:void 0,lastCY:void 0,x:-Pe*Y,pause:w}),ee.current=Y;let Qe=p<0?r:p>r?0:p;Ae&&Ae(q?Qe:b)}});re("keydown",p=>{if(v)switch(p.key){case"ArrowLeft":ie(k-1,!0);break;case"ArrowRight":ie(k+1,!0);break;case"Escape":be();break}});function Xe(p){return p?be():y({overlay:!de})}function _e(){y({x:-(innerWidth+20)*k,lastCX:void 0,lastCY:void 0,pause:!I}),ee.current=k}function Ke(p,w){if(H===void 0){y({touched:!0,lastCY:p,bg:F,minimal:!0});return}let _=c===null?null:ze(c,.01,c-Math.abs(p-H)/100/4);y({touched:!0,lastCY:H,bg:w===1&&!I?_:c,minimal:w===1})}function Ye(p){if(V===void 0){y({touched:!0,lastCX:p,x:z,pause:!1});return}let w=p-V,_=w;!q&&(k===0&&w>0||k===ce-1&&w<0)&&(_=w/2),y({touched:!0,lastCX:V,x:-(innerWidth+20)*ee.current+_,pause:!1})}function Ue(p,w,_,r){I||(p==="x"?Ye(w):p==="y"&&Ke(_,r))}function Ze(p,w){let _=p-(V!=null?V:p),r=w-(H!=null?H:w);if(I){y({touched:!1});return}let b=!1;if(_<-40){ie(k+1);return}if(_>40){ie(k-1);return}let Pe=-(innerWidth+20)*ee.current;Math.abs(r)>100&&Te&&f&&(b=!0,be()),y({touched:!1,x:Pe,lastCX:void 0,lastCY:void 0,bg:c,overlay:b?!0:de})}let Oe=rt(P,k,q);if(!he)return null;let Ce=de&&!Q,$e=v?F:X,Le=Ie&&me&&{loading:O,loop:q,mode:I?"drag":"slide",images:P,index:k,visible:v,onClose:be,onIndexChange:ie,overlayVisible:Ce,overlay:pe&&pe.overlay,scale:Se,rotate:Re,onScale:Ie,onRotate:me},ue=i?i(Q):400,We=a?a(Q):I?Xt:ot,ye=i?i(3):400+200,Ge=a?a(3):ot;return ro(Yt,{ref:t,className:h,role:"dialog",onClick:p=>p.stopPropagation(),container:S,children:[v&&je(ct,{}),je(no,{className:m,style:{background:$e?`rgba(0, 0, 0, ${$e})`:void 0,transitionTimingFunction:We,transitionDuration:`${W?0:ue}ms`,animationDuration:`${ue}ms`},onAnimationEnd:qe,$_css2:[{position:"absolute",left:"0px",top:"0px",zIndex:"-1",height:"100%",width:"100%","--tw-bg-opacity":"1",backgroundColor:"rgb(0 0 0 / var(--tw-bg-opacity))",transitionProperty:"background-color",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"150ms"},(Q===1||Q===2)&&{opacity:"0"},Q===1&&Dt(["animation:"," linear both;"],Ht),Q===2&&Dt(["animation:"," linear both reverse;"],Ht)]}),Oe.map((p,w)=>{let _=!q&&k===0?k+w:ee.current-1+w,r=!p.isCloned&&(pe&&pe.key)===p.key;return je(wt,{item:p,speed:ue,easing:We,visible:v,onReachMove:Ue,onReachUp:Ze,onPhotoTap:()=>Xe(u),onMaskTap:()=>Xe(s),isDragMode:I,wrapClassName:R,className:d,style:{opacity:I?r?1:0:void 0,left:`${(innerWidth+20)*_}px`,transform:`translate3d(${z}px, ${N}px, 0)`,transition:W||U?void 0:`transform ${ye}ms ${Ge}`},loadingElement:E,brokenElement:T,onPhotoResize:_e,isActive:r,expose:y,enableMouseZoom:j},q?`${p.key}/${p.src}/${_}`:p.key)}),l&&Le&&je(oo,{$_css3:[!Ce&&{opacity:"0"}],children:l(Le)})]})});jt.displayName="PhotoSlider";var It=jt,no=Bt("div").withConfig({componentId:"sc-12i02f7-0"})(["",""],e=>e.$_css2),oo=Bt("div").withConfig({componentId:"sc-12i02f7-1"})(["",""],e=>e.$_css3);import{jsx as lo,jsxs as fo}from"react/jsx-runtime";var co={images:[],visible:!1,index:0},qt=io((a,i)=>{var u=a,{children:e,onIndexChange:t,onVisibleChange:n}=u,o=ae(u,["children","onIndexChange","onVisibleChange"]);let[s,c]=oe(co),f=so(0),{images:l,visible:h,index:m}=s,d=D({nextId(){return f.current+=1},update(T){let P=l.findIndex(C=>C.key===T.key);if(P>-1){let C=l.slice();C.splice(P,1,T),c({images:C});return}c(C=>({images:C.images.concat(T)}))},remove(T){c(P=>{let C=P.images.filter(v=>v.key!==T),B=C.length-1;return{images:C,index:Math.min(B,m)}})},show(T){let P=l.findIndex(C=>C.key===T);c({visible:!0,index:P}),n&&n(!0,P,s)}}),R=D({close(){c({visible:!1}),n&&n(!1,m,s)},changeIndex(T){c({index:T}),t&&t(T,s)}}),E=ao(()=>g(g({},s),d),[s,d]);return fo(Fe.Provider,{value:E,children:[e,lo(It,g({ref:i,images:l,visible:h,index:m,onIndexChange:R.changeIndex,onClose:R.close},o))]})});qt.displayName="PhotoProvider";var uo=qt;import{Children as po,cloneElement as ho,useContext as bo,useEffect as Kt,useMemo as yo,useRef as go}from"react";import{useRef as mo}from"react";function Mt(e){let{current:t}=mo({sign:!1,fn:void 0});return t.sign||(t.sign=!0,t.fn=e()),t.fn}var vo=({src:e,render:t,overlay:n,width:o,height:i,triggers:a=["onClick"],children:u})=>{let s=bo(Fe),c=Mt(()=>s.nextId()),f=go(null);Kt(()=>()=>{s.remove(c)},[]);function l(d,R){if(u){let E=u.props[d];E&&E(R)}}let h=D({render(d){return t&&t(d)},show(d,R){s.show(c),l(d,R)}}),m=yo(()=>{let d={};return a.forEach(R=>{d[R]=h.show.bind(null,R)}),d},[]);return Kt(()=>{s.update({key:c,src:e,originRef:f,render:h.render,overlay:n,width:o,height:i})},[e]),u?po.only(ho(u,K(g({},m),{ref:f}))):null},xo=vo;export{uo as PhotoProvider,It as PhotoSlider,xo as PhotoView};
//# sourceMappingURL=index.mjs.map