react-spring-lightbox - npm Package Compare versions

Comparing version 1.7.0 to 1.7.1

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/extends"),r=require("@react-spring/web"),i=require("react-use-gesture"),a=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("styled-components"),s=require("react-dom");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),d=c(t),g=c(n),f=c(a),p=c(l),m=c(o),h=c(s);const v=e=>{var t;let{imageRef:n,scale:r,pinchDelta:i,touchOrigin:[a,l],currentTranslate:[o,s]}=e;if(null==n||!n.current)return[0,0];const{height:c,left:u,top:d,width:g}=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect();return[-((a-u-g/2)/r)*i+o,-((l-d-c/2)/r)*i+s]},y=e=>{var t;if(!e.current)return!1;const{bottom:n,left:r,right:i,top:a}=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),{innerHeight:l,innerWidth:o}=window;return r>.5*o||a>.5*l||i<.5*o||n<.5*l};var b;const w=["style"];function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){f.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const O={pinching:!1,scale:1,translateX:0,translateY:0},C=t=>{let{imgProps:{style:n},inline:a,isCurrentImage:l,pagerHeight:o,pagerIsDragging:s,setDisableDrag:c,singleClickToZoom:d}=t,f=p.default(t.imgProps,w);const[m,h]=e.useState(!1),b=e.useRef(null),[{scale:x,translateX:C,translateY:k},D]=r.useSpring((()=>E(E({},O),{},{onChange:(e,t)=>{(e.value.scale<1||!e.value.pinching)&&t.start(O),e.value.scale>1&&y(b)&&t.start(O)},onRest:(e,t)=>{1===e.value.scale&&(t.start(O),c(!1))}})));return e.useEffect((()=>{l||1===x.get()||D.start(O)}),[l,x,D]),i.useGesture({onDrag:e=>{let{movement:[t,n],pinching:r,cancel:i,first:a,memo:l={initialTranslateX:0,initialTranslateY:0},touches:o,tap:c}=e;if(!(s||1===x.get()||c||(t&&n&&!m&&h(!0),o>1||r||x.get()<=1)))return x.get()>1&&y(b)?void i():a?{initialTranslateX:C.get(),initialTranslateY:k.get()}:(D.start({translateX:l.initialTranslateX+t,translateY:l.initialTranslateY+n}),l)},onDragEnd:e=>{let{memo:t}=e;void 0!==t&&setTimeout((()=>h(!1)),100)},onPinch:e=>{let{movement:[t],origin:[n,r],event:i,ctrlKey:a,last:l,cancel:o}=e;if(s)return;if(c(!0),t&&!m&&h(!0),l)return void o();const u=a?1e3:250,d=x.get()+t/u,g=d-x.get();let f=[n,r];"clientX"in i&&"clientY"in i&&a&&(f=[i.clientX,i.clientY]);const[p,y]=v({currentTranslate:[C.get(),k.get()],imageRef:b,pinchDelta:g,scale:x.get(),touchOrigin:f});d<.5?D.start({pinching:!0,scale:.5}):d>3?D.start({pinching:!0,scale:3}):D.start({pinching:!0,scale:d,translateX:p,translateY:y})},onPinchEnd:()=>{s||(x.get()>1?c(!0):D.start(O),setTimeout((()=>h(!1)),100))}},{domTarget:b,drag:{filterTaps:!0},enabled:!a,eventOptions:{passive:!1}}),(t=>{let{ref:n,latency:r=300,enabled:i=!0,onSingleClick:a=(()=>null),onDoubleClick:l=(()=>null)}=t;e.useEffect((()=>{const e=n.current;let t,o=0;const s=e=>{i&&(o+=1,t=setTimeout((()=>{1===o?a(e):2===o&&l(e),o=0}),r))};return null==e||e.addEventListener("click",s),()=>{null==e||e.removeEventListener("click",s),t&&clearTimeout(t)}}))})({[d?"onSingleClick":"onDoubleClick"]:e=>{if(s||m)return void e.stopPropagation();if(1!==x.get())return void D.start(O);const{clientX:t,clientY:n}=e,r=x.get()+1,i=r-x.get(),[a,l]=v({currentTranslate:[C.get(),k.get()],imageRef:b,pinchDelta:i,scale:x.get(),touchOrigin:[t,n]});c(!0),D.start({pinching:!0,scale:r,translateX:a,translateY:l})},enabled:!a,latency:d?0:200,ref:b}),u.default.createElement(P,g.default({className:"lightbox-image",draggable:"false",onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:e=>{e.preventDefault()},ref:b,style:E(E({},n),{},{maxHeight:o,transform:r.to([x,C,k],((e,t,n)=>"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")))},l&&{willChange:"transform"})},f))};C.displayName="Image";const P=m.default(r.animated.img)(b||(b=d.default(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"])));var k,D,T,j,N;const S=t=>{let{currentIndex:n,images:a,imageStageHeight:l,imageStageWidth:o,inline:s,onClose:c,onNext:d,onPrev:f,renderImageOverlay:p,singleClickToZoom:m}=t;const h=e.useRef(!0),[v,y]=e.useState(!1),[b,w]=e.useState("100%"),[x,E]=e.useState(!1);e.useEffect((()=>{const e=s?l:l-50;e!==b&&w(e)}),[s,b,l]);const O=u.default.useCallback((function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const i=(e-n)*o+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}}),[n,o]),[P,k]=r.useSprings(a.length,(e=>O(e)));e.useEffect((()=>{h.current?h.current=!1:k.start((e=>O(e)))}),[n,O,k]);const D=i.useGesture({onDrag:e=>{let{down:t,movement:[n],direction:[r],velocity:i,distance:a,cancel:l,active:s,touches:c,tap:u}=e;if(v||0===n||u)return;x||E(!0);const g=Math.abs(r)>.7;if((t&&g&&a>o/3.5||t&&g&&i>2)&&s){const e=r>0?-1:1;return l(),void(e>0?d():e<0&&f())}c>1?l():k.start((e=>O(e,t,n)))},onDragEnd:()=>{x&&(k.start((e=>O(e))),setTimeout((()=>E(!1)),100))},onWheel:e=>{let{velocity:t,direction:[n,r],ctrlKey:i}=e;if(i||v||0===t)return;x||E(!0);if(t>1.1){const e=n+r>0?-1:1;e>0?d():e<0&&f()}},onWheelEnd:()=>{k.start((e=>O(e))),setTimeout((()=>E(!1)),100)}},{drag:{filterTaps:!0},wheel:{enabled:!s}});return u.default.createElement(I,null,P.map(((e,t)=>{let{display:r,x:i}=e;return u.default.createElement(X,g.default({},D(),{className:"lightbox-image-pager",key:t,onClick:()=>{if(c)return Math.abs(i.get())<1&&!v&&c()},role:"presentation",style:{display:r,transform:i.to((e=>"translateX(".concat(e,"px)")))}}),u.default.createElement(W,null,u.default.createElement(L,null,u.default.createElement(H,{onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},u.default.createElement(C,{imgProps:a[t],inline:s,isCurrentImage:t===n,pagerHeight:b,pagerIsDragging:x,setDisableDrag:y,singleClickToZoom:m}),p()))))})))};S.displayName="ImagePager";const I=m.default.div(k||(k=d.default(["\n    height: 100%;\n    width: 100%;\n"]))),L=m.default.div(D||(D=d.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),W=m.default.div(T||(T=d.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),X=m.default(r.animated.div)(j||(j=d.default(["\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    height: 100%;\n    width: 100%;\n    will-change: transform;\n    touch-action: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"]))),H=m.default.div(N||(N=d.default(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"])));var Y;const R=t=>{let{className:n="",currentIndex:r,images:i,inline:a,onClose:l,onNext:o,onPrev:s,renderImageOverlay:c,renderNextButton:d,renderPrevButton:g,singleClickToZoom:f}=t;const p=r>0,m=r+1<i.length,h=m?o:()=>null,v=p?s:()=>null,[{height:y,width:b},w]=(()=>{var t,n;const r=e.useRef(null),[i,a]=e.useState(null),[l,o]=e.useState({height:(null===(t=r.current)||void 0===t?void 0:t.clientHeight)||0,width:(null===(n=r.current)||void 0===n?void 0:n.clientWidth)||0}),s=e.useCallback((e=>{null!==e&&(a(e),o({height:e.clientHeight,width:e.clientWidth}))}),[]);return e.useEffect((()=>{const e=()=>{if(i){const e=i.clientHeight,t=i.clientWidth;e===l.height&&t===l.width||o({height:e,width:t})}};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}),[i,l.height,l.width]),[l,s]})();return u.default.createElement(q,{className:n,"data-testid":"lightbox-image-stage",ref:w},g({canPrev:p}),b&&u.default.createElement(S,{currentIndex:r,images:i,imageStageHeight:y,imageStageWidth:b,inline:a,onClose:l,onNext:h,onPrev:v,renderImageOverlay:c,singleClickToZoom:f}),d({canNext:m}))},q=m.default.div(Y||(Y=d.default(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));var B;function Z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function A(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(n),!0).forEach((function(t){f.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const U=e=>{let{children:t,className:n,isOpen:i,pageTransitionConfig:a,style:l}=e;const o={config:A(A({},r.config.default),{},{friction:32,mass:1,tension:320}),enter:{opacity:1,transform:"scale(1)"},from:{opacity:0,transform:"scale(0.75)"},leave:{opacity:0,transform:"scale(0.75)"}},s=r.useTransition(i,A(A({},o),a));return u.default.createElement(u.default.Fragment,null,s(((e,r)=>r&&u.default.createElement(z,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:A(A({},e),l)},t))))},z=m.default(r.animated.div)(B||(B=d.default(["\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 400;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n"])));class F extends u.default.Component{constructor(){super(...arguments),f.default(this,"portalContainer",void 0),f.default(this,"body",void 0),f.default(this,"preventWheel",(e=>e.preventDefault()))}componentDidMount(){this.body=document.body,this.portalContainer=document.createElement("div"),this.portalContainer.setAttribute("class","lightbox-portal"),this.body.appendChild(this.portalContainer),this.forceUpdate(),this.portalContainer.addEventListener("wheel",this.preventWheel)}componentWillUnmount(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}render(){if(void 0===this.portalContainer)return null;const{children:e}=this.props;return u.default.createElement(u.default.Fragment,null,h.default.createPortal(e,this.portalContainer))}}module.exports=t=>{let{isOpen:n,onClose:r,inline:i=!1,images:a=[],currentIndex:l,onPrev:o,onNext:s,renderHeader:c=(()=>null),renderFooter:d=(()=>null),renderPrevButton:g=(()=>null),renderNextButton:f=(()=>null),renderImageOverlay:p=(()=>null),className:m="",singleClickToZoom:h=!1,style:v={},pageTransitionConfig:y=null}=t;e.useEffect((()=>{const e=e=>{n&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=e=>{if(n)switch(e.key){case"ArrowLeft":o();break;case"ArrowRight":s();break;case"Escape":r&&r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),()=>{document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}}));const b=u.default.createElement(R,{currentIndex:l,images:a,inline:i,onClose:r,onNext:s,onPrev:o,renderImageOverlay:p,renderNextButton:f,renderPrevButton:g,singleClickToZoom:h});return i?b:u.default.createElement(F,null,u.default.createElement(U,{className:m,isOpen:n,pageTransitionConfig:y,style:v},c(),b,d()))};
+"use strict";var e=require("react"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("@babel/runtime/helpers/extends"),r=require("@react-spring/web"),i=require("react-use-gesture"),a=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/helpers/objectWithoutProperties"),o=require("styled-components"),s=require("react-dom");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),d=c(t),g=c(n),f=c(a),p=c(l),m=c(o),h=c(s);const v=e=>{var t;let{imageRef:n,scale:r,pinchDelta:i,touchOrigin:[a,l],currentTranslate:[o,s]}=e;if(null==n||!n.current)return[0,0];const{height:c,left:u,top:d,width:g}=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect();return[-((a-u-g/2)/r)*i+o,-((l-d-c/2)/r)*i+s]},y=e=>{var t;if(!e.current)return!1;const{bottom:n,left:r,right:i,top:a}=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),{innerHeight:l,innerWidth:o}=window;return r>.5*o||a>.5*l||i<.5*o||n<.5*l};var b;const w=["style"];function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function E(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){f.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const O={pinching:!1,scale:1,translateX:0,translateY:0},C=t=>{let{imgProps:{style:n},inline:a,isCurrentImage:l,pagerHeight:o,pagerIsDragging:s,setDisableDrag:c,singleClickToZoom:d}=t,f=p.default(t.imgProps,w);const[m,h]=e.useState(!1),b=e.useRef(null),[{scale:x,translateX:C,translateY:k},D]=r.useSpring((()=>E(E({},O),{},{onChange:(e,t)=>{(e.value.scale<1||!e.value.pinching)&&t.start(O),e.value.scale>1&&y(b)&&t.start(O)},onRest:(e,t)=>{1===e.value.scale&&(t.start(O),c(!1))}})));return e.useEffect((()=>{l||1===x.get()||D.start(O)}),[l,x,D]),i.useGesture({onDrag:e=>{let{movement:[t,n],pinching:r,cancel:i,first:a,memo:l={initialTranslateX:0,initialTranslateY:0},touches:o,tap:c}=e;if(!(s||1===x.get()||c||(t&&n&&!m&&h(!0),o>1||r||x.get()<=1)))return x.get()>1&&y(b)?void i():a?{initialTranslateX:C.get(),initialTranslateY:k.get()}:(D.start({translateX:l.initialTranslateX+t,translateY:l.initialTranslateY+n}),l)},onDragEnd:e=>{let{memo:t}=e;void 0!==t&&setTimeout((()=>h(!1)),100)},onPinch:e=>{let{movement:[t],origin:[n,r],event:i,ctrlKey:a,last:l,cancel:o}=e;if(s)return;if(c(!0),t&&!m&&h(!0),l)return void o();const u=a?1e3:250,d=x.get()+t/u,g=d-x.get();let f=[n,r];"clientX"in i&&"clientY"in i&&a&&(f=[i.clientX,i.clientY]);const[p,y]=v({currentTranslate:[C.get(),k.get()],imageRef:b,pinchDelta:g,scale:x.get(),touchOrigin:f});d<.5?D.start({pinching:!0,scale:.5}):d>3?D.start({pinching:!0,scale:3}):D.start({pinching:!0,scale:d,translateX:p,translateY:y})},onPinchEnd:()=>{s||(x.get()>1?c(!0):D.start(O),setTimeout((()=>h(!1)),100))}},{domTarget:b,drag:{filterTaps:!0},enabled:!a,eventOptions:{passive:!1}}),(t=>{let{ref:n,latency:r=300,enabled:i=!0,onSingleClick:a=(()=>null),onDoubleClick:l=(()=>null)}=t;e.useEffect((()=>{const e=n.current;let t,o=0;const s=e=>{i&&(o+=1,t=setTimeout((()=>{1===o?a(e):2===o&&l(e),o=0}),r))};return null==e||e.addEventListener("click",s),()=>{null==e||e.removeEventListener("click",s),t&&clearTimeout(t)}}))})({[d?"onSingleClick":"onDoubleClick"]:e=>{if(s||m)return void e.stopPropagation();if(1!==x.get())return void D.start(O);const{clientX:t,clientY:n}=e,r=x.get()+1,i=r-x.get(),[a,l]=v({currentTranslate:[C.get(),k.get()],imageRef:b,pinchDelta:i,scale:x.get(),touchOrigin:[t,n]});c(!0),D.start({pinching:!0,scale:r,translateX:a,translateY:l})},enabled:!a,latency:d?0:200,ref:b}),u.default.createElement(P,g.default({$inline:a,className:"lightbox-image",draggable:"false",onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:e=>{e.preventDefault()},ref:b,style:E(E({},n),{},{maxHeight:o,transform:r.to([x,C,k],((e,t,n)=>"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")))},l&&{willChange:"transform"})},f))};C.displayName="Image";const P=m.default(r.animated.img)(b||(b=d.default(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: ",";\n    ::selection {\n        background: none;\n    }\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"}));var k,D,T,j,N;const S=t=>{let{currentIndex:n,images:a,imageStageHeight:l,imageStageWidth:o,inline:s,onClose:c,onNext:d,onPrev:f,renderImageOverlay:p,singleClickToZoom:m}=t;const h=e.useRef(!0),[v,y]=e.useState(!1),[b,w]=e.useState("100%"),[x,E]=e.useState(!1);e.useEffect((()=>{const e=s?l:l-50;e!==b&&w(e)}),[s,b,l]);const O=u.default.useCallback((function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const i=(e-n)*o+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}}),[n,o]),[P,k]=r.useSprings(a.length,(e=>O(e)));e.useEffect((()=>{h.current?h.current=!1:k.start((e=>O(e)))}),[n,O,k]);const D=i.useGesture({onDrag:e=>{let{down:t,movement:[n],direction:[r],velocity:i,distance:a,cancel:l,active:s,touches:c,tap:u}=e;if(v||0===n||u)return;x||E(!0);const g=Math.abs(r)>.7;if((t&&g&&a>o/3.5||t&&g&&i>2)&&s){const e=r>0?-1:1;return l(),void(e>0?d():e<0&&f())}c>1?l():k.start((e=>O(e,t,n)))},onDragEnd:()=>{x&&(k.start((e=>O(e))),setTimeout((()=>E(!1)),100))},onWheel:e=>{let{velocity:t,direction:[n,r],ctrlKey:i}=e;if(i||v||0===t)return;x||E(!0);if(t>1.1){const e=n+r>0?-1:1;e>0?d():e<0&&f()}},onWheelEnd:()=>{k.start((e=>O(e))),setTimeout((()=>E(!1)),100)}},{drag:{filterTaps:!0},wheel:{enabled:!s}});return u.default.createElement(I,null,P.map(((e,t)=>{let{display:r,x:i}=e;return u.default.createElement(X,g.default({$inline:s},D(),{className:"lightbox-image-pager",key:t,onClick:()=>{if(c)return Math.abs(i.get())<1&&!v&&c()},role:"presentation",style:{display:r,transform:i.to((e=>"translateX(".concat(e,"px)")))}}),u.default.createElement(W,null,u.default.createElement(L,null,u.default.createElement(H,{$inline:s,onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},u.default.createElement(C,{imgProps:a[t],inline:s,isCurrentImage:t===n,pagerHeight:b,pagerIsDragging:x,setDisableDrag:y,singleClickToZoom:m}),p()))))})))};S.displayName="ImagePager";const I=m.default.div(k||(k=d.default(["\n    height: 100%;\n    width: 100%;\n"]))),L=m.default.div(D||(D=d.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),W=m.default.div(T||(T=d.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),X=m.default(r.animated.div)(j||(j=d.default(["\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    height: 100%;\n    width: 100%;\n    will-change: transform;\n    touch-action: ",";\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"})),H=m.default.div(N||(N=d.default(["\n    position: relative;\n    touch-action: ",";\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"}));var Y;const R=t=>{let{className:n="",currentIndex:r,images:i,inline:a,onClose:l,onNext:o,onPrev:s,renderImageOverlay:c,renderNextButton:d,renderPrevButton:g,singleClickToZoom:f}=t;const p=r>0,m=r+1<i.length,h=m?o:()=>null,v=p?s:()=>null,[{height:y,width:b},w]=(()=>{var t,n;const r=e.useRef(null),[i,a]=e.useState(null),[l,o]=e.useState({height:(null===(t=r.current)||void 0===t?void 0:t.clientHeight)||0,width:(null===(n=r.current)||void 0===n?void 0:n.clientWidth)||0}),s=e.useCallback((e=>{null!==e&&(a(e),o({height:e.clientHeight,width:e.clientWidth}))}),[]);return e.useEffect((()=>{const e=()=>{if(i){const e=i.clientHeight,t=i.clientWidth;e===l.height&&t===l.width||o({height:e,width:t})}};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}),[i,l.height,l.width]),[l,s]})();return u.default.createElement(q,{className:n,"data-testid":"lightbox-image-stage",ref:w},g({canPrev:p}),b&&u.default.createElement(S,{currentIndex:r,images:i,imageStageHeight:y,imageStageWidth:b,inline:a,onClose:l,onNext:h,onPrev:v,renderImageOverlay:c,singleClickToZoom:f}),d({canNext:m}))},q=m.default.div(Y||(Y=d.default(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));var B;function Z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function $(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(n),!0).forEach((function(t){f.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const A=e=>{let{children:t,className:n,isOpen:i,pageTransitionConfig:a,style:l}=e;const o={config:$($({},r.config.default),{},{friction:32,mass:1,tension:320}),enter:{opacity:1,transform:"scale(1)"},from:{opacity:0,transform:"scale(0.75)"},leave:{opacity:0,transform:"scale(0.75)"}},s=r.useTransition(i,$($({},o),a));return u.default.createElement(u.default.Fragment,null,s(((e,r)=>r&&u.default.createElement(U,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:$($({},e),l)},t))))},U=m.default(r.animated.div)(B||(B=d.default(["\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 400;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n"])));class z extends u.default.Component{constructor(){super(...arguments),f.default(this,"portalContainer",void 0),f.default(this,"body",void 0),f.default(this,"preventWheel",(e=>e.preventDefault()))}componentDidMount(){this.body=document.body,this.portalContainer=document.createElement("div"),this.portalContainer.setAttribute("class","lightbox-portal"),this.body.appendChild(this.portalContainer),this.forceUpdate(),this.portalContainer.addEventListener("wheel",this.preventWheel)}componentWillUnmount(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}render(){if(void 0===this.portalContainer)return null;const{children:e}=this.props;return u.default.createElement(u.default.Fragment,null,h.default.createPortal(e,this.portalContainer))}}module.exports=t=>{let{isOpen:n,onClose:r,inline:i=!1,images:a=[],currentIndex:l,onPrev:o,onNext:s,renderHeader:c=(()=>null),renderFooter:d=(()=>null),renderPrevButton:g=(()=>null),renderNextButton:f=(()=>null),renderImageOverlay:p=(()=>null),className:m="",singleClickToZoom:h=!1,style:v={},pageTransitionConfig:y=null}=t;e.useEffect((()=>{const e=e=>{n&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=e=>{if(n)switch(e.key){case"ArrowLeft":o();break;case"ArrowRight":s();break;case"Escape":r&&r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),()=>{document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}}));const b=u.default.createElement(R,{currentIndex:l,images:a,inline:i,onClose:r,onNext:s,onPrev:o,renderImageOverlay:p,renderNextButton:f,renderPrevButton:g,singleClickToZoom:h});return i?b:u.default.createElement(z,null,u.default.createElement(A,{className:m,isOpen:n,pageTransitionConfig:y,style:v},c(),b,d()))};
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -1,2 +0,2 @@
-import e,{useEffect as t,useRef as n,useState as r,useCallback as i}from"react";import o from"@babel/runtime/helpers/taggedTemplateLiteral";import a from"@babel/runtime/helpers/extends";import{animated as l,useSpring as s,to as c,useSprings as g,config as u,useTransition as d}from"@react-spring/web";import{useGesture as m}from"react-use-gesture";import p from"@babel/runtime/helpers/defineProperty";import h from"@babel/runtime/helpers/objectWithoutProperties";import f from"styled-components";import v from"react-dom";const y=e=>{var t;let{imageRef:n,scale:r,pinchDelta:i,touchOrigin:[o,a],currentTranslate:[l,s]}=e;if(null==n||!n.current)return[0,0];const{height:c,left:g,top:u,width:d}=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect();return[-((o-g-d/2)/r)*i+l,-((a-u-c/2)/r)*i+s]},b=e=>{var t;if(!e.current)return!1;const{bottom:n,left:r,right:i,top:o}=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),{innerHeight:a,innerWidth:l}=window;return r>.5*l||o>.5*a||i<.5*l||n<.5*a};var w;const x=["style"];function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const P={pinching:!1,scale:1,translateX:0,translateY:0},E=i=>{let{imgProps:{style:o},inline:l,isCurrentImage:g,pagerHeight:u,pagerIsDragging:d,setDisableDrag:p,singleClickToZoom:f}=i,v=h(i.imgProps,x);const[w,O]=r(!1),E=n(null),[{scale:k,translateX:T,translateY:j},N]=s((()=>C(C({},P),{},{onChange:(e,t)=>{(e.value.scale<1||!e.value.pinching)&&t.start(P),e.value.scale>1&&b(E)&&t.start(P)},onRest:(e,t)=>{1===e.value.scale&&(t.start(P),p(!1))}})));return t((()=>{g||1===k.get()||N.start(P)}),[g,k,N]),m({onDrag:e=>{let{movement:[t,n],pinching:r,cancel:i,first:o,memo:a={initialTranslateX:0,initialTranslateY:0},touches:l,tap:s}=e;if(!(d||1===k.get()||s||(t&&n&&!w&&O(!0),l>1||r||k.get()<=1)))return k.get()>1&&b(E)?void i():o?{initialTranslateX:T.get(),initialTranslateY:j.get()}:(N.start({translateX:a.initialTranslateX+t,translateY:a.initialTranslateY+n}),a)},onDragEnd:e=>{let{memo:t}=e;void 0!==t&&setTimeout((()=>O(!1)),100)},onPinch:e=>{let{movement:[t],origin:[n,r],event:i,ctrlKey:o,last:a,cancel:l}=e;if(d)return;if(p(!0),t&&!w&&O(!0),a)return void l();const s=o?1e3:250,c=k.get()+t/s,g=c-k.get();let u=[n,r];"clientX"in i&&"clientY"in i&&o&&(u=[i.clientX,i.clientY]);const[m,h]=y({currentTranslate:[T.get(),j.get()],imageRef:E,pinchDelta:g,scale:k.get(),touchOrigin:u});c<.5?N.start({pinching:!0,scale:.5}):c>3?N.start({pinching:!0,scale:3}):N.start({pinching:!0,scale:c,translateX:m,translateY:h})},onPinchEnd:()=>{d||(k.get()>1?p(!0):N.start(P),setTimeout((()=>O(!1)),100))}},{domTarget:E,drag:{filterTaps:!0},enabled:!l,eventOptions:{passive:!1}}),(e=>{let{ref:n,latency:r=300,enabled:i=!0,onSingleClick:o=(()=>null),onDoubleClick:a=(()=>null)}=e;t((()=>{const e=n.current;let t,l=0;const s=e=>{i&&(l+=1,t=setTimeout((()=>{1===l?o(e):2===l&&a(e),l=0}),r))};return null==e||e.addEventListener("click",s),()=>{null==e||e.removeEventListener("click",s),t&&clearTimeout(t)}}))})({[f?"onSingleClick":"onDoubleClick"]:e=>{if(d||w)return void e.stopPropagation();if(1!==k.get())return void N.start(P);const{clientX:t,clientY:n}=e,r=k.get()+1,i=r-k.get(),[o,a]=y({currentTranslate:[T.get(),j.get()],imageRef:E,pinchDelta:i,scale:k.get(),touchOrigin:[t,n]});p(!0),N.start({pinching:!0,scale:r,translateX:o,translateY:a})},enabled:!l,latency:f?0:200,ref:E}),e.createElement(D,a({className:"lightbox-image",draggable:"false",onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:e=>{e.preventDefault()},ref:E,style:C(C({},o),{},{maxHeight:u,transform:c([k,T,j],((e,t,n)=>"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")))},g&&{willChange:"transform"})},v))};E.displayName="Image";const D=f(l.img)(w||(w=o(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"])));var k,T,j,N,I;const L=i=>{let{currentIndex:o,images:l,imageStageHeight:s,imageStageWidth:c,inline:u,onClose:d,onNext:p,onPrev:h,renderImageOverlay:f,singleClickToZoom:v}=i;const y=n(!0),[b,w]=r(!1),[x,O]=r("100%"),[C,P]=r(!1);t((()=>{const e=u?s:s-50;e!==x&&O(e)}),[u,x,s]);const D=e.useCallback((function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r=(e-o)*c+(t?n:0);return e<o-1||e>o+1?{display:"none",x:r}:{display:"flex",x:r}}),[o,c]),[k,T]=g(l.length,(e=>D(e)));t((()=>{y.current?y.current=!1:T.start((e=>D(e)))}),[o,D,T]);const j=m({onDrag:e=>{let{down:t,movement:[n],direction:[r],velocity:i,distance:o,cancel:a,active:l,touches:s,tap:g}=e;if(b||0===n||g)return;C||P(!0);const u=Math.abs(r)>.7;if((t&&u&&o>c/3.5||t&&u&&i>2)&&l){const e=r>0?-1:1;return a(),void(e>0?p():e<0&&h())}s>1?a():T.start((e=>D(e,t,n)))},onDragEnd:()=>{C&&(T.start((e=>D(e))),setTimeout((()=>P(!1)),100))},onWheel:e=>{let{velocity:t,direction:[n,r],ctrlKey:i}=e;if(i||b||0===t)return;C||P(!0);if(t>1.1){const e=n+r>0?-1:1;e>0?p():e<0&&h()}},onWheelEnd:()=>{T.start((e=>D(e))),setTimeout((()=>P(!1)),100)}},{drag:{filterTaps:!0},wheel:{enabled:!u}});return e.createElement(W,null,k.map(((t,n)=>{let{display:r,x:i}=t;return e.createElement(S,a({},j(),{className:"lightbox-image-pager",key:n,onClick:()=>{if(d)return Math.abs(i.get())<1&&!b&&d()},role:"presentation",style:{display:r,transform:i.to((e=>"translateX(".concat(e,"px)")))}}),e.createElement(H,null,e.createElement(X,null,e.createElement(Y,{onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(E,{imgProps:l[n],inline:u,isCurrentImage:n===o,pagerHeight:x,pagerIsDragging:C,setDisableDrag:w,singleClickToZoom:v}),f()))))})))};L.displayName="ImagePager";const W=f.div(k||(k=o(["\n    height: 100%;\n    width: 100%;\n"]))),X=f.div(T||(T=o(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),H=f.div(j||(j=o(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),S=f(l.div)(N||(N=o(["\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    height: 100%;\n    width: 100%;\n    will-change: transform;\n    touch-action: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"]))),Y=f.div(I||(I=o(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"])));var B;const R=o=>{let{className:a="",currentIndex:l,images:s,inline:c,onClose:g,onNext:u,onPrev:d,renderImageOverlay:m,renderNextButton:p,renderPrevButton:h,singleClickToZoom:f}=o;const v=l>0,y=l+1<s.length,b=y?u:()=>null,w=v?d:()=>null,[{height:x,width:O},C]=(()=>{var e,o;const a=n(null),[l,s]=r(null),[c,g]=r({height:(null===(e=a.current)||void 0===e?void 0:e.clientHeight)||0,width:(null===(o=a.current)||void 0===o?void 0:o.clientWidth)||0}),u=i((e=>{null!==e&&(s(e),g({height:e.clientHeight,width:e.clientWidth}))}),[]);return t((()=>{const e=()=>{if(l){const e=l.clientHeight,t=l.clientWidth;e===c.height&&t===c.width||g({height:e,width:t})}};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}),[l,c.height,c.width]),[c,u]})();return e.createElement(Z,{className:a,"data-testid":"lightbox-image-stage",ref:C},h({canPrev:v}),O&&e.createElement(L,{currentIndex:l,images:s,imageStageHeight:x,imageStageWidth:O,inline:c,onClose:g,onNext:b,onPrev:w,renderImageOverlay:m,singleClickToZoom:f}),p({canNext:y}))},Z=f.div(B||(B=o(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));var A;function U(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function z(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?U(Object(n),!0).forEach((function(t){p(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):U(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const F=t=>{let{children:n,className:r,isOpen:i,pageTransitionConfig:o,style:a}=t;const l={config:z(z({},u.default),{},{friction:32,mass:1,tension:320}),enter:{opacity:1,transform:"scale(1)"},from:{opacity:0,transform:"scale(0.75)"},leave:{opacity:0,transform:"scale(0.75)"}},s=d(i,z(z({},l),o));return e.createElement(e.Fragment,null,s(((t,i)=>i&&e.createElement(M,{className:"lightbox-container".concat(r?" ".concat(r):""),"data-testid":"lightbox-container",style:z(z({},t),a)},n))))},M=f(l.div)(A||(A=o(["\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 400;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n"])));class K extends e.Component{constructor(){super(...arguments),p(this,"portalContainer",void 0),p(this,"body",void 0),p(this,"preventWheel",(e=>e.preventDefault()))}componentDidMount(){this.body=document.body,this.portalContainer=document.createElement("div"),this.portalContainer.setAttribute("class","lightbox-portal"),this.body.appendChild(this.portalContainer),this.forceUpdate(),this.portalContainer.addEventListener("wheel",this.preventWheel)}componentWillUnmount(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}render(){if(void 0===this.portalContainer)return null;const{children:t}=this.props;return e.createElement(e.Fragment,null,v.createPortal(t,this.portalContainer))}}const q=n=>{let{isOpen:r,onClose:i,inline:o=!1,images:a=[],currentIndex:l,onPrev:s,onNext:c,renderHeader:g=(()=>null),renderFooter:u=(()=>null),renderPrevButton:d=(()=>null),renderNextButton:m=(()=>null),renderImageOverlay:p=(()=>null),className:h="",singleClickToZoom:f=!1,style:v={},pageTransitionConfig:y=null}=n;t((()=>{const e=e=>{r&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=e=>{if(r)switch(e.key){case"ArrowLeft":s();break;case"ArrowRight":c();break;case"Escape":i&&i();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),()=>{document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}}));const b=e.createElement(R,{currentIndex:l,images:a,inline:o,onClose:i,onNext:c,onPrev:s,renderImageOverlay:p,renderNextButton:m,renderPrevButton:d,singleClickToZoom:f});return o?b:e.createElement(K,null,e.createElement(F,{className:h,isOpen:r,pageTransitionConfig:y,style:v},g(),b,u()))};export{q as default};
+import e,{useEffect as t,useRef as n,useState as r,useCallback as i}from"react";import o from"@babel/runtime/helpers/taggedTemplateLiteral";import a from"@babel/runtime/helpers/extends";import{animated as l,useSpring as s,to as c,useSprings as g,config as u,useTransition as d}from"@react-spring/web";import{useGesture as p}from"react-use-gesture";import m from"@babel/runtime/helpers/defineProperty";import h from"@babel/runtime/helpers/objectWithoutProperties";import f from"styled-components";import v from"react-dom";const y=e=>{var t;let{imageRef:n,scale:r,pinchDelta:i,touchOrigin:[o,a],currentTranslate:[l,s]}=e;if(null==n||!n.current)return[0,0];const{height:c,left:g,top:u,width:d}=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect();return[-((o-g-d/2)/r)*i+l,-((a-u-c/2)/r)*i+s]},b=e=>{var t;if(!e.current)return!1;const{bottom:n,left:r,right:i,top:o}=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),{innerHeight:a,innerWidth:l}=window;return r>.5*l||o>.5*a||i<.5*l||n<.5*a};var w;const x=["style"];function O(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const P={pinching:!1,scale:1,translateX:0,translateY:0},E=i=>{let{imgProps:{style:o},inline:l,isCurrentImage:g,pagerHeight:u,pagerIsDragging:d,setDisableDrag:m,singleClickToZoom:f}=i,v=h(i.imgProps,x);const[w,O]=r(!1),E=n(null),[{scale:k,translateX:T,translateY:j},N]=s((()=>C(C({},P),{},{onChange:(e,t)=>{(e.value.scale<1||!e.value.pinching)&&t.start(P),e.value.scale>1&&b(E)&&t.start(P)},onRest:(e,t)=>{1===e.value.scale&&(t.start(P),m(!1))}})));return t((()=>{g||1===k.get()||N.start(P)}),[g,k,N]),p({onDrag:e=>{let{movement:[t,n],pinching:r,cancel:i,first:o,memo:a={initialTranslateX:0,initialTranslateY:0},touches:l,tap:s}=e;if(!(d||1===k.get()||s||(t&&n&&!w&&O(!0),l>1||r||k.get()<=1)))return k.get()>1&&b(E)?void i():o?{initialTranslateX:T.get(),initialTranslateY:j.get()}:(N.start({translateX:a.initialTranslateX+t,translateY:a.initialTranslateY+n}),a)},onDragEnd:e=>{let{memo:t}=e;void 0!==t&&setTimeout((()=>O(!1)),100)},onPinch:e=>{let{movement:[t],origin:[n,r],event:i,ctrlKey:o,last:a,cancel:l}=e;if(d)return;if(m(!0),t&&!w&&O(!0),a)return void l();const s=o?1e3:250,c=k.get()+t/s,g=c-k.get();let u=[n,r];"clientX"in i&&"clientY"in i&&o&&(u=[i.clientX,i.clientY]);const[p,h]=y({currentTranslate:[T.get(),j.get()],imageRef:E,pinchDelta:g,scale:k.get(),touchOrigin:u});c<.5?N.start({pinching:!0,scale:.5}):c>3?N.start({pinching:!0,scale:3}):N.start({pinching:!0,scale:c,translateX:p,translateY:h})},onPinchEnd:()=>{d||(k.get()>1?m(!0):N.start(P),setTimeout((()=>O(!1)),100))}},{domTarget:E,drag:{filterTaps:!0},enabled:!l,eventOptions:{passive:!1}}),(e=>{let{ref:n,latency:r=300,enabled:i=!0,onSingleClick:o=(()=>null),onDoubleClick:a=(()=>null)}=e;t((()=>{const e=n.current;let t,l=0;const s=e=>{i&&(l+=1,t=setTimeout((()=>{1===l?o(e):2===l&&a(e),l=0}),r))};return null==e||e.addEventListener("click",s),()=>{null==e||e.removeEventListener("click",s),t&&clearTimeout(t)}}))})({[f?"onSingleClick":"onDoubleClick"]:e=>{if(d||w)return void e.stopPropagation();if(1!==k.get())return void N.start(P);const{clientX:t,clientY:n}=e,r=k.get()+1,i=r-k.get(),[o,a]=y({currentTranslate:[T.get(),j.get()],imageRef:E,pinchDelta:i,scale:k.get(),touchOrigin:[t,n]});m(!0),N.start({pinching:!0,scale:r,translateX:o,translateY:a})},enabled:!l,latency:f?0:200,ref:E}),e.createElement(D,a({$inline:l,className:"lightbox-image",draggable:"false",onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:e=>{e.preventDefault()},ref:E,style:C(C({},o),{},{maxHeight:u,transform:c([k,T,j],((e,t,n)=>"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")))},g&&{willChange:"transform"})},v))};E.displayName="Image";const D=f(l.img)(w||(w=o(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: ",";\n    ::selection {\n        background: none;\n    }\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"}));var k,T,j,N,I;const L=i=>{let{currentIndex:o,images:l,imageStageHeight:s,imageStageWidth:c,inline:u,onClose:d,onNext:m,onPrev:h,renderImageOverlay:f,singleClickToZoom:v}=i;const y=n(!0),[b,w]=r(!1),[x,O]=r("100%"),[C,P]=r(!1);t((()=>{const e=u?s:s-50;e!==x&&O(e)}),[u,x,s]);const D=e.useCallback((function(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;const r=(e-o)*c+(t?n:0);return e<o-1||e>o+1?{display:"none",x:r}:{display:"flex",x:r}}),[o,c]),[k,T]=g(l.length,(e=>D(e)));t((()=>{y.current?y.current=!1:T.start((e=>D(e)))}),[o,D,T]);const j=p({onDrag:e=>{let{down:t,movement:[n],direction:[r],velocity:i,distance:o,cancel:a,active:l,touches:s,tap:g}=e;if(b||0===n||g)return;C||P(!0);const u=Math.abs(r)>.7;if((t&&u&&o>c/3.5||t&&u&&i>2)&&l){const e=r>0?-1:1;return a(),void(e>0?m():e<0&&h())}s>1?a():T.start((e=>D(e,t,n)))},onDragEnd:()=>{C&&(T.start((e=>D(e))),setTimeout((()=>P(!1)),100))},onWheel:e=>{let{velocity:t,direction:[n,r],ctrlKey:i}=e;if(i||b||0===t)return;C||P(!0);if(t>1.1){const e=n+r>0?-1:1;e>0?m():e<0&&h()}},onWheelEnd:()=>{T.start((e=>D(e))),setTimeout((()=>P(!1)),100)}},{drag:{filterTaps:!0},wheel:{enabled:!u}});return e.createElement(W,null,k.map(((t,n)=>{let{display:r,x:i}=t;return e.createElement(S,a({$inline:u},j(),{className:"lightbox-image-pager",key:n,onClick:()=>{if(d)return Math.abs(i.get())<1&&!b&&d()},role:"presentation",style:{display:r,transform:i.to((e=>"translateX(".concat(e,"px)")))}}),e.createElement(H,null,e.createElement(X,null,e.createElement(Y,{$inline:u,onClick:e=>{e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(E,{imgProps:l[n],inline:u,isCurrentImage:n===o,pagerHeight:x,pagerIsDragging:C,setDisableDrag:w,singleClickToZoom:v}),f()))))})))};L.displayName="ImagePager";const W=f.div(k||(k=o(["\n    height: 100%;\n    width: 100%;\n"]))),X=f.div(T||(T=o(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),H=f.div(j||(j=o(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),S=f(l.div)(N||(N=o(["\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    height: 100%;\n    width: 100%;\n    will-change: transform;\n    touch-action: ",";\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"})),Y=f.div(I||(I=o(["\n    position: relative;\n    touch-action: ",";\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"])),(e=>{let{$inline:t}=e;return t?"pan-y":"none"}));var B;const R=o=>{let{className:a="",currentIndex:l,images:s,inline:c,onClose:g,onNext:u,onPrev:d,renderImageOverlay:p,renderNextButton:m,renderPrevButton:h,singleClickToZoom:f}=o;const v=l>0,y=l+1<s.length,b=y?u:()=>null,w=v?d:()=>null,[{height:x,width:O},C]=(()=>{var e,o;const a=n(null),[l,s]=r(null),[c,g]=r({height:(null===(e=a.current)||void 0===e?void 0:e.clientHeight)||0,width:(null===(o=a.current)||void 0===o?void 0:o.clientWidth)||0}),u=i((e=>{null!==e&&(s(e),g({height:e.clientHeight,width:e.clientWidth}))}),[]);return t((()=>{const e=()=>{if(l){const e=l.clientHeight,t=l.clientWidth;e===c.height&&t===c.width||g({height:e,width:t})}};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}),[l,c.height,c.width]),[c,u]})();return e.createElement(Z,{className:a,"data-testid":"lightbox-image-stage",ref:C},h({canPrev:v}),O&&e.createElement(L,{currentIndex:l,images:s,imageStageHeight:x,imageStageWidth:O,inline:c,onClose:g,onNext:b,onPrev:w,renderImageOverlay:p,singleClickToZoom:f}),m({canNext:y}))},Z=f.div(B||(B=o(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));var $;function A(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function U(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?A(Object(n),!0).forEach((function(t){m(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):A(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const z=t=>{let{children:n,className:r,isOpen:i,pageTransitionConfig:o,style:a}=t;const l={config:U(U({},u.default),{},{friction:32,mass:1,tension:320}),enter:{opacity:1,transform:"scale(1)"},from:{opacity:0,transform:"scale(0.75)"},leave:{opacity:0,transform:"scale(0.75)"}},s=d(i,U(U({},l),o));return e.createElement(e.Fragment,null,s(((t,i)=>i&&e.createElement(F,{className:"lightbox-container".concat(r?" ".concat(r):""),"data-testid":"lightbox-container",style:U(U({},t),a)},n))))},F=f(l.div)($||($=o(["\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 400;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n"])));class M extends e.Component{constructor(){super(...arguments),m(this,"portalContainer",void 0),m(this,"body",void 0),m(this,"preventWheel",(e=>e.preventDefault()))}componentDidMount(){this.body=document.body,this.portalContainer=document.createElement("div"),this.portalContainer.setAttribute("class","lightbox-portal"),this.body.appendChild(this.portalContainer),this.forceUpdate(),this.portalContainer.addEventListener("wheel",this.preventWheel)}componentWillUnmount(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}render(){if(void 0===this.portalContainer)return null;const{children:t}=this.props;return e.createElement(e.Fragment,null,v.createPortal(t,this.portalContainer))}}const K=n=>{let{isOpen:r,onClose:i,inline:o=!1,images:a=[],currentIndex:l,onPrev:s,onNext:c,renderHeader:g=(()=>null),renderFooter:u=(()=>null),renderPrevButton:d=(()=>null),renderNextButton:p=(()=>null),renderImageOverlay:m=(()=>null),className:h="",singleClickToZoom:f=!1,style:v={},pageTransitionConfig:y=null}=n;t((()=>{const e=e=>{r&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=e=>{if(r)switch(e.key){case"ArrowLeft":s();break;case"ArrowRight":c();break;case"Escape":i&&i();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),()=>{document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}}));const b=e.createElement(R,{currentIndex:l,images:a,inline:o,onClose:i,onNext:c,onPrev:s,renderImageOverlay:m,renderNextButton:p,renderPrevButton:d,singleClickToZoom:f});return o?b:e.createElement(M,null,e.createElement(z,{className:h,isOpen:r,pageTransitionConfig:y,style:v},g(),b,u()))};export{K as default};
 //# sourceMappingURL=index.es.js.map

package.json

 {
     "name": "react-spring-lightbox",
-    "version": "1.7.0",
+    "version": "1.7.1",
     "description": "A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.",
@@ -5,0 +5,0 @@ "author": "Tim Ellenberger <[e-mail]>",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167624

increased by0.92%

Lines of code

366

increased by0.27%

No dependency changes