@cloudscape_innovation/react-images-viewer/dist/react-images-viewer.min.js

Create an react-images-viewer component.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","aphrodite/no-important","react-transition-group","react-dom"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ImgsViewer=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,r,n,o,i,a){"use strict";function s(e,t,r){return t=p(t),function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,m()?Reflect.construct(t,r||[],p(e).constructor):t.apply(e,r))}function l(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function c(e,t,r){return t&&function(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,g(n.key),n)}}(e.prototype,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)({}).hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(null,arguments)}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}function h(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&f(e,t)}function m(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(m=function(){return!!e})()}function d(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r={};for(var n in e)if({}.hasOwnProperty.call(e,n)){if(-1!==t.indexOf(n))continue;r[n]=e[n]}return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],-1===t.indexOf(r)&&{}.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}function f(e,t){return f=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},f(e,t)}function g(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e,"string");return"symbol"==typeof t?t:t+""}function v(e){return v="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(e)}var y={};function b(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object.assign({},t);return Object.keys(e).forEach(function(n){"object"===v(e[n])&&e[n]&&t[n]?r[n]=b(t[n],e[n]):r[n]=e[n]}),r}y.container={background:"rgba(0, 0, 0, .8)",gutter:{horizontal:10,vertical:10},zIndex:2001},y.header={height:40},y.close={fill:"white"},y.footer={color:"#fff",count:{color:"rgba(255, 255, 255, .75)",fontSize:".85em"},height:40,gutter:{horizontal:0,vertical:5}},y.thumbnail={activeBorderColor:"#fff",size:50,gutter:2},y.arrow={background:"none",fill:"#fff",height:120};var w=!("undefined"==typeof window||!window.document||!window.document.createElement);function k(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}var C=["fill","type"],x={arrowLeft:function(e){return'<svg fill="'.concat(e,'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M213.7,256L213.7,256L213.7,256L380.9,81.9c4.2-4.3,4.1-11.4-0.2-15.8l-29.9-30.6c-4.3-4.4-11.3-4.5-15.5-0.2L131.1,247.9 c-2.2,2.2-3.2,5.2-3,8.1c-0.1,3,0.9,5.9,3,8.1l204.2,212.7c4.2,4.3,11.2,4.2,15.5-0.2l29.9-30.6c4.3-4.4,4.4-11.5,0.2-15.8 L213.7,256z"/>\n\t</svg>')},arrowRight:function(e){return'<svg fill="'.concat(e,'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" xml:space="preserve">\n\t\t<path d="M298.3,256L298.3,256L298.3,256L131.1,81.9c-4.2-4.3-4.1-11.4,0.2-15.8l29.9-30.6c4.3-4.4,11.3-4.5,15.5-0.2l204.2,212.7 c2.2,2.2,3.2,5.2,3,8.1c0.1,3-0.9,5.9-3,8.1L176.7,476.8c-4.2,4.3-11.2,4.2-15.5-0.2L131.3,446c-4.3-4.4-4.4-11.5-0.2-15.8 L298.3,256z"/>\n\t</svg>')},close:function(e){return'<svg fill="'.concat(e,'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">\n\t\t<path d="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4 L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1 c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1 c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"/>\n\t</svg>')}},T=function(e){var r=e.fill,n=e.type,o=d(e,C),i=x[n];return t.createElement("span",u({dangerouslySetInnerHTML:{__html:i(r)}},o))};T.propTypes={fill:e.string,type:e.oneOf(Object.keys(x))},T.defaultProps={fill:"#fff"};var E=["direction","icon","onClick","size","theme"];function I(e){var r=e.direction,n=e.icon,i=e.onClick,a=e.size,s=e.theme,l=d(e,E),c=o.StyleSheet.create(b(S,s));return t.createElement("button",u({type:"button",className:o.css(c.arrow,c["arrow__direction__"+r],a&&c["arrow__size__"+a]),onClick:i,onTouchEnd:i},l),t.createElement(T,{fill:!!s.arrow&&s.arrow.fill||y.arrow.fill,type:n}))}I.propTypes={theme:e.object,direction:e.oneOf(["left","right"]),icon:e.string,onClick:e.func.isRequired,size:e.oneOf(["medium","small"]).isRequired},I.defaultProps={size:"medium"};var S={arrow:{background:"none",border:"none",borderRadius:4,cursor:"pointer",outline:"none",padding:10,position:"absolute",top:"50%",WebkitTouchCallout:"none",userSelect:"none"},arrow__size__medium:{height:y.arrow.height,marginTop:y.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:y.thumbnail.size,marginTop:y.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:y.container.gutter.horizontal},arrow__direction__left:{left:y.container.gutter.horizontal}};function O(e){var r=o.StyleSheet.create(b(z,e.theme));return t.createElement("div",u({id:"viewerBackdrop",className:o.css(r.container)},e))}O.propTypes={theme:e.object};var z={container:{alignItems:"center",backdropColor:y.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingTop:y.container.gutter.vertical,paddingRight:y.container.gutter.horizontal,paddingBottom:y.container.gutter.vertical,paddingLeft:y.container.gutter.horizontal,position:"fixed",top:0,width:"100%",zIndex:y.container.zIndex}},L=["caption","countCurr","countSeparator","countTotal","showCount","theme"];function P(e){var r=e.caption,n=e.countCurr,i=e.countSeparator,a=e.countTotal,s=e.showCount,l=e.theme,c=d(e,L);if(!r&&!s)return null;var p=o.StyleSheet.create(b(N,l)),h=s?t.createElement("div",{className:o.css(p.footerCount)},n,i,a):t.createElement("span",null);return t.createElement("div",u({className:o.css(p.footer)},c),r?t.createElement("figcaption",{className:o.css(p.footerCaption)},r):t.createElement("span",null),h)}P.propTypes={theme:e.object,caption:e.oneOfType([e.string,e.element]),countCurr:e.number,countSeparator:e.string,countTotal:e.number,showCount:e.bool};var N={footer:{boxSizing:"border-box",color:y.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingTop:y.footer.gutter.vertical,paddingRight:y.footer.gutter.horizontal,paddingBottom:y.footer.gutter.vertical,paddingLeft:y.footer.gutter.horizontal},footerCount:{color:y.footer.count.color,fontSize:y.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}},_=["customControls","onClose","showCloseBtn","closeBtnTitle","theme"];function j(e){var r=e.customControls,n=e.onClose,i=e.showCloseBtn,a=e.closeBtnTitle,s=e.theme,l=d(e,_),c=o.StyleSheet.create(b(B,s));return t.createElement("div",u({className:o.css(c.header)},l),r||t.createElement("span",null),!!i&&t.createElement("button",{title:a,className:o.css(c.close),onClick:n},t.createElement(T,{fill:!!s.close&&s.close.fill||y.close.fill,type:"close"})))}j.propTypes={theme:e.object,customControls:e.array,onClose:e.func.isRequired,showCloseBtn:e.bool,closeBtnTitle:e.string};var B={header:{display:"flex",justifyContent:"space-between",height:y.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",zIndex:1,height:40,marginRight:-10,padding:10,width:40}};function R(e){var r=e.index,n=e.src,i=e.thumbnail,a=e.active,s=e.onClick,l=e.theme,c=i||n,u=o.StyleSheet.create(b(D,l));return t.createElement("div",{className:o.css(u.thumbnail,a&&u.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),s(r)},style:{backgroundImage:'url("'.concat(c,'")')}})}R.propTypes={theme:e.object,active:e.bool,index:e.number,onClick:e.func.isRequired,src:e.string,thumbnail:e.string};var D={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0, 0%, 100%, .2)",cursor:"pointer",display:"inline-block",height:y.thumbnail.size,margin:y.thumbnail.gutter,overflow:"hidden",width:y.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px ".concat(y.thumbnail.activeBorderColor)}},A=o.StyleSheet.create({paginatedThumbnails:{bottom:y.container.gutter.vertical,height:y.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),F={height:y.thumbnail.size+2*y.thumbnail.gutter,width:40},q=function(e){function r(e){var t;return l(this,r),(t=s(this,r,[e])).state={hasCustomPage:!1},t.gotoPrev=t.gotoPrev.bind(t),t.gotoNext=t.gotoNext.bind(t),t}return h(r,e),c(r,[{key:"UNSAFE_componentWillReceiveProps",value:function(e){e.currImg!==this.props.currImg&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currImg,r=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-r)}},{key:"setFirst",value:function(e,t){var r=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),r!==t&&this.setState({hasCustomPage:!0,first:t})}},{key:"gotoPrev",value:function(e){this.setFirst(e,this.getFirst()-this.props.offset)}},{key:"gotoNext",value:function(e){this.setFirst(e,this.getFirst()+this.props.offset)}},{key:"clampFirst",value:function(e){var t=this.props,r=t.imgs,n=2*t.offset+1;return e<0?0:e+n>r.length?r.length-n:e}},{key:"renderArrowPrev",value:function(e){var r=this.props.leftTitle;return this.getFirst()<=0?null:t.createElement(I,{theme:e,direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:F,title:r,type:"button"})}},{key:"renderArrowNext",value:function(e){var r=this.props,n=r.offset,o=r.imgs,i=r.rightTitle,a=2*n+1;return this.getFirst()+a>=o.length?null:t.createElement(I,{theme:e,direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:F,title:i,type:"button"})}},{key:"render",value:function(){var e=this.props,r=e.imgs,n=e.currImg,i=e.onClickThumbnail,a=e.offset,s=e.theme,l=2*a+1,c=[],p=0;return r.length<=l?c=r:(p=this.getFirst(),c=r.slice(p,p+l)),t.createElement("div",{className:o.css(A.paginatedThumbnails)},this.renderArrowPrev(s),c.map(function(e,r){return t.createElement(R,u({theme:s,key:p+r},e,{index:p+r,onClick:i,active:p+r===n}))}),this.renderArrowNext(s))}}])}(t.Component);q.propTypes={theme:e.object,leftTitle:e.string,rightTitle:e.string,currImg:e.number,imgs:e.array,offset:e.number,onClickThumbnail:e.func.isRequired};var K=function(e){function r(){var e;return l(this,r),(e=s(this,r)).portalElement=null,e}return h(r,e),c(r,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){var e=200,r="\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity ".concat(e,"ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: .01; transition: opacity ").concat(e,"ms; }\n\t\t");a.render(t.createElement("div",null,t.createElement("style",null,r),t.createElement(i.TransitionGroup,this.props,t.createElement(i.CSSTransition,{timeout:{enter:e,exit:e},className:"fade"},t.createElement("div",null,this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){a.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}])}(t.Component);K.propTypes={children:e.arrayOf(e.any)};var M=function(e){var r=o.StyleSheet.create(W(e));return t.createElement("div",{className:o.css(r.bouncingLoader)},t.createElement("div",{className:o.css(r.child)}),t.createElement("div",{className:o.css(r.child,r.child2)}),t.createElement("div",{className:o.css(r.child,r.child3)}))};M.propTypes={color:e.string,size:e.number};var U=function(e){return{"0%":{opacity:1,transform:"translateY(0)"},"100%":{opacity:.1,transform:"translateY(-".concat(e,"px)")}}},W=function(e){var t=e.color,r=e.size;return{bouncingLoader:{display:"flex",justifyContent:"center"},child:{width:r,height:r,margin:"".concat(3*r,"px ").concat(.2*r,"px"),background:t,borderRadius:"50%",animationName:U(r),animationDuration:".6s",animationDirection:"alternate",animationIterationCount:"infinite"},child2:{animationDelay:"0.2s"},child3:{animationDelay:"0.4s"}}};function H(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var G=t.createContext({theme:y,toggleTheme:function(e){}}),Y=function(e){function o(e){var t;return l(this,o),(t=s(this,o,[e])).theme=b(y,t.props.theme),t.classes=r.StyleSheet.create(b(V,t.props.theme)),t.toggleTheme=function(e){t.setState(function(){return{theme:e}})},t.state={imgLoaded:!1,theme:t.theme,toggleTheme:t.toggleTheme},k.call(t,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImgLoaded"]),t}return h(o,e),c(o,[{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),"number"==typeof this.props.currImg&&this.preloadImg(this.props.currImg,this.handleImgLoaded))}},{key:"componentDidUpdate",value:function(e){if(w){if(this.props.preloadNextImg){var t=this.props.currImg+1,r=this.props.currImg-1;this.preloadImg(r),this.preloadImg(t)}if(e.currImg!==this.props.currImg||!e.isOpen&&this.props.isOpen){var n=this.preloadImgData(this.props.imgs[this.props.currImg],this.handleImgLoaded);n&&this.setState({imgLoaded:n.complete})}!e.isOpen&&this.props.isOpen&&this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!this.props.isOpen&&this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}}},{key:"componentWillUnmount",value:function(){this.props.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput)}},{key:"preloadImg",value:function(e,t){return this.preloadImgData(this.props.imgs[e],t)}},{key:"preloadImgData",value:function(e,t){if(e){var r=new Image,n=H(e);return r.onerror=t,r.onload=t,r.src=e.src,n&&(r.srcset=n),r}}},{key:"gotoNext",value:function(e){var t=this.props,r=t.currImg,n=t.imgs;this.state.imgLoaded&&r!==n.length-1&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickNext())}},{key:"gotoPrev",value:function(e){var t=this.props.currImg;this.state.imgLoaded&&0!==t&&(e&&(e.preventDefault(),e.stopPropagation()),this.props.onClickPrev())}},{key:"closeBackdrop",value:function(e){"viewerBackdrop"!==e.target.id&&"FIGURE"!==e.target.tagName||this.props.onClose()}},{key:"handleKeyboardInput",value:function(e){var t=e.keyCode;return 37===t||33===t||38===t?(this.gotoPrev(e),!0):39===t||34===t||40===t?(this.gotoNext(e),!0):(27===t||32===t)&&(this.props.onClose(),!0)}},{key:"handleImgLoaded",value:function(){this.setState({imgLoaded:!0})}},{key:"renderArrowPrev",value:function(e){return 0===this.props.currImg?null:t.createElement(I,{theme:e,direction:"left",icon:"arrowLeft",onClick:this.gotoPrev,title:this.props.leftArrowTitle,type:"button"})}},{key:"renderArrowNext",value:function(e){return this.props.currImg===this.props.imgs.length-1?null:t.createElement(I,{theme:e,direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(e){var o=this,i=this.props,a=i.backdropCloseable,s=i.isOpen,l=i.showThumbnails,c=i.width,u=this.state.imgLoaded;if(!s)return t.createElement("span",{key:"closed"});var p=l?this.theme.thumbnail.size+this.theme.container.gutter.vertical:0;return t.createElement(G.Consumer,null,function(i){var s=i.theme;return i.toggleTheme,s=e.theme,t.createElement(O,{theme:s,key:"open",onClick:a&&o.closeBackdrop,onTouchEnd:a&&o.closeBackdrop},t.createElement(t.Fragment,null,t.createElement("div",{className:r.css(o.classes.content),style:{marginBottom:p,maxWidth:c}},u&&o.renderHeader(s)," ",o.renderImgs(s),o.renderSpinner()," ",u&&o.renderFooter(s)),u&&o.renderThumbnails(s),u&&o.renderArrowPrev(s),u&&o.renderArrowNext(s),o.props.preventScroll&&t.createElement(n,null)))})}},{key:"renderImgs",value:function(e){var n=this.props,o=n.currImg,i=n.imgs,a=n.onClickImg,s=n.showThumbnails,l=this.state.imgLoaded;if(!i||!i.length)return null;var c=i[o],u=H(c),p=u?"100vw":null,h=s?e.thumbnail.size:0,m="".concat(e.header.height+e.footer.height+h+e.container.gutter.vertical,"px");return t.createElement("figure",{className:r.css(this.classes.figure)},t.createElement("img",{className:r.css(this.classes.img,l&&this.classes.imgLoaded),onClick:a,sizes:p,alt:c.alt,src:c.src,srcSet:u,style:{cursor:a?"pointer":"auto",maxHeight:"calc(100vh - ".concat(m)}}))}},{key:"renderThumbnails",value:function(e){var r=this.props,n=r.imgs,o=r.currImg,i=r.leftArrowTitle,a=r.rightArrowTitle,s=r.onClickThumbnail,l=r.showThumbnails,c=r.thumbnailOffset;return l?t.createElement(q,{theme:e,leftTitle:i,rightTitle:a,currImg:o,imgs:n,offset:c,onClickThumbnail:s}):null}},{key:"renderHeader",value:function(e){var r=this.props,n=r.closeBtnTitle,o=r.customControls,i=r.onClose,a=r.showCloseBtn;return t.createElement(j,{theme:e,customControls:o,onClose:i,showCloseBtn:a,closeBtnTitle:n})}},{key:"renderFooter",value:function(e){var r=this.props,n=r.currImg,o=r.imgs,i=r.imgCountSeparator,a=r.showImgCount;return o&&o.length?t.createElement(P,{theme:e,caption:o[n].caption,countCurr:n+1,countSeparator:i,countTotal:o.length,showCount:a}):null}},{key:"renderSpinner",value:function(){var e=this.props,n=e.spinner,o=e.spinnerDisabled,i=e.spinnerColor,a=e.spinnerSize,s=this.state.imgLoaded,l=n;return o?null:t.createElement("div",{className:r.css(this.classes.spinner,!s&&this.classes.spinnerActive)},t.createElement(l,{color:i,size:a}))}},{key:"render",value:function(){return t.createElement(G.Provider,{value:this.state},t.createElement(K,null," ",this.renderDialog(this.state)," "))}}])}(t.Component);Y.propTypes={backdropCloseable:e.bool,closeBtnTitle:e.string,currImg:e.number,customControls:e.arrayOf(e.node),enableKeyboardInput:e.bool,imgCountSeparator:e.string,imgs:e.arrayOf(e.shape({src:e.string.isRequired,srcSet:e.oneOfType([e.array,e.string]),caption:e.oneOfType([e.string,e.element]),thumbnail:e.string})).isRequired,isOpen:e.bool,leftArrowTitle:e.string,onClickImg:e.func,onClickNext:e.func,onClickPrev:e.func,onClickThumbnail:e.func,onClose:e.func.isRequired,preloadNextImg:e.bool,preventScroll:e.bool,rightArrowTitle:e.string,showCloseBtn:e.bool,showImgCount:e.bool,showThumbnails:e.bool,spinnerDisabled:e.bool,spinner:e.func,spinnerColor:e.string,spinnerSize:e.number,theme:e.object,thumbnailOffset:e.number,width:e.number},Y.defaultProps={currImg:0,enableKeyboardInput:!0,imgCountSeparator:" / ",onClickShowNextImg:!0,preloadNextImg:!0,preventScroll:!0,showCloseBtn:!0,showImgCount:!0,spinnerDisabled:!1,spinner:M,spinnerColor:"#fff",spinnerSize:50,theme:{},thumbnailOffset:2,width:1024};var V={content:{position:"relative"},figure:{margin:0},img:{display:"block",height:"auto",margin:"0 auto",maxWidth:"100%",WebkitTouchCallout:"none",userSelect:"none",opacity:0,transition:"opacity .3s"},imgLoaded:{opacity:1},spinner:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",opacity:0,transition:"opacity .3s",pointerEvents:"none"},spinnerActive:{opacity:1}};return Y});