Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-spring-lightbox

Package Overview
Dependencies
Maintainers
1
Versions
88
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-spring-lightbox - npm Package Compare versions

Comparing version 1.5.0-beta.98999b8v4 to 1.5.0-beta.98999b8v5

2

dist/index.cjs.js

@@ -1,2 +0,2 @@

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

2

dist/index.es.js

@@ -1,2 +0,2 @@

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

2

package.json
{
"name": "react-spring-lightbox",
"version": "1.5.0-beta.98999b8v4",
"version": "1.5.0-beta.98999b8v5",
"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 <timellenberger@gmail.com>",

dist/index.cjs.js.map

Sorry, the diff of this file is not supported yet

dist/index.es.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc