react-spring-lightbox - npm Package Compare versions

Comparing version 1.4.11-beta.6 to 1.4.11-beta.7

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),n=e(t),r=e(require("styled-components")),i=e(require("@babel/runtime/helpers/slicedToArray")),a=e(require("@babel/runtime/helpers/toConsumableArray")),o=require("@react-spring/web"),c=require("react-use-gesture"),l=e(require("@babel/runtime/helpers/defineProperty")),u=e(require("@babel/runtime/helpers/classCallCheck")),s=e(require("@babel/runtime/helpers/createClass")),f=e(require("@babel/runtime/helpers/assertThisInitialized")),g=e(require("@babel/runtime/helpers/inherits")),d=e(require("@babel/runtime/helpers/possibleConstructorReturn")),p=e(require("@babel/runtime/helpers/getPrototypeOf")),m=e(require("react-dom")),v=function(e){var t=e.imageRef,n=e.scale,r=e.pinchDelta,a=i(e.touchOrigin,2),o=a[0],c=a[1],l=i(e.currentTranslate,2),u=l[0],s=l[1],f=t.current.getBoundingClientRect(),g=f.top;return[-((o-f.left-f.width/2)/n)*r+u,-((c-g-f.height/2)/n)*r+s]},h=function(e){var t=e.current.getBoundingClientRect(),n=t.top,r=t.left,i=t.bottom,a=t.right,o=window,c=o.innerHeight,l=o.innerWidth;return r>.5*l||n>.5*c||a<.5*l||i<.5*c};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 b(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){l(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(e){var r,a=e.src,u=e.alt,s=e.pagerHeight,f=e.isCurrentImage,g=e.setDisableDrag,d=e.singleClickToZoom,p=e.pagerIsDragging,m=t.useState(!1),y=i(m,2),w=y[0],P=y[1],O=t.useRef(),x=function(){return{scale:1,translateX:0,translateY:0,config:b(b({},o.config.default),{},{precision:.01})}},E=o.useSpring((function(){return b(b({},x()),{},{onFrame:function(e){(e.scale<1||!e.pinching)&&N(x),e.scale>1&&h(O)&&N(x())},onRest:function(e){1===e.scale&&g(!1)}})})),k=i(E,2),I=k[0],D=I.scale,j=I.translateX,T=I.translateY,N=k[1];t.useEffect((function(){f||N(x)}));var R=c.useGesture({onPinch:function(e){var t=i(e.movement,1)[0],n=i(e.origin,2),r=n[0],a=n[1],o=e.event,c=e.ctrlKey,l=e.last,u=e.cancel;if(g(!0),t&&!w&&P(!0),l)u();else{var s=c?1e3:250,f=D.value+t/s,d=f-D.value,p=o.clientX,m=o.clientY,h=v({imageRef:O,scale:D.value,pinchDelta:d,currentTranslate:[j.value,T.value],touchOrigin:c?[p,m]:[r,a]}),y=i(h,2),b=y[0],C=y[1];N(f<.5?{scale:.5,pinching:!0}:f>3?{scale:3,pinching:!0}:{scale:f,translateX:b,translateY:C,pinching:!0})}},onPinchEnd:function(){D.value>1?g(!0):N(x),P(!1)},onDragEnd:function(){return P(!1)},onDrag:function(e){var t=i(e.movement,2),n=t[0],r=t[1],a=e.pinching,o=e.event,c=e.cancel,l=e.first,u=e.memo,s=void 0===u?{initialTranslateX:0,initialTranslateY:0}:u;if(n&&r&&!w&&P(!0),!(o.touches&&o.touches.length>1||a||D.value<=1))return D.value>1&&h(O)?void c():l?{initialTranslateX:j.value,initialTranslateY:T.value}:(N({translateX:s.initialTranslateX+n,translateY:s.initialTranslateY+r}),s)}},{domTarget:O,event:{passive:!1}});return t.useEffect(R,[R]),function(e){var n=e.ref,r=e.latency,i=void 0===r?300:r,a=e.onSingleClick,o=void 0===a?function(){return null}:a,c=e.onDoubleClick,l=void 0===c?function(){return null}:c;t.useEffect((function(){var e=n.current,t=0,r=function(e){t+=1,setTimeout((function(){1===t?o(e):2===t&&l(e),t=0}),i)};return e.addEventListener("click",r),function(){e.removeEventListener("click",r)}}))}((l(r={},d?"onSingleClick":"onDoubleClick",(function(e){if(p||w)e.stopPropagation();else if(1===D.value){var t=e.clientX,n=e.clientY,r=D.value+1,a=r-D.value,o=v({imageRef:O,scale:D.value,pinchDelta:a,currentTranslate:[j.value,T.value],touchOrigin:[t,n]}),c=i(o,2),l=c[0],u=c[1];g(!0),N({scale:r,translateX:l,translateY:u,pinching:!0})}else N(x)})),l(r,"ref",O),l(r,"latency",d?0:200),r)),n.createElement(C,{ref:O,className:"lightbox-image",style:b({transform:o.to([D,j,T],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")})),maxHeight:s},f&&{willChange:"transform"}),src:a,alt:u,draggable:"false",onDragStart:function(e){e.preventDefault()},onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}})},C=r(o.animated.img).withConfig({displayName:"Image__AnimatedImage",componentId:"sc-1k35vrn-0"})(["width:auto;max-width:100%;user-select:none;::selection{background:none;}"]),P=function(e){var r=e.images,l=e.currentIndex,u=e.onPrev,s=e.onNext,f=e.onClose,g=e.renderImageOverlay,d=e.singleClickToZoom,p=t.useRef(!0),m=t.useRef(a(Array(r.length)).map((function(){return n.createRef()}))),v=function(){var e=t.useState({width:window.innerWidth,height:window.innerHeight}),n=i(e,2),r=n[0],a=n[1];return t.useEffect((function(){var e=function(){window.innerHeight===r.height&&window.innerWidth===r.width||a({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),r}(),h=v.height,y=v.width,b=t.useState(!1),C=i(b,2),P=C[0],I=C[1],D=t.useState("100%"),j=i(D,2),T=j[0],N=j[1],R=t.useState(!1),S=i(R,2),q=S[0],_=S[1],L=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-l)*y+(t?n:0);return e<l-1||e>l+1?{x:r,display:"none"}:{x:r,display:"flex"}},A=o.useSprings(r.length,L),W=i(A,2),H=W[0],X=W[1];t.useEffect((function(){var e=m.current[l].current.clientHeight-50;T!==e&&N(e)}),[l,T,h]),t.useEffect((function(){p.current?p.current=!1:X(L)}));var B=c.useGesture({onWheel:function(e){var t=e.distance,n=e.velocity,r=i(e.direction,2),a=r[0],o=r[1];if(!e.ctrlKey&&!P&&0!==n&&(t>y/3||n>1.5&&t<=y/3)){var c=a+o>0?-1:1;c>0?s():c<0&&u()}},onWheelEnd:function(){X((function(e){return L(e,!1,0)})),_(!1)},onDrag:function(e){var t=e.down,n=i(e.movement,1)[0],r=i(e.direction,1)[0],a=e.velocity,o=e.distance,c=e.cancel,l=e.touches;if(!P&&0!==n){q||_(!0);var f=Math.abs(r)>.7;if(t&&f&&o>y/3.5||t&&f&&a>2){var g=r>0?-1:1;c(),g>0?s():g<0&&u()}l>1||X((function(e){return L(e,t,n)}))}},onDragEnd:function(){return _(!1)}},{domTarget:m.current[l],event:{passive:!0,capture:!1}});return t.useEffect(B,[B,l]),H.map((function(e,t){var i=e.x,a=e.display;return n.createElement(E,{role:"presentation",ref:m.current[t],key:t,className:"lightbox-image-pager",style:{display:a,transform:i.to((function(e){return"translateX(".concat(e,"px)")}))},onClick:function(){return Math.abs(i.value)<1&&!P&&f()}},n.createElement(x,null,n.createElement(O,null,n.createElement(k,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},n.createElement(w,{setDisableDrag:I,src:r[t].src,alt:r[t].alt,pagerHeight:T,isCurrentImage:t===l,pagerIsDragging:q,singleClickToZoom:d}),g()))))}))},O=r.div.withConfig({displayName:"ImagePager__PagerInnerContentWrapper",componentId:"a18fy4-0"})(["display:flex;justify-content:center;align-items:center;"]),x=r.div.withConfig({displayName:"ImagePager__PagerContentWrapper",componentId:"a18fy4-1"})(["width:100%;display:flex;justify-content:center;"]),E=r(o.animated.div).withConfig({displayName:"ImagePager__AnimatedImagePager",componentId:"a18fy4-2"})(["position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;will-change:transform;touch-action:none;display:flex;flex-direction:column;justify-content:center;align-items:center;"]),k=r.div.withConfig({displayName:"ImagePager__ImageContainer",componentId:"a18fy4-3"})(["position:relative;touch-action:none;user-select:none;"]),I=function(e){var t=e.images,r=e.currentIndex,i=e.onPrev,a=e.onNext,o=e.onClose,c=e.renderPrevButton,l=e.renderNextButton,u=e.renderImageOverlay,s=e.singleClickToZoom,f=r>0,g=r+1<t.length;return n.createElement(D,{className:"lightbox-image-stage"},c({canPrev:f}),n.createElement(P,{images:t,currentIndex:r,onClose:o,onNext:a,onPrev:i,renderImageOverlay:u,singleClickToZoom:s}),l({canNext:g}))},D=r.div.withConfig({displayName:"ImageStage__ImageStageContainer",componentId:"m6g63l-0"})(["flex-grow:1;position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:center;"]);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 T(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){l(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=function(e){var t=e.children,r=e.isOpen,i=e.className,a=e.style,c=(e.pageTransitionConfig,o.useTransition(r,null,{config:o.config.default}));return console.log(c),c.map((function(e){var r=e.item,o=e.key,c=e.props;return r&&c&&n.createElement(R,{key:o,className:"lightbox-container".concat(i?" ".concat(i):""),style:T(T({},c),a)},t)}))},R=r(o.animated.div).withConfig({displayName:"PageContainer__AnimatedPageContainer",componentId:"sc-19m9s01-0"})(["display:flex;flex-direction:column;position:fixed;z-index:400;top:0;bottom:0;left:0;right:0;"]);function S(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 Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=p(e);if(t){var i=p(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return d(this,n)}}var q=function(e){g(n,e);var t=S(n);function n(){var e;u(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)),l(f(e),"preventWheel",(function(e){return e.preventDefault()})),e}return s(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 m.createPortal(e,this.portalContainer)}}]),n}(n.Component),_=function(e){var r=e.isOpen,i=e.onClose,a=e.images,o=e.currentIndex,c=e.onPrev,l=e.onNext,u=e.renderHeader,s=e.renderFooter,f=e.renderPrevButton,g=e.renderNextButton,d=e.renderImageOverlay,p=e.className,m=e.singleClickToZoom,v=e.style,h=e.pageTransitionConfig;return t.useEffect((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":l();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)}})),n.createElement(q,null,n.createElement(N,{isOpen:r,className:p,style:v,pageTransitionConfig:h},u(),n.createElement(I,{images:a,onClose:i,currentIndex:o,onPrev:c,onNext:l,renderPrevButton:f,renderNextButton:g,renderImageOverlay:d,singleClickToZoom:m}),s()))};_.defaultProps={pageTransitionConfig:null,className:null,style:null,renderHeader:function(){return null},renderFooter:function(){return null},renderPrevButton:function(){return null},renderNextButton:function(){return null},renderImageOverlay:function(){return null},singleClickToZoom:!1},module.exports=_;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var t=require("react"),n=e(t),r=e(require("styled-components")),i=e(require("@babel/runtime/helpers/slicedToArray")),a=e(require("@babel/runtime/helpers/toConsumableArray")),o=require("@react-spring/web"),c=require("react-use-gesture"),l=e(require("@babel/runtime/helpers/defineProperty")),u=e(require("@babel/runtime/helpers/classCallCheck")),s=e(require("@babel/runtime/helpers/createClass")),f=e(require("@babel/runtime/helpers/assertThisInitialized")),g=e(require("@babel/runtime/helpers/inherits")),p=e(require("@babel/runtime/helpers/possibleConstructorReturn")),d=e(require("@babel/runtime/helpers/getPrototypeOf")),m=e(require("react-dom")),v=function(e){var t=e.imageRef,n=e.scale,r=e.pinchDelta,a=i(e.touchOrigin,2),o=a[0],c=a[1],l=i(e.currentTranslate,2),u=l[0],s=l[1],f=t.current.getBoundingClientRect(),g=f.top;return[-((o-f.left-f.width/2)/n)*r+u,-((c-g-f.height/2)/n)*r+s]},h=function(e){var t=e.current.getBoundingClientRect(),n=t.top,r=t.left,i=t.bottom,a=t.right,o=window,c=o.innerHeight,l=o.innerWidth;return r>.5*l||n>.5*c||a<.5*l||i<.5*c};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 b(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){l(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(e){var r,a=e.src,u=e.alt,s=e.pagerHeight,f=e.isCurrentImage,g=e.setDisableDrag,p=e.singleClickToZoom,d=e.pagerIsDragging,m=t.useState(!1),y=i(m,2),w=y[0],P=y[1],O=t.useRef(),x=function(){return{scale:1,translateX:0,translateY:0,config:b(b({},o.config.default),{},{precision:.01})}},E=o.useSpring((function(){return b(b({},x()),{},{onFrame:function(e){(e.scale<1||!e.pinching)&&N(x),e.scale>1&&h(O)&&N(x())},onRest:function(e){1===e.scale&&g(!1)}})})),k=i(E,2),I=k[0],D=I.scale,j=I.translateX,T=I.translateY,N=k[1];t.useEffect((function(){f||N(x)}));var R=c.useGesture({onPinch:function(e){var t=i(e.movement,1)[0],n=i(e.origin,2),r=n[0],a=n[1],o=e.event,c=e.ctrlKey,l=e.last,u=e.cancel;if(g(!0),t&&!w&&P(!0),l)u();else{var s=c?1e3:250,f=D.value+t/s,p=f-D.value,d=o.clientX,m=o.clientY,h=v({imageRef:O,scale:D.value,pinchDelta:p,currentTranslate:[j.value,T.value],touchOrigin:c?[d,m]:[r,a]}),y=i(h,2),b=y[0],C=y[1];N(f<.5?{scale:.5,pinching:!0}:f>3?{scale:3,pinching:!0}:{scale:f,translateX:b,translateY:C,pinching:!0})}},onPinchEnd:function(){D.value>1?g(!0):N(x),P(!1)},onDragEnd:function(){return P(!1)},onDrag:function(e){var t=i(e.movement,2),n=t[0],r=t[1],a=e.pinching,o=e.event,c=e.cancel,l=e.first,u=e.memo,s=void 0===u?{initialTranslateX:0,initialTranslateY:0}:u;if(n&&r&&!w&&P(!0),!(o.touches&&o.touches.length>1||a||D.value<=1))return D.value>1&&h(O)?void c():l?{initialTranslateX:j.value,initialTranslateY:T.value}:(N({translateX:s.initialTranslateX+n,translateY:s.initialTranslateY+r}),s)}},{domTarget:O,event:{passive:!1}});return t.useEffect(R,[R]),function(e){var n=e.ref,r=e.latency,i=void 0===r?300:r,a=e.onSingleClick,o=void 0===a?function(){return null}:a,c=e.onDoubleClick,l=void 0===c?function(){return null}:c;t.useEffect((function(){var e=n.current,t=0,r=function(e){t+=1,setTimeout((function(){1===t?o(e):2===t&&l(e),t=0}),i)};return e.addEventListener("click",r),function(){e.removeEventListener("click",r)}}))}((l(r={},p?"onSingleClick":"onDoubleClick",(function(e){if(d||w)e.stopPropagation();else if(1===D.value){var t=e.clientX,n=e.clientY,r=D.value+1,a=r-D.value,o=v({imageRef:O,scale:D.value,pinchDelta:a,currentTranslate:[j.value,T.value],touchOrigin:[t,n]}),c=i(o,2),l=c[0],u=c[1];g(!0),N({scale:r,translateX:l,translateY:u,pinching:!0})}else N(x)})),l(r,"ref",O),l(r,"latency",p?0:200),r)),n.createElement(C,{ref:O,className:"lightbox-image",style:b({transform:o.to([D,j,T],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")})),maxHeight:s},f&&{willChange:"transform"}),src:a,alt:u,draggable:"false",onDragStart:function(e){e.preventDefault()},onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}})},C=r(o.animated.img).withConfig({displayName:"Image__AnimatedImage",componentId:"sc-1k35vrn-0"})(["width:auto;max-width:100%;user-select:none;::selection{background:none;}"]),P=function(e){var r=e.images,l=e.currentIndex,u=e.onPrev,s=e.onNext,f=e.onClose,g=e.renderImageOverlay,p=e.singleClickToZoom,d=t.useRef(!0),m=t.useRef(a(Array(r.length)).map((function(){return n.createRef()}))),v=function(){var e=t.useState({width:window.innerWidth,height:window.innerHeight}),n=i(e,2),r=n[0],a=n[1];return t.useEffect((function(){var e=function(){window.innerHeight===r.height&&window.innerWidth===r.width||a({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),r}(),h=v.height,y=v.width,b=t.useState(!1),C=i(b,2),P=C[0],I=C[1],D=t.useState("100%"),j=i(D,2),T=j[0],N=j[1],R=t.useState(!1),S=i(R,2),q=S[0],_=S[1],L=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-l)*y+(t?n:0);return e<l-1||e>l+1?{x:r,display:"none"}:{x:r,display:"flex"}},A=o.useSprings(r.length,L),W=i(A,2),H=W[0],X=W[1];t.useEffect((function(){var e=m.current[l].current.clientHeight-50;T!==e&&N(e)}),[l,T,h]),t.useEffect((function(){d.current?d.current=!1:X(L)}));var B=c.useGesture({onWheel:function(e){var t=e.distance,n=e.velocity,r=i(e.direction,2),a=r[0],o=r[1];if(!e.ctrlKey&&!P&&0!==n&&(t>y/3||n>1.5&&t<=y/3)){var c=a+o>0?-1:1;c>0?s():c<0&&u()}},onWheelEnd:function(){X((function(e){return L(e,!1,0)})),_(!1)},onDrag:function(e){var t=e.down,n=i(e.movement,1)[0],r=i(e.direction,1)[0],a=e.velocity,o=e.distance,c=e.cancel,l=e.touches;if(!P&&0!==n){q||_(!0);var f=Math.abs(r)>.7;if(t&&f&&o>y/3.5||t&&f&&a>2){var g=r>0?-1:1;c(),g>0?s():g<0&&u()}l>1||X((function(e){return L(e,t,n)}))}},onDragEnd:function(){return _(!1)}},{domTarget:m.current[l],event:{passive:!0,capture:!1}});return t.useEffect(B,[B,l]),H.map((function(e,t){var i=e.x,a=e.display;return n.createElement(E,{role:"presentation",ref:m.current[t],key:t,className:"lightbox-image-pager",style:{display:a,transform:i.to((function(e){return"translateX(".concat(e,"px)")}))},onClick:function(){return Math.abs(i.value)<1&&!P&&f()}},n.createElement(x,null,n.createElement(O,null,n.createElement(k,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},n.createElement(w,{setDisableDrag:I,src:r[t].src,alt:r[t].alt,pagerHeight:T,isCurrentImage:t===l,pagerIsDragging:q,singleClickToZoom:p}),g()))))}))},O=r.div.withConfig({displayName:"ImagePager__PagerInnerContentWrapper",componentId:"a18fy4-0"})(["display:flex;justify-content:center;align-items:center;"]),x=r.div.withConfig({displayName:"ImagePager__PagerContentWrapper",componentId:"a18fy4-1"})(["width:100%;display:flex;justify-content:center;"]),E=r(o.animated.div).withConfig({displayName:"ImagePager__AnimatedImagePager",componentId:"a18fy4-2"})(["position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;will-change:transform;touch-action:none;display:flex;flex-direction:column;justify-content:center;align-items:center;"]),k=r.div.withConfig({displayName:"ImagePager__ImageContainer",componentId:"a18fy4-3"})(["position:relative;touch-action:none;user-select:none;"]),I=function(e){var t=e.images,r=e.currentIndex,i=e.onPrev,a=e.onNext,o=e.onClose,c=e.renderPrevButton,l=e.renderNextButton,u=e.renderImageOverlay,s=e.singleClickToZoom,f=r>0,g=r+1<t.length;return n.createElement(D,{className:"lightbox-image-stage"},c({canPrev:f}),n.createElement(P,{images:t,currentIndex:r,onClose:o,onNext:a,onPrev:i,renderImageOverlay:u,singleClickToZoom:s}),l({canNext:g}))},D=r.div.withConfig({displayName:"ImageStage__ImageStageContainer",componentId:"m6g63l-0"})(["flex-grow:1;position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:center;"]);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 T(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){l(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=function(e){var t=e.children,r=e.isOpen,i=e.className,a=e.style,c=(e.pageTransitionConfig,{from:{transform:"scale(0.75)",opacity:0},enter:{transform:"scale(1)",opacity:1},leave:{transform:"scale(0.75)",opacity:0},config:o.config.default}),l=o.useTransition(r,null,c);return console.log(l),l.map((function(e){var r=e.item,o=e.key,c=e.props;return r&&c&&n.createElement(R,{key:o,className:"lightbox-container".concat(i?" ".concat(i):""),style:T(T({},c),a)},t)}))},R=r(o.animated.div).withConfig({displayName:"PageContainer__AnimatedPageContainer",componentId:"sc-19m9s01-0"})(["display:flex;flex-direction:column;position:fixed;z-index:400;top:0;bottom:0;left:0;right:0;"]);function S(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 Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=d(e);if(t){var i=d(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return p(this,n)}}var q=function(e){g(n,e);var t=S(n);function n(){var e;u(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)),l(f(e),"preventWheel",(function(e){return e.preventDefault()})),e}return s(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 m.createPortal(e,this.portalContainer)}}]),n}(n.Component),_=function(e){var r=e.isOpen,i=e.onClose,a=e.images,o=e.currentIndex,c=e.onPrev,l=e.onNext,u=e.renderHeader,s=e.renderFooter,f=e.renderPrevButton,g=e.renderNextButton,p=e.renderImageOverlay,d=e.className,m=e.singleClickToZoom,v=e.style,h=e.pageTransitionConfig;return t.useEffect((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":l();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)}})),n.createElement(q,null,n.createElement(N,{isOpen:r,className:d,style:v,pageTransitionConfig:h},u(),n.createElement(I,{images:a,onClose:i,currentIndex:o,onPrev:c,onNext:l,renderPrevButton:f,renderNextButton:g,renderImageOverlay:p,singleClickToZoom:m}),s()))};_.defaultProps={pageTransitionConfig:null,className:null,style:null,renderHeader:function(){return null},renderFooter:function(){return null},renderPrevButton:function(){return null},renderNextButton:function(){return null},renderImageOverlay:function(){return null},singleClickToZoom:!1},module.exports=_;
 //# sourceMappingURL=index.cjs.js.map

dist/index.es.js

@@ -1,2 +0,2 @@
-import e,{useEffect as n,useState as t,useRef as r}from"react";import i from"styled-components";import o from"@babel/runtime/helpers/slicedToArray";import a from"@babel/runtime/helpers/toConsumableArray";import{useSpring as l,config as c,to as s,animated as u,useSprings as f,useTransition as p}from"@react-spring/web";import{useGesture as m}from"react-use-gesture";import g from"@babel/runtime/helpers/defineProperty";import d from"@babel/runtime/helpers/classCallCheck";import v from"@babel/runtime/helpers/createClass";import h from"@babel/runtime/helpers/assertThisInitialized";import y from"@babel/runtime/helpers/inherits";import b from"@babel/runtime/helpers/possibleConstructorReturn";import w from"@babel/runtime/helpers/getPrototypeOf";import C from"react-dom";var P=function(e){var n=e.imageRef,t=e.scale,r=e.pinchDelta,i=o(e.touchOrigin,2),a=i[0],l=i[1],c=o(e.currentTranslate,2),s=c[0],u=c[1],f=n.current.getBoundingClientRect(),p=f.top;return[-((a-f.left-f.width/2)/t)*r+s,-((l-p-f.height/2)/t)*r+u]},O=function(e){var n=e.current.getBoundingClientRect(),t=n.top,r=n.left,i=n.bottom,o=n.right,a=window,l=a.innerHeight,c=a.innerWidth;return r>.5*c||t>.5*l||o<.5*c||i<.5*l};function x(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function k(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?x(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):x(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var E=function(i){var a,u=i.src,f=i.alt,p=i.pagerHeight,d=i.isCurrentImage,v=i.setDisableDrag,h=i.singleClickToZoom,y=i.pagerIsDragging,b=t(!1),w=o(b,2),C=w[0],x=w[1],E=r(),D=function(){return{scale:1,translateX:0,translateY:0,config:k(k({},c.default),{},{precision:.01})}},j=l((function(){return k(k({},D()),{},{onFrame:function(e){(e.scale<1||!e.pinching)&&A(D),e.scale>1&&O(E)&&A(D())},onRest:function(e){1===e.scale&&v(!1)}})})),T=o(j,2),N=T[0],R=N.scale,_=N.translateX,L=N.translateY,A=T[1];n((function(){d||A(D)}));var W=m({onPinch:function(e){var n=o(e.movement,1)[0],t=o(e.origin,2),r=t[0],i=t[1],a=e.event,l=e.ctrlKey,c=e.last,s=e.cancel;if(v(!0),n&&!C&&x(!0),c)s();else{var u=l?1e3:250,f=R.value+n/u,p=f-R.value,m=a.clientX,g=a.clientY,d=P({imageRef:E,scale:R.value,pinchDelta:p,currentTranslate:[_.value,L.value],touchOrigin:l?[m,g]:[r,i]}),h=o(d,2),y=h[0],b=h[1];A(f<.5?{scale:.5,pinching:!0}:f>3?{scale:3,pinching:!0}:{scale:f,translateX:y,translateY:b,pinching:!0})}},onPinchEnd:function(){R.value>1?v(!0):A(D),x(!1)},onDragEnd:function(){return x(!1)},onDrag:function(e){var n=o(e.movement,2),t=n[0],r=n[1],i=e.pinching,a=e.event,l=e.cancel,c=e.first,s=e.memo,u=void 0===s?{initialTranslateX:0,initialTranslateY:0}:s;if(t&&r&&!C&&x(!0),!(a.touches&&a.touches.length>1||i||R.value<=1))return R.value>1&&O(E)?void l():c?{initialTranslateX:_.value,initialTranslateY:L.value}:(A({translateX:u.initialTranslateX+t,translateY:u.initialTranslateY+r}),u)}},{domTarget:E,event:{passive:!1}});return n(W,[W]),function(e){var t=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;n((function(){var e=t.current,n=0,r=function(e){n+=1,setTimeout((function(){1===n?a(e):2===n&&c(e),n=0}),i)};return e.addEventListener("click",r),function(){e.removeEventListener("click",r)}}))}((g(a={},h?"onSingleClick":"onDoubleClick",(function(e){if(y||C)e.stopPropagation();else if(1===R.value){var n=e.clientX,t=e.clientY,r=R.value+1,i=r-R.value,a=P({imageRef:E,scale:R.value,pinchDelta:i,currentTranslate:[_.value,L.value],touchOrigin:[n,t]}),l=o(a,2),c=l[0],s=l[1];v(!0),A({scale:r,translateX:c,translateY:s,pinching:!0})}else A(D)})),g(a,"ref",E),g(a,"latency",h?0:200),a)),e.createElement(I,{ref:E,className:"lightbox-image",style:k({transform:s([R,_,L],(function(e,n,t){return"translate(".concat(n,"px, ").concat(t,"px) scale(").concat(e,")")})),maxHeight:p},d&&{willChange:"transform"}),src:u,alt:f,draggable:"false",onDragStart:function(e){e.preventDefault()},onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}})},I=i(u.img).withConfig({displayName:"Image__AnimatedImage",componentId:"sc-1k35vrn-0"})(["width:auto;max-width:100%;user-select:none;::selection{background:none;}"]),D=function(i){var l=i.images,c=i.currentIndex,s=i.onPrev,u=i.onNext,p=i.onClose,g=i.renderImageOverlay,d=i.singleClickToZoom,v=r(!0),h=r(a(Array(l.length)).map((function(){return e.createRef()}))),y=function(){var e=t({width:window.innerWidth,height:window.innerHeight}),r=o(e,2),i=r[0],a=r[1];return n((function(){var e=function(){window.innerHeight===i.height&&window.innerWidth===i.width||a({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),i}(),b=y.height,w=y.width,C=t(!1),P=o(C,2),O=P[0],x=P[1],k=t("100%"),I=o(k,2),D=I[0],_=I[1],L=t(!1),A=o(L,2),W=A[0],H=A[1],X=function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=(e-c)*w+(n?t:0);return e<c-1||e>c+1?{x:r,display:"none"}:{x:r,display:"flex"}},B=f(l.length,X),S=o(B,2),Y=S[0],Z=S[1];n((function(){var e=h.current[c].current.clientHeight-50;D!==e&&_(e)}),[c,D,b]),n((function(){v.current?v.current=!1:Z(X)}));var z=m({onWheel:function(e){var n=e.distance,t=e.velocity,r=o(e.direction,2),i=r[0],a=r[1];if(!e.ctrlKey&&!O&&0!==t&&(n>w/3||t>1.5&&n<=w/3)){var l=i+a>0?-1:1;l>0?u():l<0&&s()}},onWheelEnd:function(){Z((function(e){return X(e,!1,0)})),H(!1)},onDrag:function(e){var n=e.down,t=o(e.movement,1)[0],r=o(e.direction,1)[0],i=e.velocity,a=e.distance,l=e.cancel,c=e.touches;if(!O&&0!==t){W||H(!0);var f=Math.abs(r)>.7;if(n&&f&&a>w/3.5||n&&f&&i>2){var p=r>0?-1:1;l(),p>0?u():p<0&&s()}c>1||Z((function(e){return X(e,n,t)}))}},onDragEnd:function(){return H(!1)}},{domTarget:h.current[c],event:{passive:!0,capture:!1}});return n(z,[z,c]),Y.map((function(n,t){var r=n.x,i=n.display;return e.createElement(N,{role:"presentation",ref:h.current[t],key:t,className:"lightbox-image-pager",style:{display:i,transform:r.to((function(e){return"translateX(".concat(e,"px)")}))},onClick:function(){return Math.abs(r.value)<1&&!O&&p()}},e.createElement(T,null,e.createElement(j,null,e.createElement(R,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(E,{setDisableDrag:x,src:l[t].src,alt:l[t].alt,pagerHeight:D,isCurrentImage:t===c,pagerIsDragging:W,singleClickToZoom:d}),g()))))}))},j=i.div.withConfig({displayName:"ImagePager__PagerInnerContentWrapper",componentId:"a18fy4-0"})(["display:flex;justify-content:center;align-items:center;"]),T=i.div.withConfig({displayName:"ImagePager__PagerContentWrapper",componentId:"a18fy4-1"})(["width:100%;display:flex;justify-content:center;"]),N=i(u.div).withConfig({displayName:"ImagePager__AnimatedImagePager",componentId:"a18fy4-2"})(["position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;will-change:transform;touch-action:none;display:flex;flex-direction:column;justify-content:center;align-items:center;"]),R=i.div.withConfig({displayName:"ImagePager__ImageContainer",componentId:"a18fy4-3"})(["position:relative;touch-action:none;user-select:none;"]),_=function(n){var t=n.images,r=n.currentIndex,i=n.onPrev,o=n.onNext,a=n.onClose,l=n.renderPrevButton,c=n.renderNextButton,s=n.renderImageOverlay,u=n.singleClickToZoom,f=r>0,p=r+1<t.length;return e.createElement(L,{className:"lightbox-image-stage"},l({canPrev:f}),e.createElement(D,{images:t,currentIndex:r,onClose:a,onNext:o,onPrev:i,renderImageOverlay:s,singleClickToZoom:u}),c({canNext:p}))},L=i.div.withConfig({displayName:"ImageStage__ImageStageContainer",componentId:"m6g63l-0"})(["flex-grow:1;position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:center;"]);function A(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function W(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?A(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):A(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}var H=function(n){var t=n.children,r=n.isOpen,i=n.className,o=n.style,a=(n.pageTransitionConfig,p(r,null,{config:c.default}));return console.log(a),a.map((function(n){var r=n.item,a=n.key,l=n.props;return r&&l&&e.createElement(X,{key:a,className:"lightbox-container".concat(i?" ".concat(i):""),style:W(W({},l),o)},t)}))},X=i(u.div).withConfig({displayName:"PageContainer__AnimatedPageContainer",componentId:"sc-19m9s01-0"})(["display:flex;flex-direction:column;position:fixed;z-index:400;top:0;bottom:0;left:0;right:0;"]);function B(e){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var t,r=w(e);if(n){var i=w(this).constructor;t=Reflect.construct(r,arguments,i)}else t=r.apply(this,arguments);return b(this,t)}}var S=function(e){y(t,e);var n=B(t);function t(){var e;d(this,t);for(var r=arguments.length,i=new Array(r),o=0;o<r;o++)i[o]=arguments[o];return e=n.call.apply(n,[this].concat(i)),g(h(e),"preventWheel",(function(e){return e.preventDefault()})),e}return v(t,[{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 C.createPortal(e,this.portalContainer)}}]),t}(e.Component),Y=function(t){var r=t.isOpen,i=t.onClose,o=t.images,a=t.currentIndex,l=t.onPrev,c=t.onNext,s=t.renderHeader,u=t.renderFooter,f=t.renderPrevButton,p=t.renderNextButton,m=t.renderImageOverlay,g=t.className,d=t.singleClickToZoom,v=t.style,h=t.pageTransitionConfig;return n((function(){var e=function(e){r&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},n=function(e){if(r)switch(e.key){case"ArrowLeft":l();break;case"ArrowRight":c();break;case"Escape":i();break;default:e.preventDefault()}};return document.addEventListener("keyup",n),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",n),document.removeEventListener("keydown",e)}})),e.createElement(S,null,e.createElement(H,{isOpen:r,className:g,style:v,pageTransitionConfig:h},s(),e.createElement(_,{images:o,onClose:i,currentIndex:a,onPrev:l,onNext:c,renderPrevButton:f,renderNextButton:p,renderImageOverlay:m,singleClickToZoom:d}),u()))};Y.defaultProps={pageTransitionConfig:null,className:null,style:null,renderHeader:function(){return null},renderFooter:function(){return null},renderPrevButton:function(){return null},renderNextButton:function(){return null},renderImageOverlay:function(){return null},singleClickToZoom:!1};export default Y;
+import e,{useEffect as t,useState as n,useRef as r}from"react";import i from"styled-components";import o from"@babel/runtime/helpers/slicedToArray";import a from"@babel/runtime/helpers/toConsumableArray";import{useSpring as l,config as c,to as s,animated as u,useSprings as f,useTransition as p}from"@react-spring/web";import{useGesture as m}from"react-use-gesture";import g from"@babel/runtime/helpers/defineProperty";import d from"@babel/runtime/helpers/classCallCheck";import v from"@babel/runtime/helpers/createClass";import h from"@babel/runtime/helpers/assertThisInitialized";import y from"@babel/runtime/helpers/inherits";import b from"@babel/runtime/helpers/possibleConstructorReturn";import w from"@babel/runtime/helpers/getPrototypeOf";import C from"react-dom";var P=function(e){var t=e.imageRef,n=e.scale,r=e.pinchDelta,i=o(e.touchOrigin,2),a=i[0],l=i[1],c=o(e.currentTranslate,2),s=c[0],u=c[1],f=t.current.getBoundingClientRect(),p=f.top;return[-((a-f.left-f.width/2)/n)*r+s,-((l-p-f.height/2)/n)*r+u]},O=function(e){var t=e.current.getBoundingClientRect(),n=t.top,r=t.left,i=t.bottom,o=t.right,a=window,l=a.innerHeight,c=a.innerWidth;return r>.5*c||n>.5*l||o<.5*c||i<.5*l};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 k(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){g(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}var E=function(i){var a,u=i.src,f=i.alt,p=i.pagerHeight,d=i.isCurrentImage,v=i.setDisableDrag,h=i.singleClickToZoom,y=i.pagerIsDragging,b=n(!1),w=o(b,2),C=w[0],x=w[1],E=r(),D=function(){return{scale:1,translateX:0,translateY:0,config:k(k({},c.default),{},{precision:.01})}},j=l((function(){return k(k({},D()),{},{onFrame:function(e){(e.scale<1||!e.pinching)&&A(D),e.scale>1&&O(E)&&A(D())},onRest:function(e){1===e.scale&&v(!1)}})})),T=o(j,2),N=T[0],R=N.scale,_=N.translateX,L=N.translateY,A=T[1];t((function(){d||A(D)}));var W=m({onPinch:function(e){var t=o(e.movement,1)[0],n=o(e.origin,2),r=n[0],i=n[1],a=e.event,l=e.ctrlKey,c=e.last,s=e.cancel;if(v(!0),t&&!C&&x(!0),c)s();else{var u=l?1e3:250,f=R.value+t/u,p=f-R.value,m=a.clientX,g=a.clientY,d=P({imageRef:E,scale:R.value,pinchDelta:p,currentTranslate:[_.value,L.value],touchOrigin:l?[m,g]:[r,i]}),h=o(d,2),y=h[0],b=h[1];A(f<.5?{scale:.5,pinching:!0}:f>3?{scale:3,pinching:!0}:{scale:f,translateX:y,translateY:b,pinching:!0})}},onPinchEnd:function(){R.value>1?v(!0):A(D),x(!1)},onDragEnd:function(){return x(!1)},onDrag:function(e){var t=o(e.movement,2),n=t[0],r=t[1],i=e.pinching,a=e.event,l=e.cancel,c=e.first,s=e.memo,u=void 0===s?{initialTranslateX:0,initialTranslateY:0}:s;if(n&&r&&!C&&x(!0),!(a.touches&&a.touches.length>1||i||R.value<=1))return R.value>1&&O(E)?void l():c?{initialTranslateX:_.value,initialTranslateY:L.value}:(A({translateX:u.initialTranslateX+n,translateY:u.initialTranslateY+r}),u)}},{domTarget:E,event:{passive:!1}});return t(W,[W]),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=n.current,t=0,r=function(e){t+=1,setTimeout((function(){1===t?a(e):2===t&&c(e),t=0}),i)};return e.addEventListener("click",r),function(){e.removeEventListener("click",r)}}))}((g(a={},h?"onSingleClick":"onDoubleClick",(function(e){if(y||C)e.stopPropagation();else if(1===R.value){var t=e.clientX,n=e.clientY,r=R.value+1,i=r-R.value,a=P({imageRef:E,scale:R.value,pinchDelta:i,currentTranslate:[_.value,L.value],touchOrigin:[t,n]}),l=o(a,2),c=l[0],s=l[1];v(!0),A({scale:r,translateX:c,translateY:s,pinching:!0})}else A(D)})),g(a,"ref",E),g(a,"latency",h?0:200),a)),e.createElement(I,{ref:E,className:"lightbox-image",style:k({transform:s([R,_,L],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")})),maxHeight:p},d&&{willChange:"transform"}),src:u,alt:f,draggable:"false",onDragStart:function(e){e.preventDefault()},onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}})},I=i(u.img).withConfig({displayName:"Image__AnimatedImage",componentId:"sc-1k35vrn-0"})(["width:auto;max-width:100%;user-select:none;::selection{background:none;}"]),D=function(i){var l=i.images,c=i.currentIndex,s=i.onPrev,u=i.onNext,p=i.onClose,g=i.renderImageOverlay,d=i.singleClickToZoom,v=r(!0),h=r(a(Array(l.length)).map((function(){return e.createRef()}))),y=function(){var e=n({width:window.innerWidth,height:window.innerHeight}),r=o(e,2),i=r[0],a=r[1];return t((function(){var e=function(){window.innerHeight===i.height&&window.innerWidth===i.width||a({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",e),window.addEventListener("orientationchange",e),function(){window.removeEventListener("resize",e),window.addEventListener("orientationchange",e)}})),i}(),b=y.height,w=y.width,C=n(!1),P=o(C,2),O=P[0],x=P[1],k=n("100%"),I=o(k,2),D=I[0],_=I[1],L=n(!1),A=o(L,2),W=A[0],H=A[1],X=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-c)*w+(t?n:0);return e<c-1||e>c+1?{x:r,display:"none"}:{x:r,display:"flex"}},B=f(l.length,X),S=o(B,2),Y=S[0],Z=S[1];t((function(){var e=h.current[c].current.clientHeight-50;D!==e&&_(e)}),[c,D,b]),t((function(){v.current?v.current=!1:Z(X)}));var z=m({onWheel:function(e){var t=e.distance,n=e.velocity,r=o(e.direction,2),i=r[0],a=r[1];if(!e.ctrlKey&&!O&&0!==n&&(t>w/3||n>1.5&&t<=w/3)){var l=i+a>0?-1:1;l>0?u():l<0&&s()}},onWheelEnd:function(){Z((function(e){return X(e,!1,0)})),H(!1)},onDrag:function(e){var t=e.down,n=o(e.movement,1)[0],r=o(e.direction,1)[0],i=e.velocity,a=e.distance,l=e.cancel,c=e.touches;if(!O&&0!==n){W||H(!0);var f=Math.abs(r)>.7;if(t&&f&&a>w/3.5||t&&f&&i>2){var p=r>0?-1:1;l(),p>0?u():p<0&&s()}c>1||Z((function(e){return X(e,t,n)}))}},onDragEnd:function(){return H(!1)}},{domTarget:h.current[c],event:{passive:!0,capture:!1}});return t(z,[z,c]),Y.map((function(t,n){var r=t.x,i=t.display;return e.createElement(N,{role:"presentation",ref:h.current[n],key:n,className:"lightbox-image-pager",style:{display:i,transform:r.to((function(e){return"translateX(".concat(e,"px)")}))},onClick:function(){return Math.abs(r.value)<1&&!O&&p()}},e.createElement(T,null,e.createElement(j,null,e.createElement(R,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(E,{setDisableDrag:x,src:l[n].src,alt:l[n].alt,pagerHeight:D,isCurrentImage:n===c,pagerIsDragging:W,singleClickToZoom:d}),g()))))}))},j=i.div.withConfig({displayName:"ImagePager__PagerInnerContentWrapper",componentId:"a18fy4-0"})(["display:flex;justify-content:center;align-items:center;"]),T=i.div.withConfig({displayName:"ImagePager__PagerContentWrapper",componentId:"a18fy4-1"})(["width:100%;display:flex;justify-content:center;"]),N=i(u.div).withConfig({displayName:"ImagePager__AnimatedImagePager",componentId:"a18fy4-2"})(["position:absolute;top:0px;left:0px;right:0px;bottom:0px;height:100%;width:100%;will-change:transform;touch-action:none;display:flex;flex-direction:column;justify-content:center;align-items:center;"]),R=i.div.withConfig({displayName:"ImagePager__ImageContainer",componentId:"a18fy4-3"})(["position:relative;touch-action:none;user-select:none;"]),_=function(t){var n=t.images,r=t.currentIndex,i=t.onPrev,o=t.onNext,a=t.onClose,l=t.renderPrevButton,c=t.renderNextButton,s=t.renderImageOverlay,u=t.singleClickToZoom,f=r>0,p=r+1<n.length;return e.createElement(L,{className:"lightbox-image-stage"},l({canPrev:f}),e.createElement(D,{images:n,currentIndex:r,onClose:a,onNext:o,onPrev:i,renderImageOverlay:s,singleClickToZoom:u}),c({canNext:p}))},L=i.div.withConfig({displayName:"ImageStage__ImageStageContainer",componentId:"m6g63l-0"})(["flex-grow:1;position:relative;height:100%;width:100%;display:flex;justify-content:center;align-items:center;"]);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 W(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){g(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}var H=function(t){var n=t.children,r=t.isOpen,i=t.className,o=t.style,a=(t.pageTransitionConfig,{from:{transform:"scale(0.75)",opacity:0},enter:{transform:"scale(1)",opacity:1},leave:{transform:"scale(0.75)",opacity:0},config:c.default}),l=p(r,null,a);return console.log(l),l.map((function(t){var r=t.item,a=t.key,l=t.props;return r&&l&&e.createElement(X,{key:a,className:"lightbox-container".concat(i?" ".concat(i):""),style:W(W({},l),o)},n)}))},X=i(u.div).withConfig({displayName:"PageContainer__AnimatedPageContainer",componentId:"sc-19m9s01-0"})(["display:flex;flex-direction:column;position:fixed;z-index:400;top:0;bottom:0;left:0;right:0;"]);function B(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 Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=w(e);if(t){var i=w(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return b(this,n)}}var S=function(e){y(n,e);var t=B(n);function n(){var e;d(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)),g(h(e),"preventWheel",(function(e){return e.preventDefault()})),e}return v(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 C.createPortal(e,this.portalContainer)}}]),n}(e.Component),Y=function(n){var r=n.isOpen,i=n.onClose,o=n.images,a=n.currentIndex,l=n.onPrev,c=n.onNext,s=n.renderHeader,u=n.renderFooter,f=n.renderPrevButton,p=n.renderNextButton,m=n.renderImageOverlay,g=n.className,d=n.singleClickToZoom,v=n.style,h=n.pageTransitionConfig;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":l();break;case"ArrowRight":c();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(S,null,e.createElement(H,{isOpen:r,className:g,style:v,pageTransitionConfig:h},s(),e.createElement(_,{images:o,onClose:i,currentIndex:a,onPrev:l,onNext:c,renderPrevButton:f,renderNextButton:p,renderImageOverlay:m,singleClickToZoom:d}),u()))};Y.defaultProps={pageTransitionConfig:null,className:null,style:null,renderHeader:function(){return null},renderFooter:function(){return null},renderPrevButton:function(){return null},renderNextButton:function(){return null},renderImageOverlay:function(){return null},singleClickToZoom:!1};export default Y;
 //# sourceMappingURL=index.es.js.map

package.json

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

137594

increased by0.37%

Lines of code

97

increased by1.04%

No dependency changes