diff --git a/.github/HISTORY.md b/.github/HISTORY.md index dc4c86f3..29fbd9f3 100644 --- a/.github/HISTORY.md +++ b/.github/HISTORY.md @@ -1,5 +1,11 @@ # React-Images +### v0.5.16 / 2018-01-30 +- add preloadImage call to componentDidMount PR #200 thanks to [ilker0] (https://github.com/(https://github.com/ilker0) +- Changes some docs to clarify that yarn is the preferred package manager for this project. Removes package-lock.json. PR #191 Thanks to [jorrit](https://github.com/(https://github.com/jorrit) +- Unmount the component tree before removing the portal node from DOM PR #180 thanks to [pleunv](https://github.com/(https://github.com/pleunv) +- Fix react warnings by updating react-scrolllock version [jorrit] (https://github.com/(https://github.com/jorrit)) + ### v0.5.15 / 2018-01-25 - spinner functionality pull request #187 thanks to [mkalygin] (https://github.com/(https://github.com/mkalygin) diff --git a/dist/react-images.es.js b/dist/react-images.es.js index 94f7fd53..23cbcd21 100644 --- a/dist/react-images.es.js +++ b/dist/react-images.es.js @@ -5,7 +5,7 @@ import ScrollLock from 'react-scrolllock'; import { BounceLoader } from 'react-spinners'; import { StyleSheet as StyleSheet$1, css as css$1 } from 'aphrodite/no-important'; import { CSSTransitionGroup } from 'react-transition-group'; -import { render } from 'react-dom'; +import { render, unmountComponentAtNode } from 'react-dom'; // ============================== // THEME @@ -900,6 +900,7 @@ var Portal = function (_Component) { }, { key: 'componentWillUnmount', value: function componentWillUnmount() { + unmountComponentAtNode(this.portalElement); document.body.removeChild(this.portalElement); } }, { @@ -965,8 +966,13 @@ var Lightbox = function (_Component) { }, { key: 'componentDidMount', value: function componentDidMount() { - if (this.props.isOpen && this.props.enableKeyboardInput) { - window.addEventListener('keydown', this.handleKeyboardInput); + if (this.props.isOpen) { + if (this.props.enableKeyboardInput) { + window.addEventListener('keydown', this.handleKeyboardInput); + } + if (this.props.currentImage) { + this.preloadImage(this.props.currentImage, this.handleImageLoaded); + } } } }, { diff --git a/dist/react-images.js b/dist/react-images.js index e7d96a9e..5b15d467 100644 --- a/dist/react-images.js +++ b/dist/react-images.js @@ -901,6 +901,7 @@ var Portal = function (_Component) { }, { key: 'componentWillUnmount', value: function componentWillUnmount() { + reactDom.unmountComponentAtNode(this.portalElement); document.body.removeChild(this.portalElement); } }, { @@ -966,8 +967,13 @@ var Lightbox = function (_Component) { }, { key: 'componentDidMount', value: function componentDidMount() { - if (this.props.isOpen && this.props.enableKeyboardInput) { - window.addEventListener('keydown', this.handleKeyboardInput); + if (this.props.isOpen) { + if (this.props.enableKeyboardInput) { + window.addEventListener('keydown', this.handleKeyboardInput); + } + if (this.props.currentImage) { + this.preloadImage(this.props.currentImage, this.handleImageLoaded); + } } } }, { diff --git a/dist/react-images.min.js b/dist/react-images.min.js index 948e21e5..f791f5cd 100644 --- a/dist/react-images.min.js +++ b/dist/react-images.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite"),require("react-scrolllock"),require("react-spinners"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite","react-scrolllock","react-spinners","aphrodite/no-important","react-transition-group","react-dom"],t):e.Lightbox=t(e.PropTypes,e.React,e.aphrodite,e.ScrollLock,e.BounceLoader,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM)}(this,function(e,t,n,r,o,i,a,s){"use strict";function l(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(r){"object"===v(t[r])&&t[r]&&e[r]?n[r]=l(e[r],t[r]):n[r]=t[r]}),n}function c(e,t){var n=t.theme,r=e.direction,o=e.icon,a=e.onClick,s=e.size,c=x(e,["direction","icon","onClick","size"]),u=i.StyleSheet.create(l(I,n));return f.createElement("button",b({type:"button",className:i.css(u.arrow,u["arrow__direction__"+r],s&&u["arrow__size__"+s]),onClick:a,onTouchEnd:a},c),f.createElement(E,{fill:!!n.arrow&&n.arrow.fill||g.arrow.fill,type:o}))}function u(e,t){var n=t.theme,r=x(e,[]),o=i.StyleSheet.create(l(_,n));return f.createElement("div",b({id:"lightboxBackdrop",className:i.css(o.container)},r))}function h(e,t){var n=t.theme,r=e.caption,o=e.countCurrent,a=e.countSeparator,s=e.countTotal,c=e.showCount,u=x(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!r&&!c)return null;var h=i.StyleSheet.create(l(L,n)),p=c?f.createElement("div",{className:i.css(h.footerCount)},o,a,s):f.createElement("span",null);return f.createElement("div",b({className:i.css(h.footer)},u),r?f.createElement("figcaption",{className:i.css(h.footerCaption)},r):f.createElement("span",null),p)}function p(e,t){var n=t.theme,r=e.customControls,o=e.onClose,a=e.showCloseButton,s=e.closeButtonTitle,c=x(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=i.StyleSheet.create(l(T,n));return f.createElement("div",b({className:i.css(u.header)},c),r||f.createElement("span",null),!!a&&f.createElement("button",{title:s,className:i.css(u.close),onClick:o},f.createElement(E,{fill:!!n.close&&n.close.fill||g.close.fill,type:"close"})))}function d(e,t){var n=e.index,r=e.src,o=e.thumbnail,a=e.active,s=e.onClick,c=t.theme,u=o||r,h=i.StyleSheet.create(l(P,c));return f.createElement("div",{className:i.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),s(n)},style:{backgroundImage:'url("'+u+'")'}})}function m(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}e=e&&e.hasOwnProperty("default")?e.default:e;var f="default"in t?t.default:t;r=r&&r.hasOwnProperty("default")?r.default:r;var g={};g.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},g.header={height:40},g.close={fill:"white"},g.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},g.thumbnail={activeBorderColor:"white",size:50,gutter:2},g.arrow={background:"none",fill:"white",height:120};var 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},y=(function(){function e(e){this.value=e}function t(t){function n(o,i){try{var a=t[o](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(a.done?"return":"normal",a.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,a){var s={key:e,arg:t,resolve:r,reject:a,next:null};i?i=i.next=s:(o=i=s,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),w=function(){function e(e,t){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},S={arrowLeft:function(e){return'\n\t\t\n\t'},arrowRight:function(e){return'\n\t\t\n\t'},close:function(e){return'\n\t\t\n\t'}},E=function(e){var t=e.fill,n=e.type,r=x(e,["fill","type"]),o=S[n];return f.createElement("span",b({dangerouslySetInnerHTML:{__html:o(t)}},r))};E.defaultProps={fill:"white"},c.defaultProps={size:"medium"},c.contextTypes={theme:e.object.isRequired};var I={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:g.arrow.height,marginTop:g.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:g.thumbnail.size,marginTop:g.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:g.container.gutter.horizontal},arrow__direction__left:{left:g.container.gutter.horizontal}};u.contextTypes={theme:e.object.isRequired};var _={container:{alignItems:"center",backgroundColor:g.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:g.container.gutter.vertical,paddingLeft:g.container.gutter.horizontal,paddingRight:g.container.gutter.horizontal,paddingTop:g.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:g.container.zIndex}};h.contextTypes={theme:e.object.isRequired};var L={footer:{boxSizing:"border-box",color:g.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:g.footer.gutter.vertical,paddingLeft:g.footer.gutter.horizontal,paddingRight:g.footer.gutter.horizontal,paddingTop:g.footer.gutter.vertical},footerCount:{color:g.footer.count.color,fontSize:g.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};p.contextTypes={theme:e.object.isRequired};var T={header:{display:"flex",justifyContent:"space-between",height:g.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",height:40,marginRight:-10,padding:10,width:40}};d.contextTypes={theme:e.object.isRequired};var P={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:g.thumbnail.size,margin:g.thumbnail.gutter,overflow:"hidden",width:g.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+g.thumbnail.activeBorderColor}},z=i.StyleSheet.create({paginatedThumbnails:{bottom:g.container.gutter.vertical,height:g.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),O={height:g.thumbnail.size+2*g.thumbnail.gutter,width:40},N=function(e){function t(e){y(this,t);var n=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return k(t,e),w(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==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,n=t.images,r=2*t.offset+1;return e<0?0:e+r>n.length?n.length-r:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:f.createElement(c,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:O,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,r=2*t+1;return this.getFirst()+r>=n.length?null:f.createElement(c,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:O,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,r=e.onClickThumbnail,o=2*e.offset+1,a=[],s=0;return t.length<=o?a=t:(s=this.getFirst(),a=t.slice(s,s+o)),f.createElement("div",{className:i.css(z.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return f.createElement(d,b({key:s+t},e,{index:s+t,onClick:r,active:s+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),j=function(e){function n(){return y(this,n),C(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return k(n,e),w(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);j.childContextTypes={theme:e.object};var B=function(e){function t(){y(this,t);var e=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return k(t,e),w(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){s.render(f.createElement(j,{context:this.context},f.createElement("div",null,f.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),f.createElement(a.CSSTransitionGroup,b({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);B.contextTypes={theme:e.object.isRequired};var R=!("undefined"==typeof window||!window.document||!window.document.createElement),A=function(e){function t(e){y(this,t);var r=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.theme=l(g,e.theme),r.classes=n.StyleSheet.create(l(q,r.theme)),r.state={imageLoaded:!1},m.call(r,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),r}return k(t,e),w(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput)}},{key:"componentWillReceiveProps",value:function(e){if(R){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,r=e.currentImage-1,o=void 0;t&&e.currentImage>t?o=n:t&&e.currentImage1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},e);return Object.keys(t).forEach(function(r){"object"===v(t[r])&&t[r]&&e[r]?n[r]=l(e[r],t[r]):n[r]=t[r]}),n}function c(e,t){var n=t.theme,r=e.direction,o=e.icon,a=e.onClick,s=e.size,c=x(e,["direction","icon","onClick","size"]),u=i.StyleSheet.create(l(E,n));return f.createElement("button",b({type:"button",className:i.css(u.arrow,u["arrow__direction__"+r],s&&u["arrow__size__"+s]),onClick:a,onTouchEnd:a},c),f.createElement(S,{fill:!!n.arrow&&n.arrow.fill||g.arrow.fill,type:o}))}function u(e,t){var n=t.theme,r=x(e,[]),o=i.StyleSheet.create(l(_,n));return f.createElement("div",b({id:"lightboxBackdrop",className:i.css(o.container)},r))}function h(e,t){var n=t.theme,r=e.caption,o=e.countCurrent,a=e.countSeparator,s=e.countTotal,c=e.showCount,u=x(e,["caption","countCurrent","countSeparator","countTotal","showCount"]);if(!r&&!c)return null;var h=i.StyleSheet.create(l(L,n)),p=c?f.createElement("div",{className:i.css(h.footerCount)},o,a,s):f.createElement("span",null);return f.createElement("div",b({className:i.css(h.footer)},u),r?f.createElement("figcaption",{className:i.css(h.footerCaption)},r):f.createElement("span",null),p)}function p(e,t){var n=t.theme,r=e.customControls,o=e.onClose,a=e.showCloseButton,s=e.closeButtonTitle,c=x(e,["customControls","onClose","showCloseButton","closeButtonTitle"]),u=i.StyleSheet.create(l(T,n));return f.createElement("div",b({className:i.css(u.header)},c),r||f.createElement("span",null),!!a&&f.createElement("button",{title:s,className:i.css(u.close),onClick:o},f.createElement(S,{fill:!!n.close&&n.close.fill||g.close.fill,type:"close"})))}function d(e,t){var n=e.index,r=e.src,o=e.thumbnail,a=e.active,s=e.onClick,c=t.theme,u=o||r,h=i.StyleSheet.create(l(P,c));return f.createElement("div",{className:i.css(h.thumbnail,a&&h.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),s(n)},style:{backgroundImage:'url("'+u+'")'}})}function m(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}e=e&&e.hasOwnProperty("default")?e.default:e;var f="default"in t?t.default:t;r=r&&r.hasOwnProperty("default")?r.default:r;var g={};g.container={background:"rgba(0, 0, 0, 0.8)",gutter:{horizontal:10,vertical:10},zIndex:2001},g.header={height:40},g.close={fill:"white"},g.footer={color:"white",count:{color:"rgba(255, 255, 255, 0.75)",fontSize:"0.85em"},height:40,gutter:{horizontal:0,vertical:5}},g.thumbnail={activeBorderColor:"white",size:50,gutter:2},g.arrow={background:"none",fill:"white",height:120};var 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},y=(function(){function e(e){this.value=e}function t(t){function n(o,i){try{var a=t[o](i),s=a.value;s instanceof e?Promise.resolve(s.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(a.done?"return":"normal",a.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":o.resolve({value:t,done:!0});break;case"throw":o.reject(t);break;default:o.resolve({value:t,done:!1})}(o=o.next)?n(o.key,o.arg):i=null}var o,i;this._invoke=function(e,t){return new Promise(function(r,a){var s={key:e,arg:t,resolve:r,reject:a,next:null};i?i=i.next=s:(o=i=s,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}(),function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}),w=function(){function e(e,t){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},C=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},I={arrowLeft:function(e){return'\n\t\t\n\t'},arrowRight:function(e){return'\n\t\t\n\t'},close:function(e){return'\n\t\t\n\t'}},S=function(e){var t=e.fill,n=e.type,r=x(e,["fill","type"]),o=I[n];return f.createElement("span",b({dangerouslySetInnerHTML:{__html:o(t)}},r))};S.defaultProps={fill:"white"},c.defaultProps={size:"medium"},c.contextTypes={theme:e.object.isRequired};var E={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:g.arrow.height,marginTop:g.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:g.thumbnail.size,marginTop:g.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:g.container.gutter.horizontal},arrow__direction__left:{left:g.container.gutter.horizontal}};u.contextTypes={theme:e.object.isRequired};var _={container:{alignItems:"center",backgroundColor:g.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingBottom:g.container.gutter.vertical,paddingLeft:g.container.gutter.horizontal,paddingRight:g.container.gutter.horizontal,paddingTop:g.container.gutter.vertical,position:"fixed",top:0,width:"100%",zIndex:g.container.zIndex}};h.contextTypes={theme:e.object.isRequired};var L={footer:{boxSizing:"border-box",color:g.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingBottom:g.footer.gutter.vertical,paddingLeft:g.footer.gutter.horizontal,paddingRight:g.footer.gutter.horizontal,paddingTop:g.footer.gutter.vertical},footerCount:{color:g.footer.count.color,fontSize:g.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};p.contextTypes={theme:e.object.isRequired};var T={header:{display:"flex",justifyContent:"space-between",height:g.header.height},close:{background:"none",border:"none",cursor:"pointer",outline:"none",position:"relative",top:0,verticalAlign:"bottom",height:40,marginRight:-10,padding:10,width:40}};d.contextTypes={theme:e.object.isRequired};var P={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0,0%,100%,.2)",cursor:"pointer",display:"inline-block",height:g.thumbnail.size,margin:g.thumbnail.gutter,overflow:"hidden",width:g.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+g.thumbnail.activeBorderColor}},z=i.StyleSheet.create({paginatedThumbnails:{bottom:g.container.gutter.vertical,height:g.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),N={height:g.thumbnail.size+2*g.thumbnail.gutter,width:40},O=function(e){function t(e){y(this,t);var n=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return n.state={hasCustomPage:!1},n.gotoPrev=n.gotoPrev.bind(n),n.gotoNext=n.gotoNext.bind(n),n}return k(t,e),w(t,[{key:"componentWillReceiveProps",value:function(e){e.currentImage!==this.props.currentImage&&this.setState({hasCustomPage:!1})}},{key:"getFirst",value:function(){var e=this.props,t=e.currentImage,n=e.offset;return this.state.hasCustomPage?this.clampFirst(this.state.first):this.clampFirst(t-n)}},{key:"setFirst",value:function(e,t){var n=this.state.first;e&&(e.preventDefault(),e.stopPropagation()),n!==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,n=t.images,r=2*t.offset+1;return e<0?0:e+r>n.length?n.length-r:e}},{key:"renderArrowPrev",value:function(){return this.getFirst()<=0?null:f.createElement(c,{direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:N,title:"Previous (Left arrow key)",type:"button"})}},{key:"renderArrowNext",value:function(){var e=this.props,t=e.offset,n=e.images,r=2*t+1;return this.getFirst()+r>=n.length?null:f.createElement(c,{direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:N,title:"Next (Right arrow key)",type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.images,n=e.currentImage,r=e.onClickThumbnail,o=2*e.offset+1,a=[],s=0;return t.length<=o?a=t:(s=this.getFirst(),a=t.slice(s,s+o)),f.createElement("div",{className:i.css(z.paginatedThumbnails)},this.renderArrowPrev(),a.map(function(e,t){return f.createElement(d,b({key:s+t},e,{index:s+t,onClick:r,active:s+t===n}))}),this.renderArrowNext())}}]),t}(t.Component),j=function(e){function n(){return y(this,n),C(this,(n.__proto__||Object.getPrototypeOf(n)).apply(this,arguments))}return k(n,e),w(n,[{key:"getChildContext",value:function(){return this.props.context}},{key:"render",value:function(){return t.Children.only(this.props.children)}}]),n}(t.Component);j.childContextTypes={theme:e.object};var B=function(e){function t(){y(this,t);var e=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return k(t,e),w(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){s.render(f.createElement(j,{context:this.context},f.createElement("div",null,f.createElement("style",null,"\n\t\t\t\t.fade-enter { opacity: 0.01; }\n\t\t\t\t.fade-enter.fade-enter-active { opacity: 1; transition: opacity 200ms; }\n\t\t\t\t.fade-leave { opacity: 1; }\n\t\t\t\t.fade-leave.fade-leave-active { opacity: 0.01; transition: opacity 200ms; }\n\t\t"),f.createElement(a.CSSTransitionGroup,b({component:"div",transitionName:"fade",transitionEnterTimeout:200,transitionLeaveTimeout:200},this.props)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){s.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component);B.contextTypes={theme:e.object.isRequired};var R=!("undefined"==typeof window||!window.document||!window.document.createElement),A=function(e){function t(e){y(this,t);var r=C(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.theme=l(g,e.theme),r.classes=n.StyleSheet.create(l(q,r.theme)),r.state={imageLoaded:!1},m.call(r,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImageLoaded"]),r}return k(t,e),w(t,[{key:"getChildContext",value:function(){return{theme:this.theme}}},{key:"componentDidMount",value:function(){this.props.isOpen&&(this.props.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),this.props.currentImage&&this.preloadImage(this.props.currentImage,this.handleImageLoaded))}},{key:"componentWillReceiveProps",value:function(e){if(R){if(e.preloadNextImage){var t=this.props.currentImage,n=e.currentImage+1,r=e.currentImage-1,o=void 0;t&&e.currentImage>t?o=n:t&&e.currentImage