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

An exquisite React photo preview component

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