react-spring-lightbox - npm Package Compare versions

Comparing version 1.7.0-beta.1 to 1.7.0-beta.2

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

@@ -8,2 +8,4 @@ import React from 'react';
     images: ImagesList;
+    /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */
+    inline?: boolean;
     /** Function that closes the Lightbox */
@@ -24,5 +26,5 @@ onClose?: () => void;
 declare const ImagePager: {
-    ({ currentIndex, images, onClose, onNext, onPrev, renderImageOverlay, singleClickToZoom, }: IImagePager): JSX.Element;
+    ({ currentIndex, images, inline, onClose, onNext, onPrev, renderImageOverlay, singleClickToZoom, }: IImagePager): JSX.Element;
     displayName: string;
 };
 export default ImagePager;

dist/components/ImageStage/index.d.ts

 import React from 'react';
 import type { ImagesList } from '../../types/ImagesList';
 declare type IImageStageProps = {
+    /** classnames are applied to the root ImageStage component */
+    className?: string;
     /** Index of image in images array that is currently shown */
@@ -8,2 +10,4 @@ currentIndex: number;
     images: ImagesList;
+    /** Affects Width calculation method, depending on whether the Lightbox is Inline or not */
+    inline?: boolean;
     /** Function that closes the Lightbox */
@@ -31,3 +35,3 @@ onClose?: () => void;
  */
-declare const ImageStage: ({ currentIndex, images, onClose, onNext, onPrev, renderImageOverlay, renderNextButton, renderPrevButton, singleClickToZoom, }: IImageStageProps) => JSX.Element;
+declare const ImageStage: ({ className, currentIndex, images, inline, onClose, onNext, onPrev, renderImageOverlay, renderNextButton, renderPrevButton, singleClickToZoom, }: IImageStageProps) => JSX.Element;
 export default ImageStage;

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

 import getTranslateOffsetsFromScale from './getTranslateOffsetsFromScale';
 import imageIsOutOfBounds from './imageIsOutOfBounds';
 import useDoubleClick from './useDoubleClick';
-import useWindowSize from './useWindowSize';
+import useWindowSize from './useRefSize';
 export { getTranslateOffsetsFromScale, imageIsOutOfBounds, useDoubleClick, useWindowSize, };

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

@@ -11,5 +11,5 @@ declare type IUseWindowSize = {
  *
- * @returns {WindowSize} An object container the window width and height
+ * @returns {WindowSize} An object containing the window width and height
  */
 declare const useWindowSize: () => IUseWindowSize;
 export default useWindowSize;

dist/index.cjs.js

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

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

162375

increased by2.29%

Number of package files

21

increased by5%

Lines of code

375

increased by6.23%

Dependency changes

• + Added@react-spring/animated@9.5.5(transitive)

• + Added@react-spring/core@9.5.5(transitive)

• + Added@react-spring/rafz@9.5.5(transitive)

• + Added@react-spring/shared@9.5.5(transitive)

• + Added@react-spring/types@9.5.5(transitive)

• + Added@react-spring/web@9.5.0(transitive)

• + Addedreact@18.3.1(transitive)

• - Removed@react-spring/animated@9.2.6(transitive)

• - Removed@react-spring/core@9.2.6(transitive)

• - Removed@react-spring/rafz@9.2.6(transitive)

• - Removed@react-spring/shared@9.2.6(transitive)

• - Removed@react-spring/types@9.2.6(transitive)

• - Removed@react-spring/web@9.2.1(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updated@react-spring/web@9.5.0