react-spring-lightbox - npm Package Compare versions

Comparing version 1.6.0-beta.0 to 1.6.0-beta.1

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("styled-components"),r=require("@babel/runtime/helpers/extends"),i=require("@babel/runtime/helpers/slicedToArray"),a=require("@babel/runtime/helpers/toConsumableArray"),o=require("@react-spring/web"),l=require("react-use-gesture"),u=require("@babel/runtime/helpers/defineProperty"),c=require("@babel/runtime/helpers/objectWithoutProperties"),s=require("@babel/runtime/helpers/classCallCheck"),f=require("@babel/runtime/helpers/createClass"),d=require("@babel/runtime/helpers/assertThisInitialized"),g=require("@babel/runtime/helpers/inherits"),p=require("@babel/runtime/helpers/possibleConstructorReturn"),v=require("@babel/runtime/helpers/getPrototypeOf"),m=require("react-dom");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=h(e),w=h(t),O=h(n),x=h(r),E=h(i),C=h(a),P=h(u),k=h(c),D=h(s),T=h(f),j=h(d),S=h(g),B=h(p),I=h(v),N=h(m),X=function(e){var t,n=e.imageRef,r=e.scale,i=e.pinchDelta,a=E.default(e.touchOrigin,2),o=a[0],l=a[1],u=E.default(e.currentTranslate,2),c=u[0],s=u[1];if(null==n||!n.current)return[0,0];var f=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),d=f.height,g=f.left,p=f.top;return[-((o-g-f.width/2)/r)*i+c,-((l-p-d/2)/r)*i+s]},q=function(e){var t;if(!e.current)return!1;var n=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),r=n.bottom,i=n.left,a=n.right,o=n.top,l=window,u=l.innerHeight,c=l.innerWidth;return i>.5*c||o>.5*u||a<.5*c||r<.5*u},R=["style"];function Y(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 L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Y(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Y(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var W=function(t){var n,r=t.imgProps,i=r.style,a=k.default(r,R),u=t.isCurrentImage,c=t.pagerHeight,s=t.pagerIsDragging,f=t.setDisableDrag,d=t.singleClickToZoom,g=e.useState(!1),p=E.default(g,2),v=p[0],m=p[1],h=e.useRef(null),y=o.useSpring((function(){return L(L({},{pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0}),{},{onChange:function(e,t){e.value.resettingBounds||e.value.resettingScale||((e.value.scale<1||!e.value.pinching)&&t.start(L(L({},{pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0}),{},{resettingScale:!0})),e.value.scale>1&&q(h)&&j.start(L(L({},{pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0}),{},{resettingBounds:!0})))},onRest:function(e,t){1===e.value.scale&&(t.start({pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0}),f(!1))}})})),w=E.default(y,2),O=w[0],C=O.scale,D=O.translateX,T=O.translateY,j=w[1];return e.useEffect((function(){u||1===C.get()||j.start({pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0})}),[u,C,j]),l.useGesture({onDrag:function(e){var t=E.default(e.movement,2),n=t[0],r=t[1],i=e.pinching,a=e.cancel,o=e.first,l=e.memo,u=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,c=e.touches;if(!(s||1===C.get()||(n&&r&&!v&&m(!0),c>1||i||C.get()<=1)))return C.get()>1&&q(h)?void a():o?{initialTranslateX:D.get(),initialTranslateY:T.get()}:(j.start({translateX:u.initialTranslateX+n,translateY:u.initialTranslateY+r}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return m(!1)}),100)},onPinch:function(e){var t=E.default(e.movement,1)[0],n=E.default(e.origin,2),r=n[0],i=n[1],a=e.event,o=e.ctrlKey,l=e.last,u=e.cancel;if(!s)if(f(!0),t&&!v&&m(!0),l)u();else{var c=o?1e3:250,d=C.get()+t/c,g=d-C.get(),p=[r,i];"clientX"in a&&"clientY"in a&&o&&(p=[a.clientX,a.clientY]);var y=X({currentTranslate:[D.get(),T.get()],imageRef:h,pinchDelta:g,scale:C.get(),touchOrigin:p}),b=E.default(y,2),w=b[0],O=b[1];d<.5?j.start({pinching:!0,scale:.5}):d>3?j.start({pinching:!0,scale:3}):j.start({pinching:!0,scale:d,translateX:w,translateY:O})}},onPinchEnd:function(){s||(C.get()>1?f(!0):j.start({pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0}),setTimeout((function(){return m(!1)}),100))}},{domTarget:h,eventOptions:{passive:!1}}),function(t){var n=t.ref,r=t.latency,i=void 0===r?300:r,a=t.onSingleClick,o=void 0===a?function(){return null}:a,l=t.onDoubleClick,u=void 0===l?function(){return null}:l;e.useEffect((function(){var e,t=n.current,r=0,a=function(t){r+=1,e=setTimeout((function(){1===r?o(t):2===r&&u(t),r=0}),i)};return null==t||t.addEventListener("click",a),function(){null==t||t.removeEventListener("click",a),e&&clearTimeout(e)}}))}((n={},P.default(n,d?"onSingleClick":"onDoubleClick",(function(e){if(s||v)e.stopPropagation();else if(1===C.get()){var t=e.clientX,n=e.clientY,r=C.get()+1,i=r-C.get(),a=X({currentTranslate:[D.get(),T.get()],imageRef:h,pinchDelta:i,scale:C.get(),touchOrigin:[t,n]}),o=E.default(a,2),l=o[0],u=o[1];f(!0),j.start({pinching:!0,scale:r,translateX:l,translateY:u})}else j.start({pinching:!1,resettingBounds:!1,resettingScale:!1,scale:1,translateX:0,translateY:0})})),P.default(n,"latency",d?0:200),P.default(n,"ref",h),n)),b.default.createElement(b.default.Fragment,null,b.default.createElement(F,x.default({className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:h,style:L(L({},i),{},{maxHeight:c,transform:o.to([C,D,T],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},u&&{willChange:"transform"})},a)))};W.displayName="Image";var H,A,Z,z,F=O.default(o.animated.img)(y||(y=w.default(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),U=function(t){var n=t.currentIndex,r=t.images,i=t.onClose,a=t.onNext,u=t.onPrev,c=t.renderImageOverlay,s=t.singleClickToZoom,f=e.useRef(!0),d=e.useRef(C.default(Array(r.length)).map((function(){return b.default.createRef()}))||[]),g=function(){var t=e.useState({height:window.innerHeight,width:window.innerWidth}),n=E.default(t,2),r=n[0],i=n[1];return e.useEffect((function(){var e=function(){window.innerHeight===r.height&&window.innerWidth===r.width||i({height:window.innerHeight,width:window.innerWidth})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),r}(),p=g.height,v=g.width,m=e.useState(!1),h=E.default(m,2),y=h[0],w=h[1],O=e.useState("100%"),P=E.default(O,2),k=P[0],D=P[1],T=e.useState(!1),j=E.default(T,2),S=j[0],B=j[1],I=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=(e-n)*v+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}},N=o.useSprings(r.length,(function(e){return I(e)})),X=E.default(N,2),q=X[0],R=X[1];e.useEffect((function(){var e=null==d?void 0:d.current[n],t=0;e&&null!=e&&e.current&&(t=e.current.clientHeight-50),k!==t&&D(t)}),[n,k,p]),e.useEffect((function(){f.current?f.current=!1:R.start((function(e){return I(e)}))}));var Y=l.useGesture({onDrag:function(e){var t=e.down,n=E.default(e.movement,1)[0],r=E.default(e.direction,1)[0],i=e.velocity,o=e.distance,l=e.cancel,c=e.active,s=e.touches;if(!y&&0!==n){S||B(!0);var f=Math.abs(r)>.7;if((t&&f&&o>v/3.5||t&&f&&i>2)&&c){var d=r>0?-1:1;return l(),void(d>0?a():d<0&&u())}s>1?l():R.start((function(e){return I(e,t,n)}))}},onDragEnd:function(){S&&setTimeout((function(){return B(!1)}),100)},onWheel:function(e){var t=e.distance,n=e.velocity,r=E.default(e.direction,2),i=r[0],o=r[1];if(!e.ctrlKey&&!y&&0!==n&&(S||B(!0),t>v/3||n>1.5&&t<=v/3)){var l=i+o>0?-1:1;l>0?a():l<0&&u()}},onWheelEnd:function(){R.start((function(e){return I(e,!1,0)})),setTimeout((function(){return B(!1)}),100)}},{drag:{filterTaps:!0}});return b.default.createElement(b.default.Fragment,null,q.map((function(e,t){var a=e.display,o=e.x;return b.default.createElement(Q,x.default({},Y(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(o.get())<1&&!y&&i()},ref:d.current[t],role:"presentation",style:{display:a,transform:o.to((function(e){return"translateX(".concat(e,"px)")}))}}),b.default.createElement(J,null,b.default.createElement(K,null,b.default.createElement(V,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},b.default.createElement(W,{imgProps:r[t],isCurrentImage:t===n,pagerHeight:k,pagerIsDragging:S,setDisableDrag:w,singleClickToZoom:s}),c()))))})))};U.displayName="ImagePager";var M,G,K=O.default.div(H||(H=w.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),J=O.default.div(A||(A=w.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),Q=O.default(o.animated.div)(Z||(Z=w.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"]))),V=O.default.div(z||(z=w.default(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),$=function(e){var t=e.currentIndex,n=e.images,r=e.onClose,i=e.onNext,a=e.onPrev,o=e.renderImageOverlay,l=e.renderNextButton,u=e.renderPrevButton,c=e.singleClickToZoom,s=t>0,f=t+1<n.length;return b.default.createElement(_,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},u({canPrev:s}),b.default.createElement(U,{currentIndex:t,images:n,onClose:r,onNext:i,onPrev:a,renderImageOverlay:o,singleClickToZoom:c}),l({canNext:f}))},_=O.default.div(M||(M=w.default(["\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));function ee(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 te(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ee(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ee(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var ne=function(e){var t=e.children,n=e.className,r=e.isOpen,i=e.pageTransitionConfig,a=e.style,l={config:te(te({},o.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)"}},u=o.useTransition(r,te(te({},l),i));return b.default.createElement(b.default.Fragment,null,u((function(e,r){return r&&b.default.createElement(re,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:te(te({},e),a)},t)})))},re=O.default(o.animated.div)(G||(G=w.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"])));function ie(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=I.default(e);if(t){var i=I.default(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return B.default(this,n)}}var ae=function(e){S.default(n,e);var t=ie(n);function n(){var e;D.default(this,n);for(var r=arguments.length,i=new Array(r),a=0;a<r;a++)i[a]=arguments[a];return e=t.call.apply(t,[this].concat(i)),P.default(j.default(e),"portalContainer",void 0),P.default(j.default(e),"body",void 0),P.default(j.default(e),"preventWheel",(function(e){return e.preventDefault()})),e}return T.default(n,[{key:"componentDidMount",value:function(){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)}},{key:"componentWillUnmount",value:function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}},{key:"render",value:function(){if(void 0===this.portalContainer)return null;var e=this.props.children;return N.default.createPortal(e,this.portalContainer)}}]),n}(b.default.Component);module.exports=function(t){var n=t.isOpen,r=t.onClose,i=t.images,a=void 0===i?[]:i,o=t.currentIndex,l=t.onPrev,u=t.onNext,c=t.renderHeader,s=void 0===c?function(){return null}:c,f=t.renderFooter,d=void 0===f?function(){return null}:f,g=t.renderPrevButton,p=void 0===g?function(){return null}:g,v=t.renderNextButton,m=void 0===v?function(){return null}:v,h=t.renderImageOverlay,y=void 0===h?function(){return null}:h,w=t.className,O=void 0===w?"":w,x=t.singleClickToZoom,E=void 0!==x&&x,C=t.style,P=void 0===C?{}:C,k=t.pageTransitionConfig,D=void 0===k?null:k;return e.useEffect((function(){var e=function(e){n&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=function(e){if(n)switch(e.key){case"ArrowLeft":l();break;case"ArrowRight":u();break;case"Escape":r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),b.default.createElement(ae,null,b.default.createElement(ne,{className:O,isOpen:n,pageTransitionConfig:D,style:P},s(),b.default.createElement($,{currentIndex:o,images:a,onClose:r,onNext:u,onPrev:l,renderImageOverlay:y,renderNextButton:m,renderPrevButton:p,singleClickToZoom:E}),d()))};
+"use strict";var e=require("react"),t=require("@babel/runtime/helpers/taggedTemplateLiteral"),n=require("styled-components"),r=require("@babel/runtime/helpers/extends"),i=require("@babel/runtime/helpers/slicedToArray"),a=require("@babel/runtime/helpers/toConsumableArray"),o=require("@react-spring/web"),l=require("react-use-gesture"),u=require("@babel/runtime/helpers/defineProperty"),c=require("@babel/runtime/helpers/objectWithoutProperties"),s=require("@babel/runtime/helpers/classCallCheck"),f=require("@babel/runtime/helpers/createClass"),d=require("@babel/runtime/helpers/assertThisInitialized"),g=require("@babel/runtime/helpers/inherits"),p=require("@babel/runtime/helpers/possibleConstructorReturn"),v=require("@babel/runtime/helpers/getPrototypeOf"),m=require("react-dom");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=h(e),w=h(t),O=h(n),x=h(r),C=h(i),E=h(a),P=h(u),k=h(c),D=h(s),T=h(f),j=h(d),I=h(g),N=h(p),q=h(v),R=h(m),L=function(e){var t,n=e.imageRef,r=e.scale,i=e.pinchDelta,a=C.default(e.touchOrigin,2),o=a[0],l=a[1],u=C.default(e.currentTranslate,2),c=u[0],s=u[1];if(null==n||!n.current)return[0,0];var f=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),d=f.height,g=f.left,p=f.top;return[-((o-g-f.width/2)/r)*i+c,-((l-p-d/2)/r)*i+s]},S=function(e){var t;if(!e.current)return!1;var n=null===(t=e.current)||void 0===t?void 0:t.getBoundingClientRect(),r=n.bottom,i=n.left,a=n.right,o=n.top,l=window,u=l.innerHeight,c=l.innerWidth;return i>.5*c||o>.5*u||a<.5*c||r<.5*u},X=["style"];function W(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 Y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?W(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):W(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var B={pinching:!1,scale:1,translateX:0,translateY:0},H=function(t){var n,r=t.imgProps,i=r.style,a=k.default(r,X),u=t.isCurrentImage,c=t.pagerHeight,s=t.pagerIsDragging,f=t.setDisableDrag,d=t.singleClickToZoom,g=e.useState(!1),p=C.default(g,2),v=p[0],m=p[1],h=e.useRef(null),y=o.useSpring((function(){return Y(Y({},B),{},{onChange:function(e,t){(e.value.scale<1||!e.value.pinching)&&t.start(B),e.value.scale>1&&S(h)&&t.start(B)},onRest:function(e,t){1===e.value.scale&&(t.start(B),f(!1))}})})),w=C.default(y,2),O=w[0],E=O.scale,D=O.translateX,T=O.translateY,j=w[1];return e.useEffect((function(){u||1===E.get()||j.start(B)}),[u,E,j]),l.useGesture({onDrag:function(e){var t=C.default(e.movement,2),n=t[0],r=t[1],i=e.pinching,a=e.cancel,o=e.first,l=e.memo,u=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,c=e.touches;if(!(s||1===E.get()||(n&&r&&!v&&m(!0),c>1||i||E.get()<=1)))return E.get()>1&&S(h)?void a():o?{initialTranslateX:D.get(),initialTranslateY:T.get()}:(j.start({translateX:u.initialTranslateX+n,translateY:u.initialTranslateY+r}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return m(!1)}),100)},onPinch:function(e){var t=C.default(e.movement,1)[0],n=C.default(e.origin,2),r=n[0],i=n[1],a=e.event,o=e.ctrlKey,l=e.last,u=e.cancel;if(!s)if(f(!0),t&&!v&&m(!0),l)u();else{var c=o?1e3:250,d=E.get()+t/c,g=d-E.get(),p=[r,i];"clientX"in a&&"clientY"in a&&o&&(p=[a.clientX,a.clientY]);var y=L({currentTranslate:[D.get(),T.get()],imageRef:h,pinchDelta:g,scale:E.get(),touchOrigin:p}),b=C.default(y,2),w=b[0],O=b[1];d<.5?j.start({pinching:!0,scale:.5}):d>3?j.start({pinching:!0,scale:3}):j.start({pinching:!0,scale:d,translateX:w,translateY:O})}},onPinchEnd:function(){s||(E.get()>1?f(!0):j.start(B),setTimeout((function(){return m(!1)}),100))}},{domTarget:h,eventOptions:{passive:!1}}),function(t){var n=t.ref,r=t.latency,i=void 0===r?300:r,a=t.onSingleClick,o=void 0===a?function(){return null}:a,l=t.onDoubleClick,u=void 0===l?function(){return null}:l;e.useEffect((function(){var e,t=n.current,r=0,a=function(t){r+=1,e=setTimeout((function(){1===r?o(t):2===r&&u(t),r=0}),i)};return null==t||t.addEventListener("click",a),function(){null==t||t.removeEventListener("click",a),e&&clearTimeout(e)}}))}((n={},P.default(n,d?"onSingleClick":"onDoubleClick",(function(e){if(s||v)e.stopPropagation();else if(1===E.get()){var t=e.clientX,n=e.clientY,r=E.get()+1,i=r-E.get(),a=L({currentTranslate:[D.get(),T.get()],imageRef:h,pinchDelta:i,scale:E.get(),touchOrigin:[t,n]}),o=C.default(a,2),l=o[0],u=o[1];f(!0),j.start({pinching:!0,scale:r,translateX:l,translateY:u})}else j.start(B)})),P.default(n,"latency",d?0:200),P.default(n,"ref",h),n)),b.default.createElement(F,x.default({className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:h,style:Y(Y({},i),{},{maxHeight:c,transform:o.to([E,D,T],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},u&&{willChange:"transform"})},a))};H.displayName="Image";var A,Z,z,U,F=O.default(o.animated.img)(y||(y=w.default(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),M=function(t){var n=t.currentIndex,r=t.images,i=t.onClose,a=t.onNext,u=t.onPrev,c=t.renderImageOverlay,s=t.singleClickToZoom,f=e.useRef(!0),d=e.useRef(E.default(Array(r.length)).map((function(){return b.default.createRef()}))||[]),g=function(){var t=e.useState({height:window.innerHeight,width:window.innerWidth}),n=C.default(t,2),r=n[0],i=n[1];return e.useEffect((function(){var e=function(){window.innerHeight===r.height&&window.innerWidth===r.width||i({height:window.innerHeight,width:window.innerWidth})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),r}(),p=g.height,v=g.width,m=e.useState(!1),h=C.default(m,2),y=h[0],w=h[1],O=e.useState("100%"),P=C.default(O,2),k=P[0],D=P[1],T=e.useState(!1),j=C.default(T,2),I=j[0],N=j[1],q=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=(e-n)*v+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}},R=o.useSprings(r.length,(function(e){return q(e)})),L=C.default(R,2),S=L[0],X=L[1];e.useEffect((function(){var e=null==d?void 0:d.current[n],t=0;e&&null!=e&&e.current&&(t=e.current.clientHeight-50),k!==t&&D(t)}),[n,k,p]),e.useEffect((function(){f.current?f.current=!1:X.start((function(e){return q(e)}))}));var W=l.useGesture({onDrag:function(e){var t=e.down,n=C.default(e.movement,1)[0],r=C.default(e.direction,1)[0],i=e.velocity,o=e.distance,l=e.cancel,c=e.active,s=e.touches;if(!y&&0!==n){I||N(!0);var f=Math.abs(r)>.7;if((t&&f&&o>v/3.5||t&&f&&i>2)&&c){var d=r>0?-1:1;return l(),void(d>0?a():d<0&&u())}s>1?l():X.start((function(e){return q(e,t,n)}))}},onDragEnd:function(){I&&setTimeout((function(){return N(!1)}),100)},onWheel:function(e){var t=e.distance,n=e.velocity,r=C.default(e.direction,2),i=r[0],o=r[1];if(!e.ctrlKey&&!y&&0!==n&&(I||N(!0),t>v/3||n>1.5&&t<=v/3)){var l=i+o>0?-1:1;l>0?a():l<0&&u()}},onWheelEnd:function(){X.start((function(e){return q(e,!1,0)})),setTimeout((function(){return N(!1)}),100)}},{drag:{filterTaps:!0}});return b.default.createElement(b.default.Fragment,null,S.map((function(e,t){var a=e.display,o=e.x;return b.default.createElement(V,x.default({},W(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(o.get())<1&&!y&&i()},ref:d.current[t],role:"presentation",style:{display:a,transform:o.to((function(e){return"translateX(".concat(e,"px)")}))}}),b.default.createElement(Q,null,b.default.createElement(J,null,b.default.createElement($,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},b.default.createElement(H,{imgProps:r[t],isCurrentImage:t===n,pagerHeight:k,pagerIsDragging:I,setDisableDrag:w,singleClickToZoom:s}),c()))))})))};M.displayName="ImagePager";var G,K,J=O.default.div(A||(A=w.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),Q=O.default.div(Z||(Z=w.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),V=O.default(o.animated.div)(z||(z=w.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"]))),$=O.default.div(U||(U=w.default(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),_=function(e){var t=e.currentIndex,n=e.images,r=e.onClose,i=e.onNext,a=e.onPrev,o=e.renderImageOverlay,l=e.renderNextButton,u=e.renderPrevButton,c=e.singleClickToZoom,s=t>0,f=t+1<n.length;return b.default.createElement(ee,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},u({canPrev:s}),b.default.createElement(M,{currentIndex:t,images:n,onClose:r,onNext:i,onPrev:a,renderImageOverlay:o,singleClickToZoom:c}),l({canNext:f}))},ee=O.default.div(G||(G=w.default(["\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));function te(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 ne(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?te(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):te(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var re=function(e){var t=e.children,n=e.className,r=e.isOpen,i=e.pageTransitionConfig,a=e.style,l={config:ne(ne({},o.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)"}},u=o.useTransition(r,ne(ne({},l),i));return b.default.createElement(b.default.Fragment,null,u((function(e,r){return r&&b.default.createElement(ie,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:ne(ne({},e),a)},t)})))},ie=O.default(o.animated.div)(K||(K=w.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"])));function ae(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=q.default(e);if(t){var i=q.default(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return N.default(this,n)}}var oe=function(e){I.default(n,e);var t=ae(n);function n(){var e;D.default(this,n);for(var r=arguments.length,i=new Array(r),a=0;a<r;a++)i[a]=arguments[a];return e=t.call.apply(t,[this].concat(i)),P.default(j.default(e),"portalContainer",void 0),P.default(j.default(e),"body",void 0),P.default(j.default(e),"preventWheel",(function(e){return e.preventDefault()})),e}return T.default(n,[{key:"componentDidMount",value:function(){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)}},{key:"componentWillUnmount",value:function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)}},{key:"render",value:function(){if(void 0===this.portalContainer)return null;var e=this.props.children;return R.default.createPortal(e,this.portalContainer)}}]),n}(b.default.Component);module.exports=function(t){var n=t.isOpen,r=t.onClose,i=t.images,a=void 0===i?[]:i,o=t.currentIndex,l=t.onPrev,u=t.onNext,c=t.renderHeader,s=void 0===c?function(){return null}:c,f=t.renderFooter,d=void 0===f?function(){return null}:f,g=t.renderPrevButton,p=void 0===g?function(){return null}:g,v=t.renderNextButton,m=void 0===v?function(){return null}:v,h=t.renderImageOverlay,y=void 0===h?function(){return null}:h,w=t.className,O=void 0===w?"":w,x=t.singleClickToZoom,C=void 0!==x&&x,E=t.style,P=void 0===E?{}:E,k=t.pageTransitionConfig,D=void 0===k?null:k;return e.useEffect((function(){var e=function(e){n&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},t=function(e){if(n)switch(e.key){case"ArrowLeft":l();break;case"ArrowRight":u();break;case"Escape":r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),b.default.createElement(oe,null,b.default.createElement(re,{className:O,isOpen:n,pageTransitionConfig:D,style:P},s(),b.default.createElement(_,{currentIndex:o,images:a,onClose:r,onNext:u,onPrev:l,renderImageOverlay:y,renderNextButton:m,renderPrevButton:p,singleClickToZoom:C}),d()))};
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

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

package.json

 {
     "name": "react-spring-lightbox",
-    "version": "1.6.0-beta.0",
+    "version": "1.6.0-beta.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

Worsened metrics

Total package byte prevSize

157294

decreased by-2.17%

Lines of code

348

decreased by-1.42%

No dependency changes