react-images-viewer
Advanced tools
Comparing version 1.6.6 to 1.6.7
@@ -715,5 +715,5 @@ import PropTypes from 'prop-types'; | ||
| value: function componentDidMount() { | ||
| var p = document.createElement('div'); | ||
| document.body.appendChild(p); | ||
| this.portalElement = p; | ||
| var div = document.createElement('div'); | ||
| document.body.appendChild(div); | ||
| this.portalElement = div; | ||
| this.componentDidUpdate(); | ||
@@ -768,3 +768,3 @@ } | ||
| Portal.propTypes = { | ||
| children: PropTypes.element | ||
| children: PropTypes.arrayOf(PropTypes.any) | ||
| }; | ||
@@ -1276,11 +1276,8 @@ | ||
| ImgsViewer.defaultProps = { | ||
| closeBtnTitle: "关闭（空格键）", | ||
| currImg: 0, | ||
| enableKeyboardInput: true, | ||
| imgCountSeparator: " / ", | ||
| leftArrowTitle: "上一张（向左键）", | ||
| onClickShowNextImg: true, | ||
| preloadNextImg: true, | ||
| preventScroll: true, | ||
| rightArrowTitle: "下一张（向右键）", | ||
| showCloseBtn: true, | ||
@@ -1287,0 +1284,0 @@ showImgCount: true, |
@@ -717,5 +717,5 @@ (function (global, factory) { | ||
| value: function componentDidMount() { | ||
| var p = document.createElement('div'); | ||
| document.body.appendChild(p); | ||
| this.portalElement = p; | ||
| var div = document.createElement('div'); | ||
| document.body.appendChild(div); | ||
| this.portalElement = div; | ||
| this.componentDidUpdate(); | ||
@@ -770,3 +770,3 @@ } | ||
| Portal.propTypes = { | ||
| children: PropTypes.element | ||
| children: PropTypes.arrayOf(PropTypes.any) | ||
| }; | ||
@@ -1278,11 +1278,8 @@ | ||
| ImgsViewer.defaultProps = { | ||
| closeBtnTitle: "关闭（空格键）", | ||
| currImg: 0, | ||
| enableKeyboardInput: true, | ||
| imgCountSeparator: " / ", | ||
| leftArrowTitle: "上一张（向左键）", | ||
| onClickShowNextImg: true, | ||
| preloadNextImg: true, | ||
| preventScroll: true, | ||
| rightArrowTitle: "下一张（向右键）", | ||
| showCloseBtn: true, | ||
@@ -1289,0 +1286,0 @@ showImgCount: true, |
@@ -1,1 +0,1 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom"),require("aphrodite"),require("react-scrolllock")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite/no-important","react-transition-group","react-dom","aphrodite","react-scrolllock"],t):e.ImgsViewer=t(e.PropTypes,e.React,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM,e.aphrodite,e.ScrollLock)}(this,function(e,t,r,n,o,i,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var l="default"in t?t.default:t;a=a&&a.hasOwnProperty("default")?a.default:a;var s={container:{background:"rgba(0, 0, 0, .8)",gutter:{horizontal:10,vertical:10},zIndex:2001},header:{height:40},close:{fill:"white"},footer:{color:"#fff",count:{color:"rgba(255, 255, 255, .75)",fontSize:".85em"},height:40,gutter:{horizontal:0,vertical:5}},thumbnail:{activeBorderColor:"#fff",size:50,gutter:2},arrow:{background:"none",fill:"#fff",height:120}},c="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},u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},p=function(){function e(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,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},m=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},f=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};function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object.assign({},e);return Object.keys(t).forEach(function(n){"object"===c(t[n])&&t[n]&&e[n]?r[n]=g(e[n],t[n]):r[n]=t[n]}),r}var v=!("undefined"==typeof window||!window.document||!window.document.createElement);var y={arrowLeft:function(e){return'<svg fill="'+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="'+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="'+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>'}},w=function(e){var t=e.fill,r=e.type,n=m(e,["fill","type"]),o=y[r];return l.createElement("span",h({dangerouslySetInnerHTML:{__html:o(t)}},n))};function b(e){var t=e.direction,n=e.icon,o=e.onClick,i=e.size,a=e.theme,c=m(e,["direction","icon","onClick","size","theme"]),u=r.StyleSheet.create(g(k,a));return l.createElement("button",h({type:"button",className:r.css(u.arrow,u["arrow__direction__"+t],i&&u["arrow__size__"+i]),onClick:o,onTouchEnd:o},c),l.createElement(w,{fill:!!a.arrow&&a.arrow.fill||s.arrow.fill,type:n}))}w.defaultProps={fill:"#fff"},b.defaultProps={size:"medium"};var k={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:s.arrow.height,marginTop:s.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:s.thumbnail.size,marginTop:s.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:s.container.gutter.horizontal},arrow__direction__left:{left:s.container.gutter.horizontal}};function x(e){var t=r.StyleSheet.create(g(C,e.theme));return l.createElement("div",h({id:"viewerBackdrop",className:r.css(t.container)},e))}var C={container:{alignItems:"center",backdropColor:s.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingTop:s.container.gutter.vertical,paddingRight:s.container.gutter.horizontal,paddingBottom:s.container.gutter.vertical,paddingLeft:s.container.gutter.horizontal,position:"fixed",top:0,width:"100%",zIndex:s.container.zIndex}};function E(e){var t=e.caption,n=e.countCurr,o=e.countSeparator,i=e.countTotal,a=e.showCount,s=e.theme,c=m(e,["caption","countCurr","countSeparator","countTotal","showCount","theme"]);if(!t&&!a)return null;var u=r.StyleSheet.create(g(I,s)),p=a?l.createElement("div",{className:r.css(u.footerCount)},n,o,i):l.createElement("span",null);return l.createElement("div",h({className:r.css(u.footer)},c),t?l.createElement("figcaption",{className:r.css(u.footerCaption)},t):l.createElement("span",null),p)}var I={footer:{boxSizing:"border-box",color:s.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingTop:s.footer.gutter.vertical,paddingRight:s.footer.gutter.horizontal,paddingBottom:s.footer.gutter.vertical,paddingLeft:s.footer.gutter.horizontal},footerCount:{color:s.footer.count.color,fontSize:s.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};function S(e){var t=e.customControls,n=e.onClose,o=e.showCloseBtn,i=e.closeBtnTitle,a=e.theme,c=m(e,["customControls","onClose","showCloseBtn","closeBtnTitle","theme"]),u=r.StyleSheet.create(g(_,a));return l.createElement("div",h({className:r.css(u.header)},c),t||l.createElement("span",null),!!o&&l.createElement("button",{title:i,className:r.css(u.close),onClick:n},l.createElement(w,{fill:!!a.close&&a.close.fill||s.close.fill,type:"close"})))}var _={header:{display:"flex",justifyContent:"space-between",height:s.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 L(e){var t=e.index,n=e.src,o=e.thumbnail,i=e.active,a=e.onClick,s=e.theme,c=o||n,u=r.StyleSheet.create(g(z,s));return l.createElement("div",{className:r.css(u.thumbnail,i&&u.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),a(t)},style:{backgroundImage:'url("'+c+'")'}})}var z={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0, 0%, 100%, .2)",cursor:"pointer",display:"inline-block",height:s.thumbnail.size,margin:s.thumbnail.gutter,overflow:"hidden",width:s.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+s.thumbnail.activeBorderColor}},T=r.StyleSheet.create({paginatedThumbnails:{bottom:s.container.gutter.vertical,height:s.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),N={height:s.thumbnail.size+2*s.thumbnail.gutter,width:40},P=function(e){function t(e){u(this,t);var r=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={hasCustomPage:!1},r.gotoPrev=r.gotoPrev.bind(r),r.gotoNext=r.gotoNext.bind(r),r}return d(t,e),p(t,[{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 t=this.props.leftTitle;return this.getFirst()<=0?null:l.createElement(b,{theme:e,direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:N,title:t,type:"button"})}},{key:"renderArrowNext",value:function(e){var t=this.props,r=t.offset,n=t.imgs,o=t.rightTitle,i=2*r+1;return this.getFirst()+i>=n.length?null:l.createElement(b,{theme:e,direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:N,title:o,type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.imgs,n=e.currImg,o=e.onClickThumbnail,i=e.offset,a=e.theme,s=2*i+1,c=[],u=0;return t.length<=s?c=t:(u=this.getFirst(),c=t.slice(u,u+s)),l.createElement("div",{className:r.css(T.paginatedThumbnails)},this.renderArrowPrev(a),c.map(function(e,t){return l.createElement(L,h({theme:a,key:u+t},e,{index:u+t,onClick:o,active:u+t===n}))}),this.renderArrowNext(a))}}]),t}(t.Component),O=function(e){function t(){u(this,t);var e=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return d(t,e),p(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){o.render(l.createElement("div",null,l.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: .01; transition: opacity 200ms; }\n\t\t"),l.createElement(n.TransitionGroup,this.props,l.createElement(n.CSSTransition,{timeout:{enter:200,exit:200},className:"fade"},l.createElement("div",null,this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){o.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component),B=function(e){var t=e.color,r=e.size;return{bouncingLoader:{display:"flex",justifyContent:"center"},child:{width:r,height:r,margin:3*r+"px "+.2*r+"px",background:t,borderRadius:"50%",animationName:function(e){return{"0%":{opacity:1,transform:"translateY(0)"},"100%":{opacity:.1,transform:"translateY(-"+e+"px)"}}}(r),animationDuration:".6s",animationDirection:"alternate",animationIterationCount:"infinite"},child2:{animationDelay:"0.2s"},child3:{animationDelay:"0.4s"}}};function A(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var j=l.createContext(s),D=function(e){function r(e){u(this,r);var t=f(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.theme=g(s,t.props.theme),t.classes=i.StyleSheet.create(g(F,t.props.theme)),t.state={imgLoaded:!1},function(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}.call(t,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImgLoaded"]),t}return d(r,e),p(r,[{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:"UNSAFE_componentWillReceiveProps",value:function(e){if(v){if(e.preloadNextImg){var t=e.currImg+1,r=e.currImg-1;this.preloadImg(r),this.preloadImg(t)}if(this.props.currImg!==e.currImg||!this.props.isOpen&&e.isOpen){var n=this.preloadImgData(e.imgs[e.currImg],this.handleImgLoaded);n&&this.setState({imgLoaded:n.complete})}return!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput),null}}},{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=A(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:l.createElement(b,{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:l.createElement(b,{theme:e,direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(){var e=this,r=this.props,n=r.backdropCloseable,o=r.isOpen,s=r.showThumbnails,c=r.width,u=this.state.imgLoaded;if(!o)return l.createElement("span",{key:"closed"});var p=s?this.theme.thumbnail.size+this.theme.container.gutter.vertical:0;return l.createElement(j.Consumer,null,function(r){return l.createElement(x,{theme:r,key:"open",onClick:n&&e.closeBackdrop,onTouchEnd:n&&e.closeBackdrop},l.createElement(t.Fragment,null,l.createElement("div",{className:i.css(e.classes.content),style:{marginBottom:p,maxWidth:c}},u&&e.renderHeader(r)," ",e.renderImgs(),e.renderSpinner()," ",u&&e.renderFooter(r)),u&&e.renderThumbnails(r),u&&e.renderArrowPrev(r),u&&e.renderArrowNext(r),e.props.preventScroll&&l.createElement(a,null)))})}},{key:"renderImgs",value:function(){var e=this.props,t=e.currImg,r=e.imgs,n=e.onClickImg,o=e.showThumbnails,a=this.state.imgLoaded;if(!r||!r.length)return null;var s=r[t],c=A(s),u=c?"100vw":null,p=o?this.theme.thumbnail.size:0,h=this.theme.header.height+this.theme.footer.height+p+this.theme.container.gutter.vertical+"px";return l.createElement("figure",{className:i.css(this.classes.figure)},l.createElement("img",{className:i.css(this.classes.img,a&&this.classes.imgLoaded),onClick:n,sizes:u,alt:s.alt,src:s.src,srcSet:c,style:{cursor:n?"pointer":"auto",maxHeight:"calc(100vh - "+h}}))}},{key:"renderThumbnails",value:function(e){var t=this.props,r=t.imgs,n=t.currImg,o=t.leftArrowTitle,i=t.rightArrowTitle,a=t.onClickThumbnail,s=t.showThumbnails,c=t.thumbnailOffset;return s?l.createElement(P,{theme:e,leftTitle:o,rightTitle:i,currImg:n,imgs:r,offset:c,onClickThumbnail:a}):null}},{key:"renderHeader",value:function(e){var t=this.props,r=t.closeBtnTitle,n=t.customControls,o=t.onClose,i=t.showCloseBtn;return l.createElement(S,{theme:e,customControls:n,onClose:o,showCloseBtn:i,closeBtnTitle:r})}},{key:"renderFooter",value:function(e){var t=this.props,r=t.currImg,n=t.imgs,o=t.imgCountSeparator,i=t.showImgCount;return n&&n.length?l.createElement(E,{theme:e,caption:n[r].caption,countCurr:r+1,countSeparator:o,countTotal:n.length,showCount:i}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,r=e.spinnerDisabled,n=e.spinnerColor,o=e.spinnerSize,a=this.state.imgLoaded,s=t;return r?null:l.createElement("div",{className:i.css(this.classes.spinner,!a&&this.classes.spinnerActive)},l.createElement(s,{color:n,size:o}))}},{key:"render",value:function(){return l.createElement(j.Provider,{value:this.props.theme},l.createElement(O,null," ",this.renderDialog()," "))}}]),r}(t.Component);D.defaultProps={closeBtnTitle:"关闭（空格键）",currImg:0,enableKeyboardInput:!0,imgCountSeparator:" / ",leftArrowTitle:"上一张（向左键）",onClickShowNextImg:!0,preloadNextImg:!0,preventScroll:!0,rightArrowTitle:"下一张（向右键）",showCloseBtn:!0,showImgCount:!0,spinnerDisabled:!1,spinner:function(e){var t=r.StyleSheet.create(B(e));return l.createElement("div",{className:r.css(t.bouncingLoader)},l.createElement("div",{className:r.css(t.child)}),l.createElement("div",{className:r.css(t.child,t.child2)}),l.createElement("div",{className:r.css(t.child,t.child3)}))},spinnerColor:"#fff",spinnerSize:50,theme:{},thumbnailOffset:2,width:1024};var F={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 D}); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("prop-types"),require("react"),require("aphrodite/no-important"),require("react-transition-group"),require("react-dom"),require("aphrodite"),require("react-scrolllock")):"function"==typeof define&&define.amd?define(["prop-types","react","aphrodite/no-important","react-transition-group","react-dom","aphrodite","react-scrolllock"],t):e.ImgsViewer=t(e.PropTypes,e.React,e.aphrodite,e.ReactTransitionGroup,e.ReactDOM,e.aphrodite,e.ScrollLock)}(this,function(e,t,r,n,o,i,a){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var s="default"in t?t.default:t;a=a&&a.hasOwnProperty("default")?a.default:a;var l={container:{background:"rgba(0, 0, 0, .8)",gutter:{horizontal:10,vertical:10},zIndex:2001},header:{height:40},close:{fill:"white"},footer:{color:"#fff",count:{color:"rgba(255, 255, 255, .75)",fontSize:".85em"},height:40,gutter:{horizontal:0,vertical:5}},thumbnail:{activeBorderColor:"#fff",size:50,gutter:2},arrow:{background:"none",fill:"#fff",height:120}},c="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},u=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},p=function(){function e(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,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},d=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},m=function(e,t){var r={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(r[n]=e[n]);return r},f=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};function g(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=Object.assign({},e);return Object.keys(t).forEach(function(n){"object"===c(t[n])&&t[n]&&e[n]?r[n]=g(e[n],t[n]):r[n]=t[n]}),r}var v=!("undefined"==typeof window||!window.document||!window.document.createElement);var y={arrowLeft:function(e){return'<svg fill="'+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="'+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="'+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>'}},b=function(e){var t=e.fill,r=e.type,n=m(e,["fill","type"]),o=y[r];return s.createElement("span",h({dangerouslySetInnerHTML:{__html:o(t)}},n))};function w(e){var t=e.direction,n=e.icon,o=e.onClick,i=e.size,a=e.theme,c=m(e,["direction","icon","onClick","size","theme"]),u=r.StyleSheet.create(g(k,a));return s.createElement("button",h({type:"button",className:r.css(u.arrow,u["arrow__direction__"+t],i&&u["arrow__size__"+i]),onClick:o,onTouchEnd:o},c),s.createElement(b,{fill:!!a.arrow&&a.arrow.fill||l.arrow.fill,type:n}))}b.defaultProps={fill:"#fff"},w.defaultProps={size:"medium"};var k={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:l.arrow.height,marginTop:l.arrow.height/-2,width:40,"@media (min-width: 768px)":{width:70}},arrow__size__small:{height:l.thumbnail.size,marginTop:l.thumbnail.size/-2,width:30,"@media (min-width: 500px)":{width:40}},arrow__direction__right:{right:l.container.gutter.horizontal},arrow__direction__left:{left:l.container.gutter.horizontal}};function x(e){var t=r.StyleSheet.create(g(C,e.theme));return s.createElement("div",h({id:"viewerBackdrop",className:r.css(t.container)},e))}var C={container:{alignItems:"center",backdropColor:l.container.background,boxSizing:"border-box",display:"flex",height:"100%",justifyContent:"center",left:0,paddingTop:l.container.gutter.vertical,paddingRight:l.container.gutter.horizontal,paddingBottom:l.container.gutter.vertical,paddingLeft:l.container.gutter.horizontal,position:"fixed",top:0,width:"100%",zIndex:l.container.zIndex}};function E(e){var t=e.caption,n=e.countCurr,o=e.countSeparator,i=e.countTotal,a=e.showCount,l=e.theme,c=m(e,["caption","countCurr","countSeparator","countTotal","showCount","theme"]);if(!t&&!a)return null;var u=r.StyleSheet.create(g(I,l)),p=a?s.createElement("div",{className:r.css(u.footerCount)},n,o,i):s.createElement("span",null);return s.createElement("div",h({className:r.css(u.footer)},c),t?s.createElement("figcaption",{className:r.css(u.footerCaption)},t):s.createElement("span",null),p)}var I={footer:{boxSizing:"border-box",color:l.footer.color,cursor:"auto",display:"flex",justifyContent:"space-between",left:0,lineHeight:1.3,paddingTop:l.footer.gutter.vertical,paddingRight:l.footer.gutter.horizontal,paddingBottom:l.footer.gutter.vertical,paddingLeft:l.footer.gutter.horizontal},footerCount:{color:l.footer.count.color,fontSize:l.footer.count.fontSize,paddingLeft:"1em"},footerCaption:{flex:"1 1 0"}};function S(e){var t=e.customControls,n=e.onClose,o=e.showCloseBtn,i=e.closeBtnTitle,a=e.theme,c=m(e,["customControls","onClose","showCloseBtn","closeBtnTitle","theme"]),u=r.StyleSheet.create(g(_,a));return s.createElement("div",h({className:r.css(u.header)},c),t||s.createElement("span",null),!!o&&s.createElement("button",{title:i,className:r.css(u.close),onClick:n},s.createElement(b,{fill:!!a.close&&a.close.fill||l.close.fill,type:"close"})))}var _={header:{display:"flex",justifyContent:"space-between",height:l.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 L(e){var t=e.index,n=e.src,o=e.thumbnail,i=e.active,a=e.onClick,l=e.theme,c=o||n,u=r.StyleSheet.create(g(z,l));return s.createElement("div",{className:r.css(u.thumbnail,i&&u.thumbnail__active),onClick:function(e){e.preventDefault(),e.stopPropagation(),a(t)},style:{backgroundImage:'url("'+c+'")'}})}var z={thumbnail:{backgroundPosition:"center",backgroundSize:"cover",borderRadius:2,boxShadow:"inset 0 0 0 1px hsla(0, 0%, 100%, .2)",cursor:"pointer",display:"inline-block",height:l.thumbnail.size,margin:l.thumbnail.gutter,overflow:"hidden",width:l.thumbnail.size},thumbnail__active:{boxShadow:"inset 0 0 0 2px "+l.thumbnail.activeBorderColor}},T=r.StyleSheet.create({paginatedThumbnails:{bottom:l.container.gutter.vertical,height:l.thumbnail.size,padding:"0 50px",position:"absolute",textAlign:"center",whiteSpace:"nowrap",left:"50%",transform:"translateX(-50%)"}}),N={height:l.thumbnail.size+2*l.thumbnail.gutter,width:40},P=function(e){function t(e){u(this,t);var r=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.state={hasCustomPage:!1},r.gotoPrev=r.gotoPrev.bind(r),r.gotoNext=r.gotoNext.bind(r),r}return d(t,e),p(t,[{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 t=this.props.leftTitle;return this.getFirst()<=0?null:s.createElement(w,{theme:e,direction:"left",size:"small",icon:"arrowLeft",onClick:this.gotoPrev,style:N,title:t,type:"button"})}},{key:"renderArrowNext",value:function(e){var t=this.props,r=t.offset,n=t.imgs,o=t.rightTitle,i=2*r+1;return this.getFirst()+i>=n.length?null:s.createElement(w,{theme:e,direction:"right",size:"small",icon:"arrowRight",onClick:this.gotoNext,style:N,title:o,type:"button"})}},{key:"render",value:function(){var e=this.props,t=e.imgs,n=e.currImg,o=e.onClickThumbnail,i=e.offset,a=e.theme,l=2*i+1,c=[],u=0;return t.length<=l?c=t:(u=this.getFirst(),c=t.slice(u,u+l)),s.createElement("div",{className:r.css(T.paginatedThumbnails)},this.renderArrowPrev(a),c.map(function(e,t){return s.createElement(L,h({theme:a,key:u+t},e,{index:u+t,onClick:o,active:u+t===n}))}),this.renderArrowNext(a))}}]),t}(t.Component),O=function(e){function t(){u(this,t);var e=f(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.portalElement=null,e}return d(t,e),p(t,[{key:"componentDidMount",value:function(){var e=document.createElement("div");document.body.appendChild(e),this.portalElement=e,this.componentDidUpdate()}},{key:"componentDidUpdate",value:function(){o.render(s.createElement("div",null,s.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: .01; transition: opacity 200ms; }\n\t\t"),s.createElement(n.TransitionGroup,this.props,s.createElement(n.CSSTransition,{timeout:{enter:200,exit:200},className:"fade"},s.createElement("div",null,this.props.children)))),this.portalElement)}},{key:"componentWillUnmount",value:function(){o.unmountComponentAtNode(this.portalElement),document.body.removeChild(this.portalElement)}},{key:"render",value:function(){return null}}]),t}(t.Component),B=function(e){var t=e.color,r=e.size;return{bouncingLoader:{display:"flex",justifyContent:"center"},child:{width:r,height:r,margin:3*r+"px "+.2*r+"px",background:t,borderRadius:"50%",animationName:function(e){return{"0%":{opacity:1,transform:"translateY(0)"},"100%":{opacity:.1,transform:"translateY(-"+e+"px)"}}}(r),animationDuration:".6s",animationDirection:"alternate",animationIterationCount:"infinite"},child2:{animationDelay:"0.2s"},child3:{animationDelay:"0.4s"}}};function A(e){var t=e.srcSet||e.srcset;return Array.isArray(t)?t.join():t}var j=s.createContext(l),D=function(e){function r(e){u(this,r);var t=f(this,(r.__proto__||Object.getPrototypeOf(r)).call(this,e));return t.theme=g(l,t.props.theme),t.classes=i.StyleSheet.create(g(F,t.props.theme)),t.state={imgLoaded:!1},function(e){var t=this;e.forEach(function(e){return t[e]=t[e].bind(t)})}.call(t,["gotoNext","gotoPrev","closeBackdrop","handleKeyboardInput","handleImgLoaded"]),t}return d(r,e),p(r,[{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:"UNSAFE_componentWillReceiveProps",value:function(e){if(v){if(e.preloadNextImg){var t=e.currImg+1,r=e.currImg-1;this.preloadImg(r),this.preloadImg(t)}if(this.props.currImg!==e.currImg||!this.props.isOpen&&e.isOpen){var n=this.preloadImgData(e.imgs[e.currImg],this.handleImgLoaded);n&&this.setState({imgLoaded:n.complete})}return!this.props.isOpen&&e.isOpen&&e.enableKeyboardInput&&window.addEventListener("keydown",this.handleKeyboardInput),!e.isOpen&&e.enableKeyboardInput&&window.removeEventListener("keydown",this.handleKeyboardInput),null}}},{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=A(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:s.createElement(w,{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:s.createElement(w,{theme:e,direction:"right",icon:"arrowRight",onClick:this.gotoNext,title:this.props.rightArrowTitle,type:"button"})}},{key:"renderDialog",value:function(){var e=this,r=this.props,n=r.backdropCloseable,o=r.isOpen,l=r.showThumbnails,c=r.width,u=this.state.imgLoaded;if(!o)return s.createElement("span",{key:"closed"});var p=l?this.theme.thumbnail.size+this.theme.container.gutter.vertical:0;return s.createElement(j.Consumer,null,function(r){return s.createElement(x,{theme:r,key:"open",onClick:n&&e.closeBackdrop,onTouchEnd:n&&e.closeBackdrop},s.createElement(t.Fragment,null,s.createElement("div",{className:i.css(e.classes.content),style:{marginBottom:p,maxWidth:c}},u&&e.renderHeader(r)," ",e.renderImgs(),e.renderSpinner()," ",u&&e.renderFooter(r)),u&&e.renderThumbnails(r),u&&e.renderArrowPrev(r),u&&e.renderArrowNext(r),e.props.preventScroll&&s.createElement(a,null)))})}},{key:"renderImgs",value:function(){var e=this.props,t=e.currImg,r=e.imgs,n=e.onClickImg,o=e.showThumbnails,a=this.state.imgLoaded;if(!r||!r.length)return null;var l=r[t],c=A(l),u=c?"100vw":null,p=o?this.theme.thumbnail.size:0,h=this.theme.header.height+this.theme.footer.height+p+this.theme.container.gutter.vertical+"px";return s.createElement("figure",{className:i.css(this.classes.figure)},s.createElement("img",{className:i.css(this.classes.img,a&&this.classes.imgLoaded),onClick:n,sizes:u,alt:l.alt,src:l.src,srcSet:c,style:{cursor:n?"pointer":"auto",maxHeight:"calc(100vh - "+h}}))}},{key:"renderThumbnails",value:function(e){var t=this.props,r=t.imgs,n=t.currImg,o=t.leftArrowTitle,i=t.rightArrowTitle,a=t.onClickThumbnail,l=t.showThumbnails,c=t.thumbnailOffset;return l?s.createElement(P,{theme:e,leftTitle:o,rightTitle:i,currImg:n,imgs:r,offset:c,onClickThumbnail:a}):null}},{key:"renderHeader",value:function(e){var t=this.props,r=t.closeBtnTitle,n=t.customControls,o=t.onClose,i=t.showCloseBtn;return s.createElement(S,{theme:e,customControls:n,onClose:o,showCloseBtn:i,closeBtnTitle:r})}},{key:"renderFooter",value:function(e){var t=this.props,r=t.currImg,n=t.imgs,o=t.imgCountSeparator,i=t.showImgCount;return n&&n.length?s.createElement(E,{theme:e,caption:n[r].caption,countCurr:r+1,countSeparator:o,countTotal:n.length,showCount:i}):null}},{key:"renderSpinner",value:function(){var e=this.props,t=e.spinner,r=e.spinnerDisabled,n=e.spinnerColor,o=e.spinnerSize,a=this.state.imgLoaded,l=t;return r?null:s.createElement("div",{className:i.css(this.classes.spinner,!a&&this.classes.spinnerActive)},s.createElement(l,{color:n,size:o}))}},{key:"render",value:function(){return s.createElement(j.Provider,{value:this.props.theme},s.createElement(O,null," ",this.renderDialog()," "))}}]),r}(t.Component);D.defaultProps={currImg:0,enableKeyboardInput:!0,imgCountSeparator:" / ",onClickShowNextImg:!0,preloadNextImg:!0,preventScroll:!0,showCloseBtn:!0,showImgCount:!0,spinnerDisabled:!1,spinner:function(e){var t=r.StyleSheet.create(B(e));return s.createElement("div",{className:r.css(t.bouncingLoader)},s.createElement("div",{className:r.css(t.child)}),s.createElement("div",{className:r.css(t.child,t.child2)}),s.createElement("div",{className:r.css(t.child,t.child3)}))},spinnerColor:"#fff",spinnerSize:50,theme:{},thumbnailOffset:2,width:1024};var F={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 D}); |
@@ -44,5 +44,5 @@ 'use strict'; | ||
| value: function componentDidMount() { | ||
| var p = document.createElement('div'); | ||
| document.body.appendChild(p); | ||
| this.portalElement = p; | ||
| var div = document.createElement('div'); | ||
| document.body.appendChild(div); | ||
| this.portalElement = div; | ||
| this.componentDidUpdate(); | ||
@@ -100,3 +100,3 @@ } | ||
| Portal.propTypes = { | ||
| children: _propTypes2.default.element | ||
| children: _propTypes2.default.arrayOf(_propTypes2.default.any) | ||
| }; |
@@ -512,11 +512,8 @@ "use strict"; | ||
| ImgsViewer.defaultProps = { | ||
| closeBtnTitle: "关闭（空格键）", | ||
| currImg: 0, | ||
| enableKeyboardInput: true, | ||
| imgCountSeparator: " / ", | ||
| leftArrowTitle: "上一张（向左键）", | ||
| onClickShowNextImg: true, | ||
| preloadNextImg: true, | ||
| preventScroll: true, | ||
| rightArrowTitle: "下一张（向右键）", | ||
| showCloseBtn: true, | ||
@@ -523,0 +520,0 @@ showImgCount: true, |
| { | ||
| "name": "react-images-viewer", | ||
| "version": "1.6.6", | ||
| "version": "1.6.7", | ||
| "description": "Create an react-images-viewer component.", | ||
@@ -5,0 +5,0 @@ "main": "lib/ImgsViewer.js", |
@@ -96,28 +96,28 @@ # react-images-viewer | ||
| | Property | Type | Default | Description | | ||
| | :------------------ | :------- | :----------------- | :-------------------------------------------------------------------------------------------------- | | ||
| | backdropCloseable | 布尔值 | false | 是否通过点击半透明幕布来退出浏览 | | ||
| | closeBtnTitle | 字符串 | '关闭（空格键）' | 关闭按钮的 title | | ||
| | enableKeyboardInput | 布尔值 | true | 支持键盘输入 - <code>空格键，esc</code>, <code>左箭头，上箭头</code>，和<code>右箭头，下箭头</code> | | ||
| | currImg | 数值类型 | 0 | 必须项（如果需要导航的话），初始化图像的索引 | | ||
| | customCtrls | 数组 | undefined | 图片查看器顶部的控件元素数组 | | ||
| | imgs | 数组 | undefined | 必须项. 图片元素数组，图像选项见下表。 | | ||
| | imgsSeparator | 字符串 | ' / ' | 图片计数分隔符 | | ||
| | isOpen | 布尔值 | false | 必须项（如果需要导航的话），图片是否显示 | | ||
| | leftArrowTitle | 字符串 | '上一张（左箭头）' | 左箭头的 title | | ||
| | onClickPrev | 函数 | undefined | 必须项（如果需要导航的话），请求上一张时触发 | | ||
| | onClickNext | 函数 | undefined | 必须项（如果需要导航的话），请求下一张时触发 | | ||
| | onClose | 函数 | undefined | 关闭查看器的回调 | | ||
| | onClickImg | 函数 | undefined | 点起当前图片的回调 | | ||
| | onClickThumbnail | 函数 | undefined | 缩略点击的回调 | | ||
| | preloadNextImg | 布尔值 | true | 是否预加载下一张图片 | | ||
| | rightArrowTitle | 字符串 | '下一张（右箭头）' | 右箭头的 title | | ||
| | showCloseBtn | 布尔值 | true | 右上角是否显示 X 按钮 | | ||
| | showImgCount | 布尔值 | true | 是否显示图片索引 | | ||
| | width | 数值类型 | 1024 | 轮播器的最大的宽度，默认值 1024px | | ||
| | spinnerDisabled | bool | false | 禁用加载器 | | ||
| | spinner | 函数 | DefaultSpinner | 加载器组件 | | ||
| | spinnerColor | 字符串 | '#fff' | 加载器颜色 | | ||
| | spinnnerSize | 数值类型 | 50 | 加载器尺寸 | | ||
| | preventAutoScroll | 布尔值 | true | 是否阻止自动滚动 | | ||
| | Property | Type | Default | Description | | ||
| | :------------------ | :------- | :------------- | :-------------------------------------------------------------------------------------------------- | | ||
| | backdropCloseable | 布尔值 | false | 是否通过点击半透明幕布来退出浏览 | | ||
| | closeBtnTitle | 字符串 | undefined | 关闭按钮的 title | | ||
| | enableKeyboardInput | 布尔值 | true | 支持键盘输入 - <code>空格键，esc</code>, <code>左箭头，上箭头</code>，和<code>右箭头，下箭头</code> | | ||
| | currImg | 数值类型 | 0 | 必须项（如果需要导航的话），初始化图像的索引 | | ||
| | customCtrls | 数组 | undefined | 图片查看器顶部的控件元素数组 | | ||
| | imgs | 数组 | undefined | 必须项. 图片元素数组，图像选项见下表。 | | ||
| | imgsSeparator | 字符串 | ' / ' | 图片计数分隔符 | | ||
| | isOpen | 布尔值 | false | 必须项（如果需要导航的话），图片是否显示 | | ||
| | leftArrowTitle | 字符串 | undefined | 左箭头的 title | | ||
| | onClickPrev | 函数 | undefined | 必须项（如果需要导航的话），请求上一张时触发 | | ||
| | onClickNext | 函数 | undefined | 必须项（如果需要导航的话），请求下一张时触发 | | ||
| | onClose | 函数 | undefined | 关闭查看器的回调 | | ||
| | onClickImg | 函数 | undefined | 点起当前图片的回调 | | ||
| | onClickThumbnail | 函数 | undefined | 缩略点击的回调 | | ||
| | preloadNextImg | 布尔值 | true | 是否预加载下一张图片 | | ||
| | rightArrowTitle | 字符串 | undefined | 右箭头的 title | | ||
| | showCloseBtn | 布尔值 | true | 右上角是否显示 X 按钮 | | ||
| | showImgCount | 布尔值 | true | 是否显示图片索引 | | ||
| | width | 数值类型 | 1024 | 轮播器的最大的宽度，默认值 1024px | | ||
| | spinnerDisabled | bool | false | 禁用加载器 | | ||
| | spinner | 函数 | DefaultSpinner | 加载器组件 | | ||
| | spinnerColor | 字符串 | '#fff' | 加载器颜色 | | ||
| | spinnnerSize | 数值类型 | 50 | 加载器尺寸 | | ||
| | preventAutoScroll | 布尔值 | true | 是否阻止自动滚动 | | ||
@@ -124,0 +124,0 @@ ## Imgs Object |
@@ -96,28 +96,28 @@ # react-images-viewer | ||
| | Property | Type | Default | Description | | ||
| | :------------------ | :----- | :----------------- | :------------------------------------------------------------------------------------------------------------------------------ | | ||
| | backdropCloseable | bool | false | Allow users to exit the viewer by clicking the backdrop | | ||
| | closeBtnTitle | str | '关闭（空格键）' | Customize close esc title | | ||
| | enableKeyboardInput | bool | true | Supports keyboard input - <code>space, esc</code>, <code> arrow left, arrow up</code>, and <code>arrow right, arrow down</code> | | ||
| | currImg | num | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially | | ||
| | customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer | | ||
| | imgs | arr | undefined | Required. Array of image objects, See img opts table below | | ||
| | imgCountSeparator | str | ' / ' | Customize separator in the image count | | ||
| | isOpen | bool | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed | | ||
| | leftArrowTitle | str | '上一张（左箭头）' | Customize of left arrow title | | ||
| | onClickPrev | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image | | ||
| | onClickNext | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image | | ||
| | onClose | func | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer | | ||
| | onClickImg | func | undefined | Handle click on current image | | ||
| | onClickThumbnail | func | undefined | Handle click on thumbnail | | ||
| | preloadNextImg | bool | true | Whether to preload the next available image | | ||
| | rightArrowTitle | str | '下一张（右箭头）' | Customize right arrow title | | ||
| | showCloseBtn | bool | true | Optionally display a close 'X' button in top right corner | | ||
| | showImgCount | bool | true | Optionally display image index, e.g., "2 of 20" | | ||
| | width | number | 1024 | Maximum width of the carousel; defaults to 1024px | | ||
| | spinnerDisabled | bool | false | Disable Spinner | | ||
| | spinner | func | DefaultSpinner | Spinner component class | | ||
| | spinnerColor | str | '#fff' | Color of spinner | | ||
| | spinnnerSize | num | 50 | Size of spinner | | ||
| | preventAutoScroll | bool | true | Determines whether auto-scrolling is prevented | | ||
| | Property | Type | Default | Description | | ||
| | :------------------ | :----- | :------------- | :------------------------------------------------------------------------------------------------------------------------------ | | ||
| | backdropCloseable | bool | false | Allow users to exit the viewer by clicking the backdrop | | ||
| | closeBtnTitle | str | undefined | Customize close esc title | | ||
| | enableKeyboardInput | bool | true | Supports keyboard input - <code>space, esc</code>, <code> arrow left, arrow up</code>, and <code>arrow right, arrow down</code> | | ||
| | currImg | num | 0 | Required if you want to navigate the imgsViewer, The index of the image to display initially | | ||
| | customControls | arr | undefined | An array of elements to display as custom controls on the top of viewer | | ||
| | imgs | arr | undefined | Required. Array of image objects, See img opts table below | | ||
| | imgCountSeparator | str | ' / ' | Customize separator in the image count | | ||
| | isOpen | bool | false | Required if you want to navigate the imgsViewer, Whether or not the viewer is displayed | | ||
| | leftArrowTitle | str | undefined | Customize of left arrow title | | ||
| | onClickPrev | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the previous image | | ||
| | onClickNext | func | undefined | Required if you want to navigate the imgsViewer, and fired on request of the next image | | ||
| | onClose | func | undefined | Required if you want to close the imgsViewer, and handle closing of the viewer | | ||
| | onClickImg | func | undefined | Handle click on current image | | ||
| | onClickThumbnail | func | undefined | Handle click on thumbnail | | ||
| | preloadNextImg | bool | true | Whether to preload the next available image | | ||
| | rightArrowTitle | str | undefined | Customize right arrow title | | ||
| | showCloseBtn | bool | true | Optionally display a close 'X' button in top right corner | | ||
| | showImgCount | bool | true | Optionally display image index, e.g., "2 of 20" | | ||
| | width | number | 1024 | Maximum width of the carousel; defaults to 1024px | | ||
| | spinnerDisabled | bool | false | Disable Spinner | | ||
| | spinner | func | DefaultSpinner | Spinner component class | | ||
| | spinnerColor | str | '#fff' | Color of spinner | | ||
| | spinnnerSize | num | 50 | Size of spinner | | ||
| | preventAutoScroll | bool | true | Determines whether auto-scrolling is prevented | | ||
@@ -124,0 +124,0 @@ ## Imgs Object |
@@ -1,40 +0,40 @@ | ||
| import PropTypes from "prop-types" | ||
| import React, { Component, Fragment } from "react" | ||
| import { StyleSheet, css } from "aphrodite" | ||
| import ScrollLock from "react-scrolllock" | ||
| import PropTypes from "prop-types"; | ||
| import React, { Component, Fragment } from "react"; | ||
| import { StyleSheet, css } from "aphrodite"; | ||
| import ScrollLock from "react-scrolllock"; | ||
| import defaultTheme from "./theme" | ||
| import Arrow from "./components/Arrow" | ||
| import Container from "./components/Container" | ||
| import Footer from "./components/Footer" | ||
| import Header from "./components/Header" | ||
| import PaginatedThumbnails from "./components/PaginatedThumbnails" | ||
| import Portal from "./components/Portal" | ||
| import DefaultSpinner from "./components/Spinner" | ||
| import defaultTheme from "./theme"; | ||
| import Arrow from "./components/Arrow"; | ||
| import Container from "./components/Container"; | ||
| import Footer from "./components/Footer"; | ||
| import Header from "./components/Header"; | ||
| import PaginatedThumbnails from "./components/PaginatedThumbnails"; | ||
| import Portal from "./components/Portal"; | ||
| import DefaultSpinner from "./components/Spinner"; | ||
| import { bindFunctions, canUseDom, deepMerge } from "./utils/util" | ||
| import { bindFunctions, canUseDom, deepMerge } from "./utils/util"; | ||
| function normalizeSourceSet(data) { | ||
| const sourceSet = data.srcSet || data.srcset | ||
| const sourceSet = data.srcSet || data.srcset; | ||
| if (Array.isArray(sourceSet)) { | ||
| return sourceSet.join() | ||
| return sourceSet.join(); | ||
| } | ||
| return sourceSet | ||
| return sourceSet; | ||
| } | ||
| const ThemeContext = React.createContext(defaultTheme) | ||
| const ThemeContext = React.createContext(defaultTheme); | ||
| class ImgsViewer extends Component { | ||
| constructor(props) { | ||
| super(props) | ||
| super(props); | ||
| this.theme = deepMerge(defaultTheme, this.props.theme) | ||
| this.theme = deepMerge(defaultTheme, this.props.theme); | ||
| this.classes = StyleSheet.create( | ||
| deepMerge(defaultStyles, this.props.theme) | ||
| ) | ||
| ); | ||
| this.state = { | ||
| imgLoaded: false, | ||
| } | ||
| }; | ||
@@ -47,3 +47,3 @@ bindFunctions.call(this, [ | ||
| "handleImgLoaded", | ||
| ]) | ||
| ]); | ||
| } | ||
@@ -53,6 +53,6 @@ componentDidMount() { | ||
| if (this.props.enableKeyboardInput) { | ||
| window.addEventListener("keydown", this.handleKeyboardInput) | ||
| window.addEventListener("keydown", this.handleKeyboardInput); | ||
| } | ||
| if (typeof this.props.currImg === "number") { | ||
| this.preloadImg(this.props.currImg, this.handleImgLoaded) | ||
| this.preloadImg(this.props.currImg, this.handleImgLoaded); | ||
| } | ||
@@ -63,3 +63,3 @@ } | ||
| UNSAFE_componentWillReceiveProps(nextProps) { | ||
| if (!canUseDom) return | ||
| if (!canUseDom) return; | ||
@@ -71,8 +71,8 @@ // const instance = this | ||
| if (nextProps.preloadNextImg) { | ||
| const nextIdx = nextProps.currImg + 1 | ||
| const prevIdx = nextProps.currImg - 1 | ||
| const nextIdx = nextProps.currImg + 1; | ||
| const prevIdx = nextProps.currImg - 1; | ||
| // debugger | ||
| // if (!this) return null | ||
| this.preloadImg(prevIdx) | ||
| this.preloadImg(nextIdx) | ||
| this.preloadImg(prevIdx); | ||
| this.preloadImg(nextIdx); | ||
| } | ||
@@ -87,7 +87,7 @@ // preload currImg | ||
| this.handleImgLoaded | ||
| ) | ||
| ); | ||
| if (img) | ||
| this.setState({ | ||
| imgLoaded: img.complete, | ||
| }) | ||
| }); | ||
| } | ||
@@ -101,13 +101,13 @@ | ||
| ) { | ||
| window.addEventListener("keydown", this.handleKeyboardInput) | ||
| window.addEventListener("keydown", this.handleKeyboardInput); | ||
| } | ||
| if (!nextProps.isOpen && nextProps.enableKeyboardInput) { | ||
| window.removeEventListener("keydown", this.handleKeyboardInput) | ||
| window.removeEventListener("keydown", this.handleKeyboardInput); | ||
| } | ||
| return null | ||
| return null; | ||
| } | ||
| componentWillUnmount() { | ||
| if (this.props.enableKeyboardInput) { | ||
| window.removeEventListener("keydown", this.handleKeyboardInput) | ||
| window.removeEventListener("keydown", this.handleKeyboardInput); | ||
| } | ||
@@ -121,44 +121,44 @@ } | ||
| preloadImg(idx, onload) { | ||
| return this.preloadImgData(this.props.imgs[idx], onload) | ||
| return this.preloadImgData(this.props.imgs[idx], onload); | ||
| } | ||
| preloadImgData(data, onload) { | ||
| if (!data) return | ||
| if (!data) return; | ||
| const img = new Image() | ||
| const sourceSet = normalizeSourceSet(data) | ||
| const img = new Image(); | ||
| const sourceSet = normalizeSourceSet(data); | ||
| // Todo: add error handling for missing imgs | ||
| img.onerror = onload | ||
| img.onload = onload | ||
| img.src = data.src | ||
| img.onerror = onload; | ||
| img.onload = onload; | ||
| img.src = data.src; | ||
| if (sourceSet) img.srcset = sourceSet | ||
| if (sourceSet) img.srcset = sourceSet; | ||
| return img | ||
| return img; | ||
| } | ||
| gotoNext(event) { | ||
| const { currImg, imgs } = this.props | ||
| const { imgLoaded } = this.state | ||
| const { currImg, imgs } = this.props; | ||
| const { imgLoaded } = this.state; | ||
| if (!imgLoaded || currImg === imgs.length - 1) return | ||
| if (!imgLoaded || currImg === imgs.length - 1) return; | ||
| if (event) { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| this.props.onClickNext() | ||
| this.props.onClickNext(); | ||
| } | ||
| gotoPrev(event) { | ||
| const { currImg } = this.props | ||
| const { imgLoaded } = this.state | ||
| const { currImg } = this.props; | ||
| const { imgLoaded } = this.state; | ||
| if (!imgLoaded || currImg === 0) return | ||
| if (!imgLoaded || currImg === 0) return; | ||
| if (event) { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| this.props.onClickPrev() | ||
| this.props.onClickPrev(); | ||
| } | ||
@@ -170,21 +170,21 @@ closeBackdrop(event) { | ||
| ) { | ||
| this.props.onClose() | ||
| this.props.onClose(); | ||
| } | ||
| } | ||
| handleKeyboardInput(event) { | ||
| const { keyCode } = event | ||
| const { keyCode } = event; | ||
| if (keyCode === 37 || keyCode === 33 || keyCode === 38) { | ||
| // left, pageup, up | ||
| this.gotoPrev(event) | ||
| return true | ||
| this.gotoPrev(event); | ||
| return true; | ||
| } else if (keyCode === 39 || keyCode === 34 || keyCode === 40) { | ||
| // right, pagedown, down | ||
| this.gotoNext(event) | ||
| return true | ||
| this.gotoNext(event); | ||
| return true; | ||
| } else if (keyCode === 27 || keyCode === 32) { | ||
| // esc, space | ||
| this.props.onClose() | ||
| return true | ||
| this.props.onClose(); | ||
| return true; | ||
| } | ||
| return false | ||
| return false; | ||
| } | ||
@@ -194,3 +194,3 @@ handleImgLoaded() { | ||
| imgLoaded: true, | ||
| }) | ||
| }); | ||
| } | ||
@@ -203,3 +203,3 @@ | ||
| renderArrowPrev(theme) { | ||
| if (this.props.currImg === 0) return null | ||
| if (this.props.currImg === 0) return null; | ||
@@ -215,6 +215,6 @@ return ( | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
| renderArrowNext(theme) { | ||
| if (this.props.currImg === this.props.imgs.length - 1) return null | ||
| if (this.props.currImg === this.props.imgs.length - 1) return null; | ||
@@ -230,18 +230,17 @@ return ( | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
| renderDialog() { | ||
| const { backdropCloseable, isOpen, showThumbnails, width } = this.props | ||
| const { backdropCloseable, isOpen, showThumbnails, width } = this.props; | ||
| const { imgLoaded } = this.state | ||
| const { imgLoaded } = this.state; | ||
| if (!isOpen) return <span key="closed" /> | ||
| if (!isOpen) return <span key="closed" />; | ||
| const offsetThumbnails = showThumbnails | ||
| ? this.theme.thumbnail.size + this.theme.container.gutter.vertical | ||
| : 0 | ||
| : 0; | ||
| return ( | ||
| <ThemeContext.Consumer> | ||
| {(theme) => ( | ||
@@ -262,3 +261,2 @@ <Container | ||
| > | ||
| {imgLoaded && this.renderHeader(theme)} {this.renderImgs()} | ||
@@ -275,16 +273,16 @@ {this.renderSpinner()} {imgLoaded && this.renderFooter(theme)} | ||
| </ThemeContext.Consumer> | ||
| ) | ||
| ); | ||
| } | ||
| renderImgs() { | ||
| const { currImg, imgs, onClickImg, showThumbnails } = this.props | ||
| const { currImg, imgs, onClickImg, showThumbnails } = this.props; | ||
| const { imgLoaded } = this.state | ||
| const { imgLoaded } = this.state; | ||
| if (!imgs || !imgs.length) return null | ||
| if (!imgs || !imgs.length) return null; | ||
| const img = imgs[currImg] | ||
| const sourceSet = normalizeSourceSet(img) | ||
| const sizes = sourceSet ? "100vw" : null | ||
| const img = imgs[currImg]; | ||
| const sourceSet = normalizeSourceSet(img); | ||
| const sizes = sourceSet ? "100vw" : null; | ||
| const thumbnailsSize = showThumbnails ? this.theme.thumbnail.size : 0 | ||
| const thumbnailsSize = showThumbnails ? this.theme.thumbnail.size : 0; | ||
| const heightOffset = `${ | ||
@@ -295,3 +293,3 @@ this.theme.header.height + | ||
| this.theme.container.gutter.vertical | ||
| }px` | ||
| }px`; | ||
@@ -313,3 +311,3 @@ return ( | ||
| </figure> | ||
| ) | ||
| ); | ||
| } | ||
@@ -325,5 +323,5 @@ renderThumbnails(theme) { | ||
| thumbnailOffset, | ||
| } = this.props | ||
| } = this.props; | ||
| if (!showThumbnails) return null | ||
| if (!showThumbnails) return null; | ||
@@ -340,6 +338,6 @@ return ( | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
| renderHeader(theme) { | ||
| const { closeBtnTitle, customControls, onClose, showCloseBtn } = this.props | ||
| const { closeBtnTitle, customControls, onClose, showCloseBtn } = this.props; | ||
@@ -354,8 +352,8 @@ return ( | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
| renderFooter(theme) { | ||
| const { currImg, imgs, imgCountSeparator, showImgCount } = this.props | ||
| const { currImg, imgs, imgCountSeparator, showImgCount } = this.props; | ||
| if (!imgs || !imgs.length) return null | ||
| if (!imgs || !imgs.length) return null; | ||
@@ -371,10 +369,10 @@ return ( | ||
| /> | ||
| ) | ||
| ); | ||
| } | ||
| renderSpinner() { | ||
| const { spinner, spinnerDisabled, spinnerColor, spinnerSize } = this.props | ||
| const { spinner, spinnerDisabled, spinnerColor, spinnerSize } = this.props; | ||
| const { imgLoaded } = this.state | ||
| const Spinner = spinner | ||
| if (spinnerDisabled) return null | ||
| const { imgLoaded } = this.state; | ||
| const Spinner = spinner; | ||
| if (spinnerDisabled) return null; | ||
| return ( | ||
@@ -389,3 +387,3 @@ <div | ||
| </div> | ||
| ) | ||
| ); | ||
| } | ||
@@ -397,3 +395,3 @@ render() { | ||
| </ThemeContext.Provider> | ||
| ) | ||
| ); | ||
| } | ||
@@ -437,13 +435,10 @@ } | ||
| width: PropTypes.number, | ||
| } | ||
| }; | ||
| ImgsViewer.defaultProps = { | ||
| closeBtnTitle: "关闭（空格键）", | ||
| currImg: 0, | ||
| enableKeyboardInput: true, | ||
| imgCountSeparator: " / ", | ||
| leftArrowTitle: "上一张（向左键）", | ||
| onClickShowNextImg: true, | ||
| preloadNextImg: true, | ||
| preventScroll: true, | ||
| rightArrowTitle: "下一张（向右键）", | ||
| showCloseBtn: true, | ||
@@ -458,3 +453,3 @@ showImgCount: true, | ||
| width: 1024, | ||
| } | ||
| }; | ||
@@ -499,4 +494,4 @@ const defaultStyles = { | ||
| }, | ||
| } | ||
| }; | ||
| export default ImgsViewer | ||
| export default ImgsViewer; |
No alert changes
Worsened metrics
- Total package byte prevSize
- decreased by-0.36%
210356
- Lines of code
- decreased by-0.25%
5185
No dependency changes