@starlly-labs/photo-viewer/dist/react-photo-view.modern.js

An exquisite React photo preview component

import e,{useRef as t,useReducer as n,createContext as o,useEffect as r,useLayoutEffect as i,useMemo as a,useCallback as l,useState as c,useContext as s,useImperativeHandle as u,Children as d,cloneElement as m}from"react";import{createPortal as h}from"react-dom";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)({}).hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},f.apply(null,arguments)}function p(e,t){if(null==e)return{};var n={};for(var o in e)if({}.hasOwnProperty.call(e,o)){if(t.includes(o))continue;n[o]=e[o]}return n}function g(e){const{current:n}=t({fn:e,curr:void 0});if(n.fn=e,!n.curr){const t=Object.create(null);Object.keys(e).forEach(e=>{t[e]=(...t)=>n.fn[e].call(n.fn,...t)}),n.curr=t}return n.curr}function v(e){return n((e,t)=>f({},e,"function"==typeof t?t(e):t),e)}var w=o(void 0);const b="cubic-bezier(0.25, 0.8, 0.25, 1)",y=20,E=1,x="undefined"!=typeof window&&"ontouchstart"in window,k=(e,t,n)=>Math.max(Math.min(e,n),t),C=(e,t=0,n=0)=>k(e,1*(1-n),Math.max(6,t)*(1+n));var R="undefined"==typeof window||/ServerSideRendering/.test(navigator&&navigator.userAgent)?r:i;function L(e,n,o){const i=t(n);i.current=n,r(()=>{function t(e){i.current(e)}return e&&window.addEventListener(e,t,o),()=>{e&&window.removeEventListener(e,t)}},[e])}const S=["container"];function P(t){let{container:n=document.body}=t,o=p(t,S);return h(e.createElement("div",f({},o)),n)}function _(t){return e.createElement("svg",f({width:"44",height:"44",viewBox:"0 0 768 768"},t),e.createElement("path",{d:"M640.5 352.5v63h-390l178.5 180-45 45-256.5-256.5 256.5-256.5 45 45-178.5 180h390z"}))}function V(t){return e.createElement("svg",f({width:"44",height:"44",viewBox:"0 0 768 768"},t),e.createElement("path",{d:"M384 127.5l256.5 256.5-256.5 256.5-45-45 178.5-180h-390v-63h390l-178.5-180z"}))}function M(){return r(()=>{const{style:e}=document.body,t=e.overflow;return e.overflow="hidden",()=>{e.overflow=t}},[]),null}function $(t){return e.createElement("svg",f({width:"44",height:"44",viewBox:"0 0 768 768"},t),e.createElement("path",{d:"M607.5 205.5l-178.5 178.5 178.5 178.5-45 45-178.5-178.5-178.5 178.5-45-45 178.5-178.5-178.5-178.5 45-45 178.5 178.5 178.5-178.5z"}))}function N({bannerVisible:t,index:n,imageLength:o,toolbarRender:r,overlayParams:i,toolbarLeftRender:a,toolbarRightRender:l}){return e.createElement(e.Fragment,null,t&&e.createElement("div",{className:"PhotoView-Slider__BannerWrap"},e.createElement("div",{className:"PhotoView-Slider__Counter"},n+1," / ",o),e.createElement("div",{className:"PhotoView-Slider__BannerRight"},r&&i&&r(i),e.createElement($,{className:"PhotoView-Slider__toolbarIcon",onClick:close}))),a&&i&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Left"},a(i)),l&&i&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Right"},l(i)))}function F(e){const{clientX:t,clientY:n}=e.touches[0];if(e.touches.length>=2){const{clientX:o,clientY:r}=e.touches[1];return[(t+o)/2,(n+r)/2,Math.sqrt((o-t)**2+(r-n)**2)]}return[t,n,0]}const T=(e,t,n,o)=>{const r=n*t,i=(r-o)/2;let a,l=e;return r<=o?(a=1,l=0):e>0&&i-e<=0?(a=2,l=i):e<0&&i+e<=0&&(a=3,l=-i),[a,l]};function W(e,t,n){const o=e%180!=0;return o?[n,t,o]:[t,n,o]}function Y(e,{leading:n=!1,maxWait:o,wait:r=o||0}){const i=t(e);i.current=e;const a=t(0),c=t(),s=()=>c.current&&clearTimeout(c.current),u=l((...e)=>{const t=Date.now();function l(){a.current=t,s(),i.current.apply(null,e)}const u=a.current,d=t-u;if(0===u&&(n&&l(),a.current=t),void 0!==o){if(d>o)return void l()}else d<r&&(a.current=t);s(),c.current=setTimeout(()=>{l(),a.current=0},r)},[r,o,n]);return u.cancel=s,u}class X{}X.globalDivRef=null,X.sidebarWidth=400,X.fullScreen=!1;const I=e=>{X.globalDivRef=e},B=()=>innerWidth-(innerWidth<=900||X.fullScreen?0:X.sidebarWidth);function A(e,t,n,o,r,i,a=B()/2,l=innerHeight/2,c=0,s=0){const[u]=T(e,i,n,B()),[d]=T(t,i,o,innerHeight),m=B()/2,h=innerHeight/2,f=l-i/r*(l-(h+t))-h;return{x:a-i/r*(a-(m+e))-m+(o/n>=3&&n*i===B()?0:u?c/2:c),y:f+(d?s/2:s),lastCX:a,lastCY:l}}const D=(e,t,n)=>H(e,t,n,100,e=>e,()=>H(t,e,n)),q=e=>1-(1-e)**4;function H(e,t,n,o=400,r=q,i){const a=t-e;if(0===a)return;const l=Date.now();let c=0;const s=()=>{const t=Math.min(1,(Date.now()-l)/o);n(e+r(t)*a)&&t<1?u():(cancelAnimationFrame(c),t>=1&&i&&i())};function u(){c=requestAnimationFrame(s)}u()}const z={T:0,L:0,W:0,H:0,FIT:void 0},j=()=>{const e=t(!1);return r(()=>(e.current=!0,()=>{e.current=!1}),[]),e},O=["className"];function K(t){let{className:n=""}=t,o=p(t,O);return e.createElement("div",f({className:`PhotoView__Spinner ${n}`},o),e.createElement("svg",{viewBox:"0 0 32 32",width:"36",height:"36",fill:"white"},e.createElement("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"}),e.createElement("path",{d:"M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"})))}const U=["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"];function Z(t){let{src:n,loaded:o,broken:r,className:i,onPhotoLoad:a,loadingElement:l,brokenElement:c}=t,s=p(t,U);const u=j();return n&&!r?e.createElement(e.Fragment,null,e.createElement("img",f({className:"PhotoView__Photo"+(i?` ${i}`:""),src:n,onLoad:function(e){const{naturalWidth:t,naturalHeight:n}=e.target;u.current&&a({loaded:!0,naturalWidth:t,naturalHeight:n})},onError:function(){u.current&&a({broken:!0})},onContextMenu:function(e){e.preventDefault(),e.stopPropagation()},alt:""},s)),!o&&(e.createElement("span",{className:"PhotoView__icon"},l)||e.createElement(K,{className:"PhotoView__icon"}))):c?e.createElement("span",{className:"PhotoView__icon"},"function"==typeof c?c({src:n}):c):null}function G(e,t,n){const[o,r,i]=W(n,B(),innerHeight);let a=0,l=o,c=r;const s=e/t*r,u=t/e*o;return e<o&&t<r?(l=e,c=t):e<o&&t>=r?l=s:e>=o&&t<r||e/t>o/r?c=u:t/e>=3&&!i?(c=u,a=(c-r)/2):l=s,{width:l,height:c,x:0,y:a,pause:!0}}const J={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};function Q({item:{src:n,render:o,width:i=0,height:a=0,originRef:l},visible:s,speed:u,easing:d,wrapClassName:m,className:h,style:p,loadingElement:w,brokenElement:b,onPhotoTap:y,onMaskTap:E,onReachMove:k,onReachUp:S,onPhotoResize:P,isActive:_,expose:V}){const[M,$]=v(J),N=t(0),X=j(),{naturalWidth:I=i,naturalHeight:q=a,width:O=i,height:K=a,loaded:U=!n,broken:Q,x:ee,y:te,touched:ne,stopRaf:oe,maskTouched:re,rotate:ie,scale:ae,CX:le,CY:ce,lastX:se,lastY:ue,lastCX:de,lastCY:me,lastScale:he,touchTime:fe,touchLength:pe,pause:ge,reach:ve}=M,we=g({onScale:e=>be(C(e)),onRotate(e){ie!==e&&(V({rotate:e}),$(f({rotate:e},G(I,q,e))))}});function be(e,t,n){ae!==e&&(V({scale:e}),$(f({scale:e},A(ee,te,O,K,ae,e,t,n),e<=1&&{x:0,y:0})))}const ye=Y((e,t,n=0)=>{if((ne||re)&&_){const[o,r]=W(ie,O,K);if(0===n&&0===N.current){const n=Math.abs(e-le)<=20,o=Math.abs(t-ce)<=20;if(n&&o)return void $({lastCX:e,lastCY:t});N.current=n?t>ce?3:2:1}const i=e-de,a=t-me;let l;if(0===n){const[n]=T(i+se,ae,o,B()),[c]=T(a+ue,ae,r,innerHeight);l=((e,t,n,o)=>t&&1===e||"x"===o?"x":n&&e>1||"y"===o?"y":void 0)(N.current,n,c,ve),void 0!==l&&k(l,e,t,ae)}if("x"===l||re)return void $({reach:"x"});const c=C(ae+(n-pe)/100/2*ae,I/O,.2);V({scale:c}),$(f({touchLength:n,reach:l,scale:c},A(ee,te,O,K,ae,c,e,t,i,a)))}},{maxWait:8});function Ee(e){return!oe&&!ne&&(X.current&&$(f({},e,{pause:s})),X.current)}const xe=function(){const e=g({X:e=>Ee({x:e}),Y:e=>Ee({y:e}),S:e=>{return t=e,X.current&&(V({scale:t}),$({scale:t})),!ne&&X.current;var t}});return(t,n,o,r,i,a,l,c,s,u,d)=>{const[m,h]=W(u,i,a),[f,p]=T(t,c,m,B()),[g,v]=T(n,c,h,innerHeight),w=Date.now()-d;if(w>=200||c!==l||Math.abs(s-l)>1){const{x:o,y:r}=A(t,n,i,a,l,c),s=f?p:o!==t?o:null,u=g?v:r!==n?r:null;return null!==s&&H(t,s,e.X),null!==u&&H(n,u,e.Y),void(c!==l&&H(l,c,e.S))}const b=(t-o)/w,y=(n-r)/w,E=Math.sqrt(b**2+y**2);let x=!1,k=!1;!function(e,t){let n,o=e,r=0,i=0;const a=i=>{n||(n=i);const a=i-n,s=Math.sign(e),u=-.001*s,d=Math.sign(-o)*o**2*2e-4,m=o*a+(u+d)*a**2/2;o+=(u+d)*a,r+=m,n=i,s*o<=0?c():t(r)?l():c()};function l(){i=requestAnimationFrame(a)}function c(){cancelAnimationFrame(i)}l()}(E,o=>{const r=t+o*(b/E),i=n+o*(y/E),[a,c]=T(r,l,m,B()),[s,u]=T(i,l,h,innerHeight);if(a&&!x&&(x=!0,f?H(r,c,e.X):D(c,r+(r-c),e.X)),s&&!k&&(k=!0,g?H(i,u,e.Y):D(u,i+(i-u),e.Y)),x&&k)return!1;const d=x||e.X(c),p=k||e.Y(u);return d&&p})}}(),ke=function(e){const n=t(0),o=Y((...t)=>{n.current=0,e(...t)},{wait:300});return function(...e){n.current+=1,o(...e),n.current>=2&&(o.cancel(),n.current=0,((e,t)=>{ve||be(1!==ae?1:Math.max(2,I/O),e,t)})(...e))}}(y);function Ce(e,t){if(N.current=0,(ne||re)&&_){$({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});const n=C(ae,I/O);if(xe(ee,te,se,ue,O,K,ae,n,he,ie,fe),S(e,t),le===e&&ce===t){if(ne)return void ke(e,t);re&&E(e,t)}}}function Re(e,t,n=0){$({touched:!0,CX:e,CY:t,lastCX:e,lastCY:t,lastX:ee,lastY:te,lastScale:ae,touchLength:n,touchTime:Date.now()})}function Le(e){$({maskTouched:!0,CX:e.clientX,CY:e.clientY,lastX:ee,lastY:te})}L(x?void 0:"mousemove",e=>{e.preventDefault(),ye(e.clientX,e.clientY)}),L(x?void 0:"mouseup",e=>{Ce(e.clientX,e.clientY)}),L(x?"touchmove":void 0,e=>{e.preventDefault();const t=F(e);ye(...t)},{passive:!1}),L(x?"touchend":void 0,({changedTouches:e})=>{const t=e[0];Ce(t.clientX,t.clientY)},{passive:!1}),L("resize",Y(()=>{U&&!ne&&($(G(I,q,ie)),P())},{maxWait:8})),R(()=>{_&&V(f({scale:ae,rotate:ie},we))},[_]);const[Se,Pe,_e,Ve,Me,$e,Ne,Fe]=function(e,n,o,i,a,l,s,u,d,m){const[h,f,p]=function(e,n,o,r,i){const a=t(!1),[{lead:l,scale:c},s]=v({lead:!0,scale:o}),u=Y(async e=>{i(!0),s({lead:!1,scale:e})},{wait:r});return R(()=>{a.current?(i(!1),s({lead:!0}),u(o)):a.current=!0},[o]),l?[e*c,n*c,o/c]:[e*o,n*o,1]}(l,s,u,d,m),[w,b]=function(e,n,o,i,a){const[l,s]=c(z),[u,d]=c(0),m=t(),h=g({OK:()=>e&&d(4)});function f(e){a(!1),d(e)}return r(()=>{if(m.current||(m.current=Date.now()),o){if(function(e,t){const n=e&&e.current;if(n&&1===n.nodeType){const{top:e,left:o,width:r,height:i}=n.getBoundingClientRect();t({T:e,L:o,W:r,H:i,FIT:"IMG"===n.tagName?getComputedStyle(n).objectFit:void 0})}}(n,s),e)return Date.now()-m.current<250?(d(1),requestAnimationFrame(()=>{d(2),requestAnimationFrame(()=>f(3))}),void setTimeout(h.OK,i)):void d(4);f(5)}},[e,o]),[u,l]}(e,n,o,d,m),{T:y,L:E,W:x,H:k,FIT:C}=b,L=B()/2,S=innerHeight/2,P=w<3||w>4;return[P?x?E:L:i+(L-l*u/2),P?x?y:S:a+(S-s*u/2),h,P&&C?h*(k/x):f,0===w?p:P?x/(l*u)||.01:p,P?C?1:0:1,w,C]}(s,l,U,ee,te,O,K,ae,u,e=>$({pause:e})),Te=`transform ${u}ms ${d}`,We={className:h,onMouseDown:x?void 0:function(e){e.stopPropagation(),0===e.button&&Re(e.clientX,e.clientY,0)},onTouchStart:x?function(e){e.stopPropagation(),Re(...F(e))}:void 0,onWheel:function(e){if(!ve){const t=C(ae-e.deltaY/100/2,I/O);$({stopRaf:!0}),be(t,e.clientX,e.clientY)}},style:{width:`${_e}px`,height:`${Ve}px`,opacity:$e,objectFit:4===Ne?void 0:Fe,transform:ie?`rotate(${ie}deg)`:void 0,transition:Ne>2?`${Te}, opacity ${u}ms ease, height ${Ne<4?u/2:Ne>4?u:0}ms ${d}`:void 0}};return e.createElement("div",{className:"PhotoView__PhotoWrap"+(m?` ${m}`:""),style:p,onMouseDown:!x&&_?Le:void 0,onTouchStart:x&&_?e=>Le(e.touches[0]):void 0},e.createElement("div",{className:"PhotoView__PhotoBox",style:{transform:`matrix(${Me}, 0, 0, ${Me}, ${Se}, ${Pe})`,transition:ne||ge?void 0:Te,willChange:_?"transform":void 0}},n?e.createElement(Z,f({src:n,loaded:U,broken:Q},We,{onPhotoLoad:function(e){$(f({},e,e.loaded&&G(e.naturalWidth||0,e.naturalHeight||0,ie)))},loadingElement:w,brokenElement:b})):o&&o({attrs:We,scale:Me,rotate:ie})))}function ee({isVisible:t,onRestore:n,reason:o="focus"}){if(!t)return null;const r=(()=>{switch(o){case"printscreen":return{title:"Captura Bloqueada",description:"Las capturas de pantalla están deshabilitadas para proteger el contenido",icon:e.createElement("svg",{width:"80",height:"80",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginBottom:"24px",opacity:.9}},e.createElement("path",{d:"M3 3L21 21M9 9V15C9 16.1046 9.89543 17 11 17H13C14.1046 17 15 16.1046 15 15V9M7 7V15C7 17.2091 8.79086 19 11 19H13C15.2091 19 17 17.2091 17 15V7",stroke:"#ff6b6b",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("rect",{x:"9",y:"3",width:"6",height:"4",rx:"1",stroke:"#ff6b6b",strokeWidth:"2"}))};case"command":return{title:"Contenido Protegido",description:"El contenido está temporalmente oculto mientras usas atajos de teclado",icon:e.createElement("svg",{width:"80",height:"80",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginBottom:"24px",opacity:.9}},e.createElement("path",{d:"M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z",stroke:"#ffffff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"rgba(255, 255, 255, 0.1)"}),e.createElement("path",{d:"M9 12L11 14L15 10",stroke:"#ffffff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))};default:return{title:"Contenido Protegido",description:"El contenido está temporalmente oculto para proteger su privacidad",icon:e.createElement("svg",{width:"80",height:"80",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginBottom:"24px",opacity:.9}},e.createElement("path",{d:"M12 1L3 5V11C3 16.55 6.84 21.74 12 23C17.16 21.74 21 16.55 21 11V5L12 1Z",stroke:"#ffffff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"rgba(255, 255, 255, 0.1)"}),e.createElement("path",{d:"M9 12L11 14L15 10",stroke:"#ffffff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}))}}})();return e.createElement("div",{onClick:n,onContextMenu:e=>e.preventDefault(),style:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:9999,backgroundColor:"#222",pointerEvents:"auto",transition:"opacity 0.1s ease-in-out",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",color:"#ffffff",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',cursor:"pointer"}},r.icon,e.createElement("h3",{style:{margin:"0 0 12px 0",fontSize:"24px",fontWeight:"600",textAlign:"center",opacity:.95}},r.title),e.createElement("p",{style:{margin:"0 0 16px 0",fontSize:"16px",textAlign:"center",opacity:.8,lineHeight:"1.5",maxWidth:"400px",padding:"0 20px"}},r.description),e.createElement("div",{style:{display:"flex",alignItems:"center",fontSize:"14px",opacity:.7,backgroundColor:"rgba(255, 255, 255, 0.1)",padding:"8px 16px",borderRadius:"20px",border:"1px solid rgba(255, 255, 255, 0.2)"}},e.createElement("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{marginRight:"8px"}},e.createElement("path",{d:"M9 12L11 14L15 10",stroke:"#ffffff",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"}),e.createElement("circle",{cx:"12",cy:"12",r:"10",stroke:"#ffffff",strokeWidth:"2"})),"Haz click aquí para mostrar el contenido"))}function te({enabled:n,protectionLayerRender:o}){const[i,a]=c(!0),[l,s]=c(!1),[u,d]=c(!1),m=t(null);if(r(()=>{if(!n)return;const e=()=>a(!0),t=()=>a(!1);return window.addEventListener("focus",e),window.addEventListener("blur",t),()=>{window.removeEventListener("focus",e),window.removeEventListener("blur",t)}},[n]),r(()=>{if(!n)return;const e=e=>{(e.metaKey||e.ctrlKey)&&s(!0),"PrintScreen"!==e.key&&44!==e.keyCode||(e.preventDefault(),e.stopPropagation(),m.current&&clearTimeout(m.current),d(!0),m.current=setTimeout(()=>{d(!1),m.current=null},5e3))},t=e=>{e.metaKey||e.ctrlKey||s(!1)};return window.addEventListener("keydown",e),window.addEventListener("keyup",t),()=>{window.removeEventListener("keydown",e),window.removeEventListener("keyup",t),m.current&&clearTimeout(m.current)}},[n]),!n)return null;const h=!i||l||u,f=u?"printscreen":l?"command":"focus",p=()=>{a(!0),s(!1),d(!1)};return e.createElement(e.Fragment,null,o?o({isVisible:h,onRestore:p,reason:f}):e.createElement(ee,{isVisible:h,reason:f,onRestore:p}))}const ne={x: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};function oe(o){const{loop:i=3,speed:s,easing:u,photoClosable:d,maskClosable:m=!0,maskOpacity:h=E,pullClosable:f=!0,pullAction:p,bannerVisible:w=!0,overlayRender:C,toolbarRender:S,showBackdropImage:$,disableScroll:F=!0,toolbarLeftRender:T,toolbarRightRender:W,toolbarBottomRender:Y,sidebarWidth:A,sidebarLeftRender:D,sidebarRightRender:q,className:H,maskClassName:z,photoClassName:j,photoWrapClassName:O,loadingElement:K,brokenElement:U,images:Z,index:G=0,onIndexChange:J,visible:ee,onClose:oe,afterClose:re,portalContainer:ie,fullScreen:ae,onFullScreen:le,protectionLayerEnable:ce,protectionLayerRender:se}=o,[ue,de]=v(ne),[me,he]=c(0),fe=t();r(()=>(fe.current&&I(fe.current),()=>{I(null)}),[ee]);const{x:pe,touched:ge,pause:ve,lastCX:we,lastCY:be,bg:ye=h,lastBg:Ee,overlay:xe,minimal:ke,scale:Ce,rotate:Re,onScale:Le,onRotate:Se}=ue,Pe=o.hasOwnProperty("index"),_e=Pe?G:me,Ve=Pe?J:he,Me=t(_e),$e=Z.length,Ne=Z[_e],Fe="boolean"==typeof i?i:$e>i,[Te,We,Ye]=function(e,o){const[,r]=n(e=>!e,!1),i=t(0),[l,c]=function(n){const o=t(n);function r(e){o.current=e}return a(()=>{(t=>{e?(t(e),i.current=1):i.current=2})(r)},[n]),[o.current,r]}(e);return[l,i.current,function(){r(),2===i.current&&(c(!1),o&&o()),i.current=0}]}(ee,re);R(()=>{if(Te)return de({pause:!0,x:_e*-(B()+y)}),void(Me.current=_e);de(ne)},[Te]);const{close:Xe,changeIndex:Ie}=g({close(e){Se&&Se(0),de({overlay:!0,lastBg:ye}),oe(e)},changeIndex(e,t=!1){const n=Fe?Me.current+(e-_e):e,o=$e-1,r=k(n,0,o),i=Fe?n:r,a=B()+y;de({touched:!1,lastCX:void 0,lastCY:void 0,x:-a*i,pause:t}),Me.current=i,Ve&&Ve(Fe?e<0?o:e>o?0:e:r)}}),Be=l(()=>{le(!ae)},[ae,le]),Ae=a(()=>()=>{!document.fullscreenElement&&ae&&Be()},[ae,Be]),De=a(()=>()=>{if(document.fullscreenElement)document.exitFullscreen();else if(ae){const e=fe.current;if(!e)return;(e=>{try{e&&(e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen())}catch(e){console.log("Error al intentar activar el modo de pantalla completa",e)}})(e)}},[fe,ae]);function qe(e){return e?Xe():de({overlay:!xe})}function He(){de({x:-(B()+y)*_e,lastCX:void 0,lastCY:void 0,pause:!0}),Me.current=_e}function ze(e,t,n,o){"x"===e?function(e){if(void 0===we)return void de({touched:!0,lastCX:e,x:pe,pause:!1});const t=e-we;let n=t;!Fe&&(0===_e&&t>0||_e===$e-1&&t<0)&&(n=t/2),de({touched:!0,lastCX:we,x:-(B()+y)*Me.current+n,pause:!1})}(t):"y"===e&&function(e,t){if(void 0===be)return void de({touched:!0,lastCY:e,bg:ye,minimal:!0});const n=null===h?null:k(h,.01,h-Math.abs(e-be)/100/4);de({touched:!0,lastCY:be,bg:1===t?n:h,minimal:1===t})}(n,o)}function je(e,t){const n=e-(null!=we?we:e),o=t-(null!=be?be:t);let r=!1;if(n<-40)return void Ie(_e+1);if(n>40)return void Ie(_e-1);const i=-(B()+y)*Me.current;Math.abs(o)>100&&ke&&f?(r=!0,Xe()):Math.abs(o)>100&&ke&&"function"==typeof p&&p({direction:o<0?"top":"bottom",offsetY:o}),de({touched:!1,x:i,lastCX:void 0,lastCY:void 0,bg:h,overlay:!!r||xe})}r(()=>{if(fe.current)return De(),(e=>{X.fullScreen=e})(ae),document.addEventListener("fullscreenchange",Ae),()=>{document.removeEventListener("fullscreenchange",Ae)}},[fe,ae,Ae,De]),L("keydown",e=>{if(ee)switch(e.key){case"ArrowLeft":Ie(_e-1,!1);break;case"ArrowRight":Ie(_e+1,!1);break;case"Escape":Xe()}});const Oe=function(e,t,n){return a(()=>{const o=e.length;return n?e.concat(e).concat(e).slice(o+t-1,o+t+2):e.slice(Math.max(t-1,0),Math.min(t+2,o+1))},[e,t,n])}(Z,_e,Fe);if(!Te)return null;const Ke=xe&&!We,Ue=ee?ye:Ee,Ze=Le&&Se&&{images:Z,index:_e,visible:ee,onClose:Xe,onIndexChange:Ie,overlayVisible:Ke,overlay:Ne&&Ne.overlay,scale:Ce,rotate:Re,onScale:Le,onRotate:Se,fullScreen:ae,fullScreenAvailable:document.documentElement.requestFullscreen||document.documentElement.mozRequestFullScreen||document.documentElement.webkitRequestFullscreen||document.documentElement.msRequestFullscreen,toggleFullScreen:()=>le(!ae)},Ge=s?s(We):400,Je=u?u(We):b,Qe=s?s(3):600,et=u?u(3):b,tt="number"==typeof A?`${A}px`:A,nt=window.innerWidth<=900;return e.createElement(P,{className:`PhotoView-Portal${Ke?"":" PhotoView-Slider__clean"}${ee?"":" PhotoView-Slider__willClose"}${H?` ${H}`:""}`,role:"dialog",onContextMenu:function(e){e.preventDefault(),e.stopPropagation()},onClick:e=>e.stopPropagation(),container:ie},ee&&F&&e.createElement(M,null),e.createElement("div",{className:"PhotoView-Container"},D&&Ze&&!nt&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Left "+(1===We?" PhotoView-Slider__fadeIn":2===We?" PhotoView-Slider__fadeOut":""),style:{width:tt,transitionTimingFunction:Je,transitionDuration:`${ge?0:Ge}ms`,animationDuration:`${Ge}ms`}},D(Ze)),e.createElement("div",{ref:fe,className:"PhotoView-Viewer"},e.createElement("div",{className:`PhotoView-Slider__Backdrop${z?` ${z}`:""}${1===We?" PhotoView-Slider__fadeIn":2===We?" PhotoView-Slider__fadeOut":""} ${$?"with-backdrop-image":""}`,style:{background:$?`url(${Ne.src})`:Ue?`rgba(0, 0, 0, ${Ue})`:void 0,transitionTimingFunction:Je,transitionDuration:`${ge?0:Ge}ms`,animationDuration:`${Ge}ms`},onAnimationEnd:Ye}),e.createElement(N,{bannerVisible:w,index:_e,imageLength:$e,overlayParams:Ze,toolbarRender:S,toolbarLeftRender:T,toolbarRightRender:W,toolbarBottomRender:Y}),Oe.map((t,n)=>{const o=Fe||0!==_e?Me.current-1+n:_e+n;return e.createElement(Q,{key:Fe?`${t.key}/${t.src}/${o}`:t.key,item:t,speed:Ge,easing:Je,visible:ee,onReachMove:ze,onReachUp:je,onPhotoTap:()=>qe(d),onMaskTap:()=>qe(m),wrapClassName:O,className:j,style:{left:(B()+y)*o+"px",transform:`translate3d(${pe}px, 0px, 0)`,transition:ge||ve?void 0:`transform ${Qe}ms ${et}`},loadingElement:K,brokenElement:U,onPhotoResize:He,isActive:Me.current===o,expose:de})}),!x&&w&&e.createElement(e.Fragment,null,(Fe||0!==_e)&&e.createElement("div",{className:"PhotoView-Slider__ArrowLeft",onClick:()=>Ie(_e-1,!0)},e.createElement(_,null)),(Fe||_e+1<$e)&&e.createElement("div",{className:"PhotoView-Slider__ArrowRight",onClick:()=>Ie(_e+1,!0)},e.createElement(V,null))),C&&Ze&&e.createElement("div",{className:"PhotoView-Slider__Overlay"},C(Ze))),q&&Ze&&!nt&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Right "+(1===We?" PhotoView-Slider__fadeIn":2===We?" PhotoView-Slider__fadeOut":""),style:{width:tt,transitionTimingFunction:Je,transitionDuration:`${ge?0:Ge}ms`,animationDuration:`${Ge}ms`}},q(Ze)),Y&&Ze&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Bottom",style:{width:`calc(100% - ${nt?0:tt})`}},Y(Ze)),e.createElement(te,{enabled:ce||!1,protectionLayerRender:se})))}const re=["children","onIndexChange","onVisibleChange","sidebarLeftRender","sidebarRightRender","sidebarWidth","protectionLayerEnable","protectionLayerRender"],ie={images:[],visible:!1,index:0,fullScreen:!1};function ae(n){let{children:o,onIndexChange:i,onVisibleChange:l,sidebarLeftRender:c,sidebarRightRender:s,sidebarWidth:u=400,protectionLayerEnable:d,protectionLayerRender:m}=n,h=p(n,re);const[b,y]=v(ie),E=t(0),{images:x,visible:k,index:C}=b;r(()=>{X.sidebarWidth=c||s?u:0},[c,s,u]);const R=g({nextId:()=>E.current+=1,update(e){const t=x.findIndex(t=>t.key===e.key);if(t>-1){const n=x.slice();return n.splice(t,1,e),void y({images:n})}y(t=>({images:t.images.concat(e)}))},remove(e){y(t=>{const n=t.images.filter(t=>t.key!==e);return{images:n,index:Math.min(n.length-1,C)}})},show(e){const t=x.findIndex(t=>t.key===e);y({visible:!0,index:t}),l&&l(!0,t,b)}}),L=g({close(){y({visible:!1}),l&&l(!1,C,b)},changeIndex(e){y({index:e}),i&&i(e,b)},fullScreen(e){y({fullScreen:e})}}),S=a(()=>f({},b,R),[b,R]);return e.createElement(w.Provider,{value:S},o,e.createElement(oe,f({images:x,visible:k,index:C,fullScreen:b.fullScreen,onIndexChange:L.changeIndex,onClose:L.close,onFullScreen:L.fullScreen,sidebarWidth:u,sidebarLeftRender:c,sidebarRightRender:s,protectionLayerEnable:d,protectionLayerRender:m},h)))}const le=({src:e,render:n,overlay:o,width:i,height:l,triggers:c=["onClick"],children:h})=>{const p=s(w),v=function(){const{current:e}=t({sign:!1,fn:void 0});return e.sign||(e.sign=!0,e.fn=p.nextId()),e.fn}(),b=t(null);u(null==h?void 0:h.ref,()=>b.current),r(()=>()=>{p.remove(v)},[]);const y=g({render:e=>n&&n(e),show(e,t){p.show(v),function(e,t){if(h){const n=h.props[e];n&&n(t)}}(e,t)}}),E=a(()=>{const e={};return c.forEach(t=>{e[t]=y.show.bind(null,t)}),e},[]);return r(()=>{p.update({key:v,src:e,originRef:b,render:y.render,overlay:o,width:i,height:l})},[e]),h?d.only(m(h,f({},E,{ref:b}))):null};export{ae as PhotoProvider,oe as PhotoSlider,le as PhotoView};
//# sourceMappingURL=react-photo-view.modern.js.map