Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-viewer

Package Overview
Dependencies
Maintainers
1
Versions
56
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-viewer - npm Package Compare versions

Comparing version 2.3.9 to 2.4.0

751

dist/index.js

@@ -352,2 +352,64 @@ (function webpackUniversalModuleDefinition(root, factory) {

};
_this.handleMouseDown = function (e) {
if (!_this.props.visible || !_this.props.drag) {
return;
}
e.preventDefault();
e.stopPropagation();
_this.setState({
isMouseDown: true,
mouseX: e.nativeEvent.clientX,
mouseY: e.nativeEvent.clientY
});
};
_this.handleMouseMove = function (e) {
if (_this.state.isMouseDown) {
var diffX = e.clientX - _this.state.mouseX;
var diffY = e.clientY - _this.state.mouseY;
_this.setState({
mouseX: e.clientX,
mouseY: e.clientY
});
_this.props.onChangeImgState(_this.props.width, _this.props.height, _this.props.top + diffY, _this.props.left + diffX);
}
};
_this.handleMouseUp = function (e) {
_this.setState({
isMouseDown: false
});
};
_this.handleMouseScroll = function (e) {
e.preventDefault();
var direct = 0;
if (e.wheelDelta) {
direct = e.wheelDelta > 0 ? 1 : -1;
} else if (e.detail) {
direct = e.detail > 0 ? -1 : 1;
}
if (direct !== 0) {
var x = e.clientX;
var y = e.clientY;
if (_this.props.container) {
var containerRect = _this.props.container.getBoundingClientRect();
x -= containerRect.left;
y -= containerRect.top;
}
_this.props.onZoom(x, y, direct, .05);
}
};
_this.bindEvent = function (remove) {
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
var mouseScrollArea = document;
if (_this.props.container) {
mouseScrollArea = _this.props.container;
}
mouseScrollArea[funcName]('DOMMouseScroll', _this.handleMouseScroll, false);
mouseScrollArea[funcName]('mousewheel', _this.handleMouseScroll, false);
document[funcName]('click', _this.handleMouseUp, false);
document[funcName]('mousemove', _this.handleMouseMove, false);
window[funcName]('resize', _this.handleResize, false);
};
_this.state = {

@@ -358,7 +420,2 @@ isMouseDown: false,

};
_this.handleMouseScroll = _this.handleMouseScroll.bind(_this);
_this.handleMouseDown = _this.handleMouseDown.bind(_this);
_this.bindEvent = _this.bindEvent.bind(_this);
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
_this.handleMouseUp = _this.handleMouseUp.bind(_this);
return _this;

@@ -373,69 +430,2 @@ }

ViewerCanvas.prototype.handleMouseDown = function handleMouseDown(e) {
if (!this.props.visible || !this.props.drag) {
return;
}
e.preventDefault();
e.stopPropagation();
this.setState({
isMouseDown: true,
mouseX: e.nativeEvent.clientX,
mouseY: e.nativeEvent.clientY
});
};
ViewerCanvas.prototype.handleMouseMove = function handleMouseMove(e) {
if (this.state.isMouseDown) {
var diffX = e.clientX - this.state.mouseX;
var diffY = e.clientY - this.state.mouseY;
this.setState({
mouseX: e.clientX,
mouseY: e.clientY
});
this.props.onChangeImgState(this.props.width, this.props.height, this.props.top + diffY, this.props.left + diffX);
}
};
ViewerCanvas.prototype.handleMouseUp = function handleMouseUp(e) {
this.setState({
isMouseDown: false
});
};
ViewerCanvas.prototype.handleMouseScroll = function handleMouseScroll(e) {
e.preventDefault();
var direct = 0;
if (e.wheelDelta) {
direct = e.wheelDelta > 0 ? 1 : -1;
} else if (e.detail) {
direct = e.detail > 0 ? -1 : 1;
}
if (direct !== 0) {
var x = e.clientX;
var y = e.clientY;
if (this.props.container) {
var containerRect = this.props.container.getBoundingClientRect();
x -= containerRect.left;
y -= containerRect.top;
}
this.props.onZoom(x, y, direct, .05);
}
};
ViewerCanvas.prototype.bindEvent = function bindEvent(remove) {
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
var mouseScrollArea = document;
if (this.props.container) {
mouseScrollArea = this.props.container;
}
mouseScrollArea[funcName]('DOMMouseScroll', this.handleMouseScroll, false);
mouseScrollArea[funcName]('mousewheel', this.handleMouseScroll, false);
document[funcName]('click', this.handleMouseUp, false);
document[funcName]('mousemove', this.handleMouseMove, false);
window[funcName]('resize', this.handleResize, false);
};
ViewerCanvas.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {

@@ -567,2 +557,70 @@ if (!this.props.visible && nextProps.visible) {

_this.handleClose = function (e) {
_this.props.onClose();
};
_this.handleChangeImg = function (newIndex) {
// let imgCenterXY2 = this.getImageCenterXY();
// this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
// setTimeout(() => {
// this.loadImg(newIndex);
// }, transitionDuration);
_this.loadImg(newIndex);
};
_this.handleChangeImgState = function (width, height, top, left) {
_this.setState({
width: width,
height: height,
top: top,
left: left
});
};
_this.handleDefaultAction = function (type) {
switch (type) {
case _Icon.ActionType.prev:
if (_this.state.activeIndex - 1 >= 0) {
_this.handleChangeImg(_this.state.activeIndex - 1);
}
break;
case _Icon.ActionType.next:
if (_this.state.activeIndex + 1 < _this.props.images.length) {
_this.handleChangeImg(_this.state.activeIndex + 1);
}
break;
case _Icon.ActionType.zoomIn:
var imgCenterXY = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 0.05);
break;
case _Icon.ActionType.zoomOut:
var imgCenterXY2 = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 0.05);
break;
case _Icon.ActionType.rotateLeft:
_this.handleRotate();
break;
case _Icon.ActionType.rotateRight:
_this.handleRotate(true);
break;
case _Icon.ActionType.reset:
_this.loadImg(_this.state.activeIndex);
break;
case _Icon.ActionType.scaleX:
_this.handleScaleX(-1);
break;
case _Icon.ActionType.scaleY:
_this.handleScaleY(-1);
break;
case _Icon.ActionType.download:
_this.handleDownload();
break;
default:
break;
}
};
_this.handleAction = function (config) {
_this.handleDefaultAction(config.actionType);
if (config.onClick) {
var activeImage = _this.getActiveImage();
config.onClick(activeImage);
}
};
_this.handleDownload = function () {

@@ -574,2 +632,144 @@ var activeImage = _this.getActiveImage();

};
_this.handleScaleX = function (newScale) {
_this.setState({
scaleX: _this.state.scaleX * newScale
});
};
_this.handleScaleY = function (newScale) {
_this.setState({
scaleY: _this.state.scaleY * newScale
});
};
_this.handleZoom = function (targetX, targetY, direct, scale) {
var imgCenterXY = _this.getImageCenterXY();
var diffX = targetX - imgCenterXY.x;
var diffY = targetY - imgCenterXY.y;
// when image width is 0, set original width
var reset = false;
var top = 0;
var left = 0;
var width = 0;
var height = 0;
var scaleX = 0;
var scaleY = 0;
if (_this.state.width === 0) {
var _this$getImgWidthHeig = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
_this$getImgWidthHeig2 = _slicedToArray(_this$getImgWidthHeig, 2),
imgWidth = _this$getImgWidthHeig2[0],
imgHeight = _this$getImgWidthHeig2[1];
reset = true;
left = (_this.containerWidth - imgWidth) / 2;
top = (_this.containerHeight - _this.footerHeight - imgHeight) / 2;
width = _this.state.width + imgWidth;
height = _this.state.height + imgHeight;
scaleX = scaleY = 1;
} else {
var directX = _this.state.scaleX > 0 ? 1 : -1;
var directY = _this.state.scaleY > 0 ? 1 : -1;
scaleX = _this.state.scaleX + scale * direct * directX;
scaleY = _this.state.scaleY + scale * direct * directY;
if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
return;
}
top = _this.state.top + -direct * diffY / _this.state.scaleX * scale * directX;
left = _this.state.left + -direct * diffX / _this.state.scaleY * scale * directY;
width = _this.state.width;
height = _this.state.height;
}
_this.setState({
width: width,
scaleX: scaleX,
scaleY: scaleY,
height: height,
top: top,
left: left,
loading: false
});
};
_this.getImageCenterXY = function () {
return {
x: _this.state.left + _this.state.width / 2,
y: _this.state.top + _this.state.height / 2
};
};
_this.handleRotate = function () {
var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
_this.setState({
rotate: _this.state.rotate + 90 * (isRight ? 1 : -1)
});
};
_this.handleResize = function () {
_this.setContainerWidthHeight();
if (_this.props.visible) {
var _this$getImgWidthHeig3 = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
_this$getImgWidthHeig4 = _slicedToArray(_this$getImgWidthHeig3, 2),
width = _this$getImgWidthHeig4[0],
height = _this$getImgWidthHeig4[1];
var left = (_this.containerWidth - width) / 2;
var top = (_this.containerHeight - height - _this.footerHeight) / 2;
_this.setState({
width: width,
height: height,
left: left,
top: top,
rotate: 0,
scaleX: 1,
scaleY: 1
});
}
};
_this.handleKeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
var isFeatrue = false;
switch (keyCode) {
// key: esc
case 27:
_this.props.onClose();
isFeatrue = true;
break;
// key: ←
case 37:
if (e.ctrlKey) {
_this.handleDefaultAction(_Icon.ActionType.rotateLeft);
} else {
_this.handleDefaultAction(_Icon.ActionType.prev);
}
isFeatrue = true;
break;
// key: →
case 39:
if (e.ctrlKey) {
_this.handleDefaultAction(_Icon.ActionType.rotateRight);
} else {
_this.handleDefaultAction(_Icon.ActionType.next);
}
isFeatrue = true;
break;
// key: ↑
case 38:
_this.handleDefaultAction(_Icon.ActionType.zoomIn);
isFeatrue = true;
break;
// key: ↓
case 40:
_this.handleDefaultAction(_Icon.ActionType.zoomOut);
isFeatrue = true;
break;
// key: Ctrl + 1
case 49:
if (e.ctrlKey) {
_this.loadImg(_this.state.activeIndex);
isFeatrue = true;
}
break;
default:
break;
}
if (isFeatrue) {
e.preventDefault();
}
};
_this.handleTransitionEnd = function (e) {

@@ -615,12 +815,2 @@ if (!_this.state.transitionEnd || _this.state.visibleStart) {

};
_this.handleChangeImg = _this.handleChangeImg.bind(_this);
_this.handleChangeImgState = _this.handleChangeImgState.bind(_this);
_this.handleAction = _this.handleAction.bind(_this);
_this.handleResize = _this.handleResize.bind(_this);
_this.handleZoom = _this.handleZoom.bind(_this);
_this.handleRotate = _this.handleRotate.bind(_this);
_this.handleKeydown = _this.handleKeydown.bind(_this);
_this.handleScaleX = _this.handleScaleX.bind(_this);
_this.handleScaleY = _this.handleScaleY.bind(_this);
_this.getImageCenterXY = _this.getImageCenterXY.bind(_this);
_this.setContainerWidthHeight();

@@ -640,6 +830,2 @@ _this.footerHeight = 84;

ViewerCore.prototype.handleClose = function handleClose(e) {
this.props.onClose();
};
ViewerCore.prototype.startVisible = function startVisible(activeIndex) {

@@ -763,212 +949,2 @@ var _this2 = this;

ViewerCore.prototype.handleChangeImg = function handleChangeImg(newIndex) {
// let imgCenterXY2 = this.getImageCenterXY();
// this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
// setTimeout(() => {
// this.loadImg(newIndex);
// }, transitionDuration);
this.loadImg(newIndex);
};
ViewerCore.prototype.handleChangeImgState = function handleChangeImgState(width, height, top, left) {
this.setState({
width: width,
height: height,
top: top,
left: left
});
};
ViewerCore.prototype.handleAction = function handleAction(type) {
switch (type) {
case _Icon.ActionType.prev:
if (this.state.activeIndex - 1 >= 0) {
this.handleChangeImg(this.state.activeIndex - 1);
}
break;
case _Icon.ActionType.next:
if (this.state.activeIndex + 1 < this.props.images.length) {
this.handleChangeImg(this.state.activeIndex + 1);
}
break;
case _Icon.ActionType.zoomIn:
var imgCenterXY = this.getImageCenterXY();
this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 0.05);
break;
case _Icon.ActionType.zoomOut:
var imgCenterXY2 = this.getImageCenterXY();
this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 0.05);
break;
case _Icon.ActionType.rotateLeft:
this.handleRotate();
break;
case _Icon.ActionType.rotateRight:
this.handleRotate(true);
break;
case _Icon.ActionType.reset:
this.loadImg(this.state.activeIndex);
break;
case _Icon.ActionType.scaleX:
this.handleScaleX(-1);
break;
case _Icon.ActionType.scaleY:
this.handleScaleY(-1);
break;
case _Icon.ActionType.download:
this.handleDownload();
break;
default:
break;
}
};
ViewerCore.prototype.handleScaleX = function handleScaleX(newScale) {
this.setState({
scaleX: this.state.scaleX * newScale
});
};
ViewerCore.prototype.handleScaleY = function handleScaleY(newScale) {
this.setState({
scaleY: this.state.scaleY * newScale
});
};
ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct, scale) {
var imgCenterXY = this.getImageCenterXY();
var diffX = targetX - imgCenterXY.x;
var diffY = targetY - imgCenterXY.y;
// when image width is 0, set original width
var reset = false;
var top = 0;
var left = 0;
var width = 0;
var height = 0;
var scaleX = 0;
var scaleY = 0;
if (this.state.width === 0) {
var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
_getImgWidthHeight4 = _slicedToArray(_getImgWidthHeight3, 2),
imgWidth = _getImgWidthHeight4[0],
imgHeight = _getImgWidthHeight4[1];
reset = true;
left = (this.containerWidth - imgWidth) / 2;
top = (this.containerHeight - this.footerHeight - imgHeight) / 2;
width = this.state.width + imgWidth;
height = this.state.height + imgHeight;
scaleX = scaleY = 1;
} else {
var directX = this.state.scaleX > 0 ? 1 : -1;
var directY = this.state.scaleY > 0 ? 1 : -1;
scaleX = this.state.scaleX + scale * direct * directX;
scaleY = this.state.scaleY + scale * direct * directY;
if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
return;
}
top = this.state.top + -direct * diffY / this.state.scaleX * scale * directX;
left = this.state.left + -direct * diffX / this.state.scaleY * scale * directY;
width = this.state.width;
height = this.state.height;
}
this.setState({
width: width,
scaleX: scaleX,
scaleY: scaleY,
height: height,
top: top,
left: left,
loading: false
});
};
ViewerCore.prototype.getImageCenterXY = function getImageCenterXY() {
return {
x: this.state.left + this.state.width / 2,
y: this.state.top + this.state.height / 2
};
};
ViewerCore.prototype.handleRotate = function handleRotate() {
var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.setState({
rotate: this.state.rotate + 90 * (isRight ? 1 : -1)
});
};
ViewerCore.prototype.handleResize = function handleResize() {
this.setContainerWidthHeight();
if (this.props.visible) {
var _getImgWidthHeight5 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
_getImgWidthHeight6 = _slicedToArray(_getImgWidthHeight5, 2),
width = _getImgWidthHeight6[0],
height = _getImgWidthHeight6[1];
var left = (this.containerWidth - width) / 2;
var top = (this.containerHeight - height - this.footerHeight) / 2;
this.setState({
width: width,
height: height,
left: left,
top: top,
rotate: 0,
scaleX: 1,
scaleY: 1
});
}
};
ViewerCore.prototype.handleKeydown = function handleKeydown(e) {
var keyCode = e.keyCode || e.which || e.charCode;
var isFeatrue = false;
switch (keyCode) {
// key: esc
case 27:
this.props.onClose();
isFeatrue = true;
break;
// key: ←
case 37:
if (e.ctrlKey) {
this.handleAction(_Icon.ActionType.rotateLeft);
} else {
this.handleAction(_Icon.ActionType.prev);
}
isFeatrue = true;
break;
// key: →
case 39:
if (e.ctrlKey) {
this.handleAction(_Icon.ActionType.rotateRight);
} else {
this.handleAction(_Icon.ActionType.next);
}
isFeatrue = true;
break;
// key: ↑
case 38:
this.handleAction(_Icon.ActionType.zoomIn);
isFeatrue = true;
break;
// key: ↓
case 40:
this.handleAction(_Icon.ActionType.zoomOut);
isFeatrue = true;
break;
// key: Ctrl + 1
case 49:
if (e.ctrlKey) {
this.loadImg(this.state.activeIndex);
isFeatrue = true;
}
break;
default:
break;
}
if (isFeatrue) {
e.preventDefault();
}
};
ViewerCore.prototype.bindEvent = function bindEvent() {

@@ -1048,3 +1024,3 @@ var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

'div',
{ className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this), style: { zIndex: zIndex + 10 } },
{ className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose, style: { zIndex: zIndex + 10 } },
React.createElement(_Icon2.default, { type: _Icon.ActionType.close })

@@ -1056,3 +1032,3 @@ ),

{ className: this.prefixCls + '-footer', style: { zIndex: zIndex + 5 } },
this.props.noToolbar || React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight, attribute: this.props.attribute, zoomable: this.props.zoomable, rotatable: this.props.rotatable, scalable: this.props.scalable, changeable: this.props.changeable, downloadable: this.props.downloadable, noImgDetails: this.props.noImgDetails }),
this.props.noToolbar || React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight, attribute: this.props.attribute, zoomable: this.props.zoomable, rotatable: this.props.rotatable, scalable: this.props.scalable, changeable: this.props.changeable, downloadable: this.props.downloadable, noImgDetails: this.props.noImgDetails, toolbars: this.props.customToolbar(_ViewerToolbar.defaultToolbars) }),
this.props.noNavbar || React.createElement(_ViewerNav2.default, { prefixCls: this.prefixCls, images: this.props.images, activeIndex: this.state.activeIndex, onChangeImg: this.handleChangeImg })

@@ -1080,3 +1056,6 @@ )

onMaskClick: noop,
changeable: true
changeable: true,
customToolbar: function customToolbar(toolbars) {
return toolbars;
}
};

@@ -1116,12 +1095,13 @@ module.exports = exports['default'];

return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
var _this = _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
_this.handleChangeImg = function (newIndex) {
if (_this.props.activeIndex === newIndex) {
return;
}
_this.props.onChangeImg(newIndex);
};
return _this;
}
ViewerNav.prototype.handleChangeImg = function handleChangeImg(newIndex) {
if (this.props.activeIndex === newIndex) {
return;
}
this.props.onChangeImg(newIndex);
};
ViewerNav.prototype.render = function render() {

@@ -1143,3 +1123,5 @@ var _this2 = this;

'li',
{ key: index, className: index === _this2.props.activeIndex ? 'active' : '', onClick: _this2.handleChangeImg.bind(_this2, index) },
{ key: index, className: index === _this2.props.activeIndex ? 'active' : '', onClick: function onClick() {
_this2.handleChangeImg(index);
} },
React.createElement('img', { src: item.src, alt: item.alt })

@@ -1171,3 +1153,3 @@ );

});
exports.default = undefined;
exports.default = exports.defaultToolbars = undefined;

@@ -1194,2 +1176,40 @@ var _react = __webpack_require__(1);

var defaultToolbars = exports.defaultToolbars = [{
key: 'zoomIn',
actionType: _Icon.ActionType.zoomIn
}, {
key: 'zoomOut',
actionType: _Icon.ActionType.zoomOut
}, {
key: 'prev',
actionType: _Icon.ActionType.prev
}, {
key: 'reset',
actionType: _Icon.ActionType.reset
}, {
key: 'next',
actionType: _Icon.ActionType.next
}, {
key: 'rotateLeft',
actionType: _Icon.ActionType.rotateLeft
}, {
key: 'rotateRight',
actionType: _Icon.ActionType.rotateRight
}, {
key: 'scaleX',
actionType: _Icon.ActionType.scaleX
}, {
key: 'scaleY',
actionType: _Icon.ActionType.scaleY
}, {
key: 'download',
actionType: _Icon.ActionType.download
}];
function deleteToolbarFromKey(toolbars, keys) {
var targetToolbar = toolbars.filter(function (item) {
return keys.indexOf(item.key) < 0;
});
return targetToolbar;
}
var ViewerToolbar = function (_React$Component) {

@@ -1201,7 +1221,27 @@ _inherits(ViewerToolbar, _React$Component);

return _possibleConstructorReturn(this, _React$Component.call(this));
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.renderAction = function (config) {
var content = null;
// default toolbar
if (typeof _Icon.ActionType[config.actionType] !== 'undefined') {
content = React.createElement(_Icon2.default, { type: config.actionType });
}
// extra toolbar
if (config.render) {
content = config.render;
}
return React.createElement(
'li',
{ key: config.key, className: _this.props.prefixCls + '-btn', onClick: function onClick() {
_this.handleAction(config);
} },
content
);
};
return _this;
}
ViewerToolbar.prototype.handleAction = function handleAction(type) {
this.props.onAction(type);
ViewerToolbar.prototype.handleAction = function handleAction(config) {
this.props.onAction(config);
};

@@ -1218,77 +1258,17 @@

) : null;
var featureNodeArr = [];
if (this.props.zoomable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'zoomIn', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.zoomIn);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.zoomIn })
), React.createElement(
'li',
{ key: 'zoomOut', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.zoomOut);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.zoomOut })
)]);
var toolbars = this.props.toolbars;
if (!this.props.zoomable) {
toolbars = deleteToolbarFromKey(toolbars, ['zoomIn', 'zoomOut']);
}
if (this.props.changeable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'prev', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.prev);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.prev })
), React.createElement(
'li',
{ key: 'reset', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.reset);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.reset })
), React.createElement(
'li',
{ key: 'next', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.next);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.next })
)]);
if (!this.props.changeable) {
toolbars = deleteToolbarFromKey(toolbars, ['prev', 'next']);
}
if (this.props.rotatable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'rotateLeft', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.rotateLeft);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.rotateLeft })
), React.createElement(
'li',
{ key: 'rotateRight', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.rotateRight);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.rotateRight })
)]);
if (!this.props.rotatable) {
toolbars = deleteToolbarFromKey(toolbars, ['rotateLeft', 'rotateRight']);
}
if (this.props.scalable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'scaleX', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.scaleX);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.scaleX })
), React.createElement(
'li',
{ key: 'scaleY', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.scaleY);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.scaleY })
)]);
if (!this.props.scalable) {
toolbars = deleteToolbarFromKey(toolbars, ['scaleX', 'scaleY']);
}
if (this.props.downloadable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'download', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.download);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.download })
)]);
if (!this.props.downloadable) {
toolbars = deleteToolbarFromKey(toolbars, ['download']);
}

@@ -1302,3 +1282,5 @@ return React.createElement(

{ className: this.props.prefixCls + '-toolbar' },
featureNodeArr
toolbars.map(function (item) {
return _this2.renderAction(item);
})
)

@@ -1312,3 +1294,2 @@ );

exports.default = ViewerToolbar;
module.exports = exports['default'];

@@ -1315,0 +1296,0 @@ /***/ }),

2

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

10

lib/ViewerCanvas.d.ts

@@ -33,7 +33,7 @@ /// <reference types="react" />

handleCanvasMouseDown: (e: any) => void;
handleMouseDown(e: any): void;
handleMouseMove(e: any): void;
handleMouseUp(e: any): void;
handleMouseScroll(e: any): void;
bindEvent(remove?: boolean): void;
handleMouseDown: (e: any) => void;
handleMouseMove: (e: any) => void;
handleMouseUp: (e: any) => void;
handleMouseScroll: (e: any) => void;
bindEvent: (remove?: boolean) => void;
componentWillReceiveProps(nextProps: ViewerCanvasProps): void;

@@ -40,0 +40,0 @@ componentWillUnmount(): void;

134

lib/ViewerCanvas.js

@@ -47,2 +47,64 @@ 'use strict';

};
_this.handleMouseDown = function (e) {
if (!_this.props.visible || !_this.props.drag) {
return;
}
e.preventDefault();
e.stopPropagation();
_this.setState({
isMouseDown: true,
mouseX: e.nativeEvent.clientX,
mouseY: e.nativeEvent.clientY
});
};
_this.handleMouseMove = function (e) {
if (_this.state.isMouseDown) {
var diffX = e.clientX - _this.state.mouseX;
var diffY = e.clientY - _this.state.mouseY;
_this.setState({
mouseX: e.clientX,
mouseY: e.clientY
});
_this.props.onChangeImgState(_this.props.width, _this.props.height, _this.props.top + diffY, _this.props.left + diffX);
}
};
_this.handleMouseUp = function (e) {
_this.setState({
isMouseDown: false
});
};
_this.handleMouseScroll = function (e) {
e.preventDefault();
var direct = 0;
if (e.wheelDelta) {
direct = e.wheelDelta > 0 ? 1 : -1;
} else if (e.detail) {
direct = e.detail > 0 ? -1 : 1;
}
if (direct !== 0) {
var x = e.clientX;
var y = e.clientY;
if (_this.props.container) {
var containerRect = _this.props.container.getBoundingClientRect();
x -= containerRect.left;
y -= containerRect.top;
}
_this.props.onZoom(x, y, direct, .05);
}
};
_this.bindEvent = function (remove) {
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
var mouseScrollArea = document;
if (_this.props.container) {
mouseScrollArea = _this.props.container;
}
mouseScrollArea[funcName]('DOMMouseScroll', _this.handleMouseScroll, false);
mouseScrollArea[funcName]('mousewheel', _this.handleMouseScroll, false);
document[funcName]('click', _this.handleMouseUp, false);
document[funcName]('mousemove', _this.handleMouseMove, false);
window[funcName]('resize', _this.handleResize, false);
};
_this.state = {

@@ -53,7 +115,2 @@ isMouseDown: false,

};
_this.handleMouseScroll = _this.handleMouseScroll.bind(_this);
_this.handleMouseDown = _this.handleMouseDown.bind(_this);
_this.bindEvent = _this.bindEvent.bind(_this);
_this.handleMouseMove = _this.handleMouseMove.bind(_this);
_this.handleMouseUp = _this.handleMouseUp.bind(_this);
return _this;

@@ -68,69 +125,2 @@ }

ViewerCanvas.prototype.handleMouseDown = function handleMouseDown(e) {
if (!this.props.visible || !this.props.drag) {
return;
}
e.preventDefault();
e.stopPropagation();
this.setState({
isMouseDown: true,
mouseX: e.nativeEvent.clientX,
mouseY: e.nativeEvent.clientY
});
};
ViewerCanvas.prototype.handleMouseMove = function handleMouseMove(e) {
if (this.state.isMouseDown) {
var diffX = e.clientX - this.state.mouseX;
var diffY = e.clientY - this.state.mouseY;
this.setState({
mouseX: e.clientX,
mouseY: e.clientY
});
this.props.onChangeImgState(this.props.width, this.props.height, this.props.top + diffY, this.props.left + diffX);
}
};
ViewerCanvas.prototype.handleMouseUp = function handleMouseUp(e) {
this.setState({
isMouseDown: false
});
};
ViewerCanvas.prototype.handleMouseScroll = function handleMouseScroll(e) {
e.preventDefault();
var direct = 0;
if (e.wheelDelta) {
direct = e.wheelDelta > 0 ? 1 : -1;
} else if (e.detail) {
direct = e.detail > 0 ? -1 : 1;
}
if (direct !== 0) {
var x = e.clientX;
var y = e.clientY;
if (this.props.container) {
var containerRect = this.props.container.getBoundingClientRect();
x -= containerRect.left;
y -= containerRect.top;
}
this.props.onZoom(x, y, direct, .05);
}
};
ViewerCanvas.prototype.bindEvent = function bindEvent(remove) {
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
var mouseScrollArea = document;
if (this.props.container) {
mouseScrollArea = this.props.container;
}
mouseScrollArea[funcName]('DOMMouseScroll', this.handleMouseScroll, false);
mouseScrollArea[funcName]('mousewheel', this.handleMouseScroll, false);
document[funcName]('click', this.handleMouseUp, false);
document[funcName]('mousemove', this.handleMouseMove, false);
window[funcName]('resize', this.handleResize, false);
};
ViewerCanvas.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {

@@ -137,0 +127,0 @@ if (!this.props.visible && nextProps.visible) {

26

lib/ViewerCore.d.ts
/// <reference types="react" />
import * as React from 'react';
import './style/index.less';
import ViewerProps, { ImageDecorator } from './ViewerProps';
import ViewerProps, { ImageDecorator, ToolbarConfig } from './ViewerProps';
import { ActionType } from './Icon';

@@ -36,2 +36,3 @@ export interface ViewerCoreState {

changeable: boolean;
customToolbar: (toolbars: any) => any;
};

@@ -44,3 +45,3 @@ private prefixCls;

setContainerWidthHeight(): void;
handleClose(e: any): void;
handleClose: (e: any) => void;
startVisible(activeIndex: number): void;

@@ -50,16 +51,17 @@ componentDidMount(): void;

loadImg(activeIndex: any, firstLoad?: boolean): void;
handleChangeImg(newIndex: number): void;
handleChangeImgState(width: any, height: any, top: any, left: any): void;
handleAction(type: ActionType): void;
handleChangeImg: (newIndex: number) => void;
handleChangeImgState: (width: any, height: any, top: any, left: any) => void;
handleDefaultAction: (type: ActionType) => void;
handleAction: (config: ToolbarConfig) => void;
handleDownload: () => void;
handleScaleX(newScale: 1 | -1): void;
handleScaleY(newScale: 1 | -1): void;
handleZoom(targetX: any, targetY: any, direct: any, scale: any): void;
getImageCenterXY(): {
handleScaleX: (newScale: 1 | -1) => void;
handleScaleY: (newScale: 1 | -1) => void;
handleZoom: (targetX: any, targetY: any, direct: any, scale: any) => void;
getImageCenterXY: () => {
x: number;
y: number;
};
handleRotate(isRight?: boolean): void;
handleResize(): void;
handleKeydown(e: any): void;
handleRotate: (isRight?: boolean) => void;
handleResize: () => void;
handleKeydown: (e: any) => void;
handleTransitionEnd: (e: any) => void;

@@ -66,0 +68,0 @@ bindEvent(remove?: boolean): void;

443

lib/ViewerCore.js

@@ -61,2 +61,70 @@ 'use strict';

_this.handleClose = function (e) {
_this.props.onClose();
};
_this.handleChangeImg = function (newIndex) {
// let imgCenterXY2 = this.getImageCenterXY();
// this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
// setTimeout(() => {
// this.loadImg(newIndex);
// }, transitionDuration);
_this.loadImg(newIndex);
};
_this.handleChangeImgState = function (width, height, top, left) {
_this.setState({
width: width,
height: height,
top: top,
left: left
});
};
_this.handleDefaultAction = function (type) {
switch (type) {
case _Icon.ActionType.prev:
if (_this.state.activeIndex - 1 >= 0) {
_this.handleChangeImg(_this.state.activeIndex - 1);
}
break;
case _Icon.ActionType.next:
if (_this.state.activeIndex + 1 < _this.props.images.length) {
_this.handleChangeImg(_this.state.activeIndex + 1);
}
break;
case _Icon.ActionType.zoomIn:
var imgCenterXY = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 0.05);
break;
case _Icon.ActionType.zoomOut:
var imgCenterXY2 = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 0.05);
break;
case _Icon.ActionType.rotateLeft:
_this.handleRotate();
break;
case _Icon.ActionType.rotateRight:
_this.handleRotate(true);
break;
case _Icon.ActionType.reset:
_this.loadImg(_this.state.activeIndex);
break;
case _Icon.ActionType.scaleX:
_this.handleScaleX(-1);
break;
case _Icon.ActionType.scaleY:
_this.handleScaleY(-1);
break;
case _Icon.ActionType.download:
_this.handleDownload();
break;
default:
break;
}
};
_this.handleAction = function (config) {
_this.handleDefaultAction(config.actionType);
if (config.onClick) {
var activeImage = _this.getActiveImage();
config.onClick(activeImage);
}
};
_this.handleDownload = function () {

@@ -68,2 +136,144 @@ var activeImage = _this.getActiveImage();

};
_this.handleScaleX = function (newScale) {
_this.setState({
scaleX: _this.state.scaleX * newScale
});
};
_this.handleScaleY = function (newScale) {
_this.setState({
scaleY: _this.state.scaleY * newScale
});
};
_this.handleZoom = function (targetX, targetY, direct, scale) {
var imgCenterXY = _this.getImageCenterXY();
var diffX = targetX - imgCenterXY.x;
var diffY = targetY - imgCenterXY.y;
// when image width is 0, set original width
var reset = false;
var top = 0;
var left = 0;
var width = 0;
var height = 0;
var scaleX = 0;
var scaleY = 0;
if (_this.state.width === 0) {
var _this$getImgWidthHeig = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
_this$getImgWidthHeig2 = (0, _slicedToArray3.default)(_this$getImgWidthHeig, 2),
imgWidth = _this$getImgWidthHeig2[0],
imgHeight = _this$getImgWidthHeig2[1];
reset = true;
left = (_this.containerWidth - imgWidth) / 2;
top = (_this.containerHeight - _this.footerHeight - imgHeight) / 2;
width = _this.state.width + imgWidth;
height = _this.state.height + imgHeight;
scaleX = scaleY = 1;
} else {
var directX = _this.state.scaleX > 0 ? 1 : -1;
var directY = _this.state.scaleY > 0 ? 1 : -1;
scaleX = _this.state.scaleX + scale * direct * directX;
scaleY = _this.state.scaleY + scale * direct * directY;
if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
return;
}
top = _this.state.top + -direct * diffY / _this.state.scaleX * scale * directX;
left = _this.state.left + -direct * diffX / _this.state.scaleY * scale * directY;
width = _this.state.width;
height = _this.state.height;
}
_this.setState({
width: width,
scaleX: scaleX,
scaleY: scaleY,
height: height,
top: top,
left: left,
loading: false
});
};
_this.getImageCenterXY = function () {
return {
x: _this.state.left + _this.state.width / 2,
y: _this.state.top + _this.state.height / 2
};
};
_this.handleRotate = function () {
var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
_this.setState({
rotate: _this.state.rotate + 90 * (isRight ? 1 : -1)
});
};
_this.handleResize = function () {
_this.setContainerWidthHeight();
if (_this.props.visible) {
var _this$getImgWidthHeig3 = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
_this$getImgWidthHeig4 = (0, _slicedToArray3.default)(_this$getImgWidthHeig3, 2),
width = _this$getImgWidthHeig4[0],
height = _this$getImgWidthHeig4[1];
var left = (_this.containerWidth - width) / 2;
var top = (_this.containerHeight - height - _this.footerHeight) / 2;
_this.setState({
width: width,
height: height,
left: left,
top: top,
rotate: 0,
scaleX: 1,
scaleY: 1
});
}
};
_this.handleKeydown = function (e) {
var keyCode = e.keyCode || e.which || e.charCode;
var isFeatrue = false;
switch (keyCode) {
// key: esc
case 27:
_this.props.onClose();
isFeatrue = true;
break;
// key: ←
case 37:
if (e.ctrlKey) {
_this.handleDefaultAction(_Icon.ActionType.rotateLeft);
} else {
_this.handleDefaultAction(_Icon.ActionType.prev);
}
isFeatrue = true;
break;
// key: →
case 39:
if (e.ctrlKey) {
_this.handleDefaultAction(_Icon.ActionType.rotateRight);
} else {
_this.handleDefaultAction(_Icon.ActionType.next);
}
isFeatrue = true;
break;
// key: ↑
case 38:
_this.handleDefaultAction(_Icon.ActionType.zoomIn);
isFeatrue = true;
break;
// key: ↓
case 40:
_this.handleDefaultAction(_Icon.ActionType.zoomOut);
isFeatrue = true;
break;
// key: Ctrl + 1
case 49:
if (e.ctrlKey) {
_this.loadImg(_this.state.activeIndex);
isFeatrue = true;
}
break;
default:
break;
}
if (isFeatrue) {
e.preventDefault();
}
};
_this.handleTransitionEnd = function (e) {

@@ -109,12 +319,2 @@ if (!_this.state.transitionEnd || _this.state.visibleStart) {

};
_this.handleChangeImg = _this.handleChangeImg.bind(_this);
_this.handleChangeImgState = _this.handleChangeImgState.bind(_this);
_this.handleAction = _this.handleAction.bind(_this);
_this.handleResize = _this.handleResize.bind(_this);
_this.handleZoom = _this.handleZoom.bind(_this);
_this.handleRotate = _this.handleRotate.bind(_this);
_this.handleKeydown = _this.handleKeydown.bind(_this);
_this.handleScaleX = _this.handleScaleX.bind(_this);
_this.handleScaleY = _this.handleScaleY.bind(_this);
_this.getImageCenterXY = _this.getImageCenterXY.bind(_this);
_this.setContainerWidthHeight();

@@ -134,6 +334,2 @@ _this.footerHeight = 84;

ViewerCore.prototype.handleClose = function handleClose(e) {
this.props.onClose();
};
ViewerCore.prototype.startVisible = function startVisible(activeIndex) {

@@ -257,212 +453,2 @@ var _this2 = this;

ViewerCore.prototype.handleChangeImg = function handleChangeImg(newIndex) {
// let imgCenterXY2 = this.getImageCenterXY();
// this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 1);
// setTimeout(() => {
// this.loadImg(newIndex);
// }, transitionDuration);
this.loadImg(newIndex);
};
ViewerCore.prototype.handleChangeImgState = function handleChangeImgState(width, height, top, left) {
this.setState({
width: width,
height: height,
top: top,
left: left
});
};
ViewerCore.prototype.handleAction = function handleAction(type) {
switch (type) {
case _Icon.ActionType.prev:
if (this.state.activeIndex - 1 >= 0) {
this.handleChangeImg(this.state.activeIndex - 1);
}
break;
case _Icon.ActionType.next:
if (this.state.activeIndex + 1 < this.props.images.length) {
this.handleChangeImg(this.state.activeIndex + 1);
}
break;
case _Icon.ActionType.zoomIn:
var imgCenterXY = this.getImageCenterXY();
this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, 0.05);
break;
case _Icon.ActionType.zoomOut:
var imgCenterXY2 = this.getImageCenterXY();
this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, 0.05);
break;
case _Icon.ActionType.rotateLeft:
this.handleRotate();
break;
case _Icon.ActionType.rotateRight:
this.handleRotate(true);
break;
case _Icon.ActionType.reset:
this.loadImg(this.state.activeIndex);
break;
case _Icon.ActionType.scaleX:
this.handleScaleX(-1);
break;
case _Icon.ActionType.scaleY:
this.handleScaleY(-1);
break;
case _Icon.ActionType.download:
this.handleDownload();
break;
default:
break;
}
};
ViewerCore.prototype.handleScaleX = function handleScaleX(newScale) {
this.setState({
scaleX: this.state.scaleX * newScale
});
};
ViewerCore.prototype.handleScaleY = function handleScaleY(newScale) {
this.setState({
scaleY: this.state.scaleY * newScale
});
};
ViewerCore.prototype.handleZoom = function handleZoom(targetX, targetY, direct, scale) {
var imgCenterXY = this.getImageCenterXY();
var diffX = targetX - imgCenterXY.x;
var diffY = targetY - imgCenterXY.y;
// when image width is 0, set original width
var reset = false;
var top = 0;
var left = 0;
var width = 0;
var height = 0;
var scaleX = 0;
var scaleY = 0;
if (this.state.width === 0) {
var _getImgWidthHeight3 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
_getImgWidthHeight4 = (0, _slicedToArray3.default)(_getImgWidthHeight3, 2),
imgWidth = _getImgWidthHeight4[0],
imgHeight = _getImgWidthHeight4[1];
reset = true;
left = (this.containerWidth - imgWidth) / 2;
top = (this.containerHeight - this.footerHeight - imgHeight) / 2;
width = this.state.width + imgWidth;
height = this.state.height + imgHeight;
scaleX = scaleY = 1;
} else {
var directX = this.state.scaleX > 0 ? 1 : -1;
var directY = this.state.scaleY > 0 ? 1 : -1;
scaleX = this.state.scaleX + scale * direct * directX;
scaleY = this.state.scaleY + scale * direct * directY;
if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
return;
}
top = this.state.top + -direct * diffY / this.state.scaleX * scale * directX;
left = this.state.left + -direct * diffX / this.state.scaleY * scale * directY;
width = this.state.width;
height = this.state.height;
}
this.setState({
width: width,
scaleX: scaleX,
scaleY: scaleY,
height: height,
top: top,
left: left,
loading: false
});
};
ViewerCore.prototype.getImageCenterXY = function getImageCenterXY() {
return {
x: this.state.left + this.state.width / 2,
y: this.state.top + this.state.height / 2
};
};
ViewerCore.prototype.handleRotate = function handleRotate() {
var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.setState({
rotate: this.state.rotate + 90 * (isRight ? 1 : -1)
});
};
ViewerCore.prototype.handleResize = function handleResize() {
this.setContainerWidthHeight();
if (this.props.visible) {
var _getImgWidthHeight5 = this.getImgWidthHeight(this.state.imageWidth, this.state.imageHeight),
_getImgWidthHeight6 = (0, _slicedToArray3.default)(_getImgWidthHeight5, 2),
width = _getImgWidthHeight6[0],
height = _getImgWidthHeight6[1];
var left = (this.containerWidth - width) / 2;
var top = (this.containerHeight - height - this.footerHeight) / 2;
this.setState({
width: width,
height: height,
left: left,
top: top,
rotate: 0,
scaleX: 1,
scaleY: 1
});
}
};
ViewerCore.prototype.handleKeydown = function handleKeydown(e) {
var keyCode = e.keyCode || e.which || e.charCode;
var isFeatrue = false;
switch (keyCode) {
// key: esc
case 27:
this.props.onClose();
isFeatrue = true;
break;
// key: ←
case 37:
if (e.ctrlKey) {
this.handleAction(_Icon.ActionType.rotateLeft);
} else {
this.handleAction(_Icon.ActionType.prev);
}
isFeatrue = true;
break;
// key: →
case 39:
if (e.ctrlKey) {
this.handleAction(_Icon.ActionType.rotateRight);
} else {
this.handleAction(_Icon.ActionType.next);
}
isFeatrue = true;
break;
// key: ↑
case 38:
this.handleAction(_Icon.ActionType.zoomIn);
isFeatrue = true;
break;
// key: ↓
case 40:
this.handleAction(_Icon.ActionType.zoomOut);
isFeatrue = true;
break;
// key: Ctrl + 1
case 49:
if (e.ctrlKey) {
this.loadImg(this.state.activeIndex);
isFeatrue = true;
}
break;
default:
break;
}
if (isFeatrue) {
e.preventDefault();
}
};
ViewerCore.prototype.bindEvent = function bindEvent() {

@@ -542,3 +528,3 @@ var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

'div',
{ className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose.bind(this), style: { zIndex: zIndex + 10 } },
{ className: this.prefixCls + '-close ' + this.prefixCls + '-btn', onClick: this.handleClose, style: { zIndex: zIndex + 10 } },
React.createElement(_Icon2.default, { type: _Icon.ActionType.close })

@@ -550,3 +536,3 @@ ),

{ className: this.prefixCls + '-footer', style: { zIndex: zIndex + 5 } },
this.props.noToolbar || React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight, attribute: this.props.attribute, zoomable: this.props.zoomable, rotatable: this.props.rotatable, scalable: this.props.scalable, changeable: this.props.changeable, downloadable: this.props.downloadable, noImgDetails: this.props.noImgDetails }),
this.props.noToolbar || React.createElement(_ViewerToolbar2.default, { prefixCls: this.prefixCls, onAction: this.handleAction, alt: activeImg.alt, width: this.state.imageWidth, height: this.state.imageHeight, attribute: this.props.attribute, zoomable: this.props.zoomable, rotatable: this.props.rotatable, scalable: this.props.scalable, changeable: this.props.changeable, downloadable: this.props.downloadable, noImgDetails: this.props.noImgDetails, toolbars: this.props.customToolbar(_ViewerToolbar.defaultToolbars) }),
this.props.noNavbar || React.createElement(_ViewerNav2.default, { prefixCls: this.prefixCls, images: this.props.images, activeIndex: this.state.activeIndex, onChangeImg: this.handleChangeImg })

@@ -574,4 +560,7 @@ )

onMaskClick: noop,
changeable: true
changeable: true,
customToolbar: function customToolbar(toolbars) {
return toolbars;
}
};
module.exports = exports['default'];

2

lib/ViewerNav.d.ts

@@ -14,4 +14,4 @@ /// <reference types="react" />

};
handleChangeImg(newIndex: any): void;
handleChangeImg: (newIndex: any) => void;
render(): JSX.Element;
}

22

lib/ViewerNav.js

@@ -33,12 +33,14 @@ 'use strict';

(0, _classCallCheck3.default)(this, ViewerNav);
return (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.apply(this, arguments));
_this.handleChangeImg = function (newIndex) {
if (_this.props.activeIndex === newIndex) {
return;
}
_this.props.onChangeImg(newIndex);
};
return _this;
}
ViewerNav.prototype.handleChangeImg = function handleChangeImg(newIndex) {
if (this.props.activeIndex === newIndex) {
return;
}
this.props.onChangeImg(newIndex);
};
ViewerNav.prototype.render = function render() {

@@ -60,3 +62,5 @@ var _this2 = this;

'li',
{ key: index, className: index === _this2.props.activeIndex ? 'active' : '', onClick: _this2.handleChangeImg.bind(_this2, index) },
{ key: index, className: index === _this2.props.activeIndex ? 'active' : '', onClick: function onClick() {
_this2.handleChangeImg(index);
} },
React.createElement('img', { src: item.src, alt: item.alt })

@@ -63,0 +67,0 @@ );

7

lib/ViewerProps.d.ts

@@ -7,2 +7,8 @@ /// <reference types="react" />

}
export interface ToolbarConfig {
key: string;
actionType?: number;
render?: React.ReactNode;
onClick?: (activeImage: ImageDecorator) => void;
}
interface ViewerProps {

@@ -41,3 +47,4 @@ /** viewer是否可见 */

changeable?: boolean;
customToolbar?: (toolbars: ToolbarConfig[]) => ToolbarConfig[];
}
export default ViewerProps;

9

lib/ViewerToolbar.d.ts
/// <reference types="react" />
import * as React from 'react';
import { ActionType } from './Icon';
import { ToolbarConfig } from './ViewerProps';
export interface ViewerToolbarProps {
prefixCls: string;
onAction: (type: ActionType) => void;
onAction: (config: ToolbarConfig) => void;
alt: string;

@@ -17,7 +17,10 @@ width: number;

noImgDetails: boolean;
toolbars: ToolbarConfig[];
}
export declare const defaultToolbars: ToolbarConfig[];
export default class ViewerToolbar extends React.Component<ViewerToolbarProps, any> {
constructor();
handleAction(type: ActionType): void;
handleAction(config: ToolbarConfig): void;
renderAction: (config: ToolbarConfig) => JSX.Element;
render(): JSX.Element;
}

156

lib/ViewerToolbar.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.default = undefined;
exports.default = exports.defaultToolbars = undefined;

@@ -33,2 +33,40 @@ var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var defaultToolbars = exports.defaultToolbars = [{
key: 'zoomIn',
actionType: _Icon.ActionType.zoomIn
}, {
key: 'zoomOut',
actionType: _Icon.ActionType.zoomOut
}, {
key: 'prev',
actionType: _Icon.ActionType.prev
}, {
key: 'reset',
actionType: _Icon.ActionType.reset
}, {
key: 'next',
actionType: _Icon.ActionType.next
}, {
key: 'rotateLeft',
actionType: _Icon.ActionType.rotateLeft
}, {
key: 'rotateRight',
actionType: _Icon.ActionType.rotateRight
}, {
key: 'scaleX',
actionType: _Icon.ActionType.scaleX
}, {
key: 'scaleY',
actionType: _Icon.ActionType.scaleY
}, {
key: 'download',
actionType: _Icon.ActionType.download
}];
function deleteToolbarFromKey(toolbars, keys) {
var targetToolbar = toolbars.filter(function (item) {
return keys.indexOf(item.key) < 0;
});
return targetToolbar;
}
var ViewerToolbar = function (_React$Component) {

@@ -39,7 +77,28 @@ (0, _inherits3.default)(ViewerToolbar, _React$Component);

(0, _classCallCheck3.default)(this, ViewerToolbar);
return (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this));
var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this));
_this.renderAction = function (config) {
var content = null;
// default toolbar
if (typeof _Icon.ActionType[config.actionType] !== 'undefined') {
content = React.createElement(_Icon2.default, { type: config.actionType });
}
// extra toolbar
if (config.render) {
content = config.render;
}
return React.createElement(
'li',
{ key: config.key, className: _this.props.prefixCls + '-btn', onClick: function onClick() {
_this.handleAction(config);
} },
content
);
};
return _this;
}
ViewerToolbar.prototype.handleAction = function handleAction(type) {
this.props.onAction(type);
ViewerToolbar.prototype.handleAction = function handleAction(config) {
this.props.onAction(config);
};

@@ -56,77 +115,17 @@

) : null;
var featureNodeArr = [];
if (this.props.zoomable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'zoomIn', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.zoomIn);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.zoomIn })
), React.createElement(
'li',
{ key: 'zoomOut', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.zoomOut);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.zoomOut })
)]);
var toolbars = this.props.toolbars;
if (!this.props.zoomable) {
toolbars = deleteToolbarFromKey(toolbars, ['zoomIn', 'zoomOut']);
}
if (this.props.changeable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'prev', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.prev);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.prev })
), React.createElement(
'li',
{ key: 'reset', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.reset);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.reset })
), React.createElement(
'li',
{ key: 'next', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.next);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.next })
)]);
if (!this.props.changeable) {
toolbars = deleteToolbarFromKey(toolbars, ['prev', 'next']);
}
if (this.props.rotatable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'rotateLeft', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.rotateLeft);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.rotateLeft })
), React.createElement(
'li',
{ key: 'rotateRight', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.rotateRight);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.rotateRight })
)]);
if (!this.props.rotatable) {
toolbars = deleteToolbarFromKey(toolbars, ['rotateLeft', 'rotateRight']);
}
if (this.props.scalable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'scaleX', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.scaleX);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.scaleX })
), React.createElement(
'li',
{ key: 'scaleY', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.scaleY);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.scaleY })
)]);
if (!this.props.scalable) {
toolbars = deleteToolbarFromKey(toolbars, ['scaleX', 'scaleY']);
}
if (this.props.downloadable) {
featureNodeArr = featureNodeArr.concat([React.createElement(
'li',
{ key: 'download', className: this.props.prefixCls + '-btn', onClick: function onClick() {
_this2.handleAction(_Icon.ActionType.download);
} },
React.createElement(_Icon2.default, { type: _Icon.ActionType.download })
)]);
if (!this.props.downloadable) {
toolbars = deleteToolbarFromKey(toolbars, ['download']);
}

@@ -140,3 +139,5 @@ return React.createElement(

{ className: this.props.prefixCls + '-toolbar' },
featureNodeArr
toolbars.map(function (item) {
return _this2.renderAction(item);
})
)

@@ -149,3 +150,2 @@ );

exports.default = ViewerToolbar;
module.exports = exports['default'];
exports.default = ViewerToolbar;

2

package.json
{
"name": "react-viewer",
"version": "2.3.9",
"version": "2.4.0",
"description": "react image viewer",

@@ -5,0 +5,0 @@ "main": "dist/index",

dist/index.css

Sorry, the diff of this file is not supported yet

dist/index.min.css

Sorry, the diff of this file is not supported yet

lib/style/index.css

Sorry, the diff of this file is not supported yet

lib/style/index.less

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc