react-spring-lightbox - npm Package Compare versions

Comparing version 1.7.0-beta.4 to 1.7.0-beta.5

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"),h=require("react-dom");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=m(e),w=m(t),x=m(n),C=m(r),O=m(i),E=m(a),P=m(u),k=m(c),T=m(s),D=m(f),j=m(d),I=m(g),N=m(p),R=m(v),q=m(h),H=function(e){var t,n=e.imageRef,r=e.scale,i=e.pinchDelta,a=O.default(e.touchOrigin,2),o=a[0],l=a[1],u=O.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},L=["style"];function B(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 X(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?B(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):B(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var Y={pinching:!1,scale:1,translateX:0,translateY:0},A=function(t){var n,r=t.imgProps,i=r.style,a=k.default(r,L),u=t.isCurrentImage,c=t.pagerHeight,s=t.pagerIsDragging,f=t.setDisableDrag,d=t.singleClickToZoom,g=e.useState(!1),p=O.default(g,2),v=p[0],h=p[1],m=e.useRef(null),y=o.useSpring((function(){return X(X({},Y),{},{onChange:function(e,t){(e.value.scale<1||!e.value.pinching)&&t.start(Y),e.value.scale>1&&S(m)&&t.start(Y)},onRest:function(e,t){1===e.value.scale&&(t.start(Y),f(!1))}})})),w=O.default(y,2),x=w[0],E=x.scale,T=x.translateX,D=x.translateY,j=w[1];return e.useEffect((function(){u||1===E.get()||j.start(Y)}),[u,E,j]),l.useGesture({onDrag:function(e){var t=O.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,f=e.tap;if(!(s||1===E.get()||f||(n&&r&&!v&&h(!0),c>1||i||E.get()<=1)))return E.get()>1&&S(m)?void a():o?{initialTranslateX:T.get(),initialTranslateY:D.get()}:(j.start({translateX:u.initialTranslateX+n,translateY:u.initialTranslateY+r}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return h(!1)}),100)},onPinch:function(e){var t=O.default(e.movement,1)[0],n=O.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&&h(!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=H({currentTranslate:[T.get(),D.get()],imageRef:m,pinchDelta:g,scale:E.get(),touchOrigin:p}),b=O.default(y,2),w=b[0],x=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:x})}},onPinchEnd:function(){s||(E.get()>1?f(!0):j.start(Y),setTimeout((function(){return h(!1)}),100))}},{domTarget:m,drag:{filterTaps:!0},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=H({currentTranslate:[T.get(),D.get()],imageRef:m,pinchDelta:i,scale:E.get(),touchOrigin:[t,n]}),o=O.default(a,2),l=o[0],u=o[1];f(!0),j.start({pinching:!0,scale:r,translateX:l,translateY:u})}else j.start(Y)})),P.default(n,"latency",d?0:200),P.default(n,"ref",m),n)),b.default.createElement(F,C.default({className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:m,style:X(X({},i),{},{maxHeight:c,transform:o.to([E,T,D],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},u&&{willChange:"transform"})},a))};A.displayName="Image";var W,Z,z,U,M,F=x.default(o.animated.img)(y||(y=w.default(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),G=function(t){var n=t.currentIndex,r=t.images,i=t.inline,a=t.onClose,u=t.onNext,c=t.onPrev,s=t.renderImageOverlay,f=t.singleClickToZoom,d=e.useRef(!0),g=e.useRef(E.default(Array(r.length)).map((function(){return b.default.createRef()}))||[]),p=e.useRef(null),v=function(t){var n=e.useState({height:window.innerHeight,width:window.innerWidth}),r=O.default(n,2),i=r[0],a=r[1];return e.useEffect((function(){var e=t.current;if(e){var n=function(){var t=e.getBoundingClientRect(),n=t.height,r=t.width;n===i.height&&r===i.width||a({height:n,width:r})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}}}),[t,i.height,i.width]),i}(p),h=v.height,m=v.width,y=e.useState(!1),w=O.default(y,2),x=w[0],P=w[1],k=e.useState("100%"),T=O.default(k,2),D=T[0],j=T[1],I=e.useState(!1),N=O.default(I,2),R=N[0],q=N[1],H=b.default.useCallback((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)*m+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}}),[n,m]),S=o.useSprings(r.length,(function(e){return H(e)})),L=O.default(S,2),B=L[0],X=L[1];e.useEffect((function(){var e=null==g?void 0:g.current[n],t=h;e&&null!=e&&e.current&&(console.log({containerHeight:h}),console.log({currentImageStageHeight:e.current.clientHeight}),t=i?e.current.clientHeight:e.current.clientHeight-50),console.log({currPagerHeight:t,pagerHeight:D}),D!==t&&(console.log({currPagerHeight:t,pagerHeight:D}),j(t))}),[n,i,D,h]),e.useEffect((function(){d.current?d.current=!1:X.start((function(e){return H(e)}))}),[n,H,X]);var Y=l.useGesture({onDrag:function(e){var t=e.down,n=O.default(e.movement,1)[0],r=O.default(e.direction,1)[0],i=e.velocity,a=e.distance,o=e.cancel,l=e.active,s=e.touches,f=e.tap;if(!x&&0!==n&&!f){R||q(!0);var d=Math.abs(r)>.7;if((t&&d&&a>m/3.5||t&&d&&i>2)&&l){var g=r>0?-1:1;return o(),void(g>0?u():g<0&&c())}s>1?o():X.start((function(e){return H(e,t,n)}))}},onDragEnd:function(){R&&(X.start((function(e){return H(e)})),setTimeout((function(){return q(!1)}),100))},onWheel:function(e){var t=e.velocity,n=O.default(e.direction,2),r=n[0],i=n[1];if(!e.ctrlKey&&!x&&0!==t&&(R||q(!0),t>1.1)){var a=r+i>0?-1:1;a>0?u():a<0&&c()}},onWheelEnd:function(){X.start((function(e){return H(e)})),setTimeout((function(){return q(!1)}),100)}},{drag:{filterTaps:!0}});return b.default.createElement(Q,{ref:p},B.map((function(e,t){var i=e.display,o=e.x;return b.default.createElement(_,C.default({},Y(),{className:"lightbox-image-pager",key:t,onClick:function(){if(a)return Math.abs(o.get())<1&&!x&&a()},ref:g.current[t],role:"presentation",style:{display:i,transform:o.to((function(e){return"translateX(".concat(e,"px)")}))}}),b.default.createElement($,null,b.default.createElement(V,null,b.default.createElement(ee,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},b.default.createElement(A,{imgProps:r[t],isCurrentImage:t===n,pagerHeight:D,pagerIsDragging:R,setDisableDrag:P,singleClickToZoom:f}),s()))))})))};G.displayName="ImagePager";var K,J,Q=x.default.div(W||(W=w.default(["\n    height: 100%;\n    width: 100%;\n"]))),V=x.default.div(Z||(Z=w.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),$=x.default.div(z||(z=w.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),_=x.default(o.animated.div)(U||(U=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"]))),ee=x.default.div(M||(M=w.default(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"]))),te=function(e){var t=e.className,n=void 0===t?"":t,r=e.currentIndex,i=e.images,a=e.inline,o=e.onClose,l=e.onNext,u=e.onPrev,c=e.renderImageOverlay,s=e.renderNextButton,f=e.renderPrevButton,d=e.singleClickToZoom,g=r>0,p=r+1<i.length,v=p?l:function(){return null},h=g?u:function(){return null};return b.default.createElement(ne,{className:n,"data-testid":"lightbox-image-stage"},f({canPrev:g}),b.default.createElement(G,{currentIndex:r,images:i,inline:a,onClose:o,onNext:v,onPrev:h,renderImageOverlay:c,singleClickToZoom:d}),s({canNext:p}))},ne=x.default.div(K||(K=w.default(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));function re(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 ie(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?re(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):re(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var ae=function(e){var t=e.children,n=e.className,r=e.isOpen,i=e.pageTransitionConfig,a=e.style,l={config:ie(ie({},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,ie(ie({},l),i));return b.default.createElement(b.default.Fragment,null,u((function(e,r){return r&&b.default.createElement(oe,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:ie(ie({},e),a)},t)})))},oe=x.default(o.animated.div)(J||(J=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 le(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=R.default(e);if(t){var i=R.default(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return N.default(this,n)}}var ue=function(e){I.default(n,e);var t=le(n);function n(){var e;T.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 D.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 q.default.createPortal(e,this.portalContainer)}}]),n}(b.default.Component);module.exports=function(t){var n=t.isOpen,r=t.onClose,i=t.inline,a=void 0!==i&&i,o=t.images,l=void 0===o?[]:o,u=t.currentIndex,c=t.onPrev,s=t.onNext,f=t.renderHeader,d=void 0===f?function(){return null}:f,g=t.renderFooter,p=void 0===g?function(){return null}:g,v=t.renderPrevButton,h=void 0===v?function(){return null}:v,m=t.renderNextButton,y=void 0===m?function(){return null}:m,w=t.renderImageOverlay,x=void 0===w?function(){return null}:w,C=t.className,O=void 0===C?"":C,E=t.singleClickToZoom,P=void 0!==E&&E,k=t.style,T=void 0===k?{}:k,D=t.pageTransitionConfig,j=void 0===D?null:D;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":c();break;case"ArrowRight":s();break;case"Escape":r&&r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),a?b.default.createElement(te,{currentIndex:u,images:l,inline:!0,onClose:r,onNext:s,onPrev:c,renderImageOverlay:x,renderNextButton:y,renderPrevButton:h,singleClickToZoom:P}):b.default.createElement(ue,null,b.default.createElement(ae,{className:O,isOpen:n,pageTransitionConfig:j,style:T},d(),b.default.createElement(te,{currentIndex:u,images:l,onClose:r,onNext:s,onPrev:c,renderImageOverlay:x,renderNextButton:y,renderPrevButton:h,singleClickToZoom:P}),p()))};
+"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"),h=require("react-dom");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=m(e),w=m(t),x=m(n),C=m(r),O=m(i),E=m(a),P=m(u),k=m(c),T=m(s),D=m(f),j=m(d),I=m(g),N=m(p),R=m(v),q=m(h),H=function(e){var t,n=e.imageRef,r=e.scale,i=e.pinchDelta,a=O.default(e.touchOrigin,2),o=a[0],l=a[1],u=O.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},L=["style"];function B(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 X(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?B(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):B(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var Y={pinching:!1,scale:1,translateX:0,translateY:0},A=function(t){var n,r=t.imgProps,i=r.style,a=k.default(r,L),u=t.isCurrentImage,c=t.pagerHeight,s=t.pagerIsDragging,f=t.setDisableDrag,d=t.singleClickToZoom,g=e.useState(!1),p=O.default(g,2),v=p[0],h=p[1],m=e.useRef(null),y=o.useSpring((function(){return X(X({},Y),{},{onChange:function(e,t){(e.value.scale<1||!e.value.pinching)&&t.start(Y),e.value.scale>1&&S(m)&&t.start(Y)},onRest:function(e,t){1===e.value.scale&&(t.start(Y),f(!1))}})})),w=O.default(y,2),x=w[0],E=x.scale,T=x.translateX,D=x.translateY,j=w[1];return e.useEffect((function(){u||1===E.get()||j.start(Y)}),[u,E,j]),l.useGesture({onDrag:function(e){var t=O.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,f=e.tap;if(!(s||1===E.get()||f||(n&&r&&!v&&h(!0),c>1||i||E.get()<=1)))return E.get()>1&&S(m)?void a():o?{initialTranslateX:T.get(),initialTranslateY:D.get()}:(j.start({translateX:u.initialTranslateX+n,translateY:u.initialTranslateY+r}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return h(!1)}),100)},onPinch:function(e){var t=O.default(e.movement,1)[0],n=O.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&&h(!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=H({currentTranslate:[T.get(),D.get()],imageRef:m,pinchDelta:g,scale:E.get(),touchOrigin:p}),b=O.default(y,2),w=b[0],x=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:x})}},onPinchEnd:function(){s||(E.get()>1?f(!0):j.start(Y),setTimeout((function(){return h(!1)}),100))}},{domTarget:m,drag:{filterTaps:!0},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=H({currentTranslate:[T.get(),D.get()],imageRef:m,pinchDelta:i,scale:E.get(),touchOrigin:[t,n]}),o=O.default(a,2),l=o[0],u=o[1];f(!0),j.start({pinching:!0,scale:r,translateX:l,translateY:u})}else j.start(Y)})),P.default(n,"latency",d?0:200),P.default(n,"ref",m),n)),b.default.createElement(F,C.default({className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:m,style:X(X({},i),{},{maxHeight:c,transform:o.to([E,T,D],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},u&&{willChange:"transform"})},a))};A.displayName="Image";var W,Z,z,U,M,F=x.default(o.animated.img)(y||(y=w.default(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),G=function(t){var n=t.currentIndex,r=t.images,i=t.inline,a=t.onClose,u=t.onNext,c=t.onPrev,s=t.renderImageOverlay,f=t.singleClickToZoom,d=e.useRef(!0),g=e.useRef(E.default(Array(r.length)).map((function(){return b.default.createRef()}))||[]),p=e.useRef(null),v=function(t){var n=e.useState({height:window.innerHeight,width:window.innerWidth}),r=O.default(n,2),i=r[0],a=r[1];return e.useEffect((function(){var e=t.current;if(e){var n=function(){var t=e.getBoundingClientRect(),n=t.height,r=t.width;n===i.height&&r===i.width||a({height:n,width:r})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}}}),[t,i.height,i.width]),i}(p),h=v.height,m=v.width,y=e.useState(!1),w=O.default(y,2),x=w[0],P=w[1],k=e.useState("100%"),T=O.default(k,2),D=T[0],j=T[1],I=e.useState(!1),N=O.default(I,2),R=N[0],q=N[1],H=b.default.useCallback((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)*m+(t?r:0);return e<n-1||e>n+1?{display:"none",x:i}:{display:"flex",x:i}}),[n,m]),S=o.useSprings(r.length,(function(e){return H(e)})),L=O.default(S,2),B=L[0],X=L[1];e.useEffect((function(){var e=null==g?void 0:g.current[n],t="100%";e&&null!=e&&e.current&&(console.log({containerHeight:h}),console.log({currentImageStageHeight:e.current.clientHeight}),t=i?e.current.clientHeight:e.current.clientHeight-50),console.log({currPagerHeight:t,pagerHeight:D}),D!==t&&(console.log({currPagerHeight:t,pagerHeight:D}),j(t))}),[n,i,D,h]),e.useEffect((function(){d.current?d.current=!1:X.start((function(e){return H(e)}))}),[n,H,X]);var Y=l.useGesture({onDrag:function(e){var t=e.down,n=O.default(e.movement,1)[0],r=O.default(e.direction,1)[0],i=e.velocity,a=e.distance,o=e.cancel,l=e.active,s=e.touches,f=e.tap;if(!x&&0!==n&&!f){R||q(!0);var d=Math.abs(r)>.7;if((t&&d&&a>m/3.5||t&&d&&i>2)&&l){var g=r>0?-1:1;return o(),void(g>0?u():g<0&&c())}s>1?o():X.start((function(e){return H(e,t,n)}))}},onDragEnd:function(){R&&(X.start((function(e){return H(e)})),setTimeout((function(){return q(!1)}),100))},onWheel:function(e){var t=e.velocity,n=O.default(e.direction,2),r=n[0],i=n[1];if(!e.ctrlKey&&!x&&0!==t&&(R||q(!0),t>1.1)){var a=r+i>0?-1:1;a>0?u():a<0&&c()}},onWheelEnd:function(){X.start((function(e){return H(e)})),setTimeout((function(){return q(!1)}),100)}},{drag:{filterTaps:!0}});return b.default.createElement(Q,{ref:p},B.map((function(e,t){var i=e.display,o=e.x;return b.default.createElement(_,C.default({},Y(),{className:"lightbox-image-pager",key:t,onClick:function(){if(a)return Math.abs(o.get())<1&&!x&&a()},ref:g.current[t],role:"presentation",style:{display:i,transform:o.to((function(e){return"translateX(".concat(e,"px)")}))}}),b.default.createElement($,null,b.default.createElement(V,null,b.default.createElement(ee,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},b.default.createElement(A,{imgProps:r[t],isCurrentImage:t===n,pagerHeight:D,pagerIsDragging:R,setDisableDrag:P,singleClickToZoom:f}),s()))))})))};G.displayName="ImagePager";var K,J,Q=x.default.div(W||(W=w.default(["\n    height: 100%;\n    width: 100%;\n"]))),V=x.default.div(Z||(Z=w.default(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),$=x.default.div(z||(z=w.default(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),_=x.default(o.animated.div)(U||(U=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"]))),ee=x.default.div(M||(M=w.default(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"]))),te=function(e){var t=e.className,n=void 0===t?"":t,r=e.currentIndex,i=e.images,a=e.inline,o=e.onClose,l=e.onNext,u=e.onPrev,c=e.renderImageOverlay,s=e.renderNextButton,f=e.renderPrevButton,d=e.singleClickToZoom,g=r>0,p=r+1<i.length,v=p?l:function(){return null},h=g?u:function(){return null};return b.default.createElement(ne,{className:n,"data-testid":"lightbox-image-stage"},f({canPrev:g}),b.default.createElement(G,{currentIndex:r,images:i,inline:a,onClose:o,onNext:v,onPrev:h,renderImageOverlay:c,singleClickToZoom:d}),s({canNext:p}))},ne=x.default.div(K||(K=w.default(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));function re(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 ie(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?re(Object(n),!0).forEach((function(t){P.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):re(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var ae=function(e){var t=e.children,n=e.className,r=e.isOpen,i=e.pageTransitionConfig,a=e.style,l={config:ie(ie({},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,ie(ie({},l),i));return b.default.createElement(b.default.Fragment,null,u((function(e,r){return r&&b.default.createElement(oe,{className:"lightbox-container".concat(n?" ".concat(n):""),"data-testid":"lightbox-container",style:ie(ie({},e),a)},t)})))},oe=x.default(o.animated.div)(J||(J=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 le(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=R.default(e);if(t){var i=R.default(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return N.default(this,n)}}var ue=function(e){I.default(n,e);var t=le(n);function n(){var e;T.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 D.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 q.default.createPortal(e,this.portalContainer)}}]),n}(b.default.Component);module.exports=function(t){var n=t.isOpen,r=t.onClose,i=t.inline,a=void 0!==i&&i,o=t.images,l=void 0===o?[]:o,u=t.currentIndex,c=t.onPrev,s=t.onNext,f=t.renderHeader,d=void 0===f?function(){return null}:f,g=t.renderFooter,p=void 0===g?function(){return null}:g,v=t.renderPrevButton,h=void 0===v?function(){return null}:v,m=t.renderNextButton,y=void 0===m?function(){return null}:m,w=t.renderImageOverlay,x=void 0===w?function(){return null}:w,C=t.className,O=void 0===C?"":C,E=t.singleClickToZoom,P=void 0!==E&&E,k=t.style,T=void 0===k?{}:k,D=t.pageTransitionConfig,j=void 0===D?null:D;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":c();break;case"ArrowRight":s();break;case"Escape":r&&r();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),a?b.default.createElement(te,{currentIndex:u,images:l,inline:!0,onClose:r,onNext:s,onPrev:c,renderImageOverlay:x,renderNextButton:y,renderPrevButton:h,singleClickToZoom:P}):b.default.createElement(ue,null,b.default.createElement(ae,{className:O,isOpen:n,pageTransitionConfig:j,style:T},d(),b.default.createElement(te,{currentIndex:u,images:l,onClose:r,onNext:s,onPrev:c,renderImageOverlay:x,renderNextButton:y,renderPrevButton:h,singleClickToZoom:P}),p()))};
 //# 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 f,useSprings as g,config as p,useTransition as m}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 x from"@babel/runtime/helpers/inherits";import C from"@babel/runtime/helpers/possibleConstructorReturn";import O 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 g=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),p=g.height,m=g.left,d=g.top;return[-((a-m-g.width/2)/r)*i+u,-((c-d-p/2)/r)*i+f]},T=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},D=["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},H=function(i){var o,c=i.imgProps,s=c.style,g=h(c,D),p=i.isCurrentImage,m=i.pagerHeight,y=i.pagerIsDragging,b=i.setDisableDrag,w=i.singleClickToZoom,x=n(!1),C=l(x,2),O=C[0],P=C[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&&T(E)&&t.start(N)},onRest:function(e,t){1===e.value.scale&&(t.start(N),b(!1))}})})),H=l(j,2),R=H[0],L=R.scale,B=R.translateX,X=R.translateY,Y=H[1];return t((function(){p||1===L.get()||Y.start(N)}),[p,L,Y]),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,f=e.tap;if(!(y||1===L.get()||f||(n&&r&&!O&&P(!0),u>1||i||L.get()<=1)))return L.get()>1&&T(E)?void o():a?{initialTranslateX:B.get(),initialTranslateY:X.get()}:(Y.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&&!O&&P(!0),c)s();else{var u=a?1e3:250,f=L.get()+t/u,g=f-L.get(),p=[r,i];"clientX"in o&&"clientY"in o&&a&&(p=[o.clientX,o.clientY]);var m=k({currentTranslate:[B.get(),X.get()],imageRef:E,pinchDelta:g,scale:L.get(),touchOrigin:p}),d=l(m,2),v=d[0],h=d[1];f<.5?Y.start({pinching:!0,scale:.5}):f>3?Y.start({pinching:!0,scale:3}):Y.start({pinching:!0,scale:f,translateX:v,translateY:h})}},onPinchEnd:function(){y||(L.get()>1?b(!0):Y.start(N),setTimeout((function(){return P(!1)}),100))}},{domTarget:E,drag:{filterTaps:!0},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||O)e.stopPropagation();else if(1===L.get()){var t=e.clientX,n=e.clientY,r=L.get()+1,i=r-L.get(),o=k({currentTranslate:[B.get(),X.get()],imageRef:E,pinchDelta:i,scale:L.get(),touchOrigin:[t,n]}),a=l(o,2),c=a[0],s=a[1];b(!0),Y.start({pinching:!0,scale:r,translateX:c,translateY:s})}else Y.start(N)})),v(o,"latency",w?0:200),v(o,"ref",E),o)),e.createElement(A,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:m,transform:f([L,B,X],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},p&&{willChange:"transform"})},g))};H.displayName="Image";var R,L,B,X,Y,A=o(s.img)(E||(E=i(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),W=function(i){var o=i.currentIndex,s=i.images,u=i.inline,f=i.onClose,p=i.onNext,m=i.onPrev,v=i.renderImageOverlay,h=i.singleClickToZoom,y=r(!0),b=r(c(Array(s.length)).map((function(){return e.createRef()}))||[]),w=r(null),x=function(e){var r=n({height:window.innerHeight,width:window.innerWidth}),i=l(r,2),o=i[0],a=i[1];return t((function(){var t=e.current;if(t){var n=function(){var e=t.getBoundingClientRect(),n=e.height,r=e.width;n===o.height&&r===o.width||a({height:n,width:r})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}}}),[e,o.height,o.width]),o}(w),C=x.height,O=x.width,P=n(!1),E=l(P,2),k=E[0],T=E[1],D=n("100%"),j=l(D,2),I=j[0],N=j[1],R=n(!1),L=l(R,2),B=L[0],X=L[1],Y=e.useCallback((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}}),[o,O]),A=g(s.length,(function(e){return Y(e)})),W=l(A,2),S=W[0],Z=W[1];t((function(){var e=null==b?void 0:b.current[o],t=C;e&&null!=e&&e.current&&(console.log({containerHeight:C}),console.log({currentImageStageHeight:e.current.clientHeight}),t=u?e.current.clientHeight:e.current.clientHeight-50),console.log({currPagerHeight:t,pagerHeight:I}),I!==t&&(console.log({currPagerHeight:t,pagerHeight:I}),N(t))}),[o,u,I,C]),t((function(){y.current?y.current=!1:Z.start((function(e){return Y(e)}))}),[o,Y,Z]);var q=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,u=e.tap;if(!k&&0!==n&&!u){B||X(!0);var f=Math.abs(r)>.7;if((t&&f&&o>O/3.5||t&&f&&i>2)&&c){var g=r>0?-1:1;return a(),void(g>0?p():g<0&&m())}s>1?a():Z.start((function(e){return Y(e,t,n)}))}},onDragEnd:function(){B&&(Z.start((function(e){return Y(e)})),setTimeout((function(){return X(!1)}),100))},onWheel:function(e){var t=e.velocity,n=l(e.direction,2),r=n[0],i=n[1];if(!e.ctrlKey&&!k&&0!==t&&(B||X(!0),t>1.1)){var o=r+i>0?-1:1;o>0?p():o<0&&m()}},onWheelEnd:function(){Z.start((function(e){return Y(e)})),setTimeout((function(){return X(!1)}),100)}},{drag:{filterTaps:!0}});return e.createElement(z,{ref:w},S.map((function(t,n){var r=t.display,i=t.x;return e.createElement(F,a({},q(),{className:"lightbox-image-pager",key:n,onClick:function(){if(f)return Math.abs(i.get())<1&&!k&&f()},ref:b.current[n],role:"presentation",style:{display:r,transform:i.to((function(e){return"translateX(".concat(e,"px)")}))}}),e.createElement(M,null,e.createElement(U,null,e.createElement(K,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(H,{imgProps:s[n],isCurrentImage:n===o,pagerHeight:I,pagerIsDragging:B,setDisableDrag:T,singleClickToZoom:h}),v()))))})))};W.displayName="ImagePager";var S,Z,z=o.div(R||(R=i(["\n    height: 100%;\n    width: 100%;\n"]))),U=o.div(L||(L=i(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),M=o.div(B||(B=i(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),F=o(s.div)(X||(X=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"]))),K=o.div(Y||(Y=i(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"]))),q=function(t){var n=t.className,r=void 0===n?"":n,i=t.currentIndex,o=t.images,a=t.inline,l=t.onClose,c=t.onNext,s=t.onPrev,u=t.renderImageOverlay,f=t.renderNextButton,g=t.renderPrevButton,p=t.singleClickToZoom,m=i>0,d=i+1<o.length,v=d?c:function(){return null},h=m?s:function(){return null};return e.createElement(G,{className:r,"data-testid":"lightbox-image-stage"},g({canPrev:m}),e.createElement(W,{currentIndex:i,images:o,inline:a,onClose:l,onNext:v,onPrev:h,renderImageOverlay:u,singleClickToZoom:p}),f({canNext:d}))},G=o.div(S||(S=i(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));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 Q(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 V=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=m(i,Q(Q({},l),o));return e.createElement(e.Fragment,null,c((function(t,i){return i&&e.createElement($,{className:"lightbox-container".concat(r?" ".concat(r):""),"data-testid":"lightbox-container",style:Q(Q({},t),a)},n)})))},$=o(s.div)(Z||(Z=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 _(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=O(e);if(t){var i=O(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return C(this,n)}}var ee=function(e){x(n,e);var t=_(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.inline,a=void 0!==o&&o,l=n.images,c=void 0===l?[]:l,s=n.currentIndex,u=n.onPrev,f=n.onNext,g=n.renderHeader,p=void 0===g?function(){return null}:g,m=n.renderFooter,d=void 0===m?function(){return null}:m,v=n.renderPrevButton,h=void 0===v?function(){return null}:v,y=n.renderNextButton,b=void 0===y?function(){return null}:y,w=n.renderImageOverlay,x=void 0===w?function(){return null}:w,C=n.className,O=void 0===C?"":C,P=n.singleClickToZoom,E=void 0!==P&&P,k=n.style,T=void 0===k?{}:k,D=n.pageTransitionConfig,j=void 0===D?null:D;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":u();break;case"ArrowRight":f();break;case"Escape":i&&i();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),a?e.createElement(q,{currentIndex:s,images:c,inline:!0,onClose:i,onNext:f,onPrev:u,renderImageOverlay:x,renderNextButton:b,renderPrevButton:h,singleClickToZoom:E}):e.createElement(ee,null,e.createElement(V,{className:O,isOpen:r,pageTransitionConfig:j,style:T},p(),e.createElement(q,{currentIndex:s,images:c,onClose:i,onNext:f,onPrev:u,renderImageOverlay:x,renderNextButton:b,renderPrevButton:h,singleClickToZoom:E}),d()))}
+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 g,config as p,useTransition as m}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 x from"@babel/runtime/helpers/inherits";import C from"@babel/runtime/helpers/possibleConstructorReturn";import O 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 g=null===(t=n.current)||void 0===t?void 0:t.getBoundingClientRect(),p=g.height,m=g.left,d=g.top;return[-((a-m-g.width/2)/r)*i+u,-((c-d-p/2)/r)*i+f]},T=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},D=["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},H=function(i){var o,c=i.imgProps,s=c.style,g=h(c,D),p=i.isCurrentImage,m=i.pagerHeight,y=i.pagerIsDragging,b=i.setDisableDrag,w=i.singleClickToZoom,x=n(!1),C=l(x,2),O=C[0],P=C[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&&T(E)&&t.start(N)},onRest:function(e,t){1===e.value.scale&&(t.start(N),b(!1))}})})),H=l(j,2),R=H[0],L=R.scale,B=R.translateX,X=R.translateY,Y=H[1];return t((function(){p||1===L.get()||Y.start(N)}),[p,L,Y]),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,f=e.tap;if(!(y||1===L.get()||f||(n&&r&&!O&&P(!0),u>1||i||L.get()<=1)))return L.get()>1&&T(E)?void o():a?{initialTranslateX:B.get(),initialTranslateY:X.get()}:(Y.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&&!O&&P(!0),c)s();else{var u=a?1e3:250,f=L.get()+t/u,g=f-L.get(),p=[r,i];"clientX"in o&&"clientY"in o&&a&&(p=[o.clientX,o.clientY]);var m=k({currentTranslate:[B.get(),X.get()],imageRef:E,pinchDelta:g,scale:L.get(),touchOrigin:p}),d=l(m,2),v=d[0],h=d[1];f<.5?Y.start({pinching:!0,scale:.5}):f>3?Y.start({pinching:!0,scale:3}):Y.start({pinching:!0,scale:f,translateX:v,translateY:h})}},onPinchEnd:function(){y||(L.get()>1?b(!0):Y.start(N),setTimeout((function(){return P(!1)}),100))}},{domTarget:E,drag:{filterTaps:!0},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||O)e.stopPropagation();else if(1===L.get()){var t=e.clientX,n=e.clientY,r=L.get()+1,i=r-L.get(),o=k({currentTranslate:[B.get(),X.get()],imageRef:E,pinchDelta:i,scale:L.get(),touchOrigin:[t,n]}),a=l(o,2),c=a[0],s=a[1];b(!0),Y.start({pinching:!0,scale:r,translateX:c,translateY:s})}else Y.start(N)})),v(o,"latency",w?0:200),v(o,"ref",E),o)),e.createElement(A,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:m,transform:f([L,B,X],(function(e,t,n){return"translate(".concat(t,"px, ").concat(n,"px) scale(").concat(e,")")}))},p&&{willChange:"transform"})},g))};H.displayName="Image";var R,L,B,X,Y,A=o(s.img)(E||(E=i(["\n    width: auto;\n    height: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),W=function(i){var o=i.currentIndex,s=i.images,u=i.inline,f=i.onClose,p=i.onNext,m=i.onPrev,v=i.renderImageOverlay,h=i.singleClickToZoom,y=r(!0),b=r(c(Array(s.length)).map((function(){return e.createRef()}))||[]),w=r(null),x=function(e){var r=n({height:window.innerHeight,width:window.innerWidth}),i=l(r,2),o=i[0],a=i[1];return t((function(){var t=e.current;if(t){var n=function(){var e=t.getBoundingClientRect(),n=e.height,r=e.width;n===o.height&&r===o.width||a({height:n,width:r})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}}}),[e,o.height,o.width]),o}(w),C=x.height,O=x.width,P=n(!1),E=l(P,2),k=E[0],T=E[1],D=n("100%"),j=l(D,2),I=j[0],N=j[1],R=n(!1),L=l(R,2),B=L[0],X=L[1],Y=e.useCallback((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}}),[o,O]),A=g(s.length,(function(e){return Y(e)})),W=l(A,2),S=W[0],Z=W[1];t((function(){var e=null==b?void 0:b.current[o],t="100%";e&&null!=e&&e.current&&(console.log({containerHeight:C}),console.log({currentImageStageHeight:e.current.clientHeight}),t=u?e.current.clientHeight:e.current.clientHeight-50),console.log({currPagerHeight:t,pagerHeight:I}),I!==t&&(console.log({currPagerHeight:t,pagerHeight:I}),N(t))}),[o,u,I,C]),t((function(){y.current?y.current=!1:Z.start((function(e){return Y(e)}))}),[o,Y,Z]);var q=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,u=e.tap;if(!k&&0!==n&&!u){B||X(!0);var f=Math.abs(r)>.7;if((t&&f&&o>O/3.5||t&&f&&i>2)&&c){var g=r>0?-1:1;return a(),void(g>0?p():g<0&&m())}s>1?a():Z.start((function(e){return Y(e,t,n)}))}},onDragEnd:function(){B&&(Z.start((function(e){return Y(e)})),setTimeout((function(){return X(!1)}),100))},onWheel:function(e){var t=e.velocity,n=l(e.direction,2),r=n[0],i=n[1];if(!e.ctrlKey&&!k&&0!==t&&(B||X(!0),t>1.1)){var o=r+i>0?-1:1;o>0?p():o<0&&m()}},onWheelEnd:function(){Z.start((function(e){return Y(e)})),setTimeout((function(){return X(!1)}),100)}},{drag:{filterTaps:!0}});return e.createElement(z,{ref:w},S.map((function(t,n){var r=t.display,i=t.x;return e.createElement(F,a({},q(),{className:"lightbox-image-pager",key:n,onClick:function(){if(f)return Math.abs(i.get())<1&&!k&&f()},ref:b.current[n],role:"presentation",style:{display:r,transform:i.to((function(e){return"translateX(".concat(e,"px)")}))}}),e.createElement(M,null,e.createElement(U,null,e.createElement(K,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},e.createElement(H,{imgProps:s[n],isCurrentImage:n===o,pagerHeight:I,pagerIsDragging:B,setDisableDrag:T,singleClickToZoom:h}),v()))))})))};W.displayName="ImagePager";var S,Z,z=o.div(R||(R=i(["\n    height: 100%;\n    width: 100%;\n"]))),U=o.div(L||(L=i(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),M=o.div(B||(B=i(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),F=o(s.div)(X||(X=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"]))),K=o.div(Y||(Y=i(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    width: 100%;\n"]))),q=function(t){var n=t.className,r=void 0===n?"":n,i=t.currentIndex,o=t.images,a=t.inline,l=t.onClose,c=t.onNext,s=t.onPrev,u=t.renderImageOverlay,f=t.renderNextButton,g=t.renderPrevButton,p=t.singleClickToZoom,m=i>0,d=i+1<o.length,v=d?c:function(){return null},h=m?s:function(){return null};return e.createElement(G,{className:r,"data-testid":"lightbox-image-stage"},g({canPrev:m}),e.createElement(W,{currentIndex:i,images:o,inline:a,onClose:l,onNext:v,onPrev:h,renderImageOverlay:u,singleClickToZoom:p}),f({canNext:d}))},G=o.div(S||(S=i(["\n    position: relative;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));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 Q(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 V=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=m(i,Q(Q({},l),o));return e.createElement(e.Fragment,null,c((function(t,i){return i&&e.createElement($,{className:"lightbox-container".concat(r?" ".concat(r):""),"data-testid":"lightbox-container",style:Q(Q({},t),a)},n)})))},$=o(s.div)(Z||(Z=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 _(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=O(e);if(t){var i=O(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return C(this,n)}}var ee=function(e){x(n,e);var t=_(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.inline,a=void 0!==o&&o,l=n.images,c=void 0===l?[]:l,s=n.currentIndex,u=n.onPrev,f=n.onNext,g=n.renderHeader,p=void 0===g?function(){return null}:g,m=n.renderFooter,d=void 0===m?function(){return null}:m,v=n.renderPrevButton,h=void 0===v?function(){return null}:v,y=n.renderNextButton,b=void 0===y?function(){return null}:y,w=n.renderImageOverlay,x=void 0===w?function(){return null}:w,C=n.className,O=void 0===C?"":C,P=n.singleClickToZoom,E=void 0!==P&&P,k=n.style,T=void 0===k?{}:k,D=n.pageTransitionConfig,j=void 0===D?null:D;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":u();break;case"ArrowRight":f();break;case"Escape":i&&i();break;default:e.preventDefault()}};return document.addEventListener("keyup",t),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",t),document.removeEventListener("keydown",e)}})),a?e.createElement(q,{currentIndex:s,images:c,inline:!0,onClose:i,onNext:f,onPrev:u,renderImageOverlay:x,renderNextButton:b,renderPrevButton:h,singleClickToZoom:E}):e.createElement(ee,null,e.createElement(V,{className:O,isOpen:r,pageTransitionConfig:j,style:T},p(),e.createElement(q,{currentIndex:s,images:c,onClose:i,onNext:f,onPrev:u,renderImageOverlay:x,renderNextButton:b,renderPrevButton:h,singleClickToZoom:E}),d()))}
 //# sourceMappingURL=index.es.js.map

package.json

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

165305

increased by0.01%

No dependency changes