Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-viewer
Advanced tools
react-viewer - npm Package Compare versions
Comparing version 1.1.0 to 1.2.0
@@ -190,5 +190,9 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
| if (!_this2.container) { | ||
| _this2.container = document.createElement('div'); | ||
| if (_this2.props.container) { | ||
| _this2.container = _this2.props.container; | ||
| } else { | ||
| _this2.container = document.createElement('div'); | ||
| document.body.appendChild(_this2.container); | ||
| } | ||
| } | ||
| document.body.appendChild(_this2.container); | ||
| var instance = _this2; | ||
@@ -332,3 +336,3 @@ ReactDOM.unstable_renderSubtreeIntoContainer(_this2, React.createElement(_ViewerCore2.default, _this2.props), _this2.container, function () { | ||
| var pageY = e.pageY; | ||
| this.props.onZoom(pageX, pageY, direct); | ||
| this.props.onZoom(pageX, pageY, direct, .05); | ||
| } | ||
@@ -366,3 +370,3 @@ }; | ||
| if (!this.state.isMouseDown) { | ||
| imgClass = this.props.prefixCls + '-transition'; | ||
| imgClass = this.props.prefixCls + '-image-transition'; | ||
| } | ||
@@ -372,6 +376,10 @@ var style = { | ||
| }; | ||
| var imgNode = null; | ||
| if (this.props.imgSrc !== '') { | ||
| imgNode = React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown }); | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown, style: style }, | ||
| React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown }) | ||
| imgNode | ||
| ); | ||
@@ -397,2 +405,4 @@ }; | ||
| var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); | ||
| var _react = __webpack_require__(1); | ||
@@ -433,2 +443,3 @@ | ||
| function noop() {} | ||
| var transitionDuration = 300; | ||
@@ -445,2 +456,5 @@ var ViewerCore = function (_React$Component) { | ||
| _this.state = { | ||
| visible: false, | ||
| visibleStart: false, | ||
| transitionEnd: false, | ||
| activeIndex: _this.props.activeIndex, | ||
@@ -467,5 +481,16 @@ width: 0, | ||
| _this.getImageCenterXY = _this.getImageCenterXY.bind(_this); | ||
| _this.setContainerWidthHeight(); | ||
| _this.footerHeight = 84; | ||
| return _this; | ||
| } | ||
| ViewerCore.prototype.setContainerWidthHeight = function setContainerWidthHeight() { | ||
| this.containerWidth = window.innerWidth; | ||
| this.containerHeight = window.innerHeight; | ||
| if (this.props.container) { | ||
| this.containerWidth = this.props.container.offsetWidth; | ||
| this.containerHeight = this.props.container.offsetHeight; | ||
| } | ||
| }; | ||
| ViewerCore.prototype.handleClose = function handleClose(e) { | ||
@@ -475,10 +500,42 @@ this.props.onClose(); | ||
| ViewerCore.prototype.startVisible = function startVisible() { | ||
| var _this2 = this; | ||
| this.setState({ | ||
| visibleStart: true | ||
| }); | ||
| setTimeout(function () { | ||
| _this2.setState({ | ||
| visible: true | ||
| }); | ||
| setTimeout(function () { | ||
| _this2.bindEvent(); | ||
| _this2.loadImg(_this2.state.activeIndex, true); | ||
| }, 300); | ||
| }, 10); | ||
| }; | ||
| ViewerCore.prototype.componentDidMount = function componentDidMount() { | ||
| this.bindEvent(); | ||
| this.loadImg(this.state.activeIndex); | ||
| this.startVisible(); | ||
| }; | ||
| ViewerCore.prototype.getImgWidthHeight = function getImgWidthHeight(imgWidth, imgHeight) { | ||
| var width = 0; | ||
| var height = 0; | ||
| var aspectRatio = imgWidth / imgHeight; | ||
| if (aspectRatio > 1) { | ||
| width = Math.min(this.containerWidth * .9, imgWidth); | ||
| height = width / imgWidth * imgHeight; | ||
| } else { | ||
| height = Math.min((this.containerWidth - this.footerHeight) * .8, imgHeight); | ||
| width = height / imgHeight * imgWidth; | ||
| } | ||
| return [width, height]; | ||
| }; | ||
| ViewerCore.prototype.loadImg = function loadImg(activeIndex) { | ||
| var _this2 = this; | ||
| var _this3 = this; | ||
| var firstLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var imgSrc = ''; | ||
@@ -492,32 +549,47 @@ var images = this.props.images || []; | ||
| img.onload = function () { | ||
| var width = 0; | ||
| var height = 0; | ||
| var imgWidth = img.width; | ||
| var imgHeight = img.height; | ||
| var aspectRatio = imgWidth / imgHeight; | ||
| var footerHeight = 84; | ||
| if (aspectRatio > 1) { | ||
| width = Math.min(window.innerWidth * .9, imgWidth); | ||
| height = width / imgWidth * imgHeight; | ||
| if (firstLoad) { | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
| width: 0, | ||
| height: 0, | ||
| left: _this3.containerWidth / 2, | ||
| top: (_this3.containerHeight - _this3.footerHeight) / 2, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| setTimeout(function () { | ||
| var imgCenterXY = _this3.getImageCenterXY(); | ||
| _this3.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 1); | ||
| }, 50); | ||
| } else { | ||
| height = Math.min((window.innerHeight - footerHeight) * .8, imgHeight); | ||
| width = height / imgHeight * imgWidth; | ||
| var _getImgWidthHeight = _this3.getImgWidthHeight(imgWidth, imgHeight); | ||
| var _getImgWidthHeight2 = _slicedToArray(_getImgWidthHeight, 2); | ||
| var width = _getImgWidthHeight2[0]; | ||
| var height = _getImgWidthHeight2[1]; | ||
| var left = (_this3.containerWidth - width) / 2; | ||
| var top = (_this3.containerHeight - height - _this3.footerHeight) / 2; | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
| width: width, | ||
| height: height, | ||
| left: left, | ||
| top: top, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| } | ||
| var left = (window.innerWidth - width) / 2; | ||
| var top = (window.innerHeight - height - footerHeight) / 2; | ||
| _this2.setState({ | ||
| activeIndex: activeIndex, | ||
| width: width, | ||
| height: height, | ||
| left: left, | ||
| top: top, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| }; | ||
| img.onerror = function () { | ||
| _this2.setState({ | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
@@ -538,3 +610,9 @@ width: 0, | ||
| ViewerCore.prototype.handleChangeImg = function handleChangeImg(newIndex) { | ||
| this.loadImg(newIndex); | ||
| var _this4 = this; | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1); | ||
| setTimeout(function () { | ||
| _this4.loadImg(newIndex); | ||
| }, transitionDuration); | ||
| }; | ||
@@ -555,3 +633,3 @@ | ||
| if (this.state.activeIndex - 1 >= 0) { | ||
| this.loadImg(this.state.activeIndex - 1); | ||
| this.handleChangeImg(this.state.activeIndex - 1); | ||
| } | ||
@@ -561,3 +639,3 @@ break; | ||
| if (this.state.activeIndex + 1 < this.props.images.length) { | ||
| this.loadImg(this.state.activeIndex + 1); | ||
| this.handleChangeImg(this.state.activeIndex + 1); | ||
| } | ||
@@ -567,7 +645,7 @@ break; | ||
| var imgCenterXY = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1); | ||
| this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, .05); | ||
| break; | ||
| case _Icon.ActionType.zoomOut: | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, .05); | ||
| break; | ||
@@ -606,13 +684,25 @@ case _Icon.ActionType.rotateLeft: | ||
| ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct) { | ||
| ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct, scale) { | ||
| var imgCenterXY = this.getImageCenterXY(); | ||
| var diffX = targetX - imgCenterXY.x; | ||
| var diffY = targetY - imgCenterXY.y; | ||
| var diffWidth = direct * this.state.width * 0.05; | ||
| var diffHeight = direct * this.state.height * 0.05; | ||
| var diffWidth = direct * this.state.width * scale; | ||
| var diffHeight = direct * this.state.height * scale; | ||
| // when image width is 0, set original width | ||
| if (diffWidth === 0) { | ||
| var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight); | ||
| var _getImgWidthHeight4 = _slicedToArray(_getImgWidthHeight3, 2); | ||
| var width = _getImgWidthHeight4[0]; | ||
| var height = _getImgWidthHeight4[1]; | ||
| diffWidth = width; | ||
| diffHeight = height; | ||
| } | ||
| this.setState({ | ||
| width: this.state.width + diffWidth, | ||
| height: this.state.height + diffHeight, | ||
| top: this.state.top + -diffHeight / 2 + -direct * diffY * .05, | ||
| left: this.state.left + -diffWidth / 2 + -direct * diffX * .05 | ||
| top: this.state.top + -diffHeight / 2 + -direct * diffY * scale, | ||
| left: this.state.left + -diffWidth / 2 + -direct * diffX * scale | ||
| }); | ||
@@ -637,2 +727,3 @@ }; | ||
| ViewerCore.prototype.handleResize = function handleResize() { | ||
| this.setContainerWidthHeight(); | ||
| this.loadImg(this.state.activeIndex); | ||
@@ -693,2 +784,11 @@ }; | ||
| ViewerCore.prototype.handleTransitionEnd = function handleTransitionEnd(e) { | ||
| if (!this.state.transitionEnd || this.state.visibleStart) { | ||
| this.setState({ | ||
| visibleStart: false, | ||
| transitionEnd: true | ||
| }); | ||
| } | ||
| }; | ||
| ViewerCore.prototype.bindEvent = function bindEvent() { | ||
@@ -705,11 +805,24 @@ var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; | ||
| ViewerCore.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { | ||
| if (this.state.activeIndex !== nextProps.activeIndex || !this.props.visible && nextProps.visible) { | ||
| this.loadImg(nextProps.activeIndex); | ||
| } | ||
| var _this5 = this; | ||
| if (!this.props.visible && nextProps.visible) { | ||
| this.bindEvent(); | ||
| this.startVisible(); | ||
| return; | ||
| } | ||
| if (this.props.visible && !nextProps.visible) { | ||
| this.bindEvent(true); | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1); | ||
| setTimeout(function () { | ||
| _this5.setState({ | ||
| visible: false, | ||
| transitionEnd: false | ||
| }); | ||
| }, transitionDuration); | ||
| return; | ||
| } | ||
| if (this.state.activeIndex !== nextProps.activeIndex) { | ||
| this.handleChangeImg(nextProps.activeIndex); | ||
| return; | ||
| } | ||
| }; | ||
@@ -722,6 +835,2 @@ | ||
| }; | ||
| var images = this.props.images || []; | ||
| if (images.length > 0) { | ||
| activeImg = images[this.state.activeIndex]; | ||
| } | ||
| var zIndex = 1000; | ||
@@ -731,5 +840,24 @@ if (this.props.zIndex) { | ||
| } | ||
| var viewerStryle = { | ||
| opacity: this.state.visible ? 1 : 0 | ||
| }; | ||
| if (!this.state.visible && this.state.transitionEnd) { | ||
| viewerStryle.display = 'none'; | ||
| } | ||
| if (!this.state.visible && this.state.visibleStart) { | ||
| viewerStryle.display = 'block'; | ||
| } | ||
| if (this.state.visible && this.state.transitionEnd) { | ||
| var images = this.props.images || []; | ||
| if (images.length > 0 && this.state.activeIndex >= 0) { | ||
| activeImg = images[this.state.activeIndex]; | ||
| } | ||
| } | ||
| var className = this.prefixCls + ' ' + this.prefixCls + '-transition'; | ||
| if (this.props.container) { | ||
| className += ' inline'; | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: this.prefixCls, style: { display: this.props.visible ? 'block' : 'none' } }, | ||
| { className: className, style: viewerStryle, onTransitionEnd: this.handleTransitionEnd.bind(this) }, | ||
| React.createElement('div', { className: this.prefixCls + '-mask', style: { zIndex: zIndex } }), | ||
@@ -815,3 +943,3 @@ React.createElement( | ||
| 'ul', | ||
| { className: this.props.prefixCls + '-list ' + this.props.prefixCls + '-transition', style: listStyle }, | ||
| { className: this.props.prefixCls + '-list ' + this.props.prefixCls + '-list-transition', style: listStyle }, | ||
| this.props.images.map(function (item, index) { | ||
@@ -818,0 +946,0 @@ return React.createElement( |
@@ -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 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 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",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY"}(p||(t.ActionType=p={}));var h=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 l.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(l.Component);t["default"]=h},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 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),h=n(9),u=i(h),f=n(5),d=o(f),y=function(e){function t(){a(this,t);var n=s(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;u.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;u.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"]=y,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 c=n(1),l=o(c),p=function(e){function t(){r(this,t);var n=a(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 s(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("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t="";this.state.isMouseDown||(t=this.props.prefixCls+"-transition");var n={zIndex:this.props.zIndex};return l.createElement("div",{className:this.props.prefixCls+"-cavans",onMouseDown:this.handleMouseDown,style:n},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 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 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),h=i(p);n(8);var u=n(4),f=o(u),d=n(6),y=o(d),m=n(7),v=o(m),b=n(2),g=o(b),w=function(e){function t(n){a(this,t);var o=s(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,scaleX:1,scaleY:1},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.handleKeydown=o.handleKeydown.bind(o),o.handleScaleX=o.handleScaleX.bind(o),o.handleScaleY=o.handleScaleY.bind(o),o.getImageCenterXY=o.getImageCenterXY.bind(o),o}return c(t,e),t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.componentDidMount=function(){this.bindEvent(),this.loadImg(this.state.activeIndex)},t.prototype.loadImg=function(e){var t=this,n="",o=this.props.images||[];o.length>0&&(n=o[e].src);var i=new Image;i.src=n,i.onload=function(){var n=0,o=0,r=i.width,a=i.height,s=r/a,c=84;s>1?(n=Math.min(.9*window.innerWidth,r),o=n/r*a):(o=Math.min(.8*(window.innerHeight-c),a),n=o/a*r);var l=(window.innerWidth-n)/2,p=(window.innerHeight-o-c)/2;t.setState({activeIndex:e,width:n,height:o,left:l,top:p,rotate:0,imageWidth:r,imageHeight:a,scaleX:1,scaleY:1})},i.onerror=function(){t.setState({activeIndex:e,width:0,height:0,left:0,top:0,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1})}},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:var t=this.getImageCenterXY();this.handleZoom(t.x,t.y,1);break;case b.ActionType.zoomOut:var n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-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);break;case b.ActionType.scaleX:this.handleScaleX(1===this.state.scaleX?-1:1);break;case b.ActionType.scaleY:this.handleScaleY(1===this.state.scaleY?-1:1)}},t.prototype.handleScaleX=function(e){this.setState({scaleX:e})},t.prototype.handleScaleY=function(e){this.setState({scaleY:e})},t.prototype.handleZoom=function(e,t,n){var o=this.getImageCenterXY(),i=e-o.x,r=t-o.y,a=n*this.state.width*.05,s=n*this.state.height*.05;this.setState({width:this.state.width+a,height:this.state.height+s,top:this.state.top+-s/2+-n*r*.05,left:this.state.left+-a/2+-n*i*.05})},t.prototype.getImageCenterXY=function(){return{x:this.state.left+this.state.width/2,y:this.state.top+this.state.height/2}},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.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:this.props.onClose(),n=!0;break;case 37:e.ctrlKey?this.handleAction(b.ActionType.rotateLeft):this.handleAction(b.ActionType.prev),n=!0;break;case 39:e.ctrlKey?this.handleAction(b.ActionType.rotateRight):this.handleAction(b.ActionType.next),n=!0;break;case 38:this.handleAction(b.ActionType.zoomIn),n=!0;break;case 40:this.handleAction(b.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(this.loadImg(this.state.activeIndex),n=!0)}n&&e.preventDefault()},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillReceiveProps=function(e){(this.state.activeIndex!==e.activeIndex||!this.props.visible&&e.visible)&&this.loadImg(e.activeIndex),!this.props.visible&&e.visible&&this.bindEvent(),this.props.visible&&!e.visible&&this.bindEvent(!0)},t.prototype.render=function(){var e={src:"",alt:""},t=this.props.images||[];t.length>0&&(e=t[this.state.activeIndex]);var n=1e3;return this.props.zIndex&&(n=this.props.zIndex),h.createElement("div",{className:this.prefixCls,style:{display:this.props.visible?"block":"none"}},h.createElement("div",{className:this.prefixCls+"-mask",style:{zIndex:n}}),h.createElement("div",{className:this.prefixCls+"-close "+this.prefixCls+"-btn",onClick:this.handleClose.bind(this),style:{zIndex:n+10}},h.createElement(g["default"],{type:b.ActionType.close})),h.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:n+5,scaleX:this.state.scaleX,scaleY:this.state.scaleY}),h.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:n+5}},h.createElement(v["default"],{prefixCls:this.prefixCls,onAction:this.handleAction,alt:e.alt,width:this.state.imageWidth,height:this.state.imageHeight}),h.createElement(y["default"],{prefixCls:this.prefixCls,images:this.props.images,activeIndex:this.state.activeIndex,onChangeImg:this.handleChangeImg})))},t}(h.Component);t["default"]=w,w.defaultProps={visible:!1,onClose:l,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 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 c=n(1),l=o(c),p=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(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 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 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),h=n(2),u=o(h),f=function(e){function t(){return a(this,t),s(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(h.ActionType.zoomIn)}},p.createElement(u["default"],{type:h.ActionType.zoomIn})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomOut)}},p.createElement(u["default"],{type:h.ActionType.zoomOut})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.prev)}},p.createElement(u["default"],{type:h.ActionType.prev})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.reset)}},p.createElement(u["default"],{type:h.ActionType.reset})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.next)}},p.createElement(u["default"],{type:h.ActionType.next})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateLeft)}},p.createElement(u["default"],{type:h.ActionType.rotateLeft})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateRight)}},p.createElement(u["default"],{type:h.ActionType.rotateRight})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleX)}},p.createElement(u["default"],{type:h.ActionType.scaleX})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleY)}},p.createElement(u["default"],{type:h.ActionType.scaleY}))))},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(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),r=i(o);t["default"]=r["default"],e.exports=t["default"]},function(t,n){t.exports=e},function(e,t,n){"use strict";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 o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=t.ActionType=void 0;var c=n(1),l=i(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",e[e.scaleX=9]="scaleX",e[e.scaleY=10]="scaleY"}(p||(t.ActionType=p={}));var h=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 l.createElement("i",{className:e+" "+e+"-"+p[this.props.type]})},t}(l.Component);t["default"]=h},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}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 r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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 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=o(l),h=n(9),u=o(h),f=n(5),d=i(f),y=function(e){function t(){a(this,t);var n=s(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.props.container?e.container=e.props.container:(e.container=document.createElement("div"),document.body.appendChild(e.container)));var t=e;u.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;u.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"]=y,e.exports=t["default"]},function(e,t,n){"use strict";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 o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var c=n(1),l=i(c),p=function(e){function t(){r(this,t);var n=a(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 s(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,i=e.pageY;this.props.onZoom(n,i,t,.05)}},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("+this.props.scaleX+") scaleY("+this.props.scaleY+")"},t="";this.state.isMouseDown||(t=this.props.prefixCls+"-image-transition");var n={zIndex:this.props.zIndex},i=null;return""!==this.props.imgSrc&&(i=l.createElement("img",{className:t,src:this.props.imgSrc,style:e,onMouseDown:this.handleMouseDown})),l.createElement("div",{className:this.props.prefixCls+"-cavans",onMouseDown:this.handleMouseDown,style:n},i)},t}(l.Component);t["default"]=p,e.exports=t["default"]},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}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 r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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 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=function(){function e(e,t){var n=[],i=!0,o=!1,r=void 0;try{for(var a,s=e[Symbol.iterator]();!(i=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(c){o=!0,r=c}finally{try{!i&&s["return"]&&s["return"]()}finally{if(o)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")}}(),h=n(1),u=o(h);n(8);var f=n(4),d=i(f),y=n(6),m=i(y),v=n(7),b=i(v),g=n(2),w=i(g),x=300,C=function(e){function t(n){a(this,t);var i=s(this,e.call(this,n));return i.prefixCls="react-viewer",i.state={visible:!1,visibleStart:!1,transitionEnd:!1,activeIndex:i.props.activeIndex,width:0,height:0,top:15,left:null,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1},i.handleChangeImg=i.handleChangeImg.bind(i),i.handleChangeImgState=i.handleChangeImgState.bind(i),i.handleAction=i.handleAction.bind(i),i.handleResize=i.handleResize.bind(i),i.handleZoom=i.handleZoom.bind(i),i.handleRotate=i.handleRotate.bind(i),i.handleKeydown=i.handleKeydown.bind(i),i.handleScaleX=i.handleScaleX.bind(i),i.handleScaleY=i.handleScaleY.bind(i),i.getImageCenterXY=i.getImageCenterXY.bind(i),i.setContainerWidthHeight(),i.footerHeight=84,i}return c(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)},t.prototype.handleClose=function(e){this.props.onClose()},t.prototype.startVisible=function(){var e=this;this.setState({visibleStart:!0}),setTimeout(function(){e.setState({visible:!0}),setTimeout(function(){e.bindEvent(),e.loadImg(e.state.activeIndex,!0)},300)},10)},t.prototype.componentDidMount=function(){this.startVisible()},t.prototype.getImgWidthHeight=function(e,t){var n=0,i=0,o=e/t;return o>1?(n=Math.min(.9*this.containerWidth,e),i=n/e*t):(i=Math.min(.8*(this.containerWidth-this.footerHeight),t),n=i/t*e),[n,i]},t.prototype.loadImg=function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i="",o=this.props.images||[];o.length>0&&(i=o[e].src);var r=new Image;r.src=i,r.onload=function(){var i=r.width,o=r.height;if(n)t.setState({activeIndex:e,width:0,height:0,left:t.containerWidth/2,top:(t.containerHeight-t.footerHeight)/2,rotate:0,imageWidth:i,imageHeight:o,scaleX:1,scaleY:1}),setTimeout(function(){var e=t.getImageCenterXY();t.handleZoom(e.x,e.y,1,1)},50);else{var a=t.getImgWidthHeight(i,o),s=p(a,2),c=s[0],l=s[1],h=(t.containerWidth-c)/2,u=(t.containerHeight-l-t.footerHeight)/2;t.setState({activeIndex:e,width:c,height:l,left:h,top:u,rotate:0,imageWidth:i,imageHeight:o,scaleX:1,scaleY:1})}},r.onerror=function(){t.setState({activeIndex:e,width:0,height:0,left:0,top:0,rotate:0,imageWidth:0,imageHeight:0,scaleX:1,scaleY:1})}},t.prototype.handleChangeImg=function(e){var t=this,n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-1,1),setTimeout(function(){t.loadImg(e)},x)},t.prototype.handleChangeImgState=function(e,t,n,i){this.setState({width:e,height:t,top:n,left:i})},t.prototype.handleAction=function(e){switch(e){case g.ActionType.prev:this.state.activeIndex-1>=0&&this.handleChangeImg(this.state.activeIndex-1);break;case g.ActionType.next:this.state.activeIndex+1<this.props.images.length&&this.handleChangeImg(this.state.activeIndex+1);break;case g.ActionType.zoomIn:var t=this.getImageCenterXY();this.handleZoom(t.x,t.y,1,.05);break;case g.ActionType.zoomOut:var n=this.getImageCenterXY();this.handleZoom(n.x,n.y,-1,.05);break;case g.ActionType.rotateLeft:this.handleRotate();break;case g.ActionType.rotateRight:this.handleRotate(!0);break;case g.ActionType.reset:this.loadImg(this.state.activeIndex);break;case g.ActionType.scaleX:this.handleScaleX(1===this.state.scaleX?-1:1);break;case g.ActionType.scaleY:this.handleScaleY(1===this.state.scaleY?-1:1)}},t.prototype.handleScaleX=function(e){this.setState({scaleX:e})},t.prototype.handleScaleY=function(e){this.setState({scaleY:e})},t.prototype.handleZoom=function(e,t,n,i){var o=this.getImageCenterXY(),r=e-o.x,a=t-o.y,s=n*this.state.width*i,c=n*this.state.height*i;if(0===s){var l=this.getImgWidthHeight(this.state.imageWidth,this.state.imageHeight),h=p(l,2),u=h[0],f=h[1];s=u,c=f}this.setState({width:this.state.width+s,height:this.state.height+c,top:this.state.top+-c/2+-n*a*i,left:this.state.left+-s/2+-n*r*i})},t.prototype.getImageCenterXY=function(){return{x:this.state.left+this.state.width/2,y:this.state.top+this.state.height/2}},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.setContainerWidthHeight(),this.loadImg(this.state.activeIndex)},t.prototype.handleKeydown=function(e){var t=e.keyCode||e.which||e.charCode,n=!1;switch(t){case 27:this.props.onClose(),n=!0;break;case 37:e.ctrlKey?this.handleAction(g.ActionType.rotateLeft):this.handleAction(g.ActionType.prev),n=!0;break;case 39:e.ctrlKey?this.handleAction(g.ActionType.rotateRight):this.handleAction(g.ActionType.next),n=!0;break;case 38:this.handleAction(g.ActionType.zoomIn),n=!0;break;case 40:this.handleAction(g.ActionType.zoomOut),n=!0;break;case 49:e.ctrlKey&&(this.loadImg(this.state.activeIndex),n=!0)}n&&e.preventDefault()},t.prototype.handleTransitionEnd=function(e){this.state.transitionEnd&&!this.state.visibleStart||this.setState({visibleStart:!1,transitionEnd:!0})},t.prototype.bindEvent=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t="addEventListener";e&&(t="removeEventListener"),document[t]("keydown",this.handleKeydown,!1)},t.prototype.componentWillReceiveProps=function(e){var t=this;if(!this.props.visible&&e.visible)return void this.startVisible();if(this.props.visible&&!e.visible){this.bindEvent(!0);var n=this.getImageCenterXY();return this.handleZoom(n.x,n.y,-1,1),void setTimeout(function(){t.setState({visible:!1,transitionEnd:!1})},x)}return this.state.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};if(!this.state.visible&&this.state.transitionEnd&&(n.display="none"),!this.state.visible&&this.state.visibleStart&&(n.display="block"),this.state.visible&&this.state.transitionEnd){var i=this.props.images||[];i.length>0&&this.state.activeIndex>=0&&(e=i[this.state.activeIndex])}var o=this.prefixCls+" "+this.prefixCls+"-transition";return this.props.container&&(o+=" inline"),u.createElement("div",{className:o,style:n,onTransitionEnd:this.handleTransitionEnd.bind(this)},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(w["default"],{type:g.ActionType.close})),u.createElement(d["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,scaleX:this.state.scaleX,scaleY:this.state.scaleY}),u.createElement("div",{className:this.prefixCls+"-footer",style:{zIndex:t+5}},u.createElement(b["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"]=C,C.defaultProps={visible:!1,onClose:l,images:[],activeIndex:0,zIndex:1e3},e.exports=t["default"]},function(e,t,n){"use strict";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 o(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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):o(e,t))}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=void 0;var c=n(1),l=i(c),p=function(e){function t(){return r(this,t),a(this,e.apply(this,arguments))}return s(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+"-list-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 i(e){return e&&e.__esModule?e:{"default":e}}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 r(e,t){for(var n=Object.getOwnPropertyNames(t),i=0;i<n.length;i++){var o=n[i],r=Object.getOwnPropertyDescriptor(t,o);r&&r.configurable&&void 0===e[o]&&Object.defineProperty(e,o,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 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=o(l),h=n(2),u=i(h),f=function(e){function t(){return a(this,t),s(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(h.ActionType.zoomIn)}},p.createElement(u["default"],{type:h.ActionType.zoomIn})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.zoomOut)}},p.createElement(u["default"],{type:h.ActionType.zoomOut})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.prev)}},p.createElement(u["default"],{type:h.ActionType.prev})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.reset)}},p.createElement(u["default"],{type:h.ActionType.reset})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.next)}},p.createElement(u["default"],{type:h.ActionType.next})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateLeft)}},p.createElement(u["default"],{type:h.ActionType.rotateLeft})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.rotateRight)}},p.createElement(u["default"],{type:h.ActionType.rotateRight})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleX)}},p.createElement(u["default"],{type:h.ActionType.scaleX})),p.createElement("li",{className:this.props.prefixCls+"-btn",onClick:function(){e.handleAction(h.ActionType.scaleY)}},p.createElement(u["default"],{type:h.ActionType.scaleY}))))},t}(p.Component);t["default"]=f,e.exports=t["default"]},function(e,t){},function(e,n){e.exports=t}])}); |
@@ -55,5 +55,9 @@ 'use strict'; | ||
| if (!_this2.container) { | ||
| _this2.container = document.createElement('div'); | ||
| if (_this2.props.container) { | ||
| _this2.container = _this2.props.container; | ||
| } else { | ||
| _this2.container = document.createElement('div'); | ||
| document.body.appendChild(_this2.container); | ||
| } | ||
| } | ||
| document.body.appendChild(_this2.container); | ||
| var instance = _this2; | ||
@@ -60,0 +64,0 @@ ReactDOM.unstable_renderSubtreeIntoContainer(_this2, React.createElement(_ViewerCore2.default, _this2.props), _this2.container, function () { |
@@ -14,3 +14,3 @@ /// <reference types="react" /> | ||
| onResize: () => void; | ||
| onZoom: (targetX: number, targetY: number, direct: number) => void; | ||
| onZoom: (targetX: number, targetY: number, direct: number, scale: number) => void; | ||
| zIndex: number; | ||
@@ -17,0 +17,0 @@ scaleX: 1 | -1; |
@@ -96,3 +96,3 @@ 'use strict'; | ||
| var pageY = e.pageY; | ||
| this.props.onZoom(pageX, pageY, direct); | ||
| this.props.onZoom(pageX, pageY, direct, .05); | ||
| } | ||
@@ -130,3 +130,3 @@ }; | ||
| if (!this.state.isMouseDown) { | ||
| imgClass = this.props.prefixCls + '-transition'; | ||
| imgClass = this.props.prefixCls + '-image-transition'; | ||
| } | ||
@@ -136,6 +136,10 @@ var style = { | ||
| }; | ||
| var imgNode = null; | ||
| if (this.props.imgSrc !== '') { | ||
| imgNode = React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown }); | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: this.props.prefixCls + '-cavans', onMouseDown: this.handleMouseDown, style: style }, | ||
| React.createElement('img', { className: imgClass, src: this.props.imgSrc, style: imgStyle, onMouseDown: this.handleMouseDown }) | ||
| imgNode | ||
| ); | ||
@@ -142,0 +146,0 @@ }; |
@@ -7,2 +7,5 @@ /// <reference types="react" /> | ||
| export interface ViewerCoreState { | ||
| visible?: boolean; | ||
| visibleStart?: boolean; | ||
| transitionEnd?: boolean; | ||
| activeIndex?: number; | ||
@@ -28,6 +31,12 @@ width?: number; | ||
| private prefixCls; | ||
| private containerWidth; | ||
| private containerHeight; | ||
| private footerHeight; | ||
| constructor(props: any); | ||
| setContainerWidthHeight(): void; | ||
| handleClose(e: any): void; | ||
| startVisible(): void; | ||
| componentDidMount(): void; | ||
| loadImg(activeIndex: any): void; | ||
| getImgWidthHeight(imgWidth: any, imgHeight: any): number[]; | ||
| loadImg(activeIndex: any, firstLoad?: boolean): void; | ||
| handleChangeImg(newIndex: number): void; | ||
@@ -38,3 +47,3 @@ handleChangeImgState(width: any, height: any, top: any, left: any): void; | ||
| handleScaleY(newScale: 1 | -1): void; | ||
| handleZoom(targetX: any, targetY: any, direct: any): void; | ||
| handleZoom(targetX: any, targetY: any, direct: any, scale: any): void; | ||
| getImageCenterXY(): { | ||
@@ -47,2 +56,3 @@ x: number; | ||
| handleKeydown(e: any): void; | ||
| handleTransitionEnd(e: any): void; | ||
| bindEvent(remove?: boolean): void; | ||
@@ -49,0 +59,0 @@ componentWillReceiveProps(nextProps: ViewerProps): void; |
@@ -8,2 +8,6 @@ 'use strict'; | ||
| var _slicedToArray2 = require('babel-runtime/helpers/slicedToArray'); | ||
| var _slicedToArray3 = _interopRequireDefault(_slicedToArray2); | ||
| var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); | ||
@@ -48,2 +52,3 @@ | ||
| function noop() {} | ||
| var transitionDuration = 300; | ||
@@ -60,2 +65,5 @@ var ViewerCore = function (_React$Component) { | ||
| _this.state = { | ||
| visible: false, | ||
| visibleStart: false, | ||
| transitionEnd: false, | ||
| activeIndex: _this.props.activeIndex, | ||
@@ -82,5 +90,16 @@ width: 0, | ||
| _this.getImageCenterXY = _this.getImageCenterXY.bind(_this); | ||
| _this.setContainerWidthHeight(); | ||
| _this.footerHeight = 84; | ||
| return _this; | ||
| } | ||
| ViewerCore.prototype.setContainerWidthHeight = function setContainerWidthHeight() { | ||
| this.containerWidth = window.innerWidth; | ||
| this.containerHeight = window.innerHeight; | ||
| if (this.props.container) { | ||
| this.containerWidth = this.props.container.offsetWidth; | ||
| this.containerHeight = this.props.container.offsetHeight; | ||
| } | ||
| }; | ||
| ViewerCore.prototype.handleClose = function handleClose(e) { | ||
@@ -90,10 +109,42 @@ this.props.onClose(); | ||
| ViewerCore.prototype.startVisible = function startVisible() { | ||
| var _this2 = this; | ||
| this.setState({ | ||
| visibleStart: true | ||
| }); | ||
| setTimeout(function () { | ||
| _this2.setState({ | ||
| visible: true | ||
| }); | ||
| setTimeout(function () { | ||
| _this2.bindEvent(); | ||
| _this2.loadImg(_this2.state.activeIndex, true); | ||
| }, 300); | ||
| }, 10); | ||
| }; | ||
| ViewerCore.prototype.componentDidMount = function componentDidMount() { | ||
| this.bindEvent(); | ||
| this.loadImg(this.state.activeIndex); | ||
| this.startVisible(); | ||
| }; | ||
| ViewerCore.prototype.getImgWidthHeight = function getImgWidthHeight(imgWidth, imgHeight) { | ||
| var width = 0; | ||
| var height = 0; | ||
| var aspectRatio = imgWidth / imgHeight; | ||
| if (aspectRatio > 1) { | ||
| width = Math.min(this.containerWidth * .9, imgWidth); | ||
| height = width / imgWidth * imgHeight; | ||
| } else { | ||
| height = Math.min((this.containerWidth - this.footerHeight) * .8, imgHeight); | ||
| width = height / imgHeight * imgWidth; | ||
| } | ||
| return [width, height]; | ||
| }; | ||
| ViewerCore.prototype.loadImg = function loadImg(activeIndex) { | ||
| var _this2 = this; | ||
| var _this3 = this; | ||
| var firstLoad = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var imgSrc = ''; | ||
@@ -107,32 +158,47 @@ var images = this.props.images || []; | ||
| img.onload = function () { | ||
| var width = 0; | ||
| var height = 0; | ||
| var imgWidth = img.width; | ||
| var imgHeight = img.height; | ||
| var aspectRatio = imgWidth / imgHeight; | ||
| var footerHeight = 84; | ||
| if (aspectRatio > 1) { | ||
| width = Math.min(window.innerWidth * .9, imgWidth); | ||
| height = width / imgWidth * imgHeight; | ||
| if (firstLoad) { | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
| width: 0, | ||
| height: 0, | ||
| left: _this3.containerWidth / 2, | ||
| top: (_this3.containerHeight - _this3.footerHeight) / 2, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| setTimeout(function () { | ||
| var imgCenterXY = _this3.getImageCenterXY(); | ||
| _this3.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 1); | ||
| }, 50); | ||
| } else { | ||
| height = Math.min((window.innerHeight - footerHeight) * .8, imgHeight); | ||
| width = height / imgHeight * imgWidth; | ||
| var _getImgWidthHeight = _this3.getImgWidthHeight(imgWidth, imgHeight); | ||
| var _getImgWidthHeight2 = (0, _slicedToArray3.default)(_getImgWidthHeight, 2); | ||
| var width = _getImgWidthHeight2[0]; | ||
| var height = _getImgWidthHeight2[1]; | ||
| var left = (_this3.containerWidth - width) / 2; | ||
| var top = (_this3.containerHeight - height - _this3.footerHeight) / 2; | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
| width: width, | ||
| height: height, | ||
| left: left, | ||
| top: top, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| } | ||
| var left = (window.innerWidth - width) / 2; | ||
| var top = (window.innerHeight - height - footerHeight) / 2; | ||
| _this2.setState({ | ||
| activeIndex: activeIndex, | ||
| width: width, | ||
| height: height, | ||
| left: left, | ||
| top: top, | ||
| rotate: 0, | ||
| imageWidth: imgWidth, | ||
| imageHeight: imgHeight, | ||
| scaleX: 1, | ||
| scaleY: 1 | ||
| }); | ||
| }; | ||
| img.onerror = function () { | ||
| _this2.setState({ | ||
| _this3.setState({ | ||
| activeIndex: activeIndex, | ||
@@ -153,3 +219,9 @@ width: 0, | ||
| ViewerCore.prototype.handleChangeImg = function handleChangeImg(newIndex) { | ||
| this.loadImg(newIndex); | ||
| var _this4 = this; | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1); | ||
| setTimeout(function () { | ||
| _this4.loadImg(newIndex); | ||
| }, transitionDuration); | ||
| }; | ||
@@ -170,3 +242,3 @@ | ||
| if (this.state.activeIndex - 1 >= 0) { | ||
| this.loadImg(this.state.activeIndex - 1); | ||
| this.handleChangeImg(this.state.activeIndex - 1); | ||
| } | ||
@@ -176,3 +248,3 @@ break; | ||
| if (this.state.activeIndex + 1 < this.props.images.length) { | ||
| this.loadImg(this.state.activeIndex + 1); | ||
| this.handleChangeImg(this.state.activeIndex + 1); | ||
| } | ||
@@ -182,7 +254,7 @@ break; | ||
| var imgCenterXY = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1); | ||
| this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, .05); | ||
| break; | ||
| case _Icon.ActionType.zoomOut: | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, .05); | ||
| break; | ||
@@ -221,13 +293,25 @@ case _Icon.ActionType.rotateLeft: | ||
| ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct) { | ||
| ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct, scale) { | ||
| var imgCenterXY = this.getImageCenterXY(); | ||
| var diffX = targetX - imgCenterXY.x; | ||
| var diffY = targetY - imgCenterXY.y; | ||
| var diffWidth = direct * this.state.width * 0.05; | ||
| var diffHeight = direct * this.state.height * 0.05; | ||
| var diffWidth = direct * this.state.width * scale; | ||
| var diffHeight = direct * this.state.height * scale; | ||
| // when image width is 0, set original width | ||
| if (diffWidth === 0) { | ||
| var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight); | ||
| var _getImgWidthHeight4 = (0, _slicedToArray3.default)(_getImgWidthHeight3, 2); | ||
| var width = _getImgWidthHeight4[0]; | ||
| var height = _getImgWidthHeight4[1]; | ||
| diffWidth = width; | ||
| diffHeight = height; | ||
| } | ||
| this.setState({ | ||
| width: this.state.width + diffWidth, | ||
| height: this.state.height + diffHeight, | ||
| top: this.state.top + -diffHeight / 2 + -direct * diffY * .05, | ||
| left: this.state.left + -diffWidth / 2 + -direct * diffX * .05 | ||
| top: this.state.top + -diffHeight / 2 + -direct * diffY * scale, | ||
| left: this.state.left + -diffWidth / 2 + -direct * diffX * scale | ||
| }); | ||
@@ -252,2 +336,3 @@ }; | ||
| ViewerCore.prototype.handleResize = function handleResize() { | ||
| this.setContainerWidthHeight(); | ||
| this.loadImg(this.state.activeIndex); | ||
@@ -308,2 +393,11 @@ }; | ||
| ViewerCore.prototype.handleTransitionEnd = function handleTransitionEnd(e) { | ||
| if (!this.state.transitionEnd || this.state.visibleStart) { | ||
| this.setState({ | ||
| visibleStart: false, | ||
| transitionEnd: true | ||
| }); | ||
| } | ||
| }; | ||
| ViewerCore.prototype.bindEvent = function bindEvent() { | ||
@@ -320,11 +414,24 @@ var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; | ||
| ViewerCore.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { | ||
| if (this.state.activeIndex !== nextProps.activeIndex || !this.props.visible && nextProps.visible) { | ||
| this.loadImg(nextProps.activeIndex); | ||
| } | ||
| var _this5 = this; | ||
| if (!this.props.visible && nextProps.visible) { | ||
| this.bindEvent(); | ||
| this.startVisible(); | ||
| return; | ||
| } | ||
| if (this.props.visible && !nextProps.visible) { | ||
| this.bindEvent(true); | ||
| var imgCenterXY2 = this.getImageCenterXY(); | ||
| this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1); | ||
| setTimeout(function () { | ||
| _this5.setState({ | ||
| visible: false, | ||
| transitionEnd: false | ||
| }); | ||
| }, transitionDuration); | ||
| return; | ||
| } | ||
| if (this.state.activeIndex !== nextProps.activeIndex) { | ||
| this.handleChangeImg(nextProps.activeIndex); | ||
| return; | ||
| } | ||
| }; | ||
@@ -337,6 +444,2 @@ | ||
| }; | ||
| var images = this.props.images || []; | ||
| if (images.length > 0) { | ||
| activeImg = images[this.state.activeIndex]; | ||
| } | ||
| var zIndex = 1000; | ||
@@ -346,5 +449,24 @@ if (this.props.zIndex) { | ||
| } | ||
| var viewerStryle = { | ||
| opacity: this.state.visible ? 1 : 0 | ||
| }; | ||
| if (!this.state.visible && this.state.transitionEnd) { | ||
| viewerStryle.display = 'none'; | ||
| } | ||
| if (!this.state.visible && this.state.visibleStart) { | ||
| viewerStryle.display = 'block'; | ||
| } | ||
| if (this.state.visible && this.state.transitionEnd) { | ||
| var images = this.props.images || []; | ||
| if (images.length > 0 && this.state.activeIndex >= 0) { | ||
| activeImg = images[this.state.activeIndex]; | ||
| } | ||
| } | ||
| var className = this.prefixCls + ' ' + this.prefixCls + '-transition'; | ||
| if (this.props.container) { | ||
| className += ' inline'; | ||
| } | ||
| return React.createElement( | ||
| 'div', | ||
| { className: this.prefixCls, style: { display: this.props.visible ? 'block' : 'none' } }, | ||
| { className: className, style: viewerStryle, onTransitionEnd: this.handleTransitionEnd.bind(this) }, | ||
| React.createElement('div', { className: this.prefixCls + '-mask', style: { zIndex: zIndex } }), | ||
@@ -351,0 +473,0 @@ React.createElement( |
@@ -52,3 +52,3 @@ 'use strict'; | ||
| 'ul', | ||
| { className: this.props.prefixCls + '-list ' + this.props.prefixCls + '-transition', style: listStyle }, | ||
| { className: this.props.prefixCls + '-list ' + this.props.prefixCls + '-list-transition', style: listStyle }, | ||
| this.props.images.map(function (item, index) { | ||
@@ -55,0 +55,0 @@ return React.createElement( |
@@ -16,3 +16,5 @@ export interface ImageDecorator { | ||
| zIndex?: number; | ||
| /** viewer渲染的父节点，设置后开启inline mode */ | ||
| container?: HTMLElement; | ||
| } | ||
| export default ViewerProps; |
| { | ||
| "name": "react-viewer", | ||
| "version": "1.1.0", | ||
| "version": "1.2.0", | ||
| "description": "react image viewer", | ||
@@ -5,0 +5,0 @@ "main": "dist/index", |
@@ -55,2 +55,3 @@ # react-viewer | ||
| | zIndex | number | 1000 | Viewer css z-index | false | | ||
| | container | HTMLElement | null | set parent node(inline mode) | false | | ||
@@ -57,0 +58,0 @@ ## Keyboard support |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by10.3%
158809
- Lines of code
- increased by13.9%
2155
- Number of lines in readme file
- increased by1.41%
72
No dependency changes