react-spring-lightbox - npm Package Compare versions

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

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

@@ -21,9 +21,3 @@ import React from 'react';
 };
-/**
- * Gesture controlled surface that animates prev/next page changes via spring physics.
- */
-declare const ImagePager: {
-    ({ currentIndex, images, inline, onClose, onNext, onPrev, renderImageOverlay, singleClickToZoom, }: IImagePager): JSX.Element;
-    displayName: string;
-};
-export default ImagePager;
+declare const _default: React.ForwardRefExoticComponent<IImagePager & React.RefAttributes<HTMLDivElement>>;
+export default _default;

dist/components/ImageStage/index.d.ts

@@ -31,6 +31,3 @@ import React from 'react';
 };
-/**
- * Containing element for ImagePager and prev/next button controls
- */
-declare const ImageStage: ({ className, currentIndex, images, inline, onClose, onNext, onPrev, renderImageOverlay, renderNextButton, renderPrevButton, singleClickToZoom, }: IImageStageProps) => JSX.Element;
-export default ImageStage;
+declare const _default: React.ForwardRefExoticComponent<IImageStageProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

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

@@ -14,3 +14,3 @@ import React from 'react';
  */
-declare const useRefSize: (refElem: React.RefObject<HTMLDivElement>) => IUseRefSize;
+declare const useRefSize: (refElem: React.MutableRefObject<HTMLDivElement>) => IUseRefSize;
 export default useRefSize;

dist/index.cjs.js

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

package.json

 {
     "name": "react-spring-lightbox",
-    "version": "1.7.0-beta.5",
+    "version": "1.7.0-beta.6",
     "description": "A flexible image gallery lightbox with native-feeling touch gestures and buttery smooth animations, built with react-spring.",
@@ -5,0 +5,0 @@ "author": "Tim Ellenberger <[e-mail]>",

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

164399

decreased by-0.55%

Lines of code

367

decreased by-2.65%

No dependency changes