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