@starlly-labs/photo-viewer
Version:
An exquisite React photo preview component
3 lines (2 loc) • 27.2 kB
JavaScript
import e,{useRef as t,useReducer as n,createContext as r,useEffect as o,useLayoutEffect as i,useMemo as a,useCallback as c,useState as l,useContext as u,useImperativeHandle as s,Children as d,cloneElement as f}from"react";import{createPortal as v}from"react-dom";function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},m.apply(null,arguments)}function h(e,t){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function p(e){var n=t({fn:e,curr:void 0}).current;if(n.fn=e,!n.curr){var r=Object.create(null);Object.keys(e).forEach(function(e){r[e]=function(){var t;return(t=n.fn[e]).call.apply(t,[n.fn].concat([].slice.call(arguments)))}}),n.curr=r}return n.curr}function g(e){return n(function(e,t){return m({},e,"function"==typeof t?t(e):t)},e)}var w=r(void 0),b="cubic-bezier(0.25, 0.8, 0.25, 1)",y=20,E="undefined"!=typeof window&&"ontouchstart"in window,x=function(e,t,n){return Math.max(Math.min(e,n),t)},k=function(e,t,n){return void 0===t&&(t=0),void 0===n&&(n=0),x(e,1*(1-n),Math.max(6,t)*(1+n))},C="undefined"==typeof window||/ServerSideRendering/.test(navigator&&navigator.userAgent)?o:i;function R(e,n,r){var i=t(n);i.current=n,o(function(){function t(e){i.current(e)}return e&&window.addEventListener(e,t,r),function(){e&&window.removeEventListener(e,t)}},[e])}var L=["container"];function S(t){var n=t.container,r=void 0===n?document.body:n,o=h(t,L);return v(e.createElement("div",m({},o)),r)}function P(t){return e.createElement("svg",m({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 _(t){return e.createElement("svg",m({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 V(){return o(function(){var e=document.body.style,t=e.overflow;return e.overflow="hidden",function(){e.overflow=t}},[]),null}function M(t){return e.createElement("svg",m({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(t){var n=t.toolbarRender,r=t.overlayParams,o=t.toolbarLeftRender,i=t.toolbarRightRender;return e.createElement(e.Fragment,null,t.bannerVisible&&e.createElement("div",{className:"PhotoView-Slider__BannerWrap"},e.createElement("div",{className:"PhotoView-Slider__Counter"},t.index+1," / ",t.imageLength),e.createElement("div",{className:"PhotoView-Slider__BannerRight"},n&&r&&n(r),e.createElement(M,{className:"PhotoView-Slider__toolbarIcon",onClick:close}))),o&&r&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Left"},o(r)),i&&r&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Right"},i(r)))}function F(e){var t=e.touches[0],n=t.clientX,r=t.clientY;if(e.touches.length>=2){var o=e.touches[1],i=o.clientX,a=o.clientY;return[(n+i)/2,(r+a)/2,Math.sqrt(Math.pow(i-n,2)+Math.pow(a-r,2))]}return[n,r,0]}var T=function(e,t,n,r){var o,i=n*t,a=(i-r)/2,c=e;return i<=r?(o=1,c=0):e>0&&a-e<=0?(o=2,c=a):e<0&&a+e<=0&&(o=3,c=-a),[o,c]};function W(e,t,n){var r=e%180!=0;return r?[n,t,r]:[t,n,r]}function Y(e,n){var r=n.leading,o=void 0!==r&&r,i=n.maxWait,a=n.wait,l=void 0===a?i||0:a,u=t(e);u.current=e;var s=t(0),d=t(),f=function(){return d.current&&clearTimeout(d.current)},v=c(function(){var e=[].slice.call(arguments),t=Date.now();function n(){s.current=t,f(),u.current.apply(null,e)}var r=s.current,a=t-r;if(0===r&&(o&&n(),s.current=t),void 0!==i){if(a>i)return void n()}else a<l&&(s.current=t);f(),d.current=setTimeout(function(){n(),s.current=0},l)},[l,i,o]);return v.cancel=f,v}var X=function(){};X.globalDivRef=null,X.sidebarWidth=400,X.fullScreen=!1;var I=function(e){X.globalDivRef=e},B=function(){return innerWidth-(innerWidth<=900||X.fullScreen?0:X.sidebarWidth)};function A(e,t,n,r,o,i,a,c,l,u){void 0===a&&(a=B()/2),void 0===c&&(c=innerHeight/2),void 0===l&&(l=0),void 0===u&&(u=0);var s=T(e,i,n,B())[0],d=T(t,i,r,innerHeight)[0],f=B()/2,v=innerHeight/2,m=c-i/o*(c-(v+t))-v;return{x:a-i/o*(a-(f+e))-f+(r/n>=3&&n*i===B()?0:s?l/2:l),y:m+(d?u/2:u),lastCX:a,lastCY:c}}var D=function(e,t,n){return H(e,t,n,100,function(e){return e},function(){return H(t,e,n)})},q=function(e){return 1-Math.pow(1-e,4)};function H(e,t,n,r,o,i){void 0===r&&(r=400),void 0===o&&(o=q);var a=t-e;if(0!==a){var c=Date.now(),l=0,u=function(){var t=Math.min(1,(Date.now()-c)/r);n(e+o(t)*a)&&t<1?s():(cancelAnimationFrame(l),t>=1&&i&&i())};s()}function s(){l=requestAnimationFrame(u)}}var z={T:0,L:0,W:0,H:0,FIT:void 0},j=function(){var e=t(!1);return o(function(){return e.current=!0,function(){e.current=!1}},[]),e},O=["className"];function K(t){var n=t.className,r=void 0===n?"":n,o=h(t,O);return e.createElement("div",m({className:"PhotoView__Spinner "+r},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"})))}var U=["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"];function Z(t){var n=t.src,r=t.loaded,o=t.broken,i=t.className,a=t.onPhotoLoad,c=t.loadingElement,l=t.brokenElement,u=h(t,U),s=j();return n&&!o?e.createElement(e.Fragment,null,e.createElement("img",m({className:"PhotoView__Photo"+(i?" "+i:""),src:n,onLoad:function(e){var t=e.target;s.current&&a({loaded:!0,naturalWidth:t.naturalWidth,naturalHeight:t.naturalHeight})},onError:function(){s.current&&a({broken:!0})},onContextMenu:function(e){e.preventDefault(),e.stopPropagation()},alt:""},u)),!r&&(e.createElement("span",{className:"PhotoView__icon"},c)||e.createElement(K,{className:"PhotoView__icon"}))):l?e.createElement("span",{className:"PhotoView__icon"},"function"==typeof l?l({src:n}):l):null}function G(e,t,n){var r=W(n,B(),innerHeight),o=r[0],i=r[1],a=0,c=o,l=i,u=e/t*i,s=t/e*o;return e<o&&t<i?(c=e,l=t):e<o&&t>=i?c=u:e>=o&&t<i||e/t>o/i?l=s:t/e>=3&&!r[2]?a=((l=s)-i)/2:c=u,{width:c,height:l,x:0,y:a,pause:!0}}var 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(n){var r=n.item,i=r.src,a=r.render,c=r.width,u=void 0===c?0:c,s=r.height,d=void 0===s?0:s,f=r.originRef,v=n.visible,h=n.speed,w=n.easing,b=n.wrapClassName,y=n.className,x=n.style,L=n.loadingElement,S=n.brokenElement,P=n.onPhotoTap,_=n.onMaskTap,V=n.onReachMove,M=n.onReachUp,N=n.onPhotoResize,X=n.isActive,I=n.expose,q=g(J),O=q[0],K=q[1],U=t(0),Q=j(),$=O.naturalWidth,ee=void 0===$?u:$,te=O.naturalHeight,ne=void 0===te?d:te,re=O.width,oe=void 0===re?u:re,ie=O.height,ae=void 0===ie?d:ie,ce=O.loaded,le=void 0===ce?!i:ce,ue=O.broken,se=O.x,de=O.y,fe=O.touched,ve=O.stopRaf,me=O.maskTouched,he=O.rotate,pe=O.scale,ge=O.CX,we=O.CY,be=O.lastX,ye=O.lastY,Ee=O.lastCX,xe=O.lastCY,ke=O.lastScale,Ce=O.touchTime,Re=O.touchLength,Le=O.pause,Se=O.reach,Pe=p({onScale:function(e){return _e(k(e))},onRotate:function(e){he!==e&&(I({rotate:e}),K(m({rotate:e},G(ee,ne,e))))}});function _e(e,t,n){pe!==e&&(I({scale:e}),K(m({scale:e},A(se,de,oe,ae,pe,e,t,n),e<=1&&{x:0,y:0})))}var Ve=Y(function(e,t,n){if(void 0===n&&(n=0),(fe||me)&&X){var r=W(he,oe,ae),o=r[0],i=r[1];if(0===n&&0===U.current){var a=Math.abs(e-ge)<=20,c=Math.abs(t-we)<=20;if(a&&c)return void K({lastCX:e,lastCY:t});U.current=a?t>we?3:2:1}var l,u=e-Ee,s=t-xe;if(0===n){var d=T(u+be,pe,o,B())[0],f=T(s+ye,pe,i,innerHeight);l=function(e,t,n,r){return t&&1===e||"x"===r?"x":n&&e>1||"y"===r?"y":void 0}(U.current,d,f[0],Se),void 0!==l&&V(l,e,t,pe)}if("x"===l||me)return void K({reach:"x"});var v=k(pe+(n-Re)/100/2*pe,ee/oe,.2);I({scale:v}),K(m({touchLength:n,reach:l,scale:v},A(se,de,oe,ae,pe,v,e,t,u,s)))}},{maxWait:8});function Me(e){return!ve&&!fe&&(Q.current&&K(m({},e,{pause:v})),Q.current)}var Ne,Fe,Te,We,Ye,Xe,Ie,Be,Ae=(Ye=function(e){return Me({x:e})},Xe=function(e){return Me({y:e})},Ie=function(e){return Q.current&&(I({scale:e}),K({scale:e})),!fe&&Q.current},Be=p({X:function(e){return Ye(e)},Y:function(e){return Xe(e)},S:function(e){return Ie(e)}}),function(e,t,n,r,o,i,a,c,l,u,s){var d=W(u,o,i),f=d[0],v=d[1],m=T(e,c,f,B()),h=m[0],p=m[1],g=T(t,c,v,innerHeight),w=g[0],b=g[1],y=Date.now()-s;if(y>=200||c!==a||Math.abs(l-a)>1){var E=A(e,t,o,i,a,c),x=E.x,k=E.y,C=h?p:x!==e?x:null,R=w?b:k!==t?k:null;return null!==C&&H(e,C,Be.X),null!==R&&H(t,R,Be.Y),void(c!==a&&H(a,c,Be.S))}var L=(e-n)/y,S=(t-r)/y,P=Math.sqrt(Math.pow(L,2)+Math.pow(S,2)),_=!1,V=!1;!function(e,t){var n,r=e,o=0,i=0,a=function(i){n||(n=i);var a=i-n,u=Math.sign(e),s=-.001*u,d=Math.sign(-r)*Math.pow(r,2)*2e-4,f=r*a+(s+d)*Math.pow(a,2)/2;o+=f,n=i,u*(r+=(s+d)*a)<=0?l():t(o)?c():l()};function c(){i=requestAnimationFrame(a)}function l(){cancelAnimationFrame(i)}c()}(P,function(n){var r=e+n*(L/P),o=t+n*(S/P),i=T(r,a,f,B()),c=i[0],l=i[1],u=T(o,a,v,innerHeight),s=u[0],d=u[1];if(c&&!_&&(_=!0,h?H(r,l,Be.X):D(l,r+(r-l),Be.X)),s&&!V&&(V=!0,w?H(o,d,Be.Y):D(d,o+(o-d),Be.Y)),_&&V)return!1;var m=_||Be.X(l),p=V||Be.Y(d);return m&&p})}),De=(Ne=P,Fe=function(e,t){Se||_e(1!==pe?1:Math.max(2,ee/oe),e,t)},Te=t(0),We=Y(function(){Te.current=0,Ne.apply(void 0,[].slice.call(arguments))},{wait:300}),function(){var e=[].slice.call(arguments);Te.current+=1,We.apply(void 0,e),Te.current>=2&&(We.cancel(),Te.current=0,Fe.apply(void 0,e))});function qe(e,t){if(U.current=0,(fe||me)&&X){K({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});var n=k(pe,ee/oe);if(Ae(se,de,be,ye,oe,ae,pe,n,ke,he,Ce),M(e,t),ge===e&&we===t){if(fe)return void De(e,t);me&&_(e,t)}}}function He(e,t,n){void 0===n&&(n=0),K({touched:!0,CX:e,CY:t,lastCX:e,lastCY:t,lastX:se,lastY:de,lastScale:pe,touchLength:n,touchTime:Date.now()})}function ze(e){K({maskTouched:!0,CX:e.clientX,CY:e.clientY,lastX:se,lastY:de})}R(E?void 0:"mousemove",function(e){e.preventDefault(),Ve(e.clientX,e.clientY)}),R(E?void 0:"mouseup",function(e){qe(e.clientX,e.clientY)}),R(E?"touchmove":void 0,function(e){e.preventDefault();var t=F(e);Ve.apply(void 0,t)},{passive:!1}),R(E?"touchend":void 0,function(e){var t=e.changedTouches[0];qe(t.clientX,t.clientY)},{passive:!1}),R("resize",Y(function(){le&&!fe&&(K(G(ee,ne,he)),N())},{maxWait:8})),C(function(){X&&I(m({scale:pe,rotate:he},Pe))},[X]);var je=function(e,n,r,i,a,c,u,s,d,f){var v=function(e,n,r,o,i){var a=t(!1),c=g({lead:!0,scale:r}),l=c[0],u=l.lead,s=l.scale,d=c[1],f=Y(function(e){try{return i(!0),d({lead:!1,scale:e}),Promise.resolve()}catch(e){return Promise.reject(e)}},{wait:o});return C(function(){a.current?(i(!1),d({lead:!0}),f(r)):a.current=!0},[r]),u?[e*s,n*s,r/s]:[e*r,n*r,1]}(c,u,s,d,f),m=v[0],h=v[1],w=v[2],b=function(e,n,r,i,a){var c=l(z),u=c[0],s=c[1],d=l(0),f=d[0],v=d[1],m=t(),h=p({OK:function(){return e&&v(4)}});function g(e){a(!1),v(e)}return o(function(){if(m.current||(m.current=Date.now()),r){if(function(e,t){var n=e&&e.current;if(n&&1===n.nodeType){var r=n.getBoundingClientRect();t({T:r.top,L:r.left,W:r.width,H:r.height,FIT:"IMG"===n.tagName?getComputedStyle(n).objectFit:void 0})}}(n,s),e)return Date.now()-m.current<250?(v(1),requestAnimationFrame(function(){v(2),requestAnimationFrame(function(){return g(3)})}),void setTimeout(h.OK,i)):void v(4);g(5)}},[e,r]),[f,u]}(e,n,r,d,f),y=b[0],E=b[1],x=E.T,k=E.L,R=E.W,L=E.H,S=E.FIT,P=B()/2,_=innerHeight/2,V=y<3||y>4;return[V?R?k:P:i+(P-c*s/2),V?R?x:_:a+(_-u*s/2),m,V&&S?m*(L/R):h,0===y?w:V?R/(c*s)||.01:w,V?S?1:0:1,y,S]}(v,f,le,se,de,oe,ae,pe,h,function(e){return K({pause:e})}),Oe=je[4],Ke=je[6],Ue="transform "+h+"ms "+w,Ze={className:y,onMouseDown:E?void 0:function(e){e.stopPropagation(),0===e.button&&He(e.clientX,e.clientY,0)},onTouchStart:E?function(e){e.stopPropagation(),He.apply(void 0,F(e))}:void 0,onWheel:function(e){if(!Se){var t=k(pe-e.deltaY/100/2,ee/oe);K({stopRaf:!0}),_e(t,e.clientX,e.clientY)}},style:{width:je[2]+"px",height:je[3]+"px",opacity:je[5],objectFit:4===Ke?void 0:je[7],transform:he?"rotate("+he+"deg)":void 0,transition:Ke>2?Ue+", opacity "+h+"ms ease, height "+(Ke<4?h/2:Ke>4?h:0)+"ms "+w:void 0}};return e.createElement("div",{className:"PhotoView__PhotoWrap"+(b?" "+b:""),style:x,onMouseDown:!E&&X?ze:void 0,onTouchStart:E&&X?function(e){return ze(e.touches[0])}:void 0},e.createElement("div",{className:"PhotoView__PhotoBox",style:{transform:"matrix("+Oe+", 0, 0, "+Oe+", "+je[0]+", "+je[1]+")",transition:fe||Le?void 0:Ue,willChange:X?"transform":void 0}},i?e.createElement(Z,m({src:i,loaded:le,broken:ue},Ze,{onPhotoLoad:function(e){K(m({},e,e.loaded&&G(e.naturalWidth||0,e.naturalHeight||0,he)))},loadingElement:L,brokenElement:S})):a&&a({attrs:Ze,scale:Oe,rotate:he})))}function $(t){var n=t.onRestore,r=t.reason,o=void 0===r?"focus":r;if(!t.isVisible)return null;var i=function(){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:function(e){return 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"}},i.icon,e.createElement("h3",{style:{margin:"0 0 12px 0",fontSize:"24px",fontWeight:"600",textAlign:"center",opacity:.95}},i.title),e.createElement("p",{style:{margin:"0 0 16px 0",fontSize:"16px",textAlign:"center",opacity:.8,lineHeight:"1.5",maxWidth:"400px",padding:"0 20px"}},i.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 ee(n){var r=n.enabled,i=n.protectionLayerRender,a=l(!0),c=a[0],u=a[1],s=l(!1),d=s[0],f=s[1],v=l(!1),m=v[0],h=v[1],p=t(null);if(o(function(){if(r){var e=function(){return u(!0)},t=function(){return u(!1)};return window.addEventListener("focus",e),window.addEventListener("blur",t),function(){window.removeEventListener("focus",e),window.removeEventListener("blur",t)}}},[r]),o(function(){if(r){var e=function(e){(e.metaKey||e.ctrlKey)&&f(!0),"PrintScreen"!==e.key&&44!==e.keyCode||(e.preventDefault(),e.stopPropagation(),p.current&&clearTimeout(p.current),h(!0),p.current=setTimeout(function(){h(!1),p.current=null},5e3))},t=function(e){e.metaKey||e.ctrlKey||f(!1)};return window.addEventListener("keydown",e),window.addEventListener("keyup",t),function(){window.removeEventListener("keydown",e),window.removeEventListener("keyup",t),p.current&&clearTimeout(p.current)}}},[r]),!r)return null;var g=!c||d||m,w=m?"printscreen":d?"command":"focus",b=function(){u(!0),f(!1),h(!1)};return e.createElement(e.Fragment,null,i?i({isVisible:g,onRestore:b,reason:w}):e.createElement($,{isVisible:g,reason:w,onRestore:b}))}var te={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 ne(r){var i=r.loop,u=void 0===i?3:i,s=r.speed,d=r.easing,f=r.photoClosable,v=r.maskClosable,m=void 0===v||v,h=r.maskOpacity,w=void 0===h?1:h,k=r.pullClosable,L=void 0===k||k,M=r.pullAction,F=r.bannerVisible,T=void 0===F||F,W=r.overlayRender,Y=r.toolbarRender,A=r.showBackdropImage,D=r.disableScroll,q=void 0===D||D,H=r.toolbarLeftRender,z=r.toolbarRightRender,j=r.toolbarBottomRender,O=r.sidebarWidth,K=r.sidebarLeftRender,U=r.sidebarRightRender,Z=r.className,G=r.maskClassName,J=r.photoClassName,$=r.photoWrapClassName,ne=r.loadingElement,re=r.brokenElement,oe=r.images,ie=r.index,ae=void 0===ie?0:ie,ce=r.onIndexChange,le=r.visible,ue=r.onClose,se=r.afterClose,de=r.portalContainer,fe=r.fullScreen,ve=r.onFullScreen,me=r.protectionLayerEnable,he=r.protectionLayerRender,pe=g(te),ge=pe[0],we=pe[1],be=l(0),ye=be[0],Ee=be[1],xe=t();o(function(){return xe.current&&I(xe.current),function(){I(null)}},[le]);var ke=ge.x,Ce=ge.touched,Re=ge.pause,Le=ge.lastCX,Se=ge.lastCY,Pe=ge.bg,_e=void 0===Pe?w:Pe,Ve=ge.lastBg,Me=ge.overlay,Ne=ge.minimal,Fe=ge.scale,Te=ge.rotate,We=ge.onScale,Ye=ge.onRotate,Xe=r.hasOwnProperty("index"),Ie=Xe?ae:ye,Be=Xe?ce:Ee,Ae=t(Ie),De=oe.length,qe=oe[Ie],He="boolean"==typeof u?u:De>u,ze=function(e,r){var o=n(function(e){return!e},!1)[1],i=t(0),c=function(n){var r=t(n);function o(e){r.current=e}return a(function(){!function(t){e?(t(e),i.current=1):i.current=2}(o)},[n]),[r.current,o]}(e),l=c[1];return[c[0],i.current,function(){o(),2===i.current&&(l(!1),r&&r()),i.current=0}]}(le,se),je=ze[0],Oe=ze[1],Ke=ze[2];C(function(){if(je)return we({pause:!0,x:Ie*-(B()+y)}),void(Ae.current=Ie);we(te)},[je]);var Ue=p({close:function(e){Ye&&Ye(0),we({overlay:!0,lastBg:_e}),ue(e)},changeIndex:function(e,t){void 0===t&&(t=!1);var n=He?Ae.current+(e-Ie):e,r=De-1,o=x(n,0,r),i=He?n:o,a=B()+y;we({touched:!1,lastCX:void 0,lastCY:void 0,x:-a*i,pause:t}),Ae.current=i,Be&&Be(He?e<0?r:e>r?0:e:o)}}),Ze=Ue.close,Ge=Ue.changeIndex,Je=c(function(){ve(!fe)},[fe,ve]),Qe=a(function(){return function(){!document.fullscreenElement&&fe&&Je()}},[fe,Je]),$e=a(function(){return function(){if(document.fullscreenElement)document.exitFullscreen();else if(fe){var e=xe.current;if(!e)return;!function(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)}}},[xe,fe]);function et(e){return e?Ze():we({overlay:!Me})}function tt(){we({x:-(B()+y)*Ie,lastCX:void 0,lastCY:void 0,pause:!0}),Ae.current=Ie}function nt(e,t,n,r){"x"===e?function(e){if(void 0!==Le){var t=e-Le,n=t;!He&&(0===Ie&&t>0||Ie===De-1&&t<0)&&(n=t/2),we({touched:!0,lastCX:Le,x:-(B()+y)*Ae.current+n,pause:!1})}else we({touched:!0,lastCX:e,x:ke,pause:!1})}(t):"y"===e&&function(e,t){if(void 0!==Se){var n=null===w?null:x(w,.01,w-Math.abs(e-Se)/100/4);we({touched:!0,lastCY:Se,bg:1===t?n:w,minimal:1===t})}else we({touched:!0,lastCY:e,bg:_e,minimal:!0})}(n,r)}function rt(e,t){var n=e-(null!=Le?Le:e),r=t-(null!=Se?Se:t),o=!1;if(n<-40)Ge(Ie+1);else if(n>40)Ge(Ie-1);else{var i=-(B()+y)*Ae.current;Math.abs(r)>100&&Ne&&L?(o=!0,Ze()):Math.abs(r)>100&&Ne&&"function"==typeof M&&M({direction:r<0?"top":"bottom",offsetY:r}),we({touched:!1,x:i,lastCX:void 0,lastCY:void 0,bg:w,overlay:!!o||Me})}}o(function(){if(xe.current)return $e(),function(e){X.fullScreen=e}(fe),document.addEventListener("fullscreenchange",Qe),function(){document.removeEventListener("fullscreenchange",Qe)}},[xe,fe,Qe,$e]),R("keydown",function(e){if(le)switch(e.key){case"ArrowLeft":Ge(Ie-1,!1);break;case"ArrowRight":Ge(Ie+1,!1);break;case"Escape":Ze()}});var ot=function(e,t,n){return a(function(){var r=e.length;return n?e.concat(e).concat(e).slice(r+t-1,r+t+2):e.slice(Math.max(t-1,0),Math.min(t+2,r+1))},[e,t,n])}(oe,Ie,He);if(!je)return null;var it=Me&&!Oe,at=le?_e:Ve,ct=We&&Ye&&{images:oe,index:Ie,visible:le,onClose:Ze,onIndexChange:Ge,overlayVisible:it,overlay:qe&&qe.overlay,scale:Fe,rotate:Te,onScale:We,onRotate:Ye,fullScreen:fe,fullScreenAvailable:document.documentElement.requestFullscreen||document.documentElement.mozRequestFullScreen||document.documentElement.webkitRequestFullscreen||document.documentElement.msRequestFullscreen,toggleFullScreen:function(){return ve(!fe)}},lt=s?s(Oe):400,ut=d?d(Oe):b,st=s?s(3):600,dt=d?d(3):b,ft="number"==typeof O?O+"px":O,vt=window.innerWidth<=900;return e.createElement(S,{className:"PhotoView-Portal"+(it?"":" PhotoView-Slider__clean")+(le?"":" PhotoView-Slider__willClose")+(Z?" "+Z:""),role:"dialog",onContextMenu:function(e){e.preventDefault(),e.stopPropagation()},onClick:function(e){return e.stopPropagation()},container:de},le&&q&&e.createElement(V,null),e.createElement("div",{className:"PhotoView-Container"},K&&ct&&!vt&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Left "+(1===Oe?" PhotoView-Slider__fadeIn":2===Oe?" PhotoView-Slider__fadeOut":""),style:{width:ft,transitionTimingFunction:ut,transitionDuration:(Ce?0:lt)+"ms",animationDuration:lt+"ms"}},K(ct)),e.createElement("div",{ref:xe,className:"PhotoView-Viewer"},e.createElement("div",{className:"PhotoView-Slider__Backdrop"+(G?" "+G:"")+(1===Oe?" PhotoView-Slider__fadeIn":2===Oe?" PhotoView-Slider__fadeOut":"")+" "+(A?"with-backdrop-image":""),style:{background:A?"url("+qe.src+")":at?"rgba(0, 0, 0, "+at+")":void 0,transitionTimingFunction:ut,transitionDuration:(Ce?0:lt)+"ms",animationDuration:lt+"ms"},onAnimationEnd:Ke}),e.createElement(N,{bannerVisible:T,index:Ie,imageLength:De,overlayParams:ct,toolbarRender:Y,toolbarLeftRender:H,toolbarRightRender:z,toolbarBottomRender:j}),ot.map(function(t,n){var r=He||0!==Ie?Ae.current-1+n:Ie+n;return e.createElement(Q,{key:He?t.key+"/"+t.src+"/"+r:t.key,item:t,speed:lt,easing:ut,visible:le,onReachMove:nt,onReachUp:rt,onPhotoTap:function(){return et(f)},onMaskTap:function(){return et(m)},wrapClassName:$,className:J,style:{left:(B()+y)*r+"px",transform:"translate3d("+ke+"px, 0px, 0)",transition:Ce||Re?void 0:"transform "+st+"ms "+dt},loadingElement:ne,brokenElement:re,onPhotoResize:tt,isActive:Ae.current===r,expose:we})}),!E&&T&&e.createElement(e.Fragment,null,(He||0!==Ie)&&e.createElement("div",{className:"PhotoView-Slider__ArrowLeft",onClick:function(){return Ge(Ie-1,!0)}},e.createElement(P,null)),(He||Ie+1<De)&&e.createElement("div",{className:"PhotoView-Slider__ArrowRight",onClick:function(){return Ge(Ie+1,!0)}},e.createElement(_,null))),W&&ct&&e.createElement("div",{className:"PhotoView-Slider__Overlay"},W(ct))),U&&ct&&!vt&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Right "+(1===Oe?" PhotoView-Slider__fadeIn":2===Oe?" PhotoView-Slider__fadeOut":""),style:{width:ft,transitionTimingFunction:ut,transitionDuration:(Ce?0:lt)+"ms",animationDuration:lt+"ms"}},U(ct)),j&&ct&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Bottom",style:{width:"calc(100% - "+(vt?0:ft)+")"}},j(ct)),e.createElement(ee,{enabled:me||!1,protectionLayerRender:he})))}var re=["children","onIndexChange","onVisibleChange","sidebarLeftRender","sidebarRightRender","sidebarWidth","protectionLayerEnable","protectionLayerRender"],oe={images:[],visible:!1,index:0,fullScreen:!1};function ie(n){var r=n.children,i=n.onIndexChange,c=n.onVisibleChange,l=n.sidebarLeftRender,u=n.sidebarRightRender,s=n.sidebarWidth,d=void 0===s?400:s,f=n.protectionLayerEnable,v=n.protectionLayerRender,b=h(n,re),y=g(oe),E=y[0],x=y[1],k=t(0),C=E.images,R=E.visible,L=E.index;o(function(){X.sidebarWidth=l||u?d:0},[l,u,d]);var S=p({nextId:function(){return k.current+=1},update:function(e){var t=C.findIndex(function(t){return t.key===e.key});if(t>-1){var n=C.slice();return n.splice(t,1,e),void x({images:n})}x(function(t){return{images:t.images.concat(e)}})},remove:function(e){x(function(t){var n=t.images.filter(function(t){return t.key!==e});return{images:n,index:Math.min(n.length-1,L)}})},show:function(e){var t=C.findIndex(function(t){return t.key===e});x({visible:!0,index:t}),c&&c(!0,t,E)}}),P=p({close:function(){x({visible:!1}),c&&c(!1,L,E)},changeIndex:function(e){x({index:e}),i&&i(e,E)},fullScreen:function(e){x({fullScreen:e})}}),_=a(function(){return m({},E,S)},[E,S]);return e.createElement(w.Provider,{value:_},r,e.createElement(ne,m({images:C,visible:R,index:L,fullScreen:E.fullScreen,onIndexChange:P.changeIndex,onClose:P.close,onFullScreen:P.fullScreen,sidebarWidth:d,sidebarLeftRender:l,sidebarRightRender:u,protectionLayerEnable:f,protectionLayerRender:v},b)))}var ae=function(e){var n,r,i=e.src,c=e.render,l=e.overlay,v=e.width,h=e.height,g=e.triggers,b=void 0===g?["onClick"]:g,y=e.children,E=u(w),x=(n=function(){return E.nextId()},(r=t({sign:!1,fn:void 0}).current).sign||(r.sign=!0,r.fn=n()),r.fn),k=t(null);s(null==y?void 0:y.ref,function(){return k.current}),o(function(){return function(){E.remove(x)}},[]);var C=p({render:function(e){return c&&c(e)},show:function(e,t){E.show(x),function(e,t){if(y){var n=y.props[e];n&&n(t)}}(e,t)}}),R=a(function(){var e={};return b.forEach(function(t){e[t]=C.show.bind(null,t)}),e},[]);return o(function(){E.update({key:x,src:i,originRef:k,render:C.render,overlay:l,width:v,height:h})},[i]),y?d.only(f(y,m({},R,{ref:k}))):null};export{ie as PhotoProvider,ne as PhotoSlider,ae as PhotoView};
//# sourceMappingURL=react-photo-view.module.js.map