react-viewer - npm Package Compare versions

Comparing version 2.9.1 to 2.10.0

dist/index.js

@@ -230,3 +230,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        _this.container = null;
-	        _this.defaultContainer = document.createElement('div');
+	        _this.defaultContainer = null;
+	        if (typeof document !== 'undefined') {
+	            _this.setDefaultContainer();
+	        }
 	        _this.component = null;
@@ -236,2 +239,6 @@ return _this;
 
+	    Viewer.prototype.setDefaultContainer = function setDefaultContainer() {
+	        this.defaultContainer = document.createElement('div');
+	    };
+
 	    Viewer.prototype.renderViewer = function renderViewer() {
@@ -243,2 +250,5 @@ if (this.props.visible || this.component) {
 	                } else {
+	                    if (!this.defaultContainer) {
+	                        this.setDefaultContainer();
+	                    }
 	                    this.container = this.defaultContainer;
@@ -438,3 +448,3 @@ document.body.appendChild(this.container);
 	            height: this.props.height + 'px',
-	            transform: 'translateX(' + (this.props.left !== null ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px)\n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
+	            transform: '\ntranslateX(' + (this.props.left !== null ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px)\n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
 	        };
@@ -538,3 +548,3 @@ var imgClass = (0, _classnames3.default)(this.props.prefixCls + '-image', _defineProperty({
 
-	        _this.handleClose = function (e) {
+	        _this.handleClose = function () {
 	            _this.props.onClose();
@@ -675,4 +685,2 @@ };
 	            var diffY = targetY - imgCenterXY.y;
-	            // when image width is 0, set original width
-	            var reset = false;
 	            var top = 0;
@@ -690,3 +698,2 @@ var left = 0;
 
-	                reset = true;
 	                left = (_this.containerWidth - imgWidth) / 2;
@@ -795,3 +802,3 @@ top = (_this.containerHeight - _this.footerHeight - imgHeight) / 2;
 	        };
-	        _this.handleTransitionEnd = function (e) {
+	        _this.handleTransitionEnd = function () {
 	            if (!_this.state.transitionEnd || _this.state.visibleStart) {
@@ -828,8 +835,12 @@ _this.setState({
 	        _this.handleMouseScroll = function (e) {
+	            if (_this.props.disableMouseZoom) {
+	                return;
+	            }
 	            e.preventDefault();
 	            var direct = 0;
-	            if (e.deltaY === 0) {
+	            var value = e.deltaY;
+	            if (value === 0) {
 	                direct = 0;
 	            } else {
-	                direct = e.deltaY > 0 ? -1 : 1;
+	                direct = value > 0 ? -1 : 1;
 	            }
@@ -916,3 +927,3 @@ if (direct !== 0) {
 	        // prevent default action, a listener is added here instead
-	        this.refs['viewerCore'].addEventListener('mousewheel', this.handleMouseScroll, false);
+	        this.refs['viewerCore'].addEventListener('wheel', this.handleMouseScroll, false);
 	        if (this.containerHeight === 0) {
@@ -1110,3 +1121,4 @@ this.setInlineContainerHeight();
 	    defaultScale: 1,
-	    loop: true
+	    loop: true,
+	    disableMouseZoom: false
 	};
@@ -1113,0 +1125,0 @@ module.exports = exports['default'];

dist/index.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["react-viewer"]=t(require("react"),require("react-dom")):e["react-viewer"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(4),r=o(i);t.default=r.default,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ActionType=void 0;var l=n(1),c=o(l),p=t.ActionType=void 0;!function(e){e[e.zoomIn=1]="zoomIn",e[e.zoomOut=2]="zoomOut",e[e.prev=3]="prev",e[e.next=4]="next",e[e.rotateLeft=5]="rotateLeft",e[e.rotateRight=6]="rotateRight",e[e.reset=7]="reset",e[e.close=8]="close",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY",e[e.download=11]="download"}(p||(t.ActionType=p={}));var u=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(t,e),t.prototype.render=function(){var e="react-viewer-icon";return c.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(c.Component);t.default=u},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=o(l),p=function(e){function t(){return r(this,t),a(this,e.call(this))}return s(t,e),t.prototype.render=function(){var e="circle-loading";return c.createElement("div",{className:"loading-wrap",style:this.props.style},c.createElement("div",{className:e}))},t}(c.Component);t.default=p,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var c=n(1),p=i(c),u=n(12),h=i(u),f=n(6),d=o(f),v=function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.container=null,n.defaultContainer=document.createElement("div"),n.component=null,n}return l(t,e),t.prototype.renderViewer=function(){if(this.props.visible||this.component){this.container||(this.props.container?this.container=this.props.container:(this.container=this.defaultContainer,document.body.appendChild(this.container)));var e=this;h.unstable_renderSubtreeIntoContainer(this,p.createElement(d.default,this.props),this.container,function(){e.component=this})}},t.prototype.removeViewer=function(){if(this.container){var e=this.container;h.unmountComponentAtNode(e),e.parentNode.removeChild(e),this.container=null,this.component=null}},t.prototype.componentWillUnmount=function(){this.props.visible&&this.props.onClose&&this.props.onClose(),this.removeViewer()},t.prototype.componentWillReceiveProps=function(e){this.props.container!==e.container&&(this.component=null,e.container?(this.container&&document.body.removeChild(this.container),this.container=e.container):(this.container=this.defaultContainer,document.body.appendChild(this.container)))},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t.default=v,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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 c(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):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var p=n(1),u=i(p),h=n(3),f=o(h),d=n(10),v=o(d),y=function(e){function t(){s(this,t);var n=l(this,e.call(this));return n.handleResize=function(e){n.props.onResize()},n.handleCanvasMouseDown=function(e){n.props.onCanvasMouseDown(e),n.handleMouseDown(e)},n.handleMouseDown=function(e){n.props.visible&&n.props.drag&&(e.preventDefault(),e.stopPropagation(),n.setState({isMouseDown:!0,mouseX:e.nativeEvent.clientX,mouseY:e.nativeEvent.clientY}))},n.handleMouseMove=function(e){if(n.state.isMouseDown){var t=e.clientX-n.state.mouseX,o=e.clientY-n.state.mouseY;n.setState({mouseX:e.clientX,mouseY:e.clientY}),n.props.onChangeImgState(n.props.width,n.props.height,n.props.top+o,n.props.left+t)}},n.handleMouseUp=function(e){n.setState({isMouseDown:!1})},n.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("click",n.handleMouseUp,!1),document[t]("mousemove",n.handleMouseMove,!1),window[t]("resize",n.handleResize,!1)},n.state={isMouseDown:!1,mouseX:0,mouseY:0},n}return c(t,e),t.prototype.componentDidMount=function(){this.props.drag&&this.bindEvent()},t.prototype.componentWillReceiveProps=function(e){return!this.props.visible&&e.visible&&e.drag?this.bindEvent():this.props.visible&&!e.visible&&(this.handleMouseUp({}),e.drag)?this.bindEvent(!0):this.props.drag&&!e.drag?this.bindEvent(!0):!this.props.drag&&e.drag&&e.visible?this.bindEvent(!0):void 0},t.prototype.componentWillUnmount=function(){this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",height:this.props.height+"px",transform:"translateX("+(null!==this.props.left?this.props.left+"px":"aoto")+") translateY("+this.props.top+"px)\n      rotate("+this.props.rotate+"deg) scaleX("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t=(0,v.default)(this.props.prefixCls+"-image",a({drag:this.props.drag},this.props.prefixCls+"-image-transition",!this.state.isMouseDown)),n={zIndex:this.props.zIndex},o=null;return""!==this.props.imgSrc&&(o=u.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown})),this.props.loading&&(o=u.createElement("div",{style:{display:"flex",height:window.innerHeight-84+"px",justifyContent:"center",alignItems:"center"}},u.createElement(f.default,null))),u.createElement("div",{className:this.props.prefixCls+"-canvas",onMouseDown:this.handleCanvasMouseDown,style:n},o)},t}(u.Component);t.default=y,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}function c(){}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var p=function(){function e(e,t){var n=[],o=!0,i=!1,r=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){i=!0,r=e}finally{try{!o&&s.return&&s.return()}finally{if(i)throw r}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=n(1),h=i(u);n(11);var f=n(5),d=o(f),v=n(7),y=o(v),g=n(8),m=o(g),b=n(2),w=o(b),O=n(9),x=i(O),C=300,I=function(e){function t(n){a(this,t);var o=s(this,e.call(this,n));return o.handleClose=function(e){o.props.onClose()},o.loadImgSuccess=function(e,t,n,i){var r=t,a=n;o.props.defaultSize&&(r=o.props.defaultSize.width,a=o.props.defaultSize.height),e.defaultSize&&(r=e.defaultSize.width,a=e.defaultSize.height);var s=o.getImgWidthHeight(r,a),l=p(s,2),c=l[0],u=l[1],h=(o.containerWidth-c)/2,f=(o.containerHeight-u-o.footerHeight)/2,d=o.props.defaultScale,v=o.props.defaultScale;o.props.noResetZoomAfterChange&&i&&(d=o.state.scaleX,v=o.state.scaleY),o.setState({width:c,height:u,left:h,top:f,imageWidth:t,imageHeight:n,loading:!1,rotate:0,scaleX:d,scaleY:v})},o.handleChangeImg=function(e){if((o.props.loop||!(e>=o.props.images.length||e<0))&&(e>=o.props.images.length&&(e=0),e<0&&(e=o.props.images.length-1),e!==o.state.activeIndex)){if(o.props.onChange){var t=o.getActiveImage(e);o.props.onChange(t,e)}o.loadImg(e,!0)}},o.handleChangeImgState=function(e,t,n,i){o.setState({width:e,height:t,top:n,left:i})},o.handleDefaultAction=function(e){switch(e){case b.ActionType.prev:o.handleChangeImg(o.state.activeIndex-1);break;case b.ActionType.next:o.handleChangeImg(o.state.activeIndex+1);break;case b.ActionType.zoomIn:var t=o.getImageCenterXY();o.handleZoom(t.x,t.y,1,o.props.zoomSpeed);break;case b.ActionType.zoomOut:var n=o.getImageCenterXY();o.handleZoom(n.x,n.y,-1,o.props.zoomSpeed);break;case b.ActionType.rotateLeft:o.handleRotate();break;case b.ActionType.rotateRight:o.handleRotate(!0);break;case b.ActionType.reset:o.loadImg(o.state.activeIndex);break;case b.ActionType.scaleX:o.handleScaleX(-1);break;case b.ActionType.scaleY:o.handleScaleY(-1);break;case b.ActionType.download:o.handleDownload()}},o.handleAction=function(e){if(o.handleDefaultAction(e.actionType),e.onClick){var t=o.getActiveImage();e.onClick(t)}},o.handleDownload=function(){var e=o.getActiveImage();e.downloadUrl&&(location.href=e.downloadUrl)},o.handleScaleX=function(e){o.setState({scaleX:o.state.scaleX*e})},o.handleScaleY=function(e){o.setState({scaleY:o.state.scaleY*e})},o.handleScrollZoom=function(e,t,n){o.handleZoom(e,t,n,o.props.zoomSpeed)},o.handleZoom=function(e,t,n,i){var r=o.getImageCenterXY(),a=e-r.x,s=t-r.y,l=!1,c=0,u=0,h=0,f=0,d=0,v=0;if(0===o.state.width){var y=o.getImgWidthHeight(o.state.imageWidth,o.state.imageHeight),g=p(y,2),m=g[0],b=g[1];l=!0,u=(o.containerWidth-m)/2,c=(o.containerHeight-o.footerHeight-b)/2,h=o.state.width+m,f=o.state.height+b,d=v=1}else{var w=o.state.scaleX>0?1:-1,O=o.state.scaleY>0?1:-1;if(d=o.state.scaleX+i*n*w,v=o.state.scaleY+i*n*O,Math.abs(d)<.1||Math.abs(v)<.1)return;c=o.state.top+-n*s/o.state.scaleX*i*w,u=o.state.left+-n*a/o.state.scaleY*i*O,h=o.state.width,f=o.state.height}o.setState({width:h,scaleX:d,scaleY:v,height:f,top:c,left:u,loading:!1})},o.getImageCenterXY=function(){return{x:o.state.left+o.state.width/2,y:o.state.top+o.state.height/2}},o.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];o.setState({rotate:o.state.rotate+90*(e?1:-1)})},o.handleResize=function(){if(o.setContainerWidthHeight(),o.props.visible){var e=(o.containerWidth-o.state.width)/2,t=(o.containerHeight-o.state.height-o.footerHeight)/2;o.setState({left:e,top:t})}},o.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:o.props.onClose(),n=!0;break;case 37:e.ctrlKey?o.handleDefaultAction(b.ActionType.rotateLeft):o.handleDefaultAction(b.ActionType.prev),n=!0;break;case 39:e.ctrlKey?o.handleDefaultAction(b.ActionType.rotateRight):o.handleDefaultAction(b.ActionType.next),n=!0;break;case 38:o.handleDefaultAction(b.ActionType.zoomIn),n=!0;break;case 40:o.handleDefaultAction(b.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(o.loadImg(o.state.activeIndex),n=!0)}n&&e.preventDefault()},o.handleTransitionEnd=function(e){o.state.transitionEnd&&!o.state.visibleStart||o.setState({visibleStart:!1,transitionEnd:!0})},o.handleCanvasMouseDown=function(e){o.props.onMaskClick(e)},o.getActiveImage=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,t={src:"",alt:"",downloadUrl:""},n=o.props.images||[],i=null;return i=void 0!==e?e:o.state.activeIndex,n.length>0&&i>=0&&(t=n[i]),t},o.handleMouseScroll=function(e){e.preventDefault();var t=0;if(t=0===e.deltaY?0:e.deltaY>0?-1:1,0!==t){var n=e.clientX,i=e.clientY;if(o.props.container){var r=o.props.container.getBoundingClientRect();n-=r.left,i-=r.top}o.handleScrollZoom(n,i,t)}},o.prefixCls="react-viewer",o.state={visible:!1,visibleStart:!1,transitionEnd:!1,activeIndex:o.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0,scaleX:o.props.defaultScale,scaleY:o.props.defaultScale,loading:!1,loadFailed:!1},o.setContainerWidthHeight(),o.footerHeight=x.FOOTER_HEIGHT,o}return l(t,e),t.prototype.setContainerWidthHeight=function(){this.containerWidth=window.innerWidth,this.containerHeight=window.innerHeight,this.props.container&&(this.containerWidth=this.props.container.offsetWidth,this.containerHeight=this.props.container.offsetHeight,this.setInlineContainerHeight())},t.prototype.setInlineContainerHeight=function(){var e=this.refs.viewerCore;e&&(this.containerHeight=e.offsetHeight)},t.prototype.startVisible=function(e){var t=this;this.props.container||(document.body.style.overflow="hidden",document.body.scrollHeight>document.body.clientHeight&&(document.body.style.paddingRight="15px")),this.setState({visibleStart:!0}),setTimeout(function(){t.setState({visible:!0,activeIndex:e}),setTimeout(function(){t.bindEvent(),t.loadImg(e)},300)},10)},t.prototype.componentDidMount=function(){var e=this.refs.viewerCore;e.addEventListener("transitionend",this.handleTransitionEnd,!1),this.refs.viewerCore.addEventListener("mousewheel",this.handleMouseScroll,!1),0===this.containerHeight&&this.setInlineContainerHeight(),this.startVisible(this.state.activeIndex)},t.prototype.getImgWidthHeight=function(e,t){var n=0,o=0,i=.8*this.containerWidth,r=.8*(this.containerHeight-this.footerHeight);return n=Math.min(i,e),o=n/e*t,o>r&&(o=r,n=o/t*e),this.props.noLimitInitializationSize&&(n=e,o=t),[n,o]},t.prototype.loadImg=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=null,i=this.props.images||[];i.length>0&&(o=i[e]);var r=!1,a=new Image;this.setState({activeIndex:e,loading:!0,loadFailed:!1},function(){a.onload=function(){r||t.loadImgSuccess(o,a.width,a.height,n)},a.onerror=function(){if(t.props.defaultImg){t.setState({loadFailed:!0});var i=t.props.defaultImg.width||.5*t.containerWidth,r=t.props.defaultImg.height||.5*t.containerHeight;t.loadImgSuccess(o,i,r,n)}else t.setState({activeIndex:e,imageWidth:0,imageHeight:0,loading:!1})},a.src=o.src,a.complete&&(r=!0,t.loadImgSuccess(o,a.width,a.height,n))})},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),this.props.disableKeyboardSupport||document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillUnmount=function(){this.bindEvent(!0),this.refs.viewerCore.removeEventListener("transitionend",this.handleTransitionEnd,!1)},t.prototype.componentWillReceiveProps=function(e){var t=this;return!this.props.visible&&e.visible?void this.startVisible(e.activeIndex):this.props.visible&&!e.visible?(this.bindEvent(!0),this.handleZoom(this.containerWidth/2,(this.containerHeight-this.footerHeight)/2,-1,(this.state.scaleX>0?1:-1)*this.state.scaleX-.11),void setTimeout(function(){document.body.style.overflow="",document.body.style.paddingRight="",t.setState({visible:!1,transitionEnd:!1,width:0,height:0,scaleX:t.props.defaultScale,scaleY:t.props.defaultScale,rotate:1,imageWidth:0,imageHeight:0,loadFailed:!1})},C)):this.props.activeIndex!==e.activeIndex?void this.handleChangeImg(e.activeIndex):void 0},t.prototype.render=function(){var e={src:"",alt:""},t=1e3;this.props.zIndex&&(t=this.props.zIndex);var n={opacity:this.state.visible?1:0};!this.state.visible&&this.state.transitionEnd&&(n.display="none"),!this.state.visible&&this.state.visibleStart&&(n.display="block"),this.state.visible&&this.state.transitionEnd&&(e=this.getActiveImage());var o=this.prefixCls+" "+this.prefixCls+"-transition";return this.props.container&&(o+=" "+this.prefixCls+"-inline"),h.createElement("div",{ref:"viewerCore",className:o,style:n},h.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:t}}),this.props.noClose||h.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose,style:{zIndex:t+10}},h.createElement(w.default,{type:b.ActionType.close})),h.createElement(d.default,{prefixCls:this.prefixCls,imgSrc:this.state.loadFailed?this.props.defaultImg.src||e.src:e.src,visible:this.props.visible,width:this.state.width,height:this.state.height,top:this.state.top,left:this.state.left,rotate:this.state.rotate,onChangeImgState:this.handleChangeImgState,onResize:this.handleResize,zIndex:t+5,scaleX:this.state.scaleX,scaleY:this.state.scaleY,loading:this.state.loading,drag:this.props.drag,container:this.props.container,onCanvasMouseDown:this.handleCanvasMouseDown}),this.props.noFooter||h.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},this.props.noToolbar||h.createElement(m.default,{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight,attribute:this.props.attribute,zoomable:this.props.zoomable,rotatable:this.props.rotatable,scalable:this.props.scalable,changeable:this.props.changeable,downloadable:this.props.downloadable,noImgDetails:this.props.noImgDetails,toolbars:this.props.customToolbar(g.defaultToolbars)}),this.props.noNavbar||h.createElement(y.default,{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(h.Component);t.default=I,I.defaultProps={visible:!1,onClose:c,images:[],activeIndex:0,zIndex:1e3,drag:!0,attribute:!0,zoomable:!0,rotatable:!0,scalable:!0,onMaskClick:c,changeable:!0,customToolbar:function(e){return e},zoomSpeed:.05,disableKeyboardSupport:!1,noResetZoomAfterChange:!1,noLimitInitializationSize:!1,defaultScale:1,loop:!0},e.exports=t.default},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=o(l),p=function(e){function t(){r(this,t);var n=a(this,e.apply(this,arguments));return n.handleChangeImg=function(e){n.props.activeIndex!==e&&n.props.onChangeImg(e)},n}return s(t,e),t.prototype.render=function(){var e=this,t="calc(50% - "+(this.props.activeIndex+1)+" * 31px)",n={marginLeft:t};return c.createElement("div",{className:this.props.prefixCls+"-navbar"},c.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-list-transition",style:n},this.props.images.map(function(t,n){return c.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:function(){e.handleChangeImg(n)}},c.createElement("img",{src:t.src,alt:t.alt}))})))},t}(c.Component);t.default=p,p.defaultProps={activeIndex:0},e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}function c(e,t){var n=e.filter(function(e){return t.indexOf(e.key)<0});return n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.defaultToolbars=void 0;var p=n(1),u=i(p),h=n(2),f=o(h),d=(t.defaultToolbars=[{key:"zoomIn",actionType:h.ActionType.zoomIn},{key:"zoomOut",actionType:h.ActionType.zoomOut},{key:"prev",actionType:h.ActionType.prev},{key:"reset",actionType:h.ActionType.reset},{key:"next",actionType:h.ActionType.next},{key:"rotateLeft",actionType:h.ActionType.rotateLeft},{key:"rotateRight",actionType:h.ActionType.rotateRight},{key:"scaleX",actionType:h.ActionType.scaleX},{key:"scaleY",actionType:h.ActionType.scaleY},{key:"download",actionType:h.ActionType.download}],function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.renderAction=function(e){var t=null;return"undefined"!=typeof h.ActionType[e.actionType]&&(t=u.createElement(f.default,{type:e.actionType})),e.render&&(t=e.render),u.createElement("li",{key:e.key,className:n.props.prefixCls+"-btn",onClick:function(){n.handleAction(e)},"data-key":e.key},t)},n}return l(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this,t=this.props.attribute?u.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt&&""+this.props.alt,this.props.noImgDetails||u.createElement("span",{className:this.props.prefixCls+"-img-details"},"("+this.props.width+" x "+this.props.height+")")):null,n=this.props.toolbars;return this.props.zoomable||(n=c(n,["zoomIn","zoomOut"])),this.props.changeable||(n=c(n,["prev","next"])),this.props.rotatable||(n=c(n,["rotateLeft","rotateRight"])),this.props.scalable||(n=c(n,["scaleX","scaleY"])),this.props.downloadable||(n=c(n,["download"])),u.createElement("div",null,t,u.createElement("ul",{className:this.props.prefixCls+"-toolbar"},n.map(function(t){return e.renderAction(t)})))},t}(u.Component));t.default=d},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=84;t.FOOTER_HEIGHT=n},function(e,t,n){var o,i;/*!
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports["react-viewer"]=t(require("react"),require("react-dom")):e["react-viewer"]=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={exports:{},id:o,loaded:!1};return e[o].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(4),r=o(i);t.default=r.default,e.exports=t.default},function(t,n){t.exports=e},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.ActionType=void 0;var l=n(1),c=o(l),p=t.ActionType=void 0;!function(e){e[e.zoomIn=1]="zoomIn",e[e.zoomOut=2]="zoomOut",e[e.prev=3]="prev",e[e.next=4]="next",e[e.rotateLeft=5]="rotateLeft",e[e.rotateRight=6]="rotateRight",e[e.reset=7]="reset",e[e.close=8]="close",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY",e[e.download=11]="download"}(p||(t.ActionType=p={}));var u=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(t,e),t.prototype.render=function(){var e="react-viewer-icon";return c.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(c.Component);t.default=u},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=o(l),p=function(e){function t(){return r(this,t),a(this,e.call(this))}return s(t,e),t.prototype.render=function(){var e="circle-loading";return c.createElement("div",{className:"loading-wrap",style:this.props.style},c.createElement("div",{className:e}))},t}(c.Component);t.default=p,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var c=n(1),p=i(c),u=n(12),h=i(u),f=n(6),d=o(f),v=function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.container=null,n.defaultContainer=null,"undefined"!=typeof document&&n.setDefaultContainer(),n.component=null,n}return l(t,e),t.prototype.setDefaultContainer=function(){this.defaultContainer=document.createElement("div")},t.prototype.renderViewer=function(){if(this.props.visible||this.component){this.container||(this.props.container?this.container=this.props.container:(this.defaultContainer||this.setDefaultContainer(),this.container=this.defaultContainer,document.body.appendChild(this.container)));var e=this;h.unstable_renderSubtreeIntoContainer(this,p.createElement(d.default,this.props),this.container,function(){e.component=this})}},t.prototype.removeViewer=function(){if(this.container){var e=this.container;h.unmountComponentAtNode(e),e.parentNode.removeChild(e),this.container=null,this.component=null}},t.prototype.componentWillUnmount=function(){this.props.visible&&this.props.onClose&&this.props.onClose(),this.removeViewer()},t.prototype.componentWillReceiveProps=function(e){this.props.container!==e.container&&(this.component=null,e.container?(this.container&&document.body.removeChild(this.container),this.container=e.container):(this.container=this.defaultContainer,document.body.appendChild(this.container)))},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t.default=v,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function l(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 c(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):r(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var p=n(1),u=i(p),h=n(3),f=o(h),d=n(10),v=o(d),y=function(e){function t(){s(this,t);var n=l(this,e.call(this));return n.handleResize=function(e){n.props.onResize()},n.handleCanvasMouseDown=function(e){n.props.onCanvasMouseDown(e),n.handleMouseDown(e)},n.handleMouseDown=function(e){n.props.visible&&n.props.drag&&(e.preventDefault(),e.stopPropagation(),n.setState({isMouseDown:!0,mouseX:e.nativeEvent.clientX,mouseY:e.nativeEvent.clientY}))},n.handleMouseMove=function(e){if(n.state.isMouseDown){var t=e.clientX-n.state.mouseX,o=e.clientY-n.state.mouseY;n.setState({mouseX:e.clientX,mouseY:e.clientY}),n.props.onChangeImgState(n.props.width,n.props.height,n.props.top+o,n.props.left+t)}},n.handleMouseUp=function(e){n.setState({isMouseDown:!1})},n.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("click",n.handleMouseUp,!1),document[t]("mousemove",n.handleMouseMove,!1),window[t]("resize",n.handleResize,!1)},n.state={isMouseDown:!1,mouseX:0,mouseY:0},n}return c(t,e),t.prototype.componentDidMount=function(){this.props.drag&&this.bindEvent()},t.prototype.componentWillReceiveProps=function(e){return!this.props.visible&&e.visible&&e.drag?this.bindEvent():this.props.visible&&!e.visible&&(this.handleMouseUp({}),e.drag)?this.bindEvent(!0):this.props.drag&&!e.drag?this.bindEvent(!0):!this.props.drag&&e.drag&&e.visible?this.bindEvent(!0):void 0},t.prototype.componentWillUnmount=function(){this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",height:this.props.height+"px",transform:"\ntranslateX("+(null!==this.props.left?this.props.left+"px":"aoto")+") translateY("+this.props.top+"px)\n      rotate("+this.props.rotate+"deg) scaleX("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t=(0,v.default)(this.props.prefixCls+"-image",a({drag:this.props.drag},this.props.prefixCls+"-image-transition",!this.state.isMouseDown)),n={zIndex:this.props.zIndex},o=null;return""!==this.props.imgSrc&&(o=u.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown})),this.props.loading&&(o=u.createElement("div",{style:{display:"flex",height:window.innerHeight-84+"px",justifyContent:"center",alignItems:"center"}},u.createElement(f.default,null))),u.createElement("div",{className:this.props.prefixCls+"-canvas",onMouseDown:this.handleCanvasMouseDown,style:n},o)},t}(u.Component);t.default=y,e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}function c(){}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var p=function(){function e(e,t){var n=[],o=!0,i=!1,r=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){i=!0,r=e}finally{try{!o&&s.return&&s.return()}finally{if(i)throw r}}return n}return function(t,n){if(Array.isArray(t))return t;if(Symbol.iterator in Object(t))return e(t,n);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}(),u=n(1),h=i(u);n(11);var f=n(5),d=o(f),v=n(7),y=o(v),m=n(8),g=o(m),b=n(2),w=o(b),C=n(9),O=i(C),x=300,I=function(e){function t(n){a(this,t);var o=s(this,e.call(this,n));return o.handleClose=function(){o.props.onClose()},o.loadImgSuccess=function(e,t,n,i){var r=t,a=n;o.props.defaultSize&&(r=o.props.defaultSize.width,a=o.props.defaultSize.height),e.defaultSize&&(r=e.defaultSize.width,a=e.defaultSize.height);var s=o.getImgWidthHeight(r,a),l=p(s,2),c=l[0],u=l[1],h=(o.containerWidth-c)/2,f=(o.containerHeight-u-o.footerHeight)/2,d=o.props.defaultScale,v=o.props.defaultScale;o.props.noResetZoomAfterChange&&i&&(d=o.state.scaleX,v=o.state.scaleY),o.setState({width:c,height:u,left:h,top:f,imageWidth:t,imageHeight:n,loading:!1,rotate:0,scaleX:d,scaleY:v})},o.handleChangeImg=function(e){if((o.props.loop||!(e>=o.props.images.length||e<0))&&(e>=o.props.images.length&&(e=0),e<0&&(e=o.props.images.length-1),e!==o.state.activeIndex)){if(o.props.onChange){var t=o.getActiveImage(e);o.props.onChange(t,e)}o.loadImg(e,!0)}},o.handleChangeImgState=function(e,t,n,i){o.setState({width:e,height:t,top:n,left:i})},o.handleDefaultAction=function(e){switch(e){case b.ActionType.prev:o.handleChangeImg(o.state.activeIndex-1);break;case b.ActionType.next:o.handleChangeImg(o.state.activeIndex+1);break;case b.ActionType.zoomIn:var t=o.getImageCenterXY();o.handleZoom(t.x,t.y,1,o.props.zoomSpeed);break;case b.ActionType.zoomOut:var n=o.getImageCenterXY();o.handleZoom(n.x,n.y,-1,o.props.zoomSpeed);break;case b.ActionType.rotateLeft:o.handleRotate();break;case b.ActionType.rotateRight:o.handleRotate(!0);break;case b.ActionType.reset:o.loadImg(o.state.activeIndex);break;case b.ActionType.scaleX:o.handleScaleX(-1);break;case b.ActionType.scaleY:o.handleScaleY(-1);break;case b.ActionType.download:o.handleDownload()}},o.handleAction=function(e){if(o.handleDefaultAction(e.actionType),e.onClick){var t=o.getActiveImage();e.onClick(t)}},o.handleDownload=function(){var e=o.getActiveImage();e.downloadUrl&&(location.href=e.downloadUrl)},o.handleScaleX=function(e){o.setState({scaleX:o.state.scaleX*e})},o.handleScaleY=function(e){o.setState({scaleY:o.state.scaleY*e})},o.handleScrollZoom=function(e,t,n){o.handleZoom(e,t,n,o.props.zoomSpeed)},o.handleZoom=function(e,t,n,i){var r=o.getImageCenterXY(),a=e-r.x,s=t-r.y,l=0,c=0,u=0,h=0,f=0,d=0;if(0===o.state.width){var v=o.getImgWidthHeight(o.state.imageWidth,o.state.imageHeight),y=p(v,2),m=y[0],g=y[1];c=(o.containerWidth-m)/2,l=(o.containerHeight-o.footerHeight-g)/2,u=o.state.width+m,h=o.state.height+g,f=d=1}else{var b=o.state.scaleX>0?1:-1,w=o.state.scaleY>0?1:-1;if(f=o.state.scaleX+i*n*b,d=o.state.scaleY+i*n*w,Math.abs(f)<.1||Math.abs(d)<.1)return;l=o.state.top+-n*s/o.state.scaleX*i*b,c=o.state.left+-n*a/o.state.scaleY*i*w,u=o.state.width,h=o.state.height}o.setState({width:u,scaleX:f,scaleY:d,height:h,top:l,left:c,loading:!1})},o.getImageCenterXY=function(){return{x:o.state.left+o.state.width/2,y:o.state.top+o.state.height/2}},o.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];o.setState({rotate:o.state.rotate+90*(e?1:-1)})},o.handleResize=function(){if(o.setContainerWidthHeight(),o.props.visible){var e=(o.containerWidth-o.state.width)/2,t=(o.containerHeight-o.state.height-o.footerHeight)/2;o.setState({left:e,top:t})}},o.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:o.props.onClose(),n=!0;break;case 37:e.ctrlKey?o.handleDefaultAction(b.ActionType.rotateLeft):o.handleDefaultAction(b.ActionType.prev),n=!0;break;case 39:e.ctrlKey?o.handleDefaultAction(b.ActionType.rotateRight):o.handleDefaultAction(b.ActionType.next),n=!0;break;case 38:o.handleDefaultAction(b.ActionType.zoomIn),n=!0;break;case 40:o.handleDefaultAction(b.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(o.loadImg(o.state.activeIndex),n=!0)}n&&e.preventDefault()},o.handleTransitionEnd=function(){o.state.transitionEnd&&!o.state.visibleStart||o.setState({visibleStart:!1,transitionEnd:!0})},o.handleCanvasMouseDown=function(e){o.props.onMaskClick(e)},o.getActiveImage=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:void 0,t={src:"",alt:"",downloadUrl:""},n=o.props.images||[],i=null;return i=void 0!==e?e:o.state.activeIndex,n.length>0&&i>=0&&(t=n[i]),t},o.handleMouseScroll=function(e){if(!o.props.disableMouseZoom){e.preventDefault();var t=0,n=e.deltaY;if(t=0===n?0:n>0?-1:1,0!==t){var i=e.clientX,r=e.clientY;if(o.props.container){var a=o.props.container.getBoundingClientRect();i-=a.left,r-=a.top}o.handleScrollZoom(i,r,t)}}},o.prefixCls="react-viewer",o.state={visible:!1,visibleStart:!1,transitionEnd:!1,activeIndex:o.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0,scaleX:o.props.defaultScale,scaleY:o.props.defaultScale,loading:!1,loadFailed:!1},o.setContainerWidthHeight(),o.footerHeight=O.FOOTER_HEIGHT,o}return l(t,e),t.prototype.setContainerWidthHeight=function(){this.containerWidth=window.innerWidth,this.containerHeight=window.innerHeight,this.props.container&&(this.containerWidth=this.props.container.offsetWidth,this.containerHeight=this.props.container.offsetHeight,this.setInlineContainerHeight())},t.prototype.setInlineContainerHeight=function(){var e=this.refs.viewerCore;e&&(this.containerHeight=e.offsetHeight)},t.prototype.startVisible=function(e){var t=this;this.props.container||(document.body.style.overflow="hidden",document.body.scrollHeight>document.body.clientHeight&&(document.body.style.paddingRight="15px")),this.setState({visibleStart:!0}),setTimeout(function(){t.setState({visible:!0,activeIndex:e}),setTimeout(function(){t.bindEvent(),t.loadImg(e)},300)},10)},t.prototype.componentDidMount=function(){var e=this.refs.viewerCore;e.addEventListener("transitionend",this.handleTransitionEnd,!1),this.refs.viewerCore.addEventListener("wheel",this.handleMouseScroll,!1),0===this.containerHeight&&this.setInlineContainerHeight(),this.startVisible(this.state.activeIndex)},t.prototype.getImgWidthHeight=function(e,t){var n=0,o=0,i=.8*this.containerWidth,r=.8*(this.containerHeight-this.footerHeight);return n=Math.min(i,e),o=n/e*t,o>r&&(o=r,n=o/t*e),this.props.noLimitInitializationSize&&(n=e,o=t),[n,o]},t.prototype.loadImg=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=null,i=this.props.images||[];i.length>0&&(o=i[e]);var r=!1,a=new Image;this.setState({activeIndex:e,loading:!0,loadFailed:!1},function(){a.onload=function(){r||t.loadImgSuccess(o,a.width,a.height,n)},a.onerror=function(){if(t.props.defaultImg){t.setState({loadFailed:!0});var i=t.props.defaultImg.width||.5*t.containerWidth,r=t.props.defaultImg.height||.5*t.containerHeight;t.loadImgSuccess(o,i,r,n)}else t.setState({activeIndex:e,imageWidth:0,imageHeight:0,loading:!1})},a.src=o.src,a.complete&&(r=!0,t.loadImgSuccess(o,a.width,a.height,n))})},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),this.props.disableKeyboardSupport||document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillUnmount=function(){this.bindEvent(!0),this.refs.viewerCore.removeEventListener("transitionend",this.handleTransitionEnd,!1)},t.prototype.componentWillReceiveProps=function(e){var t=this;return!this.props.visible&&e.visible?void this.startVisible(e.activeIndex):this.props.visible&&!e.visible?(this.bindEvent(!0),this.handleZoom(this.containerWidth/2,(this.containerHeight-this.footerHeight)/2,-1,(this.state.scaleX>0?1:-1)*this.state.scaleX-.11),void setTimeout(function(){document.body.style.overflow="",document.body.style.paddingRight="",t.setState({visible:!1,transitionEnd:!1,width:0,height:0,scaleX:t.props.defaultScale,scaleY:t.props.defaultScale,rotate:1,imageWidth:0,imageHeight:0,loadFailed:!1})},x)):this.props.activeIndex!==e.activeIndex?void this.handleChangeImg(e.activeIndex):void 0},t.prototype.render=function(){var e={src:"",alt:""},t=1e3;this.props.zIndex&&(t=this.props.zIndex);var n={opacity:this.state.visible?1:0};!this.state.visible&&this.state.transitionEnd&&(n.display="none"),!this.state.visible&&this.state.visibleStart&&(n.display="block"),this.state.visible&&this.state.transitionEnd&&(e=this.getActiveImage());var o=this.prefixCls+" "+this.prefixCls+"-transition";return this.props.container&&(o+=" "+this.prefixCls+"-inline"),h.createElement("div",{ref:"viewerCore",className:o,style:n},h.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:t}}),this.props.noClose||h.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose,style:{zIndex:t+10}},h.createElement(w.default,{type:b.ActionType.close})),h.createElement(d.default,{prefixCls:this.prefixCls,imgSrc:this.state.loadFailed?this.props.defaultImg.src||e.src:e.src,visible:this.props.visible,width:this.state.width,height:this.state.height,top:this.state.top,left:this.state.left,rotate:this.state.rotate,onChangeImgState:this.handleChangeImgState,onResize:this.handleResize,zIndex:t+5,scaleX:this.state.scaleX,scaleY:this.state.scaleY,loading:this.state.loading,drag:this.props.drag,container:this.props.container,onCanvasMouseDown:this.handleCanvasMouseDown}),this.props.noFooter||h.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},this.props.noToolbar||h.createElement(g.default,{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight,attribute:this.props.attribute,zoomable:this.props.zoomable,rotatable:this.props.rotatable,scalable:this.props.scalable,changeable:this.props.changeable,downloadable:this.props.downloadable,noImgDetails:this.props.noImgDetails,toolbars:this.props.customToolbar(m.defaultToolbars)}),this.props.noNavbar||h.createElement(y.default,{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(h.Component);t.default=I,I.defaultProps={visible:!1,onClose:c,images:[],activeIndex:0,zIndex:1e3,drag:!0,attribute:!0,zoomable:!0,rotatable:!0,scalable:!0,onMaskClick:c,changeable:!0,customToolbar:function(e){return e},zoomSpeed:.05,disableKeyboardSupport:!1,noResetZoomAfterChange:!1,noLimitInitializationSize:!1,defaultScale:1,loop:!0,disableMouseZoom:!1},e.exports=t.default},function(e,t,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function i(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(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 s(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):i(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var l=n(1),c=o(l),p=function(e){function t(){r(this,t);var n=a(this,e.apply(this,arguments));return n.handleChangeImg=function(e){n.props.activeIndex!==e&&n.props.onChangeImg(e)},n}return s(t,e),t.prototype.render=function(){var e=this,t="calc(50% - "+(this.props.activeIndex+1)+" * 31px)",n={marginLeft:t};return c.createElement("div",{className:this.props.prefixCls+"-navbar"},c.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-list-transition",style:n},this.props.images.map(function(t,n){return c.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:function(){e.handleChangeImg(n)}},c.createElement("img",{src:t.src,alt:t.alt}))})))},t}(c.Component);t.default=p,p.defaultProps={activeIndex:0},e.exports=t.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function i(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t.default=e,t}function r(e,t){for(var n=Object.getOwnPropertyNames(t),o=0;o<n.length;o++){var i=n[o],r=Object.getOwnPropertyDescriptor(t,i);r&&r.configurable&&void 0===e[i]&&Object.defineProperty(e,i,r)}return e}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(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 l(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):r(e,t))}function c(e,t){var n=e.filter(function(e){return t.indexOf(e.key)<0});return n}Object.defineProperty(t,"__esModule",{value:!0}),t.default=t.defaultToolbars=void 0;var p=n(1),u=i(p),h=n(2),f=o(h),d=(t.defaultToolbars=[{key:"zoomIn",actionType:h.ActionType.zoomIn},{key:"zoomOut",actionType:h.ActionType.zoomOut},{key:"prev",actionType:h.ActionType.prev},{key:"reset",actionType:h.ActionType.reset},{key:"next",actionType:h.ActionType.next},{key:"rotateLeft",actionType:h.ActionType.rotateLeft},{key:"rotateRight",actionType:h.ActionType.rotateRight},{key:"scaleX",actionType:h.ActionType.scaleX},{key:"scaleY",actionType:h.ActionType.scaleY},{key:"download",actionType:h.ActionType.download}],function(e){function t(){a(this,t);var n=s(this,e.call(this));return n.renderAction=function(e){var t=null;return"undefined"!=typeof h.ActionType[e.actionType]&&(t=u.createElement(f.default,{type:e.actionType})),e.render&&(t=e.render),u.createElement("li",{key:e.key,className:n.props.prefixCls+"-btn",onClick:function(){n.handleAction(e)},"data-key":e.key},t)},n}return l(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this,t=this.props.attribute?u.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt&&""+this.props.alt,this.props.noImgDetails||u.createElement("span",{className:this.props.prefixCls+"-img-details"},"("+this.props.width+" x "+this.props.height+")")):null,n=this.props.toolbars;return this.props.zoomable||(n=c(n,["zoomIn","zoomOut"])),this.props.changeable||(n=c(n,["prev","next"])),this.props.rotatable||(n=c(n,["rotateLeft","rotateRight"])),this.props.scalable||(n=c(n,["scaleX","scaleY"])),this.props.downloadable||(n=c(n,["download"])),u.createElement("div",null,t,u.createElement("ul",{className:this.props.prefixCls+"-toolbar"},n.map(function(t){return e.renderAction(t)})))},t}(u.Component));t.default=d},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=84;t.FOOTER_HEIGHT=n},function(e,t,n){var o,i;/*!
 	  Copyright (c) 2017 Jed Watson.
@@ -3,0 +3,0 @@ Licensed under the MIT License (MIT), see

lib/Viewer.d.ts

@@ -8,2 +8,3 @@ import * as React from 'react';
     constructor();
+    setDefaultContainer(): void;
     renderViewer(): void;
@@ -10,0 +11,0 @@ removeViewer(): void;

lib/Viewer.js

@@ -45,3 +45,6 @@ 'use strict';
         _this.container = null;
-        _this.defaultContainer = document.createElement('div');
+        _this.defaultContainer = null;
+        if (typeof document !== 'undefined') {
+            _this.setDefaultContainer();
+        }
         _this.component = null;
@@ -51,2 +54,6 @@ return _this;
 
+    Viewer.prototype.setDefaultContainer = function setDefaultContainer() {
+        this.defaultContainer = document.createElement('div');
+    };
+
     Viewer.prototype.renderViewer = function renderViewer() {
@@ -58,2 +65,5 @@ if (this.props.visible || this.component) {
                 } else {
+                    if (!this.defaultContainer) {
+                        this.setDefaultContainer();
+                    }
                     this.container = this.defaultContainer;
@@ -60,0 +70,0 @@ document.body.appendChild(this.container);

lib/ViewerCanvas.js

@@ -136,3 +136,3 @@ 'use strict';
             height: this.props.height + 'px',
-            transform: 'translateX(' + (this.props.left !== null ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px)\n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
+            transform: '\ntranslateX(' + (this.props.left !== null ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px)\n      rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
         };
@@ -139,0 +139,0 @@ var imgClass = (0, _classnames3.default)(this.props.prefixCls + '-image', (0, _defineProperty3.default)({

lib/ViewerCore.d.ts

@@ -31,3 +31,3 @@ import * as React from 'react';
     setInlineContainerHeight(): void;
-    handleClose: (e: any) => void;
+    handleClose: () => void;
     startVisible(activeIndex: number): void;
@@ -54,3 +54,3 @@ componentDidMount(): void;
     handleKeydown: (e: any) => void;
-    handleTransitionEnd: (e: any) => void;
+    handleTransitionEnd: () => void;
     bindEvent(remove?: boolean): void;
@@ -57,0 +57,0 @@ componentWillUnmount(): void;

lib/ViewerCore.js

@@ -65,3 +65,3 @@ 'use strict';
 
-        _this.handleClose = function (e) {
+        _this.handleClose = function () {
             _this.props.onClose();
@@ -202,4 +202,2 @@ };
             var diffY = targetY - imgCenterXY.y;
-            // when image width is 0, set original width
-            var reset = false;
             var top = 0;
@@ -217,3 +215,2 @@ var left = 0;
 
-                reset = true;
                 left = (_this.containerWidth - imgWidth) / 2;
@@ -322,3 +319,3 @@ top = (_this.containerHeight - _this.footerHeight - imgHeight) / 2;
         };
-        _this.handleTransitionEnd = function (e) {
+        _this.handleTransitionEnd = function () {
             if (!_this.state.transitionEnd || _this.state.visibleStart) {
@@ -355,8 +352,12 @@ _this.setState({
         _this.handleMouseScroll = function (e) {
+            if (_this.props.disableMouseZoom) {
+                return;
+            }
             e.preventDefault();
             var direct = 0;
-            if (e.deltaY === 0) {
+            var value = e.deltaY;
+            if (value === 0) {
                 direct = 0;
             } else {
-                direct = e.deltaY > 0 ? -1 : 1;
+                direct = value > 0 ? -1 : 1;
             }
@@ -443,3 +444,3 @@ if (direct !== 0) {
         // prevent default action, a listener is added here instead
-        this.refs['viewerCore'].addEventListener('mousewheel', this.handleMouseScroll, false);
+        this.refs['viewerCore'].addEventListener('wheel', this.handleMouseScroll, false);
         if (this.containerHeight === 0) {
@@ -637,4 +638,5 @@ this.setInlineContainerHeight();
     defaultScale: 1,
-    loop: true
+    loop: true,
+    disableMouseZoom: false
 };
 module.exports = exports['default'];

lib/ViewerProps.d.ts

@@ -67,3 +67,4 @@ /// <reference types="react" />
     onChange?: (activeImage: ImageDecorator, index: number) => void;
+    disableMouseZoom?: boolean;
 }
 export default ViewerProps;

package.json

 {
   "name": "react-viewer",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "react image viewer",
@@ -69,3 +69,3 @@ "main": "dist/index",
     "ts-jest": "^23.1.3",
-    "tslint": "^3.15.1",
+    "tslint": "^5.18.0",
     "typescript": "^2.6.2",
@@ -72,0 +72,0 @@ "webpack": "^1.13.2",

README.md

@@ -80,2 +80,3 @@ # react-viewer
 | loop         | boolean      |  true   | whether enable image loop | false |
+| disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |
 
@@ -82,0 +83,0 @@ ### ImageDecorator

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

213166

increased by0.51%

Lines of code

3205

increased by0.79%

Number of lines in readme file

131

increased by0.77%

No dependency changes