react-spring-lightbox - npm Package Compare versions

Comparing version 1.7.0-beta.7 to 1.7.0-beta.8

dist/components/ImageStage/components/Image/index.d.ts

@@ -5,2 +5,4 @@ import type { ImagesListItem } from '../../../../types/ImagesList';
     imgProps: ImagesListItem;
+    /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */
+    inline: boolean;
     /** True if this image is currently shown in pager, otherwise false */
@@ -21,5 +23,5 @@ isCurrentImage: boolean;
 declare const Image: {
-    ({ imgProps: { style: imgStyleProp, ...restImgProps }, isCurrentImage, pagerHeight, pagerIsDragging, setDisableDrag, singleClickToZoom, }: IImageProps): JSX.Element;
+    ({ imgProps: { style: imgStyleProp, ...restImgProps }, inline, isCurrentImage, pagerHeight, pagerIsDragging, setDisableDrag, singleClickToZoom, }: IImageProps): JSX.Element;
     displayName: string;
 };
 export default Image;

dist/components/ImageStage/components/ImagePager/index.d.ts

@@ -13,3 +13,3 @@ import React from 'react';
     /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */
-    inline?: boolean;
+    inline: boolean;
     /** Function that closes the Lightbox */
@@ -16,0 +16,0 @@ onClose?: () => void;

dist/components/ImageStage/index.d.ts

@@ -11,3 +11,3 @@ import React from 'react';
     /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */
-    inline?: boolean;
+    inline: boolean;
     /** Function that closes the Lightbox */
@@ -14,0 +14,0 @@ onClose?: () => void;

dist/components/ImageStage/utils/useDoubleClick.d.ts

 import React from 'react';
 declare type IUseDoubleClickProps = {
+    /** Set to false to disable onDoubleClick/onSingleClick  */
+    enabled?: boolean;
     /** The amount of time (in milliseconds) to wait before differentiating a single from a double click */
@@ -16,3 +18,3 @@ latency?: number;
  */
-declare const useDoubleClick: ({ ref, latency, onSingleClick, onDoubleClick, }: IUseDoubleClickProps) => void;
+declare const useDoubleClick: ({ ref, latency, enabled, onSingleClick, onDoubleClick, }: IUseDoubleClickProps) => void;
 export default useDoubleClick;

dist/index.cjs.js

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

dist/index.es.js

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

package.json

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

Lines of code

383

increased by1.32%

Worsened metrics

Total package byte prevSize

162441

decreased by-1.3%

No dependency changes