@starlly-labs/photo-viewer/dist/react-photo-view.modern.js

An exquisite React photo preview component

import e,{useRef as t,useReducer as n,createContext as o,useEffect as r,useLayoutEffect as i,useMemo as a,useCallback as l,useState as c,useContext as s,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 b(e){return n((e,t)=>f({},e,"function"==typeof t?t(e):t),e)}var w=o(void 0);const p="cubic-bezier(0.25, 0.8, 0.25, 1)",E=20,y=1,x="undefined"!=typeof window&&"ontouchstart"in window,C=(e,t,n)=>Math.max(Math.min(e,n),t),_=(e,t=0,n=0)=>C(e,1*(1-n),Math.max(6,t)*(1+n));var R="undefined"==typeof window||/ServerSideRendering/.test(navigator&&navigator.userAgent)?r:i;function S(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])}class P{}P.globalDivRef=null,P.sidebarWidth=400,P.fullScreen=!1;const k=e=>{P.globalDivRef=e},V=e=>{P.fullScreen=e},$=()=>innerWidth-(innerWidth<=900||P.fullScreen?0:P.sidebarWidth),N=["container"];function Y(t){let{container:n=document.body}=t,o=v(t,N);return m(e.createElement("div",f({},o)),n)}function F(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 T(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 X(){return r(()=>{const{style:e}=document.body,t=e.overflow;return e.overflow="hidden",()=>{e.overflow=t}},[]),null}function M(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 L({bannerVisible:t,index:n,imageLength:o,toolbarRender:r,overlayParams:i,toolbarLeftRender:a,toolbarRightRender:l}){return e.createElement(e.Fragment,null,t&&e.createElement("div",{className:"PhotoView-Slider__BannerWrap"},e.createElement("div",{className:"PhotoView-Slider__Counter"},n+1," / ",o),e.createElement("div",{className:"PhotoView-Slider__BannerRight"},r&&i&&r(i),e.createElement(M,{className:"PhotoView-Slider__toolbarIcon",onClick:close}))),a&&i&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Left"},a(i)),l&&i&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Right"},l(i)))}function W(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 A=(e,t,n,o)=>{const r=n*t,i=(r-o)/2;let a,l=e;return r<=o?(a=1,l=0):e>0&&i-e<=0?(a=2,l=i):e<0&&i+e<=0&&(a=3,l=-i),[a,l]};function I(e,t,n){const o=e%180!=0;return o?[n,t,o]:[t,n,o]}function D(e,{leading:n=!1,maxWait:o,wait:r=o||0}){const i=t(e);i.current=e;const a=t(0),c=t(),s=()=>c.current&&clearTimeout(c.current),u=l((...e)=>{const t=Date.now();function l(){a.current=t,s(),i.current.apply(null,e)}const u=a.current,d=t-u;if(0===u&&(n&&l(),a.current=t),void 0!==o){if(d>o)return void l()}else d<r&&(a.current=t);s(),c.current=setTimeout(()=>{l(),a.current=0},r)},[r,o,n]);return u.cancel=s,u}function q(e,t,n,o,r,i,a=$()/2,l=innerHeight/2,c=0,s=0){const[u]=A(e,i,n,$()),[d]=A(t,i,o,innerHeight),h=$()/2,m=innerHeight/2,f=l-i/r*(l-(m+t))-m;return{x:a-i/r*(a-(h+e))-h+(o/n>=3&&n*i===$()?0:u?c/2:c),y:f+(d?s/2:s),lastCX:a,lastCY:l}}const B=(e,t,n)=>O(e,t,n,100,e=>e,()=>O(t,e,n)),H=e=>1-(1-e)**4;function O(e,t,n,o=400,r=H,i){const a=t-e;if(0===a)return;const l=Date.now();let c=0;const s=()=>{const t=Math.min(1,(Date.now()-l)/o);n(e+r(t)*a)&&t<1?u():(cancelAnimationFrame(c),t>=1&&i&&i())};function u(){c=requestAnimationFrame(s)}u()}const z={T:0,L:0,W:0,H:0,FIT:void 0},j=()=>{const e=t(!1);return r(()=>(e.current=!0,()=>{e.current=!1}),[]),e},K=["className"];function U(t){let{className:n=""}=t,o=v(t,K);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 G=["src","loaded","broken","className","onPhotoLoad","loadingElement","brokenElement"];function J(t){let{src:n,loaded:o,broken:r,className:i,onPhotoLoad:a,loadingElement:l,brokenElement:c}=t,s=v(t,G);const u=j();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})},alt:""},s)),!o&&(e.createElement("span",{className:"PhotoView__icon"},l)||e.createElement(U,{className:"PhotoView__icon"}))):c?e.createElement("span",{className:"PhotoView__icon"},"function"==typeof c?c({src:n}):c):null}function Q(e,t,n){const[o,r,i]=I(n,$(),innerHeight);let a=0,l=o,c=r;const s=e/t*r,u=t/e*o;return e<o&&t<r?(l=e,c=t):e<o&&t>=r?l=s:e>=o&&t<r||e/t>o/r?c=u:t/e>=3&&!i?(c=u,a=(c-r)/2):l=s,{width:l,height:c,x:0,y:a,pause:!0}}const Z={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 ee({item:{src:n,render:o,width:i=0,height:a=0,originRef:l},visible:s,speed:u,easing:d,wrapClassName:h,className:m,style:v,loadingElement:w,brokenElement:p,onPhotoTap:E,onMaskTap:y,onReachMove:C,onReachUp:P,onPhotoResize:k,isActive:V,expose:N}){const[Y,F]=b(Z),T=t(0),X=j(),{naturalWidth:M=i,naturalHeight:L=a,width:H=i,height:K=a,loaded:U=!n,broken:G,x:ee,y:te,touched:ne,stopRaf:oe,maskTouched:re,rotate:ie,scale:ae,CX:le,CY:ce,lastX:se,lastY:ue,lastCX:de,lastCY:he,lastScale:me,touchTime:fe,touchLength:ve,pause:ge,reach:be}=Y,we=g({onScale:e=>pe(_(e)),onRotate(e){ie!==e&&(N({rotate:e}),F(f({rotate:e},Q(M,L,e))))}});function pe(e,t,n){ae!==e&&(N({scale:e}),F(f({scale:e},q(ee,te,H,K,ae,e,t,n),e<=1&&{x:0,y:0})))}const Ee=D((e,t,n=0)=>{if((ne||re)&&V){const[o,r]=I(ie,H,K);if(0===n&&0===T.current){const n=Math.abs(e-le)<=20,o=Math.abs(t-ce)<=20;if(n&&o)return void F({lastCX:e,lastCY:t});T.current=n?t>ce?3:2:1}const i=e-de,a=t-he;let l;if(0===n){const[n]=A(i+se,ae,o,$()),[c]=A(a+ue,ae,r,innerHeight);l=((e,t,n,o)=>t&&1===e||"x"===o?"x":n&&e>1||"y"===o?"y":void 0)(T.current,n,c,be),void 0!==l&&C(l,e,t,ae)}if("x"===l||re)return void F({reach:"x"});const c=_(ae+(n-ve)/100/2*ae,M/H,.2);N({scale:c}),F(f({touchLength:n,reach:l,scale:c},q(ee,te,H,K,ae,c,e,t,i,a)))}},{maxWait:8});function ye(e){return!oe&&!ne&&(X.current&&F(f({},e,{pause:s})),X.current)}const xe=function(){const e=g({X:e=>ye({x:e}),Y:e=>ye({y:e}),S:e=>{return t=e,X.current&&(N({scale:t}),F({scale:t})),!ne&&X.current;var t}});return(t,n,o,r,i,a,l,c,s,u,d)=>{const[h,m]=I(u,i,a),[f,v]=A(t,c,h,$()),[g,b]=A(n,c,m,innerHeight),w=Date.now()-d;if(w>=200||c!==l||Math.abs(s-l)>1){const{x:o,y:r}=q(t,n,i,a,l,c),s=f?v:o!==t?o:null,u=g?b:r!==n?r:null;return null!==s&&O(t,s,e.X),null!==u&&O(n,u,e.Y),void(c!==l&&O(l,c,e.S))}const p=(t-o)/w,E=(n-r)/w,y=Math.sqrt(p**2+E**2);let x=!1,C=!1;!function(e,t){let n,o=e,r=0,i=0;const a=i=>{n||(n=i);const a=i-n,s=Math.sign(e),u=-.001*s,d=Math.sign(-o)*o**2*2e-4,h=o*a+(u+d)*a**2/2;o+=(u+d)*a,r+=h,n=i,s*o<=0?c():t(r)?l():c()};function l(){i=requestAnimationFrame(a)}function c(){cancelAnimationFrame(i)}l()}(y,o=>{const r=t+o*(p/y),i=n+o*(E/y),[a,c]=A(r,l,h,$()),[s,u]=A(i,l,m,innerHeight);if(a&&!x&&(x=!0,f?O(r,c,e.X):B(c,r+(r-c),e.X)),s&&!C&&(C=!0,g?O(i,u,e.Y):B(u,i+(i-u),e.Y)),x&&C)return!1;const d=x||e.X(c),v=C||e.Y(u);return d&&v})}}(),Ce=function(e){const n=t(0),o=D((...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)=>{be||pe(1!==ae?1:Math.max(2,M/H),e,t)})(...e))}}(E);function _e(e,t){if(T.current=0,(ne||re)&&V){F({touched:!1,maskTouched:!1,pause:!1,stopRaf:!1,reach:void 0});const n=_(ae,M/H);if(xe(ee,te,se,ue,H,K,ae,n,me,ie,fe),P(e,t),le===e&&ce===t){if(ne)return void Ce(e,t);re&&y(e,t)}}}function Re(e,t,n=0){F({touched:!0,CX:e,CY:t,lastCX:e,lastCY:t,lastX:ee,lastY:te,lastScale:ae,touchLength:n,touchTime:Date.now()})}function Se(e){F({maskTouched:!0,CX:e.clientX,CY:e.clientY,lastX:ee,lastY:te})}S(x?void 0:"mousemove",e=>{e.preventDefault(),Ee(e.clientX,e.clientY)}),S(x?void 0:"mouseup",e=>{_e(e.clientX,e.clientY)}),S(x?"touchmove":void 0,e=>{e.preventDefault();const t=W(e);Ee(...t)},{passive:!1}),S(x?"touchend":void 0,({changedTouches:e})=>{const t=e[0];_e(t.clientX,t.clientY)},{passive:!1}),S("resize",D(()=>{U&&!ne&&(F(Q(M,L,ie)),k())},{maxWait:8})),R(()=>{V&&N(f({scale:ae,rotate:ie},we))},[V]);const[Pe,ke,Ve,$e,Ne,Ye,Fe,Te]=function(e,n,o,i,a,l,s,u,d,h){const[m,f,v]=function(e,n,o,r,i){const a=t(!1),[{lead:l,scale:c},s]=b({lead:!0,scale:o}),u=D(async e=>{i(!0),s({lead:!1,scale:e})},{wait:r});return R(()=>{a.current?(i(!1),s({lead:!0}),u(o)):a.current=!0},[o]),l?[e*c,n*c,o/c]:[e*o,n*o,1]}(l,s,u,d,h),[w,p]=function(e,n,o,i,a){const[l,s]=c(z),[u,d]=c(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,s),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,l]}(e,n,o,d,h),{T:E,L:y,W:x,H:C,FIT:_}=p,S=$()/2,P=innerHeight/2,k=w<3||w>4;return[k?x?y:S:i+(S-l*u/2),k?x?E:P:a+(P-s*u/2),m,k&&_?m*(C/x):f,0===w?v:k?x/(l*u)||.01:v,k?_?1:0:1,w,_]}(s,l,U,ee,te,H,K,ae,u,e=>F({pause:e})),Xe=`transform ${u}ms ${d}`,Me={className:m,onMouseDown:x?void 0:function(e){e.stopPropagation(),0===e.button&&Re(e.clientX,e.clientY,0)},onTouchStart:x?function(e){e.stopPropagation(),Re(...W(e))}:void 0,onWheel:function(e){if(!be){const t=_(ae-e.deltaY/100/2,M/H);F({stopRaf:!0}),pe(t,e.clientX,e.clientY)}},style:{width:`${Ve}px`,height:`${$e}px`,opacity:Ye,objectFit:4===Fe?void 0:Te,transform:ie?`rotate(${ie}deg)`:void 0,transition:Fe>2?`${Xe}, opacity ${u}ms ease, height ${Fe<4?u/2:Fe>4?u:0}ms ${d}`:void 0}};return e.createElement("div",{className:"PhotoView__PhotoWrap"+(h?` ${h}`:""),style:v,onMouseDown:!x&&V?Se:void 0,onTouchStart:x&&V?e=>Se(e.touches[0]):void 0},e.createElement("div",{className:"PhotoView__PhotoBox",style:{transform:`matrix(${Ne}, 0, 0, ${Ne}, ${Pe}, ${ke})`,transition:ne||ge?void 0:Xe,willChange:V?"transform":void 0}},n?e.createElement(J,f({src:n,loaded:U,broken:G},Me,{onPhotoLoad:function(e){F(f({},e,e.loaded&&Q(e.naturalWidth||0,e.naturalHeight||0,ie)))},loadingElement:w,brokenElement:p})):o&&o({attrs:Me,scale:Ne,rotate:ie})))}const te={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 ne(o){const{loop:i=3,speed:s,easing:u,photoClosable:d,maskClosable:h=!0,maskOpacity:m=y,pullClosable:f=!0,pullAction:v,bannerVisible:w=!0,overlayRender:_,toolbarRender:P,showBackdropImage:N,disableScroll:M=!0,toolbarLeftRender:W,toolbarRightRender:A,toolbarBottomRender:I,sidebarWidth:D,sidebarLeftRender:q,sidebarRightRender:B,className:H,maskClassName:O,photoClassName:z,photoWrapClassName:j,loadingElement:K,brokenElement:U,images:G,index:J=0,onIndexChange:Q,visible:Z,onClose:ne,afterClose:oe,portalContainer:re,fullScreen:ie,onFullScreen:ae}=o,[le,ce]=b(te),[se,ue]=c(0),de=t();r(()=>(de.current&&k(de.current),()=>{k(null)}),[Z]);const{x:he,touched:me,pause:fe,lastCX:ve,lastCY:ge,bg:be=m,lastBg:we,overlay:pe,minimal:Ee,scale:ye,rotate:xe,onScale:Ce,onRotate:_e}=le,Re=o.hasOwnProperty("index"),Se=Re?J:se,Pe=Re?Q:ue,ke=t(Se),Ve=G.length,$e=G[Se],Ne="boolean"==typeof i?i:Ve>i,[Ye,Fe,Te]=function(e,o){const[,r]=n(e=>!e,!1),i=t(0),[l,c]=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[l,i.current,function(){r(),2===i.current&&(c(!1),o&&o()),i.current=0,V(!1)}]}(Z,oe);R(()=>{if(Ye)return ce({pause:!0,x:Se*-($()+E)}),void(ke.current=Se);ce(te)},[Ye]);const{close:Xe,changeIndex:Me}=g({close(e){_e&&_e(0),ce({overlay:!0,lastBg:be}),ne(e)},changeIndex(e,t=!1){const n=Ne?ke.current+(e-Se):e,o=Ve-1,r=C(n,0,o),i=Ne?n:r,a=$()+E;ce({touched:!1,lastCX:void 0,lastCY:void 0,x:-a*i,pause:t}),ke.current=i,Pe&&Pe(Ne?e<0?o:e>o?0:e:r)}}),Le=l(()=>{ae(!ie)},[ie,ae]),We=a(()=>()=>{!document.fullscreenElement&&ie&&Le()},[ie,Le]),Ae=a(()=>()=>{if(document.fullscreenElement)document.exitFullscreen();else if(ie){const e=de.current;if(!e)return;(e=>{try{e&&(e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen())}catch(e){console.log("Error al intentar activar el modo de pantalla completa",e)}})(e)}},[de,ie]);function Ie(e){return e?Xe():ce({overlay:!pe})}function De(){ce({x:-($()+E)*Se,lastCX:void 0,lastCY:void 0,pause:!0}),ke.current=Se}function qe(e,t,n,o){"x"===e?function(e){if(void 0===ve)return void ce({touched:!0,lastCX:e,x:he,pause:!1});const t=e-ve;let n=t;!Ne&&(0===Se&&t>0||Se===Ve-1&&t<0)&&(n=t/2),ce({touched:!0,lastCX:ve,x:-($()+E)*ke.current+n,pause:!1})}(t):"y"===e&&function(e,t){if(void 0===ge)return void ce({touched:!0,lastCY:e,bg:be,minimal:!0});const n=null===m?null:C(m,.01,m-Math.abs(e-ge)/100/4);ce({touched:!0,lastCY:ge,bg:1===t?n:m,minimal:1===t})}(n,o)}function Be(e,t){const n=e-(null!=ve?ve:e),o=t-(null!=ge?ge:t);let r=!1;if(n<-40)return void Me(Se+1);if(n>40)return void Me(Se-1);const i=-($()+E)*ke.current;Math.abs(o)>100&&Ee&&f?(r=!0,Xe()):Math.abs(o)>100&&Ee&&"function"==typeof v&&v({direction:o<0?"top":"bottom",offsetY:o}),ce({touched:!1,x:i,lastCX:void 0,lastCY:void 0,bg:m,overlay:!!r||pe})}r(()=>{if(de.current)return Ae(),V(ie),document.addEventListener("fullscreenchange",We),()=>{document.removeEventListener("fullscreenchange",We)}},[de,ie,We,Ae]),S("keydown",e=>{if(Z)switch(e.key){case"ArrowLeft":Me(Se-1,!1);break;case"ArrowRight":Me(Se+1,!1);break;case"Escape":Xe()}});const He=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])}(G,Se,Ne);if(!Ye)return null;const Oe=pe&&!Fe,ze=Z?be:we,je=Ce&&_e&&{images:G,index:Se,visible:Z,onClose:Xe,onIndexChange:Me,overlayVisible:Oe,overlay:$e&&$e.overlay,scale:ye,rotate:xe,onScale:Ce,onRotate:_e,fullScreen:ie,fullScreenAvailable:document.documentElement.requestFullscreen||document.documentElement.mozRequestFullScreen||document.documentElement.webkitRequestFullscreen||document.documentElement.msRequestFullscreen,toggleFullScreen:()=>ae(!ie)},Ke=s?s(Fe):400,Ue=u?u(Fe):p,Ge=s?s(3):600,Je=u?u(3):p,Qe="number"==typeof D?`${D}px`:D,Ze=window.innerWidth<=900;return e.createElement(Y,{className:`PhotoView-Portal${Oe?"":" PhotoView-Slider__clean"}${Z?"":" PhotoView-Slider__willClose"}${H?` ${H}`:""}`,role:"dialog",onClick:e=>e.stopPropagation(),container:re},Z&&M&&e.createElement(X,null),e.createElement("div",{className:"PhotoView-Container"},q&&je&&!Ze&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Left "+(1===Fe?" PhotoView-Slider__fadeIn":2===Fe?" PhotoView-Slider__fadeOut":""),style:{width:Qe,transitionTimingFunction:Ue,transitionDuration:`${me?0:Ke}ms`,animationDuration:`${Ke}ms`}},q(je)),e.createElement("div",{ref:de,className:"PhotoView-Viewer"},e.createElement("div",{className:`PhotoView-Slider__Backdrop${O?` ${O}`:""}${1===Fe?" PhotoView-Slider__fadeIn":2===Fe?" PhotoView-Slider__fadeOut":""} ${N?"with-backdrop-image":""}`,style:{background:N?`url(${$e.src})`:ze?`rgba(0, 0, 0, ${ze})`:void 0,transitionTimingFunction:Ue,transitionDuration:`${me?0:Ke}ms`,animationDuration:`${Ke}ms`},onAnimationEnd:Te}),e.createElement(L,{bannerVisible:w,index:Se,imageLength:Ve,overlayParams:je,toolbarRender:P,toolbarLeftRender:W,toolbarRightRender:A,toolbarBottomRender:I}),He.map((t,n)=>{const o=Ne||0!==Se?ke.current-1+n:Se+n;return e.createElement(ee,{key:Ne?`${t.key}/${t.src}/${o}`:t.key,item:t,speed:Ke,easing:Ue,visible:Z,onReachMove:qe,onReachUp:Be,onPhotoTap:()=>Ie(d),onMaskTap:()=>Ie(h),wrapClassName:j,className:z,style:{left:($()+E)*o+"px",transform:`translate3d(${he}px, 0px, 0)`,transition:me||fe?void 0:`transform ${Ge}ms ${Je}`},loadingElement:K,brokenElement:U,onPhotoResize:De,isActive:ke.current===o,expose:ce})}),!x&&w&&e.createElement(e.Fragment,null,(Ne||0!==Se)&&e.createElement("div",{className:"PhotoView-Slider__ArrowLeft",onClick:()=>Me(Se-1,!0)},e.createElement(F,null)),(Ne||Se+1<Ve)&&e.createElement("div",{className:"PhotoView-Slider__ArrowRight",onClick:()=>Me(Se+1,!0)},e.createElement(T,null))),_&&je&&e.createElement("div",{className:"PhotoView-Slider__Overlay"},_(je))),B&&je&&!Ze&&e.createElement("div",{className:"PhotoView-Sidebar PhotoView-Sidebar__Right "+(1===Fe?" PhotoView-Slider__fadeIn":2===Fe?" PhotoView-Slider__fadeOut":""),style:{width:Qe,transitionTimingFunction:Ue,transitionDuration:`${me?0:Ke}ms`,animationDuration:`${Ke}ms`}},B(je)),I&&je&&e.createElement("div",{className:"PhotoView-Slider__Toolbar PhotoView-Slider__Toolbar--Bottom",style:{width:`calc(100% - ${Ze?0:Qe})`}},I(je))))}const oe=["children","onIndexChange","onVisibleChange","sidebarLeftRender","sidebarRightRender","sidebarWidth"],re={images:[],visible:!1,index:0,fullScreen:!1};function ie(n){let{children:o,onIndexChange:i,onVisibleChange:l,sidebarLeftRender:c,sidebarRightRender:s,sidebarWidth:u=400}=n,d=v(n,oe);const[h,m]=b(re),p=t(0),{images:E,visible:y,index:x}=h;r(()=>{P.sidebarWidth=c||s?u:0},[c,s,u]);const C=g({nextId:()=>p.current+=1,update(e){const t=E.findIndex(t=>t.key===e.key);if(t>-1){const n=E.slice();return n.splice(t,1,e),void m({images:n})}m(t=>({images:t.images.concat(e)}))},remove(e){m(t=>{const n=t.images.filter(t=>t.key!==e);return{images:n,index:Math.min(n.length-1,x)}})},show(e){const t=E.findIndex(t=>t.key===e);m({visible:!0,index:t}),l&&l(!0,t,h)}}),_=g({close(){m({visible:!1}),l&&l(!1,x,h)},changeIndex(e){m({index:e}),i&&i(e,h)},fullScreen(e){m({fullScreen:e})}}),R=a(()=>f({},h,C),[h,C]);return e.createElement(w.Provider,{value:R},o,e.createElement(ne,f({images:E,visible:y,index:x,fullScreen:h.fullScreen,onIndexChange:_.changeIndex,onClose:_.close,onFullScreen:_.fullScreen,sidebarWidth:u,sidebarLeftRender:c,sidebarRightRender:s},d)))}const ae=({src:e,render:n,overlay:o,width:i,height:l,triggers:c=["onClick"],children:m})=>{const v=s(w),b=function(){const{current:e}=t({sign:!1,fn:void 0});return e.sign||(e.sign=!0,e.fn=v.nextId()),e.fn}(),p=t(null);u(null==m?void 0:m.ref,()=>p.current),r(()=>()=>{v.remove(b)},[]);const E=g({render:e=>n&&n(e),show(e,t){v.show(b),function(e,t){if(m){const n=m.props[e];n&&n(t)}}(e,t)}}),y=a(()=>{const e={};return c.forEach(t=>{e[t]=E.show.bind(null,t)}),e},[]);return r(()=>{v.update({key:b,src:e,originRef:p,render:E.render,overlay:o,width:i,height:l})},[e]),m?d.only(h(m,f({},y,{ref:p}))):null};export{ie as PhotoProvider,ne as PhotoSlider,ae as PhotoView};
//# sourceMappingURL=react-photo-view.modern.js.map