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