react-spring-lightbox - npm Package Compare versions

Comparing version 1.5.0-beta.4 to 1.5.0-beta.c1b1b83f

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

 /// <reference types="react" />
-import { ImagesListItem } from '../../../../types/ImagesList';
 declare type IImageProps = {
-    /** Any valid <img /> props to pass to the lightbox img element ie src, alt, caption etc*/
-    imgProps: ImagesListItem;
+    /** The alt attribute for this image */
+    alt: string;
     /** True if this image is currently shown in pager, otherwise false */
@@ -16,2 +15,4 @@ isCurrentImage: boolean;
     singleClickToZoom: boolean;
+    /** The source URL of this image */
+    src: string;
 };
@@ -22,5 +23,5 @@ /**
 declare const Image: {
-    ({ imgProps: { style: imgStyleProp, ...restImgProps }, isCurrentImage, pagerHeight, pagerIsDragging, setDisableDrag, singleClickToZoom, }: IImageProps): JSX.Element;
+    ({ alt, isCurrentImage, pagerHeight, pagerIsDragging, setDisableDrag, singleClickToZoom, src, }: IImageProps): JSX.Element;
     displayName: string;
 };
 export default Image;

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

 import React from 'react';
-import { ImagesList } from '../../../../types/ImagesList';
 declare type IImagePager = {
@@ -7,3 +6,6 @@ /** Index of image in images array that is currently shown */
     /** Array of image objects to be shown in Lightbox */
-    images: ImagesList;
+    images: {
+        alt: string;
+        src: string;
+    }[];
     /** Function that closes the Lightbox */
@@ -10,0 +12,0 @@ onClose: () => void;

dist/components/ImageStage/index.d.ts

 import React from 'react';
-import { ImagesList } from '../../types/ImagesList';
 declare type IImageStageProps = {
     currentIndex: number;
-    images: ImagesList;
+    images: {
+        alt: string;
+        src: string;
+    }[];
     onClose: () => void;
@@ -7,0 +9,0 @@ onNext: () => void;

dist/index.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react"),n=require("tslib"),t=require("styled-components"),i=require("@react-spring/web"),r=require("react-use-gesture"),a=require("react-dom");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(t),s=o(a),c=function(e){var n,t=e.imageRef,i=e.scale,r=e.pinchDelta,a=e.touchOrigin,o=a[0],l=a[1],u=e.currentTranslate,s=u[0],c=u[1];if(!(null==t?void 0:t.current))return[0,0];var d=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),f=d.height,g=d.left,m=d.top;return[-((o-g-d.width/2)/i)*r+s,-((l-m-f/2)/i)*r+c]},d=function(e){var n;if(!e.current)return!1;var t=null===(n=e.current)||void 0===n?void 0:n.getBoundingClientRect(),i=t.bottom,r=t.left,a=t.right,o=t.top,l=window.innerHeight,u=window.innerWidth;return r>.5*u||o>.5*l||a<.5*u||i<.5*l},f=function(t){var a,o=t.imgProps,u=o.style,s=n.__rest(o,["style"]),f=t.isCurrentImage,g=t.pagerHeight,p=t.pagerIsDragging,v=t.setDisableDrag,h=t.singleClickToZoom,y=e.useState(!1),x=y[0],w=y[1],_=e.useRef(null),b=function(){return{config:n.__assign(n.__assign({},i.config.default),{precision:.01}),scale:1,translateX:0,translateY:0}},E=i.useSpring((function(){return n.__assign(n.__assign({},b()),{onFrame:function(e){(e.scale<1||!e.pinching)&&P(b()),e.scale>1&&d(_)&&P(b())},onRest:function(e){1===e.scale&&v(!1)}})})),C=E[0],k=C.scale,T=C.translateX,D=C.translateY,P=E[1];return e.useEffect((function(){f||1===k.getValue()||P(b())}),[f,k,P]),r.useGesture({onDrag:function(e){var n=e.movement,t=n[0],i=n[1],r=e.pinching,a=e.cancel,o=e.first,l=e.memo,u=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,s=e.touches;if(!(p||1===k.getValue()||(t&&i&&!x&&w(!0),s>1||r||k.getValue()<=1)))return k.getValue()>1&&d(_)?void a():o?{initialTranslateX:T.getValue(),initialTranslateY:D.getValue()}:(P({translateX:u.initialTranslateX+t,translateY:u.initialTranslateY+i}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return w(!1)}),100)},onPinch:function(e){var n=e.movement[0],t=e.origin,i=t[0],r=t[1],a=e.event,o=e.ctrlKey,l=e.last,u=e.cancel;if(!p)if(v(!0),n&&!x&&w(!0),l)u();else{var s=o?1e3:250,d=k.getValue()+n/s,f=d-k.getValue(),g=[i,r];"clientX"in a&&"clientY"in a&&o&&(g=[a.clientX,a.clientY]);var m=c({currentTranslate:[T.getValue(),D.getValue()],imageRef:_,pinchDelta:f,scale:k.getValue(),touchOrigin:g}),h=m[0],y=m[1];P(d<.5?{pinching:!0,scale:.5}:d>3?{pinching:!0,scale:3}:{pinching:!0,scale:d,translateX:h,translateY:y})}},onPinchEnd:function(){p||(k.getValue()>1?v(!0):P(b()),setTimeout((function(){return w(!1)}),100))}},{domTarget:_,eventOptions:{passive:!1}}),function(n){var t=n.ref,i=n.latency,r=void 0===i?300:i,a=n.onSingleClick,o=void 0===a?function(){return null}:a,l=n.onDoubleClick,u=void 0===l?function(){return null}:l;e.useEffect((function(){var e,n=t.current,i=0,a=function(n){i+=1,e=setTimeout((function(){1===i?o(n):2===i&&u(n),i=0}),r)};return null==n||n.addEventListener("click",a),function(){null==n||n.removeEventListener("click",a),e&&clearTimeout(e)}}))}(((a={})[h?"onSingleClick":"onDoubleClick"]=function(e){if(p||x)e.stopPropagation();else if(1===k.getValue()){var n=e.clientX,t=e.clientY,i=k.getValue()+1,r=i-k.getValue(),a=c({currentTranslate:[T.getValue(),D.getValue()],imageRef:_,pinchDelta:r,scale:k.getValue(),touchOrigin:[n,t]}),o=a[0],l=a[1];v(!0),P({pinching:!0,scale:i,translateX:o,translateY:l})}else P(b())},a.latency=h?0:200,a.ref=_,a)),l.default.createElement(m,n.__assign({className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:_,style:n.__assign(n.__assign(n.__assign({},u),{maxHeight:g,transform:i.to([k,T,D],(function(e,n,t){return"translate("+n+"px, "+t+"px) scale("+e+")"}))}),f&&{willChange:"transform"})},s))};f.displayName="Image";var g,m=u.default(i.animated.img)(g||(g=n.__makeTemplateObject(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"],["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),p=function(t){var a=t.currentIndex,o=t.images,u=t.onClose,s=t.onNext,c=t.onPrev,d=t.renderImageOverlay,g=t.singleClickToZoom,m=e.useRef(!0),p=e.useRef(n.__spreadArrays(Array(o.length)).map((function(){return l.default.createRef()}))||[]),v=function(){var n=e.useState({height:window.innerHeight,width:window.innerWidth}),t=n[0],i=n[1];return e.useEffect((function(){var e=function(){window.innerHeight===t.height&&window.innerWidth===t.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)}})),t}(),h=v.height,y=v.width,x=e.useState(!1),w=x[0],_=x[1],T=e.useState("100%"),D=T[0],P=T[1],O=e.useState(!1),V=O[0],I=O[1],N=function(e,n,t){void 0===n&&(n=!1),void 0===t&&(t=0);var i=(e-a)*y+(n?t:0);return e<a-1||e>a+1?{display:"none",x:i}:{display:"flex",x:i}},j=i.useSprings(o.length,N),L=j[0],X=j[1];e.useEffect((function(){var e=null==p?void 0:p.current[a],n=0;e&&(null==e?void 0:e.current)&&(n=e.current.clientHeight-50),D!==n&&P(n)}),[a,D,h]),e.useEffect((function(){m.current?m.current=!1:X((function(e){return N(e)}))}));var R=r.useGesture({onDrag:function(e){var n=e.down,t=e.movement[0],i=e.direction[0],r=e.velocity,a=e.distance,o=e.cancel,l=e.active,u=e.touches;if(!w&&0!==t){V||I(!0);var d=Math.abs(i)>.7;if((n&&d&&a>y/3.5||n&&d&&r>2)&&l){var f=i>0?-1:1;return o(),void(f>0?s():f<0&&c())}u>1?o():X((function(e){return N(e,n,t)}))}},onDragEnd:function(){V&&setTimeout((function(){return I(!1)}),100)},onWheel:function(e){var n=e.distance,t=e.velocity,i=e.direction,r=i[0],a=i[1];if(!e.ctrlKey&&!w&&0!==t&&(V||I(!0),n>y/3||t>1.5&&n<=y/3)){var o=r+a>0?-1:1;o>0?s():o<0&&c()}},onWheelEnd:function(){X((function(e){return N(e,!1,0)})),setTimeout((function(){return I(!1)}),100)}},{drag:{filterTaps:!0}});return l.default.createElement(l.default.Fragment,null,L.map((function(e,t){var i=e.display,r=e.x;return l.default.createElement(C,n.__assign({},R(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(r.getValue())<1&&!w&&u()},ref:p.current[t],role:"presentation",style:{display:i,transform:r.to((function(e){return"translateX("+e+"px)"}))}}),l.default.createElement(E,null,l.default.createElement(b,null,l.default.createElement(k,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},l.default.createElement(f,{imgProps:o[t],isCurrentImage:t===a,pagerHeight:D,pagerIsDragging:V,setDisableDrag:_,singleClickToZoom:g}),d()))))})))};p.displayName="ImagePager";var v,h,y,x,w,_,b=u.default.div(v||(v=n.__makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"],["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),E=u.default.div(h||(h=n.__makeTemplateObject(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"],["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),C=u.default(i.animated.div)(y||(y=n.__makeTemplateObject(["\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"],["\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=u.default.div(x||(x=n.__makeTemplateObject(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"],["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),T=function(e){var n=e.currentIndex,t=e.images,i=e.onClose,r=e.onNext,a=e.onPrev,o=e.renderImageOverlay,u=e.renderNextButton,s=e.renderPrevButton,c=e.singleClickToZoom,d=n>0,f=n+1<t.length;return l.default.createElement(D,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},s({canPrev:d}),l.default.createElement(p,{currentIndex:n,images:t,onClose:i,onNext:r,onPrev:a,renderImageOverlay:o,singleClickToZoom:c}),u({canNext:f}))},D=u.default.div(w||(w=n.__makeTemplateObject(["\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"],["\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"]))),P=function(e){var t=e.children,r=e.className,a=e.isOpen,o=e.pageTransitionConfig,u=e.style,s={config:n.__assign(n.__assign({},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)"}},c=i.useTransition(a,null,n.__assign(n.__assign({},s),o));return l.default.createElement(l.default.Fragment,null,c.map((function(e){var i=e.item,a=e.key,o=e.props;return i&&l.default.createElement(O,{className:"lightbox-container"+(r?" "+r:""),"data-testid":"lightbox-container",key:a,style:n.__assign(n.__assign({},o),u)},t)})))},O=u.default(i.animated.div)(_||(_=n.__makeTemplateObject(["\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"],["\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"]))),V=function(e){function t(){var n=null!==e&&e.apply(this,arguments)||this;return n.preventWheel=function(e){return e.preventDefault()},n}return n.__extends(t,e),t.prototype.componentDidMount=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)},t.prototype.componentWillUnmount=function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)},t.prototype.render=function(){if(void 0===this.portalContainer)return null;var e=this.props.children;return s.default.createPortal(e,this.portalContainer)},t}(l.default.Component);module.exports=function(n){var t=n.isOpen,i=n.onClose,r=n.images,a=void 0===r?[]:r,o=n.currentIndex,u=n.onPrev,s=n.onNext,c=n.renderHeader,d=void 0===c?function(){return null}:c,f=n.renderFooter,g=void 0===f?function(){return null}:f,m=n.renderPrevButton,p=void 0===m?function(){return null}:m,v=n.renderNextButton,h=void 0===v?function(){return null}:v,y=n.renderImageOverlay,x=void 0===y?function(){return null}:y,w=n.className,_=void 0===w?"":w,b=n.singleClickToZoom,E=void 0!==b&&b,C=n.style,k=void 0===C?{}:C,D=n.pageTransitionConfig,O=void 0===D?null:D;return e.useEffect((function(){var e=function(e){t&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},n=function(e){if(t)switch(e.key){case"ArrowLeft":u();break;case"ArrowRight":s();break;case"Escape":i();break;default:e.preventDefault()}};return document.addEventListener("keyup",n),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",n),document.removeEventListener("keydown",e)}})),l.default.createElement(V,null,l.default.createElement(P,{className:_,isOpen:t,pageTransitionConfig:O,style:k},d(),l.default.createElement(T,{currentIndex:o,images:a,onClose:i,onNext:s,onPrev:u,renderImageOverlay:x,renderNextButton:h,renderPrevButton:p,singleClickToZoom:E}),g()))};
+"use strict";var e=require("react"),n=require("tslib"),t=require("styled-components"),i=require("@react-spring/web"),r=require("react-use-gesture"),a=require("react-dom");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(t),c=o(a),s=function(e){var n,t=e.imageRef,i=e.scale,r=e.pinchDelta,a=e.touchOrigin,o=a[0],l=a[1],u=e.currentTranslate,c=u[0],s=u[1];if(!(null==t?void 0:t.current))return[0,0];var d=null===(n=t.current)||void 0===n?void 0:n.getBoundingClientRect(),f=d.height,g=d.left,m=d.top;return[-((o-g-d.width/2)/i)*r+c,-((l-m-f/2)/i)*r+s]},d=function(e){var n;if(!e.current)return!1;var t=null===(n=e.current)||void 0===n?void 0:n.getBoundingClientRect(),i=t.bottom,r=t.left,a=t.right,o=t.top,l=window.innerHeight,u=window.innerWidth;return r>.5*u||o>.5*l||a<.5*u||i<.5*l},f=function(t){var a,o=t.alt,u=t.isCurrentImage,c=t.pagerHeight,f=t.pagerIsDragging,g=t.setDisableDrag,p=t.singleClickToZoom,v=t.src,h=e.useState(!1),y=h[0],x=h[1],w=e.useRef(null),_=function(){return{config:n.__assign(n.__assign({},i.config.default),{precision:.01}),scale:1,translateX:0,translateY:0}},b=i.useSpring((function(){return n.__assign(n.__assign({},_()),{onFrame:function(e){(e.scale<1||!e.pinching)&&D(_()),e.scale>1&&d(w)&&D(_())},onRest:function(e){1===e.scale&&g(!1)}})})),E=b[0],C=E.scale,k=E.translateX,T=E.translateY,D=b[1];return e.useEffect((function(){u||1===C.getValue()||D(_())}),[u,C,D]),r.useGesture({onDrag:function(e){var n=e.movement,t=n[0],i=n[1],r=e.pinching,a=e.cancel,o=e.first,l=e.memo,u=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,c=e.touches;if(!(f||1===C.getValue()||(t&&i&&!y&&x(!0),c>1||r||C.getValue()<=1)))return C.getValue()>1&&d(w)?void a():o?{initialTranslateX:k.getValue(),initialTranslateY:T.getValue()}:(D({translateX:u.initialTranslateX+t,translateY:u.initialTranslateY+i}),u)},onDragEnd:function(e){void 0!==e.memo&&setTimeout((function(){return x(!1)}),100)},onPinch:function(e){var n=e.movement[0],t=e.origin,i=t[0],r=t[1],a=e.event,o=e.ctrlKey,l=e.last,u=e.cancel;if(!f)if(g(!0),n&&!y&&x(!0),l)u();else{var c=o?1e3:250,d=C.getValue()+n/c,m=d-C.getValue(),p=[i,r];"clientX"in a&&"clientY"in a&&o&&(p=[a.clientX,a.clientY]);var v=s({currentTranslate:[k.getValue(),T.getValue()],imageRef:w,pinchDelta:m,scale:C.getValue(),touchOrigin:p}),h=v[0],_=v[1];D(d<.5?{pinching:!0,scale:.5}:d>3?{pinching:!0,scale:3}:{pinching:!0,scale:d,translateX:h,translateY:_})}},onPinchEnd:function(){f||(C.getValue()>1?g(!0):D(_()),setTimeout((function(){return x(!1)}),100))}},{domTarget:w,eventOptions:{passive:!1}}),function(n){var t=n.ref,i=n.latency,r=void 0===i?300:i,a=n.onSingleClick,o=void 0===a?function(){return null}:a,l=n.onDoubleClick,u=void 0===l?function(){return null}:l;e.useEffect((function(){var e,n=t.current,i=0,a=function(n){i+=1,e=setTimeout((function(){1===i?o(n):2===i&&u(n),i=0}),r)};return null==n||n.addEventListener("click",a),function(){null==n||n.removeEventListener("click",a),e&&clearTimeout(e)}}))}(((a={})[p?"onSingleClick":"onDoubleClick"]=function(e){if(f||y)e.stopPropagation();else if(1===C.getValue()){var n=e.clientX,t=e.clientY,i=C.getValue()+1,r=i-C.getValue(),a=s({currentTranslate:[k.getValue(),T.getValue()],imageRef:w,pinchDelta:r,scale:C.getValue(),touchOrigin:[n,t]}),o=a[0],l=a[1];g(!0),D({pinching:!0,scale:i,translateX:o,translateY:l})}else D(_())},a.latency=p?0:200,a.ref=w,a)),l.default.createElement(m,{alt:o,className:"lightbox-image",draggable:"false",onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()},onDragStart:function(e){e.preventDefault()},ref:w,src:v,style:n.__assign({maxHeight:c,transform:i.to([C,k,T],(function(e,n,t){return"translate("+n+"px, "+t+"px) scale("+e+")"}))},u&&{willChange:"transform"})})};f.displayName="Image";var g,m=u.default(i.animated.img)(g||(g=n.__makeTemplateObject(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"],["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),p=function(t){var a=t.currentIndex,o=t.images,u=t.onClose,c=t.onNext,s=t.onPrev,d=t.renderImageOverlay,g=t.singleClickToZoom,m=e.useRef(!0),p=e.useRef(n.__spreadArrays(Array(o.length)).map((function(){return l.default.createRef()}))||[]),v=function(){var n=e.useState({height:window.innerHeight,width:window.innerWidth}),t=n[0],i=n[1];return e.useEffect((function(){var e=function(){window.innerHeight===t.height&&window.innerWidth===t.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)}})),t}(),h=v.height,y=v.width,x=e.useState(!1),w=x[0],_=x[1],T=e.useState("100%"),D=T[0],P=T[1],O=e.useState(!1),V=O[0],I=O[1],N=function(e,n,t){void 0===n&&(n=!1),void 0===t&&(t=0);var i=(e-a)*y+(n?t:0);return e<a-1||e>a+1?{display:"none",x:i}:{display:"flex",x:i}},j=i.useSprings(o.length,N),L=j[0],X=j[1];e.useEffect((function(){var e=null==p?void 0:p.current[a],n=0;e&&(null==e?void 0:e.current)&&(n=e.current.clientHeight-50),D!==n&&P(n)}),[a,D,h]),e.useEffect((function(){m.current?m.current=!1:X((function(e){return N(e)}))}));var R=r.useGesture({onDrag:function(e){var n=e.down,t=e.movement[0],i=e.direction[0],r=e.velocity,a=e.distance,o=e.cancel,l=e.active,u=e.touches;if(!w&&0!==t){V||I(!0);var d=Math.abs(i)>.7;if((n&&d&&a>y/3.5||n&&d&&r>2)&&l){var f=i>0?-1:1;return o(),void(f>0?c():f<0&&s())}u>1?o():X((function(e){return N(e,n,t)}))}},onDragEnd:function(){V&&setTimeout((function(){return I(!1)}),100)},onWheel:function(e){var n=e.distance,t=e.velocity,i=e.direction,r=i[0],a=i[1];if(!e.ctrlKey&&!w&&0!==t&&(V||I(!0),n>y/3||t>1.5&&n<=y/3)){var o=r+a>0?-1:1;o>0?c():o<0&&s()}},onWheelEnd:function(){X((function(e){return N(e,!1,0)})),setTimeout((function(){return I(!1)}),100)}},{drag:{filterTaps:!0}});return l.default.createElement(l.default.Fragment,null,L.map((function(e,t){var i=e.display,r=e.x;return l.default.createElement(C,n.__assign({},R(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(r.getValue())<1&&!w&&u()},ref:p.current[t],role:"presentation",style:{display:i,transform:r.to((function(e){return"translateX("+e+"px)"}))}}),l.default.createElement(E,null,l.default.createElement(b,null,l.default.createElement(k,{onClick:function(e){e.stopPropagation(),e.nativeEvent.stopImmediatePropagation()}},l.default.createElement(f,{alt:o[t].alt,isCurrentImage:t===a,pagerHeight:D,pagerIsDragging:V,setDisableDrag:_,singleClickToZoom:g,src:o[t].src}),d()))))})))};p.displayName="ImagePager";var v,h,y,x,w,_,b=u.default.div(v||(v=n.__makeTemplateObject(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"],["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),E=u.default.div(h||(h=n.__makeTemplateObject(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"],["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),C=u.default(i.animated.div)(y||(y=n.__makeTemplateObject(["\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"],["\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=u.default.div(x||(x=n.__makeTemplateObject(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"],["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),T=function(e){var n=e.currentIndex,t=e.images,i=e.onClose,r=e.onNext,a=e.onPrev,o=e.renderImageOverlay,u=e.renderNextButton,c=e.renderPrevButton,s=e.singleClickToZoom,d=n>0,f=n+1<t.length;return l.default.createElement(D,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},c({canPrev:d}),l.default.createElement(p,{currentIndex:n,images:t,onClose:i,onNext:r,onPrev:a,renderImageOverlay:o,singleClickToZoom:s}),u({canNext:f}))},D=u.default.div(w||(w=n.__makeTemplateObject(["\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"],["\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"]))),P=function(e){var t=e.children,r=e.className,a=e.isOpen,o=e.pageTransitionConfig,u=e.style,c={config:n.__assign(n.__assign({},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)"}},s=i.useTransition(a,null,n.__assign(n.__assign({},c),o));return l.default.createElement(l.default.Fragment,null,s.map((function(e){var i=e.item,a=e.key,o=e.props;return i&&l.default.createElement(O,{className:"lightbox-container"+(r?" "+r:""),"data-testid":"lightbox-container",key:a,style:n.__assign(n.__assign({},o),u)},t)})))},O=u.default(i.animated.div)(_||(_=n.__makeTemplateObject(["\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"],["\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"]))),V=function(e){function t(){var n=null!==e&&e.apply(this,arguments)||this;return n.preventWheel=function(e){return e.preventDefault()},n}return n.__extends(t,e),t.prototype.componentDidMount=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)},t.prototype.componentWillUnmount=function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)},t.prototype.render=function(){if(void 0===this.portalContainer)return null;var e=this.props.children;return c.default.createPortal(e,this.portalContainer)},t}(l.default.Component);module.exports=function(n){var t=n.isOpen,i=n.onClose,r=n.images,a=void 0===r?[]:r,o=n.currentIndex,u=n.onPrev,c=n.onNext,s=n.renderHeader,d=void 0===s?function(){return null}:s,f=n.renderFooter,g=void 0===f?function(){return null}:f,m=n.renderPrevButton,p=void 0===m?function(){return null}:m,v=n.renderNextButton,h=void 0===v?function(){return null}:v,y=n.renderImageOverlay,x=void 0===y?function(){return null}:y,w=n.className,_=void 0===w?"":w,b=n.singleClickToZoom,E=void 0!==b&&b,C=n.style,k=void 0===C?{}:C,D=n.pageTransitionConfig,O=void 0===D?null:D;return e.useEffect((function(){var e=function(e){t&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(e.key)&&e.preventDefault()},n=function(e){if(t)switch(e.key){case"ArrowLeft":u();break;case"ArrowRight":c();break;case"Escape":i();break;default:e.preventDefault()}};return document.addEventListener("keyup",n),document.addEventListener("keydown",e),function(){document.removeEventListener("keyup",n),document.removeEventListener("keydown",e)}})),l.default.createElement(V,null,l.default.createElement(P,{className:_,isOpen:t,pageTransitionConfig:O,style:k},d(),l.default.createElement(T,{currentIndex:o,images:a,onClose:i,onNext:c,onPrev:u,renderImageOverlay:x,renderNextButton:h,renderPrevButton:p,singleClickToZoom:E}),g()))};
 //# sourceMappingURL=index.cjs.js.map

dist/index.d.ts

 import React from 'react';
-import { ImagesList } from './types/ImagesList';
-export declare type ImagesListType = ImagesList;
 declare type ILightboxProps = {
@@ -9,4 +7,7 @@ /** classnames are applied to the root lightbox component */
     currentIndex: number;
-    /** Array of images to be shown in Lightbox, each image object may contain any valid 'img' attribute with the exceptions of 'draggable', 'onClick', 'onDragStart' and 'ref' */
-    images: ImagesList;
+    /** Array of images to be shown in Lightbox */
+    images: {
+        alt: string;
+        src: string;
+    }[];
     /** Flag that dictates if the lightbox is open or closed */
@@ -49,5 +50,4 @@ isOpen: boolean;
  * @see https://github.com/react-spring/react-spring
- * @see https://github.com/styled-components/styled-components
  */
 declare const Lightbox: ({ isOpen, onClose, images, currentIndex, onPrev, onNext, renderHeader, renderFooter, renderPrevButton, renderNextButton, renderImageOverlay, className, singleClickToZoom, style, pageTransitionConfig, }: ILightboxProps) => JSX.Element;
 export default Lightbox;

dist/index.es.js

@@ -1,2 +0,2 @@
-import n,{useEffect as e,useState as t,useRef as i}from"react";import{__makeTemplateObject as r,__rest as o,__assign as a,__spreadArrays as l,__extends as c}from"tslib";import u from"styled-components";import{animated as s,useSpring as d,config as g,to as f,useSprings as m,useTransition as p}from"@react-spring/web";import{useGesture as v}from"react-use-gesture";import h from"react-dom";var y=function(n){var e,t=n.imageRef,i=n.scale,r=n.pinchDelta,o=n.touchOrigin,a=o[0],l=o[1],c=n.currentTranslate,u=c[0],s=c[1];if(!(null==t?void 0:t.current))return[0,0];var d=null===(e=t.current)||void 0===e?void 0:e.getBoundingClientRect(),g=d.height,f=d.left,m=d.top;return[-((a-f-d.width/2)/i)*r+u,-((l-m-g/2)/i)*r+s]},x=function(n){var e;if(!n.current)return!1;var t=null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect(),i=t.bottom,r=t.left,o=t.right,a=t.top,l=window.innerHeight,c=window.innerWidth;return r>.5*c||a>.5*l||o<.5*c||i<.5*l},w=function(r){var l,c=r.imgProps,u=c.style,s=o(c,["style"]),m=r.isCurrentImage,p=r.pagerHeight,h=r.pagerIsDragging,w=r.setDisableDrag,C=r.singleClickToZoom,b=t(!1),k=b[0],T=b[1],D=i(null),P=function(){return{config:a(a({},g.default),{precision:.01}),scale:1,translateX:0,translateY:0}},V=d((function(){return a(a({},P()),{onFrame:function(n){(n.scale<1||!n.pinching)&&X(P()),n.scale>1&&x(D)&&X(P())},onRest:function(n){1===n.scale&&w(!1)}})})),I=V[0],N=I.scale,L=I.translateX,O=I.translateY,X=V[1];return e((function(){m||1===N.getValue()||X(P())}),[m,N,X]),v({onDrag:function(n){var e=n.movement,t=e[0],i=e[1],r=n.pinching,o=n.cancel,a=n.first,l=n.memo,c=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,u=n.touches;if(!(h||1===N.getValue()||(t&&i&&!k&&T(!0),u>1||r||N.getValue()<=1)))return N.getValue()>1&&x(D)?void o():a?{initialTranslateX:L.getValue(),initialTranslateY:O.getValue()}:(X({translateX:c.initialTranslateX+t,translateY:c.initialTranslateY+i}),c)},onDragEnd:function(n){void 0!==n.memo&&setTimeout((function(){return T(!1)}),100)},onPinch:function(n){var e=n.movement[0],t=n.origin,i=t[0],r=t[1],o=n.event,a=n.ctrlKey,l=n.last,c=n.cancel;if(!h)if(w(!0),e&&!k&&T(!0),l)c();else{var u=a?1e3:250,s=N.getValue()+e/u,d=s-N.getValue(),g=[i,r];"clientX"in o&&"clientY"in o&&a&&(g=[o.clientX,o.clientY]);var f=y({currentTranslate:[L.getValue(),O.getValue()],imageRef:D,pinchDelta:d,scale:N.getValue(),touchOrigin:g}),m=f[0],p=f[1];X(s<.5?{pinching:!0,scale:.5}:s>3?{pinching:!0,scale:3}:{pinching:!0,scale:s,translateX:m,translateY:p})}},onPinchEnd:function(){h||(N.getValue()>1?w(!0):X(P()),setTimeout((function(){return T(!1)}),100))}},{domTarget:D,eventOptions:{passive:!1}}),function(n){var t=n.ref,i=n.latency,r=void 0===i?300:i,o=n.onSingleClick,a=void 0===o?function(){return null}:o,l=n.onDoubleClick,c=void 0===l?function(){return null}:l;e((function(){var n,e=t.current,i=0,o=function(e){i+=1,n=setTimeout((function(){1===i?a(e):2===i&&c(e),i=0}),r)};return null==e||e.addEventListener("click",o),function(){null==e||e.removeEventListener("click",o),n&&clearTimeout(n)}}))}(((l={})[C?"onSingleClick":"onDoubleClick"]=function(n){if(h||k)n.stopPropagation();else if(1===N.getValue()){var e=n.clientX,t=n.clientY,i=N.getValue()+1,r=i-N.getValue(),o=y({currentTranslate:[L.getValue(),O.getValue()],imageRef:D,pinchDelta:r,scale:N.getValue(),touchOrigin:[e,t]}),a=o[0],l=o[1];w(!0),X({pinching:!0,scale:i,translateX:a,translateY:l})}else X(P())},l.latency=C?0:200,l.ref=D,l)),n.createElement(E,a({className:"lightbox-image",draggable:"false",onClick:function(n){n.stopPropagation(),n.nativeEvent.stopImmediatePropagation()},onDragStart:function(n){n.preventDefault()},ref:D,style:a(a(a({},u),{maxHeight:p,transform:f([N,L,O],(function(n,e,t){return"translate("+e+"px, "+t+"px) scale("+n+")"}))}),m&&{willChange:"transform"})},s))};w.displayName="Image";var C,E=u(s.img)(C||(C=r(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"],["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),b=function(r){var o=r.currentIndex,c=r.images,u=r.onClose,s=r.onNext,d=r.onPrev,g=r.renderImageOverlay,f=r.singleClickToZoom,p=i(!0),h=i(l(Array(c.length)).map((function(){return n.createRef()}))||[]),y=function(){var n=t({height:window.innerHeight,width:window.innerWidth}),i=n[0],r=n[1];return e((function(){var n=function(){window.innerHeight===i.height&&window.innerWidth===i.width||r({height:window.innerHeight,width:window.innerWidth})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}})),i}(),x=y.height,C=y.width,E=t(!1),b=E[0],k=E[1],T=t("100%"),D=T[0],P=T[1],V=t(!1),I=V[0],Y=V[1],H=function(n,e,t){void 0===e&&(e=!1),void 0===t&&(t=0);var i=(n-o)*C+(e?t:0);return n<o-1||n>o+1?{display:"none",x:i}:{display:"flex",x:i}},W=m(c.length,H),j=W[0],B=W[1];e((function(){var n=null==h?void 0:h.current[o],e=0;n&&(null==n?void 0:n.current)&&(e=n.current.clientHeight-50),D!==e&&P(e)}),[o,D,x]),e((function(){p.current?p.current=!1:B((function(n){return H(n)}))}));var R=v({onDrag:function(n){var e=n.down,t=n.movement[0],i=n.direction[0],r=n.velocity,o=n.distance,a=n.cancel,l=n.active,c=n.touches;if(!b&&0!==t){I||Y(!0);var u=Math.abs(i)>.7;if((e&&u&&o>C/3.5||e&&u&&r>2)&&l){var g=i>0?-1:1;return a(),void(g>0?s():g<0&&d())}c>1?a():B((function(n){return H(n,e,t)}))}},onDragEnd:function(){I&&setTimeout((function(){return Y(!1)}),100)},onWheel:function(n){var e=n.distance,t=n.velocity,i=n.direction,r=i[0],o=i[1];if(!n.ctrlKey&&!b&&0!==t&&(I||Y(!0),e>C/3||t>1.5&&e<=C/3)){var a=r+o>0?-1:1;a>0?s():a<0&&d()}},onWheelEnd:function(){B((function(n){return H(n,!1,0)})),setTimeout((function(){return Y(!1)}),100)}},{drag:{filterTaps:!0}});return n.createElement(n.Fragment,null,j.map((function(e,t){var i=e.display,r=e.x;return n.createElement(O,a({},R(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(r.getValue())<1&&!b&&u()},ref:h.current[t],role:"presentation",style:{display:i,transform:r.to((function(n){return"translateX("+n+"px)"}))}}),n.createElement(L,null,n.createElement(N,null,n.createElement(X,{onClick:function(n){n.stopPropagation(),n.nativeEvent.stopImmediatePropagation()}},n.createElement(w,{imgProps:c[t],isCurrentImage:t===o,pagerHeight:D,pagerIsDragging:I,setDisableDrag:k,singleClickToZoom:f}),g()))))})))};b.displayName="ImagePager";var k,T,D,P,V,I,N=u.div(k||(k=r(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"],["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),L=u.div(T||(T=r(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"],["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),O=u(s.div)(D||(D=r(["\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"],["\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=u.div(P||(P=r(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"],["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),Y=function(e){var t=e.currentIndex,i=e.images,r=e.onClose,o=e.onNext,a=e.onPrev,l=e.renderImageOverlay,c=e.renderNextButton,u=e.renderPrevButton,s=e.singleClickToZoom,d=t>0,g=t+1<i.length;return n.createElement(H,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},u({canPrev:d}),n.createElement(b,{currentIndex:t,images:i,onClose:r,onNext:o,onPrev:a,renderImageOverlay:l,singleClickToZoom:s}),c({canNext:g}))},H=u.div(V||(V=r(["\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"],["\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"]))),W=function(e){var t=e.children,i=e.className,r=e.isOpen,o=e.pageTransitionConfig,l=e.style,c={config:a(a({},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)"}},u=p(r,null,a(a({},c),o));return n.createElement(n.Fragment,null,u.map((function(e){var r=e.item,o=e.key,c=e.props;return r&&n.createElement(j,{className:"lightbox-container"+(i?" "+i:""),"data-testid":"lightbox-container",key:o,style:a(a({},c),l)},t)})))},j=u(s.div)(I||(I=r(["\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"],["\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"]))),B=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.preventWheel=function(n){return n.preventDefault()},e}return c(e,n),e.prototype.componentDidMount=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)},e.prototype.componentWillUnmount=function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)},e.prototype.render=function(){if(void 0===this.portalContainer)return null;var n=this.props.children;return h.createPortal(n,this.portalContainer)},e}(n.Component);export default function(t){var i=t.isOpen,r=t.onClose,o=t.images,a=void 0===o?[]:o,l=t.currentIndex,c=t.onPrev,u=t.onNext,s=t.renderHeader,d=void 0===s?function(){return null}:s,g=t.renderFooter,f=void 0===g?function(){return null}:g,m=t.renderPrevButton,p=void 0===m?function(){return null}:m,v=t.renderNextButton,h=void 0===v?function(){return null}:v,y=t.renderImageOverlay,x=void 0===y?function(){return null}:y,w=t.className,C=void 0===w?"":w,E=t.singleClickToZoom,b=void 0!==E&&E,k=t.style,T=void 0===k?{}:k,D=t.pageTransitionConfig,P=void 0===D?null:D;return e((function(){var n=function(n){i&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(n.key)&&n.preventDefault()},e=function(n){if(i)switch(n.key){case"ArrowLeft":c();break;case"ArrowRight":u();break;case"Escape":r();break;default:n.preventDefault()}};return document.addEventListener("keyup",e),document.addEventListener("keydown",n),function(){document.removeEventListener("keyup",e),document.removeEventListener("keydown",n)}})),n.createElement(B,null,n.createElement(W,{className:C,isOpen:i,pageTransitionConfig:P,style:T},d(),n.createElement(Y,{currentIndex:l,images:a,onClose:r,onNext:u,onPrev:c,renderImageOverlay:x,renderNextButton:h,renderPrevButton:p,singleClickToZoom:b}),f()))}
+import n,{useEffect as e,useState as t,useRef as i}from"react";import{__makeTemplateObject as r,__assign as o,__spreadArrays as a,__extends as l}from"tslib";import c from"styled-components";import{animated as u,useSpring as s,config as d,to as g,useSprings as f,useTransition as m}from"@react-spring/web";import{useGesture as p}from"react-use-gesture";import v from"react-dom";var h=function(n){var e,t=n.imageRef,i=n.scale,r=n.pinchDelta,o=n.touchOrigin,a=o[0],l=o[1],c=n.currentTranslate,u=c[0],s=c[1];if(!(null==t?void 0:t.current))return[0,0];var d=null===(e=t.current)||void 0===e?void 0:e.getBoundingClientRect(),g=d.height,f=d.left,m=d.top;return[-((a-f-d.width/2)/i)*r+u,-((l-m-g/2)/i)*r+s]},y=function(n){var e;if(!n.current)return!1;var t=null===(e=n.current)||void 0===e?void 0:e.getBoundingClientRect(),i=t.bottom,r=t.left,o=t.right,a=t.top,l=window.innerHeight,c=window.innerWidth;return r>.5*c||a>.5*l||o<.5*c||i<.5*l},x=function(r){var a,l=r.alt,c=r.isCurrentImage,u=r.pagerHeight,f=r.pagerIsDragging,m=r.setDisableDrag,v=r.singleClickToZoom,x=r.src,w=t(!1),E=w[0],b=w[1],k=i(null),T=function(){return{config:o(o({},d.default),{precision:.01}),scale:1,translateX:0,translateY:0}},D=s((function(){return o(o({},T()),{onFrame:function(n){(n.scale<1||!n.pinching)&&L(T()),n.scale>1&&y(k)&&L(T())},onRest:function(n){1===n.scale&&m(!1)}})})),P=D[0],V=P.scale,I=P.translateX,N=P.translateY,L=D[1];return e((function(){c||1===V.getValue()||L(T())}),[c,V,L]),p({onDrag:function(n){var e=n.movement,t=e[0],i=e[1],r=n.pinching,o=n.cancel,a=n.first,l=n.memo,c=void 0===l?{initialTranslateX:0,initialTranslateY:0}:l,u=n.touches;if(!(f||1===V.getValue()||(t&&i&&!E&&b(!0),u>1||r||V.getValue()<=1)))return V.getValue()>1&&y(k)?void o():a?{initialTranslateX:I.getValue(),initialTranslateY:N.getValue()}:(L({translateX:c.initialTranslateX+t,translateY:c.initialTranslateY+i}),c)},onDragEnd:function(n){void 0!==n.memo&&setTimeout((function(){return b(!1)}),100)},onPinch:function(n){var e=n.movement[0],t=n.origin,i=t[0],r=t[1],o=n.event,a=n.ctrlKey,l=n.last,c=n.cancel;if(!f)if(m(!0),e&&!E&&b(!0),l)c();else{var u=a?1e3:250,s=V.getValue()+e/u,d=s-V.getValue(),g=[i,r];"clientX"in o&&"clientY"in o&&a&&(g=[o.clientX,o.clientY]);var p=h({currentTranslate:[I.getValue(),N.getValue()],imageRef:k,pinchDelta:d,scale:V.getValue(),touchOrigin:g}),v=p[0],y=p[1];L(s<.5?{pinching:!0,scale:.5}:s>3?{pinching:!0,scale:3}:{pinching:!0,scale:s,translateX:v,translateY:y})}},onPinchEnd:function(){f||(V.getValue()>1?m(!0):L(T()),setTimeout((function(){return b(!1)}),100))}},{domTarget:k,eventOptions:{passive:!1}}),function(n){var t=n.ref,i=n.latency,r=void 0===i?300:i,o=n.onSingleClick,a=void 0===o?function(){return null}:o,l=n.onDoubleClick,c=void 0===l?function(){return null}:l;e((function(){var n,e=t.current,i=0,o=function(e){i+=1,n=setTimeout((function(){1===i?a(e):2===i&&c(e),i=0}),r)};return null==e||e.addEventListener("click",o),function(){null==e||e.removeEventListener("click",o),n&&clearTimeout(n)}}))}(((a={})[v?"onSingleClick":"onDoubleClick"]=function(n){if(f||E)n.stopPropagation();else if(1===V.getValue()){var e=n.clientX,t=n.clientY,i=V.getValue()+1,r=i-V.getValue(),o=h({currentTranslate:[I.getValue(),N.getValue()],imageRef:k,pinchDelta:r,scale:V.getValue(),touchOrigin:[e,t]}),a=o[0],l=o[1];m(!0),L({pinching:!0,scale:i,translateX:a,translateY:l})}else L(T())},a.latency=v?0:200,a.ref=k,a)),n.createElement(C,{alt:l,className:"lightbox-image",draggable:"false",onClick:function(n){n.stopPropagation(),n.nativeEvent.stopImmediatePropagation()},onDragStart:function(n){n.preventDefault()},ref:k,src:x,style:o({maxHeight:u,transform:g([V,I,N],(function(n,e,t){return"translate("+e+"px, "+t+"px) scale("+n+")"}))},c&&{willChange:"transform"})})};x.displayName="Image";var w,C=c(u.img)(w||(w=r(["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"],["\n    width: auto;\n    max-width: 100%;\n    user-select: none;\n    touch-action: none;\n    ::selection {\n        background: none;\n    }\n"]))),E=function(r){var l=r.currentIndex,c=r.images,u=r.onClose,s=r.onNext,d=r.onPrev,g=r.renderImageOverlay,m=r.singleClickToZoom,v=i(!0),h=i(a(Array(c.length)).map((function(){return n.createRef()}))||[]),y=function(){var n=t({height:window.innerHeight,width:window.innerWidth}),i=n[0],r=n[1];return e((function(){var n=function(){window.innerHeight===i.height&&window.innerWidth===i.width||r({height:window.innerHeight,width:window.innerWidth})};return window.addEventListener("resize",n),window.addEventListener("orientationchange",n),function(){window.removeEventListener("resize",n),window.addEventListener("orientationchange",n)}})),i}(),w=y.height,C=y.width,E=t(!1),b=E[0],k=E[1],T=t("100%"),D=T[0],P=T[1],V=t(!1),X=V[0],Y=V[1],H=function(n,e,t){void 0===e&&(e=!1),void 0===t&&(t=0);var i=(n-l)*C+(e?t:0);return n<l-1||n>l+1?{display:"none",x:i}:{display:"flex",x:i}},W=f(c.length,H),j=W[0],B=W[1];e((function(){var n=null==h?void 0:h.current[l],e=0;n&&(null==n?void 0:n.current)&&(e=n.current.clientHeight-50),D!==e&&P(e)}),[l,D,w]),e((function(){v.current?v.current=!1:B((function(n){return H(n)}))}));var R=p({onDrag:function(n){var e=n.down,t=n.movement[0],i=n.direction[0],r=n.velocity,o=n.distance,a=n.cancel,l=n.active,c=n.touches;if(!b&&0!==t){X||Y(!0);var u=Math.abs(i)>.7;if((e&&u&&o>C/3.5||e&&u&&r>2)&&l){var g=i>0?-1:1;return a(),void(g>0?s():g<0&&d())}c>1?a():B((function(n){return H(n,e,t)}))}},onDragEnd:function(){X&&setTimeout((function(){return Y(!1)}),100)},onWheel:function(n){var e=n.distance,t=n.velocity,i=n.direction,r=i[0],o=i[1];if(!n.ctrlKey&&!b&&0!==t&&(X||Y(!0),e>C/3||t>1.5&&e<=C/3)){var a=r+o>0?-1:1;a>0?s():a<0&&d()}},onWheelEnd:function(){B((function(n){return H(n,!1,0)})),setTimeout((function(){return Y(!1)}),100)}},{drag:{filterTaps:!0}});return n.createElement(n.Fragment,null,j.map((function(e,t){var i=e.display,r=e.x;return n.createElement(L,o({},R(),{className:"lightbox-image-pager",key:t,onClick:function(){return Math.abs(r.getValue())<1&&!b&&u()},ref:h.current[t],role:"presentation",style:{display:i,transform:r.to((function(n){return"translateX("+n+"px)"}))}}),n.createElement(N,null,n.createElement(I,null,n.createElement(O,{onClick:function(n){n.stopPropagation(),n.nativeEvent.stopImmediatePropagation()}},n.createElement(x,{alt:c[t].alt,isCurrentImage:t===l,pagerHeight:D,pagerIsDragging:X,setDisableDrag:k,singleClickToZoom:m,src:c[t].src}),g()))))})))};E.displayName="ImagePager";var b,k,T,D,P,V,I=c.div(b||(b=r(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"],["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"]))),N=c.div(k||(k=r(["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"],["\n    width: 100%;\n    display: flex;\n    justify-content: center;\n"]))),L=c(u.div)(T||(T=r(["\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"],["\n    position: absolute;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    height: 100%;\n    width: 100%;\n    will-change: transform;\n    touch-action: none;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n"]))),O=c.div(D||(D=r(["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"],["\n    position: relative;\n    touch-action: none;\n    user-select: none;\n"]))),X=function(e){var t=e.currentIndex,i=e.images,r=e.onClose,o=e.onNext,a=e.onPrev,l=e.renderImageOverlay,c=e.renderNextButton,u=e.renderPrevButton,s=e.singleClickToZoom,d=t>0,g=t+1<i.length;return n.createElement(Y,{className:"lightbox-image-stage","data-testid":"lightbox-image-stage"},u({canPrev:d}),n.createElement(E,{currentIndex:t,images:i,onClose:r,onNext:o,onPrev:a,renderImageOverlay:l,singleClickToZoom:s}),c({canNext:g}))},Y=c.div(P||(P=r(["\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"],["\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"]))),H=function(e){var t=e.children,i=e.className,r=e.isOpen,a=e.pageTransitionConfig,l=e.style,c={config:o(o({},d.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=m(r,null,o(o({},c),a));return n.createElement(n.Fragment,null,u.map((function(e){var r=e.item,a=e.key,c=e.props;return r&&n.createElement(W,{className:"lightbox-container"+(i?" "+i:""),"data-testid":"lightbox-container",key:a,style:o(o({},c),l)},t)})))},W=c(u.div)(V||(V=r(["\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"],["\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"]))),j=function(n){function e(){var e=null!==n&&n.apply(this,arguments)||this;return e.preventWheel=function(n){return n.preventDefault()},e}return l(e,n),e.prototype.componentDidMount=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)},e.prototype.componentWillUnmount=function(){this.portalContainer.removeEventListener("wheel",this.preventWheel),this.body.removeChild(this.portalContainer)},e.prototype.render=function(){if(void 0===this.portalContainer)return null;var n=this.props.children;return v.createPortal(n,this.portalContainer)},e}(n.Component);export default function(t){var i=t.isOpen,r=t.onClose,o=t.images,a=void 0===o?[]:o,l=t.currentIndex,c=t.onPrev,u=t.onNext,s=t.renderHeader,d=void 0===s?function(){return null}:s,g=t.renderFooter,f=void 0===g?function(){return null}:g,m=t.renderPrevButton,p=void 0===m?function(){return null}:m,v=t.renderNextButton,h=void 0===v?function(){return null}:v,y=t.renderImageOverlay,x=void 0===y?function(){return null}:y,w=t.className,C=void 0===w?"":w,E=t.singleClickToZoom,b=void 0!==E&&E,k=t.style,T=void 0===k?{}:k,D=t.pageTransitionConfig,P=void 0===D?null:D;return e((function(){var n=function(n){i&&["ArrowUp","ArrowDown","End","Home","PageUp","PageDown"].includes(n.key)&&n.preventDefault()},e=function(n){if(i)switch(n.key){case"ArrowLeft":c();break;case"ArrowRight":u();break;case"Escape":r();break;default:n.preventDefault()}};return document.addEventListener("keyup",e),document.addEventListener("keydown",n),function(){document.removeEventListener("keyup",e),document.removeEventListener("keydown",n)}})),n.createElement(j,null,n.createElement(H,{className:C,isOpen:i,pageTransitionConfig:P,style:T},d(),n.createElement(X,{currentIndex:l,images:a,onClose:r,onNext:u,onPrev:c,renderImageOverlay:x,renderNextButton:h,renderPrevButton:p,singleClickToZoom:b}),f()))}
 //# sourceMappingURL=index.es.js.map

package.json

 {
     "name": "react-spring-lightbox",
-    "version": "1.5.0-beta.4",
+    "version": "1.5.0-beta.c1b1b83f",
     "description": "A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.",
@@ -26,3 +26,2 @@ "author": "Tim Ellenberger <[e-mail]>",
     "jsnext:main": "dist/index.es.js",
-    "types": "dist/index.d.ts",
     "engines": {
@@ -76,4 +75,4 @@ "node": ">=8",
         "@rollup/plugin-commonjs": "^17.1.0",
-        "@rollup/plugin-node-resolve": "^11.2.0",
-        "@rollup/plugin-typescript": "^8.2.0",
+        "@rollup/plugin-node-resolve": "^11.1.1",
+        "@rollup/plugin-typescript": "^8.1.1",
         "@testing-library/jest-dom": "^5.5.0",
@@ -85,4 +84,4 @@ "@testing-library/react": "^11.2.5",
         "@types/styled-components": "^5.1.7",
-        "@typescript-eslint/eslint-plugin": "^4.15.1",
-        "@typescript-eslint/parser": "^4.15.1",
+        "@typescript-eslint/eslint-plugin": "^4.15.0",
+        "@typescript-eslint/parser": "^4.15.0",
         "babel-eslint": "10.1.0",
@@ -94,3 +93,3 @@ "babel-plugin-styled-components": "1.12.0",
         "eslint-config-prettier": "^7.2.0",
-        "eslint-import-resolver-typescript": "^2.4.0",
+        "eslint-import-resolver-typescript": "^2.3.0",
         "eslint-plugin-import": "^2.20.2",
@@ -122,4 +121,4 @@ "eslint-plugin-jsx-a11y": "^6.2.3",
         "@react-spring/web": "npm:@tim-soft/react-spring-web@9.0.0-beta.36",
-        "react-use-gesture": "9.0.4"
+        "react-use-gesture": "9.0.2"
     }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

73140

decreased by-1.06%

Number of package files

20

decreased by-4.76%

Lines of code

333

decreased by-0.6%

Dependency changes

• + Addedreact-use-gesture@9.0.2(transitive)

• - Removedreact-use-gesture@9.0.4(transitive)

• Updatedreact-use-gesture@9.0.2