react-photo-view
Version:
An exquisite React photo preview component
3 lines (2 loc) • 18.8 kB
JavaScript
import e,{useRef as n,useReducer as t,createContext as r,useEffect as i,useLayoutEffect as o,useMemo as a,useCallback as c,useState as u,useContext as l,useImperativeHandle as s,Children as d,cloneElement as v}from"react";import{createPortal as f}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),y="cubic-bezier(0.25, 0.8, 0.25, 1)",x=20,C="undefined"!=typeof window&&"ontouchstart"in window,b=function(e,n,t){return Math.max(Math.min(e,t),n)},E=function(e,n,t){return void 0===n&&(n=0),void 0===t&&(t=0),b(e,1*(1-t),Math.max(6,n)*(1+t))},k="undefined"==typeof window||/ServerSideRendering/.test(navigator&&navigator.userAgent)?i:o;function P(e,t,r){var o=n(t);o.current=t,i(function(){function n(e){o.current(e)}return e&&window.addEventListener(e,n,r),function(){e&&window.removeEventListener(e,n)}},[e])}var _=["container"];function M(n){var t=n.container,r=void 0===t?document.body:t,i=m(n,_);return f(e.createElement("div",h({},i)),r)}function Y(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 X(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 N(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 W(){return i(function(){var e=document.body.style,n=e.overflow;return e.overflow="hidden",function(){e.overflow=n}},[]),null}function S(e){var n=e.touches[0],t=n.clientX,r=n.clientY;if(e.touches.length>=2){var i=e.touches[1],o=i.clientX,a=i.clientY;return[(t+o)/2,(r+a)/2,Math.sqrt(Math.pow(o-t,2)+Math.pow(a-r,2))]}return[t,r,0]}var T=function(e,n,t,r){var i,o=t*n,a=(o-r)/2,c=e;return o<=r?(i=1,c=0):e>0&&a-e<=0?(i=2,c=a):e<0&&a+e<=0&&(i=3,c=-a),[i,c]};function V(e,n,t,r,i,o,a,c,u,l){void 0===a&&(a=innerWidth/2),void 0===c&&(c=innerHeight/2),void 0===u&&(u=0),void 0===l&&(l=0);var s=T(e,o,t,innerWidth)[0],d=T(n,o,r,innerHeight),v=innerWidth/2,f=innerHeight/2;return{x:a-o/i*(a-(v+e))-v+(r/t>=3&&t*o===innerWidth?0:s?u/2:u),y:c-o/i*(c-(f+n))-f+(d[0]?l/2:l),lastCX:a,lastCY:c}}function R(e,n,t){var r=e%180!=0;return r?[t,n,r]:[n,t,r]}function A(e,n,t){var r=R(t,innerWidth,innerHeight),i=r[0],o=r[1],a=0,c=i,u=o,l=e/n*o,s=n/e*i;return e<i&&n<o?(c=e,u=n):e<i&&n>=o?c=l:e>=i&&n<o||e/n>i/o?u=s:n/e>=3&&!r[2]?a=((u=s)-o)/2:c=l,{width:c,height:u,x:0,y:a,pause:!0}}function I(e,t){var r=t.leading,i=void 0!==r&&r,o=t.maxWait,a=t.wait,u=void 0===a?o||0:a,l=n(e);l.current=e;var s=n(0),d=n(),v=function(){return d.current&&clearTimeout(d.current)},f=c(function(){var e=[].slice.call(arguments),n=Date.now();function t(){s.current=n,v(),l.current.apply(null,e)}var r=s.current,a=n-r;if(0===r&&(i&&t(),s.current=n),void 0!==o){if(a>o)return void t()}else a<u&&(s.current=n);v(),d.current=setTimeout(function(){t(),s.current=0},u)},[u,o,i]);return f.cancel=v,f}var H=function(e,n,t){return F(e,n,t,100,function(e){return e},function(){return F(n,e,t)})},L=function(e){return 1-Math.pow(1-e,4)};function F(e,n,t,r,i,o){void 0===r&&(r=400),void 0===i&&(i=L);var a=n-e;if(0!==a){var c=Date.now(),u=0,l=function(){var n=Math.min(1,(Date.now()-c)/r);t(e+i(n)*a)&&n<1?s():(cancelAnimationFrame(u),n>=1&&o&&o())};s()}function s(){u=requestAnimationFrame(l)}}var D={T:0,L:0,W:0,H:0,FIT:void 0},B=function(){var e=n(!1);return i(function(){return e.current=!0,function(){e.current=!1}},[]),e},O=["className"];function z(n){var t=n.className,r=void 0===t?"":t,i=m(n,O);return e.createElement("div",h({className:"PhotoView__Spinner "+r},i),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 j=["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"];function q(n){var t=n.src,r=n.loaded,i=n.broken,o=n.className,a=n.onPhotoLoad,c=n.loadingElement,u=n.brokenElement,l=m(n,j),s=B();return t&&!i?e.createElement(e.Fragment,null,e.createElement("img",h({className:"PhotoView__Photo"+(o?" "+o:""),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})},draggable:!1,alt:""},l)),!r&&(c?e.createElement("span",{className:"PhotoView__icon"},c):e.createElement(z,{className:"PhotoView__icon"}))):u?e.createElement("span",{className:"PhotoView__icon"},"function"==typeof u?u({src:t}):u):null}var K={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 U(t){var r=t.item,o=r.src,a=r.render,c=r.width,l=void 0===c?0:c,s=r.height,d=void 0===s?0:s,v=r.originRef,f=t.visible,m=t.speed,w=t.easing,y=t.wrapClassName,x=t.className,b=t.style,_=t.loadingElement,M=t.brokenElement,Y=t.onPhotoTap,X=t.onMaskTap,N=t.onReachMove,W=t.onReachUp,L=t.onPhotoResize,O=t.isActive,z=t.expose,j=p(K),U=j[0],G=j[1],J=n(0),Q=B(),Z=U.naturalWidth,$=void 0===Z?l:Z,ee=U.naturalHeight,ne=void 0===ee?d:ee,te=U.width,re=void 0===te?l:te,ie=U.height,oe=void 0===ie?d:ie,ae=U.loaded,ce=void 0===ae?!o:ae,ue=U.broken,le=U.x,se=U.y,de=U.touched,ve=U.stopRaf,fe=U.maskTouched,he=U.rotate,me=U.scale,ge=U.CX,pe=U.CY,we=U.lastX,ye=U.lastY,xe=U.lastCX,Ce=U.lastCY,be=U.lastScale,Ee=U.touchTime,ke=U.touchLength,Pe=U.pause,_e=U.reach,Me=g({onScale:function(e){return Ye(E(e))},onRotate:function(e){he!==e&&(z({rotate:e}),G(h({rotate:e},A($,ne,e))))}});function Ye(e,n,t){me!==e&&(z({scale:e}),G(h({scale:e},V(le,se,re,oe,me,e,n,t),e<=1&&{x:0,y:0})))}var Xe=I(function(e,n,t){if(void 0===t&&(t=0),(de||fe)&&O){var r=R(he,re,oe),i=r[0],o=r[1];if(0===t&&0===J.current){var a=Math.abs(e-ge)<=20,c=Math.abs(n-pe)<=20;if(a&&c)return void G({lastCX:e,lastCY:n});J.current=a?n>pe?3:2:1}var u,l=e-xe,s=n-Ce;if(0===t){var d=T(l+we,me,i,innerWidth)[0],v=T(s+ye,me,o,innerHeight);u=function(e,n,t,r){return n&&1===e||"x"===r?"x":t&&e>1||"y"===r?"y":void 0}(J.current,d,v[0],_e),void 0!==u&&N(u,e,n,me)}if("x"===u||fe)return void G({reach:"x"});var f=E(me+(t-ke)/100/2*me,$/re,.2);z({scale:f}),G(h({touchLength:t,reach:u,scale:f},V(le,se,re,oe,me,f,e,n,l,s)))}},{maxWait:8});function Ne(e){return!ve&&!de&&(Q.current&&G(h({},e,{pause:f})),Q.current)}var We,Se,Te,Ve,Re,Ae,Ie,He,Le=(Re=function(e){return Ne({x:e})},Ae=function(e){return Ne({y:e})},Ie=function(e){return Q.current&&(z({scale:e}),G({scale:e})),!de&&Q.current},He=g({X:function(e){return Re(e)},Y:function(e){return Ae(e)},S:function(e){return Ie(e)}}),function(e,n,t,r,i,o,a,c,u,l,s){var d=R(l,i,o),v=d[0],f=d[1],h=T(e,c,v,innerWidth),m=h[0],g=h[1],p=T(n,c,f,innerHeight),w=p[0],y=p[1],x=Date.now()-s;if(x>=200||c!==a||Math.abs(u-a)>1){var C=V(e,n,i,o,a,c),b=C.x,E=C.y,k=m?g:b!==e?b:null,P=w?y:E!==n?E:null;return null!==k&&F(e,k,He.X),null!==P&&F(n,P,He.Y),void(c!==a&&F(a,c,He.S))}var _=(e-t)/x,M=(n-r)/x,Y=Math.sqrt(Math.pow(_,2)+Math.pow(M,2)),X=!1,N=!1;!function(e,n){var t,r=e,i=0,o=0,a=function(o){t||(t=o);var a=o-t,l=Math.sign(e),s=-.001*l,d=Math.sign(-r)*Math.pow(r,2)*2e-4,v=r*a+(s+d)*Math.pow(a,2)/2;i+=v,t=o,l*(r+=(s+d)*a)<=0?u():n(i)?c():u()};function c(){o=requestAnimationFrame(a)}function u(){cancelAnimationFrame(o)}c()}(Y,function(t){var r=e+t*(_/Y),i=n+t*(M/Y),o=T(r,a,v,innerWidth),c=o[0],u=o[1],l=T(i,a,f,innerHeight),s=l[0],d=l[1];if(c&&!X&&(X=!0,m?F(r,u,He.X):H(u,r+(r-u),He.X)),s&&!N&&(N=!0,w?F(i,d,He.Y):H(d,i+(i-d),He.Y)),X&&N)return!1;var h=X||He.X(u),g=N||He.Y(d);return h&&g})}),Fe=(We=Y,Se=function(e,n){_e||Ye(1!==me?1:Math.max(2,$/re),e,n)},Te=n(0),Ve=I(function(){Te.current=0,We.apply(void 0,[].slice.call(arguments))},{wait:300}),function(){var e=[].slice.call(arguments);Te.current+=1,Ve.apply(void 0,e),Te.current>=2&&(Ve.cancel(),Te.current=0,Se.apply(void 0,e))});function De(e,n){if(J.current=0,(de||fe)&&O){G({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});var t=E(me,$/re);if(Le(le,se,we,ye,re,oe,me,t,be,he,Ee),W(e,n),ge===e&&pe===n){if(de)return void Fe(e,n);fe&&X(e,n)}}}function Be(e,n,t){void 0===t&&(t=0),G({touched:!0,CX:e,CY:n,lastCX:e,lastCY:n,lastX:le,lastY:se,lastScale:me,touchLength:t,touchTime:Date.now()})}function Oe(e){G({maskTouched:!0,CX:e.clientX,CY:e.clientY,lastX:le,lastY:se})}P(C?void 0:"mousemove",function(e){e.preventDefault(),Xe(e.clientX,e.clientY)}),P(C?void 0:"mouseup",function(e){De(e.clientX,e.clientY)}),P(C?"touchmove":void 0,function(e){e.preventDefault();var n=S(e);Xe.apply(void 0,n)},{passive:!1}),P(C?"touchend":void 0,function(e){var n=e.changedTouches[0];De(n.clientX,n.clientY)},{passive:!1}),P("resize",I(function(){ce&&!de&&(G(A($,ne,he)),L())},{maxWait:8})),k(function(){O&&z(h({scale:me,rotate:he},Me))},[O]);var ze=function(e,t,r,o,a,c,l,s,d,v){var f=function(e,t,r,i,o){var a=n(!1),c=p({lead:!0,scale:r}),u=c[0],l=u.lead,s=u.scale,d=c[1],v=I(function(e){try{return o(!0),d({lead:!1,scale:e}),Promise.resolve()}catch(e){return Promise.reject(e)}},{wait:i});return k(function(){a.current?(o(!1),d({lead:!0}),v(r)):a.current=!0},[r]),l?[e*s,t*s,r/s]:[e*r,t*r,1]}(c,l,s,d,v),h=f[0],m=f[1],w=f[2],y=function(e,t,r,o,a){var c=u(D),l=c[0],s=c[1],d=u(0),v=d[0],f=d[1],h=n(),m=g({OK:function(){return e&&f(4)}});function p(e){a(!1),f(e)}return i(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?(f(1),requestAnimationFrame(function(){f(2),requestAnimationFrame(function(){return p(3)})}),void setTimeout(m.OK,o)):void f(4);p(5)}},[e,r]),[v,l]}(e,t,r,d,v),x=y[0],C=y[1],b=C.W,E=C.FIT,P=innerWidth/2,_=innerHeight/2,M=x<3||x>4;return[M?b?C.L:P:o+(P-c*s/2),M?b?C.T:_:a+(_-l*s/2),h,M&&E?h*(C.H/b):m,0===x?w:M?b/(c*s)||.01:w,M?E?1:0:1,x,E]}(f,v,ce,le,se,re,oe,me,m,function(e){return G({pause:e})}),je=ze[4],qe=ze[6],Ke="transform "+m+"ms "+w,Ue={className:x,onMouseDown:C?void 0:function(e){e.stopPropagation(),0===e.button&&Be(e.clientX,e.clientY,0)},onTouchStart:C?function(e){e.stopPropagation(),Be.apply(void 0,S(e))}:void 0,onWheel:function(e){if(!_e){var n=E(me-e.deltaY/100/2,$/re);G({stopRaf:!0}),Ye(n,e.clientX,e.clientY)}},style:{width:ze[2]+"px",height:ze[3]+"px",opacity:ze[5],objectFit:4===qe?void 0:ze[7],transform:he?"rotate("+he+"deg)":void 0,transition:qe>2?Ke+", opacity "+m+"ms ease, height "+(qe<4?m/2:qe>4?m:0)+"ms "+w:void 0}};return e.createElement("div",{className:"PhotoView__PhotoWrap"+(y?" "+y:""),style:b,onMouseDown:!C&&O?Oe:void 0,onTouchStart:C&&O?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:de||Pe?void 0:Ke,willChange:O?"transform":void 0}},o?e.createElement(q,h({src:o,loaded:ce,broken:ue},Ue,{onPhotoLoad:function(e){G(h({},e,e.loaded&&A(e.naturalWidth||0,e.naturalHeight||0,he)))},loadingElement:_,brokenElement:M})):a&&a({attrs:Ue,scale:je,rotate:he})))}var G={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 J(r){var i=r.loop,o=void 0===i?3:i,c=r.speed,l=r.easing,s=r.photoClosable,d=r.maskClosable,v=void 0===d||d,f=r.maskOpacity,h=void 0===f?1:f,m=r.pullClosable,w=void 0===m||m,E=r.bannerVisible,_=void 0===E||E,S=r.overlayRender,T=r.toolbarRender,V=r.className,R=r.maskClassName,A=r.photoClassName,I=r.photoWrapClassName,H=r.loadingElement,L=r.brokenElement,F=r.images,D=r.index,B=void 0===D?0:D,O=r.onIndexChange,z=r.visible,j=r.onClose,q=r.afterClose,K=r.portalContainer,J=p(G),Q=J[0],Z=J[1],$=u(0),ee=$[0],ne=$[1],te=Q.x,re=Q.touched,ie=Q.pause,oe=Q.lastCX,ae=Q.lastCY,ce=Q.bg,ue=void 0===ce?h:ce,le=Q.lastBg,se=Q.overlay,de=Q.minimal,ve=Q.scale,fe=Q.rotate,he=Q.onScale,me=Q.onRotate,ge=r.hasOwnProperty("index"),pe=ge?B:ee,we=ge?O:ne,ye=n(pe),xe=F.length,Ce=F[pe],be="boolean"==typeof o?o:xe>o,Ee=function(e,r){var i=t(function(e){return!e},!1)[1],o=n(0),c=function(t){var r=n(t);function i(e){r.current=e}return a(function(){!function(n){e?(n(e),o.current=1):o.current=2}(i)},[t]),[r.current,i]}(e),u=c[1];return[c[0],o.current,function(){i(),2===o.current&&(u(!1),r&&r()),o.current=0}]}(z,q),ke=Ee[0],Pe=Ee[1],_e=Ee[2];k(function(){if(ke)return Z({pause:!0,x:pe*-(innerWidth+x)}),void(ye.current=pe);Z(G)},[ke]);var Me=g({close:function(e){me&&me(0),Z({overlay:!0,lastBg:ue}),j(e)},changeIndex:function(e,n){void 0===n&&(n=!1);var t=be?ye.current+(e-pe):e,r=xe-1,i=b(t,0,r),o=be?t:i,a=innerWidth+x;Z({touched:!1,lastCX:void 0,lastCY:void 0,x:-a*o,pause:n}),ye.current=o,we&&we(be?e<0?r:e>r?0:e:i)}}),Ye=Me.close,Xe=Me.changeIndex;function Ne(e){return e?Ye():Z({overlay:!se})}function We(){Z({x:-(innerWidth+x)*pe,lastCX:void 0,lastCY:void 0,pause:!0}),ye.current=pe}function Se(e,n,t,r){"x"===e?function(e){if(void 0!==oe){var n=e-oe,t=n;!be&&(0===pe&&n>0||pe===xe-1&&n<0)&&(t=n/2),Z({touched:!0,lastCX:oe,x:-(innerWidth+x)*ye.current+t,pause:!1})}else Z({touched:!0,lastCX:e,x:te,pause:!1})}(n):"y"===e&&function(e,n){if(void 0!==ae){var t=null===h?null:b(h,.01,h-Math.abs(e-ae)/100/4);Z({touched:!0,lastCY:ae,bg:1===n?t:h,minimal:1===n})}else Z({touched:!0,lastCY:e,bg:ue,minimal:!0})}(t,r)}function Te(e,n){var t=e-(null!=oe?oe:e),r=n-(null!=ae?ae:n),i=!1;if(t<-40)Xe(pe+1);else if(t>40)Xe(pe-1);else{var o=-(innerWidth+x)*ye.current;Math.abs(r)>100&&de&&w&&(i=!0,Ye()),Z({touched:!1,x:o,lastCX:void 0,lastCY:void 0,bg:h,overlay:!!i||se})}}P("keydown",function(e){if(z)switch(e.key){case"ArrowLeft":Xe(pe-1,!0);break;case"ArrowRight":Xe(pe+1,!0);break;case"Escape":Ye()}});var Ve=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])}(F,pe,be);if(!ke)return null;var Re=se&&!Pe,Ae=z?ue:le,Ie=he&&me&&{images:F,index:pe,visible:z,onClose:Ye,onIndexChange:Xe,overlayVisible:Re,overlay:Ce&&Ce.overlay,scale:ve,rotate:fe,onScale:he,onRotate:me},He=c?c(Pe):400,Le=l?l(Pe):y,Fe=c?c(3):600,De=l?l(3):y;return e.createElement(M,{className:"PhotoView-Portal"+(Re?"":" PhotoView-Slider__clean")+(z?"":" PhotoView-Slider__willClose")+(V?" "+V:""),role:"dialog",onClick:function(e){return e.stopPropagation()},container:K},z&&e.createElement(W,null),e.createElement("div",{className:"PhotoView-Slider__Backdrop"+(R?" "+R:"")+(1===Pe?" PhotoView-Slider__fadeIn":2===Pe?" PhotoView-Slider__fadeOut":""),style:{background:Ae?"rgba(0, 0, 0, "+Ae+")":void 0,transitionTimingFunction:Le,transitionDuration:(re?0:He)+"ms",animationDuration:He+"ms"},onAnimationEnd:_e}),_&&e.createElement("div",{className:"PhotoView-Slider__BannerWrap"},e.createElement("div",{className:"PhotoView-Slider__Counter"},pe+1," / ",xe),e.createElement("div",{className:"PhotoView-Slider__BannerRight"},T&&Ie&&T(Ie),e.createElement(Y,{className:"PhotoView-Slider__toolbarIcon",onClick:Ye}))),Ve.map(function(n,t){var r=be||0!==pe?ye.current-1+t:pe+t;return e.createElement(U,{key:be?n.key+"/"+n.src+"/"+r:n.key,item:n,speed:He,easing:Le,visible:z,onReachMove:Se,onReachUp:Te,onPhotoTap:function(){return Ne(s)},onMaskTap:function(){return Ne(v)},wrapClassName:I,className:A,style:{left:(innerWidth+x)*r+"px",transform:"translate3d("+te+"px, 0px, 0)",transition:re||ie?void 0:"transform "+Fe+"ms "+De},loadingElement:H,brokenElement:L,onPhotoResize:We,isActive:ye.current===r,expose:Z})}),!C&&_&&e.createElement(e.Fragment,null,(be||0!==pe)&&e.createElement("div",{className:"PhotoView-Slider__ArrowLeft",onClick:function(){return Xe(pe-1,!0)}},e.createElement(X,null)),(be||pe+1<xe)&&e.createElement("div",{className:"PhotoView-Slider__ArrowRight",onClick:function(){return Xe(pe+1,!0)}},e.createElement(N,null))),S&&Ie&&e.createElement("div",{className:"PhotoView-Slider__Overlay"},S(Ie)))}var Q=["children","onIndexChange","onVisibleChange"],Z={images:[],visible:!1,index:0};function $(t){var r=t.children,i=t.onIndexChange,o=t.onVisibleChange,c=m(t,Q),u=p(Z),l=u[0],s=u[1],d=n(0),v=l.images,f=l.visible,y=l.index,x=g({nextId:function(){return d.current+=1},update:function(e){var n=v.findIndex(function(n){return n.key===e.key});if(n>-1){var t=v.slice();return t.splice(n,1,e),void s({images:t})}s(function(n){return{images:n.images.concat(e)}})},remove:function(e){s(function(n){var t=n.images.filter(function(n){return n.key!==e});return{images:t,index:Math.min(t.length-1,y)}})},show:function(e){var n=v.findIndex(function(n){return n.key===e});s({visible:!0,index:n}),o&&o(!0,n,l)}}),C=g({close:function(){s({visible:!1}),o&&o(!1,y,l)},changeIndex:function(e){s({index:e}),i&&i(e,l)}}),b=a(function(){return h({},l,x)},[l,x]);return e.createElement(w.Provider,{value:b},r,e.createElement(J,h({images:v,visible:f,index:y,onIndexChange:C.changeIndex,onClose:C.close},c)))}var ee=function(e){var t,r,o=e.src,c=e.render,u=e.overlay,f=e.width,m=e.height,p=e.triggers,y=void 0===p?["onClick"]:p,x=e.children,C=l(w),b=(t=function(){return C.nextId()},(r=n({sign:!1,fn:void 0}).current).sign||(r.sign=!0,r.fn=t()),r.fn),E=n(null);s(null==x?void 0:x.ref,function(){return E.current}),i(function(){return function(){C.remove(b)}},[]);var k=g({render:function(e){return c&&c(e)},show:function(e,n){C.show(b),function(e,n){if(x){var t=x.props[e];t&&t(n)}}(e,n)}}),P=a(function(){var e={};return y.forEach(function(n){e[n]=k.show.bind(null,n)}),e},[]);return i(function(){C.update({key:b,src:o,originRef:E,render:k.render,overlay:u,width:f,height:m})},[o]),x?d.only(v(x,h({},P,{ref:E}))):null};export{$ as PhotoProvider,J as PhotoSlider,ee as PhotoView};
//# sourceMappingURL=react-photo-view.module.js.map