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

An exquisite React photo preview component

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