react-viewer - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

dist/index.js

@@ -364,5 +364,8 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        }
+	        var style = {
+	            zIndex: this.props.zIndex
+	        };
 	        return React.createElement(
 	            'div',
-	            { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown },
+	            { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown, style: style },
 	            React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown })
@@ -590,15 +593,19 @@ );
 	        }
+	        var zIndex = 1000;
+	        if (this.props.zIndex) {
+	            zIndex = this.props.zIndex;
+	        }
 	        return React.createElement(
 	            'div',
 	            { className: this.prefixCls, style: { display: this.props.visible ? 'block' : 'none' } },
-	            React.createElement('div', { className: this.prefixCls + '-mask' }),
+	            React.createElement('div', { className: this.prefixCls + '-mask', style: { zIndex: zIndex } }),
 	            React.createElement(
 	                'div',
-	                { className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this) },
+	                { className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this), style: { zIndex: zIndex + 10 } },
 	                React.createElement(_Icon2.default, { type: _Icon.ActionType.close })
 	            ),
-	            React.createElement(_ViewerCavans2.default, { prefixCls: this.prefixCls, imgSrc: activeImg.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, onZoom: this.handleZoom }),
+	            React.createElement(_ViewerCavans2.default, { prefixCls: this.prefixCls, imgSrc: activeImg.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, onZoom: this.handleZoom, zIndex: zIndex + 5 }),
 	            React.createElement(
 	                'div',
-	                { className: this.prefixCls + '-footer' },
+	                { className: this.prefixCls + '-footer', style: { zIndex: zIndex + 5 } },
 	                React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight }),
@@ -619,3 +626,4 @@ React.createElement(_ViewerNav2.default, { prefixCls: this.prefixCls, images: this.props.images, activeIndex: this.state.activeIndex, onChangeImg: this.handleChangeImg })
 	    images: [],
-	    activeIndex: 0
+	    activeIndex: 0,
+	    zIndex: 1000
 	};
@@ -622,0 +630,0 @@ module.exports = exports['default'];

dist/index.min.js

@@ -1,1 +0,1 @@
-!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(3),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 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 a(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 c=n(1),l=o(c),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"}(p||(t.ActionType=p={}));var u=function(e){function t(){return r(this,t),s(this,e.apply(this,arguments))}return a(t,e),t.prototype.render=function(){var e="react-viewer-icon";return l.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(l.Component);t["default"]=u},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 s(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 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 l=n(1),p=i(l),u=n(9),h=i(u),f=n(5),d=o(f),m=function(e){function t(){s(this,t);var n=a(this,e.call(this));return n.container=null,n.component=null,n}return c(t,e),t.prototype.renderViewer=function(){var e=this;(this.props.visible||this.component)&&!function(){e.container||(e.container=document.createElement("div")),document.body.appendChild(e.container);var t=e;h.unstable_renderSubtreeIntoContainer(e,p.createElement(d["default"],e.props),e.container,function(){t.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.removeViewer()):this.removeViewer()},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t["default"]=m,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 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 a(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 c=n(1),l=o(c),p=function(e){function t(){r(this,t);var n=s(this,e.call(this));return n.state={isMouseDown:!1,mouseX:0,mouseY:0},n.handleMouseScroll=n.handleMouseScroll.bind(n),n.handleMouseDown=n.handleMouseDown.bind(n),n.bindEvent=n.bindEvent.bind(n),n.handleMouseMove=n.handleMouseMove.bind(n),n.handleMouseUp=n.handleMouseUp.bind(n),n.handleResize=n.handleResize.bind(n),n}return a(t,e),t.prototype.componentDidMount=function(){this.bindEvent()},t.prototype.handleResize=function(e){this.props.onResize()},t.prototype.handleMouseDown=function(e){e.preventDefault(),e.stopPropagation(),this.setState({isMouseDown:!0,mouseX:e.nativeEvent.pageX,mouseY:e.nativeEvent.pageY})},t.prototype.handleMouseMove=function(e){if(this.state.isMouseDown){var t=e.x-this.state.mouseX,n=e.y-this.state.mouseY;this.setState({mouseX:e.x,mouseY:e.y}),this.props.onChangeImgState(this.props.width,this.props.height,this.props.top+n,this.props.left+t)}},t.prototype.handleMouseUp=function(e){this.setState({isMouseDown:!1})},t.prototype.handleMouseScroll=function(e){var t=0;if(e.wheelDelta?t=e.wheelDelta>0?1:-1:e.detail&&(t=e.detail>0?1:-1),0!==t){var n=e.pageX,o=e.pageY;this.props.onZoom(n,o,t)}},t.prototype.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("mousewheel",this.handleMouseScroll,!1),document[t]("click",this.handleMouseUp,!1),document[t]("mousemove",this.handleMouseMove,!1),window[t]("resize",this.handleResize,!1)},t.prototype.componentWillReceiveProps=function(e){!this.props.visible&&e.visible&&this.bindEvent(),this.props.visible&&!e.visible&&this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",marginTop:this.props.top+"px",marginLeft:this.props.left?this.props.left+"px":"auto",transform:"rotate("+this.props.rotate+"deg) scaleX(1) scaleY(1)"},t="";return this.state.isMouseDown||(t=this.props.prefixCls+"-transition"),l.createElement("div",{className:this.props.prefixCls+"-cavans",onMouseDown:this.handleMouseDown},l.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown}))},t}(l.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 s(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 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))}function l(){}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var p=n(1),u=i(p);n(8);var h=n(4),f=o(h),d=n(6),m=o(d),y=n(7),v=o(y),b=n(2),g=o(b),w=function(e){function t(n){s(this,t);var o=a(this,e.call(this,n));return o.prefixCls="react-viewer",o.state={activeIndex:o.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0},o.handleChangeImg=o.handleChangeImg.bind(o),o.handleChangeImgState=o.handleChangeImgState.bind(o),o.handleAction=o.handleAction.bind(o),o.handleResize=o.handleResize.bind(o),o.handleZoom=o.handleZoom.bind(o),o.handleRotate=o.handleRotate.bind(o),o}return c(t,e),t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.componentDidMount=function(){this.loadImg(this.state.activeIndex)},t.prototype.loadImg=function(e){var t=this,n=this.props.images[e].src,o=new Image;o.src=n,o.onload=function(){var n=0,i=0,r=o.width,s=o.height,a=r/s,c=84;a>1?(n=Math.min(.9*window.innerWidth,r),i=n/r*s):(i=Math.min(.8*(window.innerHeight-c),s),n=i/s*r);var l=(window.innerWidth-n)/2,p=(window.innerHeight-i-c)/2;t.setState({activeIndex:e,width:n,height:i,left:l,top:p,rotate:0,imageWidth:r,imageHeight:s})},o.onerror=function(){t.setState({activeIndex:e,width:0,height:0,left:0,top:0,rotate:0,imageWidth:0,imageHeight:0})}},t.prototype.handleChangeImg=function(e){this.loadImg(e)},t.prototype.handleChangeImgState=function(e,t,n,o){this.setState({width:e,height:t,top:n,left:o})},t.prototype.handleAction=function(e){switch(e){case b.ActionType.prev:this.state.activeIndex-1>=0&&this.loadImg(this.state.activeIndex-1);break;case b.ActionType.next:this.state.activeIndex+1<this.props.images.length&&this.loadImg(this.state.activeIndex+1);break;case b.ActionType.zoomIn:this.handleZoom(this.state.left+this.state.width/2,this.state.top+this.state.height/2,1);break;case b.ActionType.zoomOut:this.handleZoom(this.state.left+this.state.width/2,this.state.top+this.state.height/2,-1);break;case b.ActionType.rotateLeft:this.handleRotate();break;case b.ActionType.rotateRight:this.handleRotate(!0);break;case b.ActionType.reset:this.loadImg(this.state.activeIndex)}},t.prototype.handleZoom=function(e,t,n){var o=e-this.state.left,i=t-this.state.height;this.setState({width:this.state.width+n*this.state.width*.05,height:this.state.height+n*this.state.height*.05,top:this.state.top+-n*i*.05,left:this.state.left+-n*o*.05})},t.prototype.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setState({rotate:this.state.rotate+90*(e?1:-1)})},t.prototype.handleResize=function(){this.loadImg(this.state.activeIndex)},t.prototype.componentWillReceiveProps=function(e){(this.state.activeIndex!==e.activeIndex||!this.props.visible&&e.visible)&&this.loadImg(e.activeIndex)},t.prototype.render=function(){var e={src:"",alt:""};return this.props.images.length>0&&(e=this.props.images[this.state.activeIndex]),u.createElement("div",{className:this.prefixCls,style:{display:this.props.visible?"block":"none"}},u.createElement("div",{className:this.prefixCls+"-mask"}),u.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose.bind(this)},u.createElement(g["default"],{type:b.ActionType.close})),u.createElement(f["default"],{prefixCls:this.prefixCls,imgSrc: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,onZoom:this.handleZoom}),u.createElement("div",{className:this.prefixCls+"-footer"},u.createElement(v["default"],{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight}),u.createElement(m["default"],{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(u.Component);t["default"]=w,w.defaultProps={visible:!1,onClose:l,images:[],activeIndex: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 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 a(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 c=n(1),l=o(c),p=function(e){function t(){return r(this,t),s(this,e.apply(this,arguments))}return a(t,e),t.prototype.handleChangeImg=function(e){this.props.onChangeImg(e)},t.prototype.render=function(){var e=this,t=1.5*(Math.ceil(this.props.images.length/2)-this.props.activeIndex-1)*30,n={marginLeft:t+"px"};return l.createElement("div",{className:this.props.prefixCls+"-navbar"},l.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-transition",style:n},this.props.images.map(function(t,n){return l.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:e.handleChangeImg.bind(e,n)},l.createElement("img",{src:t.src,alt:t.alt}))})))},t}(l.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 s(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 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 l=n(1),p=i(l),u=n(2),h=o(u),f=function(e){function t(){return s(this,t),a(this,e.call(this))}return c(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this;return p.createElement("div",null,p.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt+"("+this.props.width+" x "+this.props.height+")"),p.createElement("ul",{className:this.props.prefixCls+"-toolbar"},p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.zoomIn)}},p.createElement(h["default"],{type:u.ActionType.zoomIn})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.zoomOut)}},p.createElement(h["default"],{type:u.ActionType.zoomOut})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.prev)}},p.createElement(h["default"],{type:u.ActionType.prev})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.reset)}},p.createElement(h["default"],{type:u.ActionType.reset})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.next)}},p.createElement(h["default"],{type:u.ActionType.next})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.rotateLeft)}},p.createElement(h["default"],{type:u.ActionType.rotateLeft})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.rotateRight)}},p.createElement(h["default"],{type:u.ActionType.rotateRight}))))},t}(p.Component);t["default"]=f,e.exports=t["default"]},function(e,t){},function(e,n){e.exports=t}])});
+!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(3),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 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 a(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"}(p||(t.ActionType=p={}));var u=function(e){function t(){return r(this,t),s(this,e.apply(this,arguments))}return a(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){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 s(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 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(9),h=i(u),f=n(5),d=o(f),m=function(e){function t(){s(this,t);var n=a(this,e.call(this));return n.container=null,n.component=null,n}return l(t,e),t.prototype.renderViewer=function(){var e=this;(this.props.visible||this.component)&&!function(){e.container||(e.container=document.createElement("div")),document.body.appendChild(e.container);var t=e;h.unstable_renderSubtreeIntoContainer(e,p.createElement(d["default"],e.props),e.container,function(){t.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.removeViewer()):this.removeViewer()},t.prototype.componentDidMount=function(){this.renderViewer()},t.prototype.componentDidUpdate=function(){this.renderViewer()},t.prototype.render=function(){return null},t}(p.Component);t["default"]=m,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 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 a(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=s(this,e.call(this));return n.state={isMouseDown:!1,mouseX:0,mouseY:0},n.handleMouseScroll=n.handleMouseScroll.bind(n),n.handleMouseDown=n.handleMouseDown.bind(n),n.bindEvent=n.bindEvent.bind(n),n.handleMouseMove=n.handleMouseMove.bind(n),n.handleMouseUp=n.handleMouseUp.bind(n),n.handleResize=n.handleResize.bind(n),n}return a(t,e),t.prototype.componentDidMount=function(){this.bindEvent()},t.prototype.handleResize=function(e){this.props.onResize()},t.prototype.handleMouseDown=function(e){e.preventDefault(),e.stopPropagation(),this.setState({isMouseDown:!0,mouseX:e.nativeEvent.pageX,mouseY:e.nativeEvent.pageY})},t.prototype.handleMouseMove=function(e){if(this.state.isMouseDown){var t=e.x-this.state.mouseX,n=e.y-this.state.mouseY;this.setState({mouseX:e.x,mouseY:e.y}),this.props.onChangeImgState(this.props.width,this.props.height,this.props.top+n,this.props.left+t)}},t.prototype.handleMouseUp=function(e){this.setState({isMouseDown:!1})},t.prototype.handleMouseScroll=function(e){var t=0;if(e.wheelDelta?t=e.wheelDelta>0?1:-1:e.detail&&(t=e.detail>0?1:-1),0!==t){var n=e.pageX,o=e.pageY;this.props.onZoom(n,o,t)}},t.prototype.bindEvent=function(e){var t="addEventListener";e&&(t="removeEventListener"),document[t]("mousewheel",this.handleMouseScroll,!1),document[t]("click",this.handleMouseUp,!1),document[t]("mousemove",this.handleMouseMove,!1),window[t]("resize",this.handleResize,!1)},t.prototype.componentWillReceiveProps=function(e){!this.props.visible&&e.visible&&this.bindEvent(),this.props.visible&&!e.visible&&this.bindEvent(!0)},t.prototype.render=function(){var e={width:this.props.width+"px",marginTop:this.props.top+"px",marginLeft:this.props.left?this.props.left+"px":"auto",transform:"rotate("+this.props.rotate+"deg) scaleX(1) scaleY(1)"},t="";this.state.isMouseDown||(t=this.props.prefixCls+"-transition");var n={zIndex:this.props.zIndex};return c.createElement("div",{className:this.props.prefixCls+"-cavans",onMouseDown:this.handleMouseDown,style:n},c.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown}))},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 s(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 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=n(1),u=i(p);n(8);var h=n(4),f=o(h),d=n(6),m=o(d),y=n(7),v=o(y),b=n(2),g=o(b),w=function(e){function t(n){s(this,t);var o=a(this,e.call(this,n));return o.prefixCls="react-viewer",o.state={activeIndex:o.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0},o.handleChangeImg=o.handleChangeImg.bind(o),o.handleChangeImgState=o.handleChangeImgState.bind(o),o.handleAction=o.handleAction.bind(o),o.handleResize=o.handleResize.bind(o),o.handleZoom=o.handleZoom.bind(o),o.handleRotate=o.handleRotate.bind(o),o}return l(t,e),t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.componentDidMount=function(){this.loadImg(this.state.activeIndex)},t.prototype.loadImg=function(e){var t=this,n=this.props.images[e].src,o=new Image;o.src=n,o.onload=function(){var n=0,i=0,r=o.width,s=o.height,a=r/s,l=84;a>1?(n=Math.min(.9*window.innerWidth,r),i=n/r*s):(i=Math.min(.8*(window.innerHeight-l),s),n=i/s*r);var c=(window.innerWidth-n)/2,p=(window.innerHeight-i-l)/2;t.setState({activeIndex:e,width:n,height:i,left:c,top:p,rotate:0,imageWidth:r,imageHeight:s})},o.onerror=function(){t.setState({activeIndex:e,width:0,height:0,left:0,top:0,rotate:0,imageWidth:0,imageHeight:0})}},t.prototype.handleChangeImg=function(e){this.loadImg(e)},t.prototype.handleChangeImgState=function(e,t,n,o){this.setState({width:e,height:t,top:n,left:o})},t.prototype.handleAction=function(e){switch(e){case b.ActionType.prev:this.state.activeIndex-1>=0&&this.loadImg(this.state.activeIndex-1);break;case b.ActionType.next:this.state.activeIndex+1<this.props.images.length&&this.loadImg(this.state.activeIndex+1);break;case b.ActionType.zoomIn:this.handleZoom(this.state.left+this.state.width/2,this.state.top+this.state.height/2,1);break;case b.ActionType.zoomOut:this.handleZoom(this.state.left+this.state.width/2,this.state.top+this.state.height/2,-1);break;case b.ActionType.rotateLeft:this.handleRotate();break;case b.ActionType.rotateRight:this.handleRotate(!0);break;case b.ActionType.reset:this.loadImg(this.state.activeIndex)}},t.prototype.handleZoom=function(e,t,n){var o=e-this.state.left,i=t-this.state.height;this.setState({width:this.state.width+n*this.state.width*.05,height:this.state.height+n*this.state.height*.05,top:this.state.top+-n*i*.05,left:this.state.left+-n*o*.05})},t.prototype.handleRotate=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.setState({rotate:this.state.rotate+90*(e?1:-1)})},t.prototype.handleResize=function(){this.loadImg(this.state.activeIndex)},t.prototype.componentWillReceiveProps=function(e){(this.state.activeIndex!==e.activeIndex||!this.props.visible&&e.visible)&&this.loadImg(e.activeIndex)},t.prototype.render=function(){var e={src:"",alt:""};this.props.images.length>0&&(e=this.props.images[this.state.activeIndex]);var t=1e3;return this.props.zIndex&&(t=this.props.zIndex),u.createElement("div",{className:this.prefixCls,style:{display:this.props.visible?"block":"none"}},u.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:t}}),u.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose.bind(this),style:{zIndex:t+10}},u.createElement(g["default"],{type:b.ActionType.close})),u.createElement(f["default"],{prefixCls:this.prefixCls,imgSrc: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,onZoom:this.handleZoom,zIndex:t+5}),u.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},u.createElement(v["default"],{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight}),u.createElement(m["default"],{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(u.Component);t["default"]=w,w.defaultProps={visible:!1,onClose:c,images:[],activeIndex:0,zIndex:1e3},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 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 a(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),s(this,e.apply(this,arguments))}return a(t,e),t.prototype.handleChangeImg=function(e){this.props.onChangeImg(e)},t.prototype.render=function(){var e=this,t=1.5*(Math.ceil(this.props.images.length/2)-this.props.activeIndex-1)*30,n={marginLeft:t+"px"};return c.createElement("div",{className:this.props.prefixCls+"-navbar"},c.createElement("ul",{className:this.props.prefixCls+"-list "+this.props.prefixCls+"-transition",style:n},this.props.images.map(function(t,n){return c.createElement("li",{key:n,className:n===e.props.activeIndex?"active":"",onClick:e.handleChangeImg.bind(e,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 s(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 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(2),h=o(u),f=function(e){function t(){return s(this,t),a(this,e.call(this))}return l(t,e),t.prototype.handleAction=function(e){this.props.onAction(e)},t.prototype.render=function(){var e=this;return p.createElement("div",null,p.createElement("p",{className:this.props.prefixCls+"-attribute"},this.props.alt+"("+this.props.width+" x "+this.props.height+")"),p.createElement("ul",{className:this.props.prefixCls+"-toolbar"},p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.zoomIn)}},p.createElement(h["default"],{type:u.ActionType.zoomIn})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.zoomOut)}},p.createElement(h["default"],{type:u.ActionType.zoomOut})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.prev)}},p.createElement(h["default"],{type:u.ActionType.prev})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.reset)}},p.createElement(h["default"],{type:u.ActionType.reset})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.next)}},p.createElement(h["default"],{type:u.ActionType.next})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.rotateLeft)}},p.createElement(h["default"],{type:u.ActionType.rotateLeft})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(u.ActionType.rotateRight)}},p.createElement(h["default"],{type:u.ActionType.rotateRight}))))},t}(p.Component);t["default"]=f,e.exports=t["default"]},function(e,t){},function(e,n){e.exports=t}])});

lib/ViewerCavans.d.ts

@@ -15,2 +15,3 @@ /// <reference types="react" />
     onZoom: (targetX: number, targetY: number, direct: number) => void;
+    zIndex: number;
 }
@@ -17,0 +18,0 @@ export interface ViewerCavansState {

lib/ViewerCavans.js

@@ -131,5 +131,8 @@ 'use strict';
         }
+        var style = {
+            zIndex: this.props.zIndex
+        };
         return React.createElement(
             'div',
-            { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown },
+            { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown, style: style },
             React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown })
@@ -136,0 +139,0 @@ );

lib/ViewerCore.d.ts

@@ -22,2 +22,3 @@ /// <reference types="react" />
         activeIndex: number;
+        zIndex: number;
     };
@@ -24,0 +25,0 @@ private prefixCls;

lib/ViewerCore.js

@@ -213,15 +213,19 @@ 'use strict';
         }
+        var zIndex = 1000;
+        if (this.props.zIndex) {
+            zIndex = this.props.zIndex;
+        }
         return React.createElement(
             'div',
             { className: this.prefixCls, style: { display: this.props.visible ? 'block' : 'none' } },
-            React.createElement('div', { className: this.prefixCls + '-mask' }),
+            React.createElement('div', { className: this.prefixCls + '-mask', style: { zIndex: zIndex } }),
             React.createElement(
                 'div',
-                { className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this) },
+                { className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this), style: { zIndex: zIndex + 10 } },
                 React.createElement(_Icon2.default, { type: _Icon.ActionType.close })
             ),
-            React.createElement(_ViewerCavans2.default, { prefixCls: this.prefixCls, imgSrc: activeImg.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, onZoom: this.handleZoom }),
+            React.createElement(_ViewerCavans2.default, { prefixCls: this.prefixCls, imgSrc: activeImg.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, onZoom: this.handleZoom, zIndex: zIndex + 5 }),
             React.createElement(
                 'div',
-                { className: this.prefixCls + '-footer' },
+                { className: this.prefixCls + '-footer', style: { zIndex: zIndex + 5 } },
                 React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight }),
@@ -242,4 +246,5 @@ React.createElement(_ViewerNav2.default, { prefixCls: this.prefixCls, images: this.props.images, activeIndex: this.state.activeIndex, onChangeImg: this.handleChangeImg })
     images: [],
-    activeIndex: 0
+    activeIndex: 0,
+    zIndex: 1000
 };
 module.exports = exports['default'];

lib/ViewerProps.d.ts

@@ -14,3 +14,5 @@ export interface ImageDecorator {
     activeIndex?: number;
+    /** 自定义viewer组件的z-index */
+    zIndex?: number;
 }
 export default ViewerProps;

package.json

 {
   "name": "react-viewer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "react image viewer",
@@ -5,0 +5,0 @@ "main": "dist/index",

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

126905

increased by0.76%

Lines of code

1620

increased by1.25%

No dependency changes