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