UNPKG

otter-react-photo-view

Version:

An exquisite React photo preview component

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