UNPKG

otter-react-photo-view

Version:

An exquisite React photo preview component

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