@ttk/component
Version:
ttk组件库
1,607 lines (1,244 loc) • 67.9 kB
JavaScript
import { f as _typeof, _ as _inherits, a as _getPrototypeOf, b as _possibleConstructorReturn, c as _classCallCheck, d as _createClass } from '../getPrototypeOf-b95655c5.js';
import React__default, { PureComponent } from 'react';
import { c as createCommonjsModule, a as commonjsGlobal, g as getDefaultExportFromCjs } from '../_commonjsHelpers-471920d6.js';
import ReactDOM from 'react-dom';
var reactViewer = createCommonjsModule(function (module, exports) {
(function webpackUniversalModuleDefinition(root, factory) {
module.exports = factory(React__default, ReactDOM);
})(commonjsGlobal, function (__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_12__) {
return (
/******/
function (modules) {
// webpackBootstrap
/******/
// The module cache
/******/
var installedModules = {};
/******/
// The require function
/******/
function __webpack_require__(moduleId) {
/******/
// Check if module is in cache
/******/
if (installedModules[moduleId])
/******/
return installedModules[moduleId].exports;
/******/
// Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
exports: {},
/******/
id: moduleId,
/******/
loaded: false
/******/
};
/******/
// Execute the module function
/******/
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
// Flag the module as loaded
/******/
module.loaded = true;
/******/
// Return the exports of the module
/******/
return module.exports;
/******/
}
/******/
// expose the modules object (__webpack_modules__)
/******/
__webpack_require__.m = modules;
/******/
// expose the module cache
/******/
__webpack_require__.c = installedModules;
/******/
// __webpack_public_path__
/******/
__webpack_require__.p = "";
/******/
// Load entry module and return exports
/******/
return __webpack_require__(0);
/******/
}([
/* 0 */
/***/
/* 1 */
/***/
/* 2 */
/***/
/* 3 */
/***/
/* 4 */
/***/
/* 5 */
/***/
/* 6 */
/***/
/* 7 */
/***/
/* 8 */
/***/
/* 9 */
/***/
/* 10 */
/***/
/* 11 */
/***/
/* 12 */
/***/
/******/
function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Viewer = __webpack_require__(4);
var _Viewer2 = _interopRequireDefault(_Viewer);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
exports.default = _Viewer2.default;
module.exports = exports['default'];
/***/
}, function (module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/
}, function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ActionType = undefined;
var _react = __webpack_require__(1);
var React = _interopRequireWildcard(_react);
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _defaults(obj, defaults) {
var keys = Object.getOwnPropertyNames(defaults);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = Object.getOwnPropertyDescriptor(defaults, key);
if (value && value.configurable && obj[key] === undefined) {
Object.defineProperty(obj, key, value);
}
}
return obj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (_typeof(call) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
var ActionType = exports.ActionType = undefined;
(function (ActionType) {
ActionType[ActionType["zoomIn"] = 1] = "zoomIn";
ActionType[ActionType["zoomOut"] = 2] = "zoomOut";
ActionType[ActionType["prev"] = 3] = "prev";
ActionType[ActionType["next"] = 4] = "next";
ActionType[ActionType["rotateLeft"] = 5] = "rotateLeft";
ActionType[ActionType["rotateRight"] = 6] = "rotateRight";
ActionType[ActionType["reset"] = 7] = "reset";
ActionType[ActionType["close"] = 8] = "close";
ActionType[ActionType["scaleX"] = 9] = "scaleX";
ActionType[ActionType["scaleY"] = 10] = "scaleY";
ActionType[ActionType["download"] = 11] = "download";
})(ActionType || (exports.ActionType = ActionType = {}));
var Icon = function (_React$Component) {
_inherits(Icon, _React$Component);
function Icon() {
_classCallCheck(this, Icon);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
Icon.prototype.render = function render() {
var prefixCls = 'react-viewer-icon';
return React.createElement("i", {
className: prefixCls + " " + prefixCls + "-" + ActionType[this.props.type]
});
};
return Icon;
}(React.Component);
exports.default = Icon;
/***/
}, function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _react = __webpack_require__(1);
var React = _interopRequireWildcard(_react);
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _defaults(obj, defaults) {
var keys = Object.getOwnPropertyNames(defaults);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = Object.getOwnPropertyDescriptor(defaults, key);
if (value && value.configurable && obj[key] === undefined) {
Object.defineProperty(obj, key, value);
}
}
return obj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (_typeof(call) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
var Loading = function (_React$Component) {
_inherits(Loading, _React$Component);
function Loading() {
_classCallCheck(this, Loading);
return _possibleConstructorReturn(this, _React$Component.call(this));
}
Loading.prototype.render = function render() {
var cls = 'circle-loading';
return React.createElement('div', {
className: 'loading-wrap',
style: this.props.style
}, React.createElement('div', {
className: cls
}));
};
return Loading;
}(React.Component);
exports.default = Loading;
module.exports = exports['default'];
/***/
}, function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _react = __webpack_require__(1);
var React = _interopRequireWildcard(_react);
var _reactDom = __webpack_require__(12);
var ReactDOM = _interopRequireWildcard(_reactDom);
var _ViewerCore = __webpack_require__(6);
var _ViewerCore2 = _interopRequireDefault(_ViewerCore);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _defaults(obj, defaults) {
var keys = Object.getOwnPropertyNames(defaults);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = Object.getOwnPropertyDescriptor(defaults, key);
if (value && value.configurable && obj[key] === undefined) {
Object.defineProperty(obj, key, value);
}
}
return obj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (_typeof(call) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
var Viewer = function (_React$Component) {
_inherits(Viewer, _React$Component);
function Viewer() {
_classCallCheck(this, Viewer);
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.container = null;
_this.defaultContainer = document.createElement('div');
_this.component = null;
return _this;
}
Viewer.prototype.renderViewer = function renderViewer() {
if (this.props.visible || this.component) {
if (!this.container) {
if (this.props.container) {
this.container = this.props.container;
} else {
this.container = this.defaultContainer;
document.body.appendChild(this.container);
}
}
var instance = this;
ReactDOM.unstable_renderSubtreeIntoContainer(this, React.createElement(_ViewerCore2.default, this.props), this.container, function () {
instance.component = this;
});
}
};
Viewer.prototype.removeViewer = function removeViewer() {
if (this.container) {
var container = this.container;
ReactDOM.unmountComponentAtNode(container);
container.parentNode.removeChild(container);
this.container = null;
this.component = null;
}
};
Viewer.prototype.componentWillUnmount = function componentWillUnmount() {
if (this.props.visible && this.props.onClose) {
this.props.onClose();
}
this.removeViewer();
};
Viewer.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (this.props.container !== nextProps.container) {
this.component = null;
if (nextProps.container) {
if (this.container) {
document.body.removeChild(this.container);
}
this.container = nextProps.container;
} else {
this.container = this.defaultContainer;
document.body.appendChild(this.container);
}
}
};
Viewer.prototype.componentDidMount = function componentDidMount() {
this.renderViewer();
};
Viewer.prototype.componentDidUpdate = function componentDidUpdate() {
this.renderViewer();
};
Viewer.prototype.render = function render() {
return null;
};
return Viewer;
}(React.Component);
exports.default = Viewer;
module.exports = exports['default'];
/***/
}, function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _react = __webpack_require__(1);
var React = _interopRequireWildcard(_react);
var _Loading = __webpack_require__(3);
var _Loading2 = _interopRequireDefault(_Loading);
var _classnames2 = __webpack_require__(10);
var _classnames3 = _interopRequireDefault(_classnames2);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _defaults(obj, defaults) {
var keys = Object.getOwnPropertyNames(defaults);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = Object.getOwnPropertyDescriptor(defaults, key);
if (value && value.configurable && obj[key] === undefined) {
Object.defineProperty(obj, key, value);
}
}
return obj;
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (_typeof(call) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
var ViewerCanvas = function (_React$Component) {
_inherits(ViewerCanvas, _React$Component);
function ViewerCanvas() {
_classCallCheck(this, ViewerCanvas);
var _this = _possibleConstructorReturn(this, _React$Component.call(this));
_this.handleResize = function (e) {
_this.props.onResize();
};
_this.handleCanvasMouseDown = function (e) {
_this.props.onCanvasMouseDown(e);
_this.handleMouseDown(e);
};
_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.bindEvent = function (remove) {
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
document[funcName]('click', _this.handleMouseUp, false);
document[funcName]('mousemove', _this.handleMouseMove, false);
window[funcName]('resize', _this.handleResize, false);
};
_this.state = {
isMouseDown: false,
mouseX: 0,
mouseY: 0
};
return _this;
}
ViewerCanvas.prototype.componentDidMount = function componentDidMount() {
if (this.props.drag) {
this.bindEvent();
}
};
ViewerCanvas.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
if (!this.props.visible && nextProps.visible) {
if (nextProps.drag) {
return this.bindEvent();
}
}
if (this.props.visible && !nextProps.visible) {
this.handleMouseUp({});
if (nextProps.drag) {
return this.bindEvent(true);
}
}
if (this.props.drag && !nextProps.drag) {
return this.bindEvent(true);
}
if (!this.props.drag && nextProps.drag) {
if (nextProps.visible) {
return this.bindEvent(true);
}
}
};
ViewerCanvas.prototype.componentWillUnmount = function componentWillUnmount() {
this.bindEvent(true);
};
ViewerCanvas.prototype.render = function render() {
var imgStyle = {
width: this.props.width + 'px',
height: this.props.height + 'px',
transform: 'translateX(' + (this.props.left !== null ? this.props.left + 'px' : 'aoto') + ') translateY(' + this.props.top + 'px)\n rotate(' + this.props.rotate + 'deg) scaleX(' + this.props.scaleX + ') scaleY(' + this.props.scaleY + ')'
};
var imgClass = (0, _classnames3.default)(this.props.prefixCls + '-image', _defineProperty({
drag: this.props.drag
}, this.props.prefixCls + '-image-transition', !this.state.isMouseDown));
var style = {
zIndex: this.props.zIndex
};
var imgNode = null;
if (this.props.imgSrc !== '') {
imgNode = React.createElement('img', {
className: imgClass,
src: this.props.imgSrc,
style: imgStyle,
onMouseDown: this.handleMouseDown
});
}
if (this.props.loading) {
imgNode = React.createElement('div', {
style: {
display: 'flex',
height: window.innerHeight - 84 + 'px',
justifyContent: 'center',
alignItems: 'center'
}
}, React.createElement(_Loading2.default, null));
}
return React.createElement('div', {
className: this.props.prefixCls + '-canvas',
onMouseDown: this.handleCanvasMouseDown,
style: style
}, imgNode);
};
return ViewerCanvas;
}(React.Component);
exports.default = ViewerCanvas;
module.exports = exports['default'];
/***/
}, function (module, exports, __webpack_require__) {
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _slicedToArray = function () {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
var _react = __webpack_require__(1);
var React = _interopRequireWildcard(_react);
__webpack_require__(11);
var _ViewerCanvas = __webpack_require__(5);
var _ViewerCanvas2 = _interopRequireDefault(_ViewerCanvas);
var _ViewerNav = __webpack_require__(7);
var _ViewerNav2 = _interopRequireDefault(_ViewerNav);
var _ViewerToolbar = __webpack_require__(8);
var _ViewerToolbar2 = _interopRequireDefault(_ViewerToolbar);
var _Icon = __webpack_require__(2);
var _Icon2 = _interopRequireDefault(_Icon);
var _constants = __webpack_require__(9);
var constants = _interopRequireWildcard(_constants);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}
function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) {
return obj;
} else {
var newObj = {};
if (obj != null) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
}
}
newObj.default = obj;
return newObj;
}
}
function _defaults(obj, defaults) {
var keys = Object.getOwnPropertyNames(defaults);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var value = Object.getOwnPropertyDescriptor(defaults, key);
if (value && value.configurable && obj[key] === undefined) {
Object.defineProperty(obj, key, value);
}
}
return obj;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (_typeof(call) === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + _typeof(superClass));
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass);
}
function noop() {}
var transitionDuration = 300;
var ViewerCore = function (_React$Component) {
_inherits(ViewerCore, _React$Component);
function ViewerCore(props) {
_classCallCheck(this, ViewerCore);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.handleClose = function (e) {
_this.props.onClose();
};
_this.loadImgSuccess = function (activeImage, imgWidth, imgHeight, isNewImage) {
var realImgWidth = imgWidth;
var realImgHeight = imgHeight;
if (_this.props.defaultSize) {
realImgWidth = _this.props.defaultSize.width;
realImgHeight = _this.props.defaultSize.height;
}
if (activeImage.defaultSize) {
realImgWidth = activeImage.defaultSize.width;
realImgHeight = activeImage.defaultSize.height;
}
var _this$getImgWidthHeig = _this.getImgWidthHeight(realImgWidth, realImgHeight),
_this$getImgWidthHeig2 = _slicedToArray(_this$getImgWidthHeig, 2),
width = _this$getImgWidthHeig2[0],
height = _this$getImgWidthHeig2[1];
/* 业务需要，宽度满屏，高度等比例缩放*/
var initScale = width / (_this.containerWidth - 30);
if (initScale < 1) {
width = width / initScale;
height = height / initScale;
}
var left = (_this.containerWidth - width) / 2;
var top = (_this.containerHeight - height - _this.footerHeight) / 2;
var scaleX = _this.props.defaultScale;
var scaleY = _this.props.defaultScale;
if (_this.props.noResetZoomAfterChange && isNewImage) {
scaleX = _this.state.scaleX;
scaleY = _this.state.scaleY;
}
_this.setState({
width: width,
height: height,
left: left,
top: top,
imageWidth: imgWidth,
imageHeight: imgHeight,
loading: false,
rotate: 0,
scaleX: scaleX,
scaleY: scaleY
});
};
_this.handleChangeImg = function (newIndex) {
if (newIndex >= _this.props.images.length) {
newIndex = 0;
}
if (newIndex < 0) {
newIndex = _this.props.images.length - 1;
}
if (newIndex === _this.state.activeIndex) {
return;
}
if (_this.props.onChange) {
var activeImage = _this.getActiveImage(newIndex);
_this.props.onChange(activeImage, newIndex);
}
_this.loadImg(newIndex, true);
};
_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:
_this.handleChangeImg(_this.state.activeIndex - 1);
break;
case _Icon.ActionType.next:
_this.handleChangeImg(_this.state.activeIndex + 1);
break;
case _Icon.ActionType.zoomIn:
var imgCenterXY = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, _this.props.zoomSpeed);
break;
case _Icon.ActionType.zoomOut:
var imgCenterXY2 = _this.getImageCenterXY();
_this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, _this.props.zoomSpeed);
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;
}
};
_this.handleAction = function (config) {
_this.handleDefaultAction(config.actionType);
if (config.onClick) {
var activeImage = _this.getActiveImage();
config.onClick(activeImage);
}
};
_this.handleDownload = function () {
var activeImage = _this.getActiveImage();
if (activeImage.downloadUrl) {
window.location.href = activeImage.downloadUrl;
}
};
_this.handleScaleX = function (newScale) {
_this.setState({
scaleX: _this.state.scaleX * newScale
});
};
_this.handleScaleY = function (newScale) {
_this.setState({
scaleY: _this.state.scaleY * newScale
});
};
_this.handleScrollZoom = function (targetX, targetY, direct) {
_this.handleZoom(targetX, targetY, direct, _this.props.zoomSpeed);
};
_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 top = 0;
var left = 0;
var width = 0;
var height = 0;
var scaleX = 0;
var scaleY = 0;
if (_this.state.width === 0) {
var _this$getImgWidthHeig3 = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
_this$getImgWidthHeig4 = _slicedToArray(_this$getImgWidthHeig3, 2),
imgWidth = _this$getImgWidthHeig4[0],
imgHeight = _this$getImgWidthHeig4[1];
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 left = (_this.containerWidth - _this.state.width) / 2;
var top = (_this.containerHeight - _this.state.height - _this.footerHeight) / 2;
_this.setState({
left: left,
top: top
});
}
};
_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;
}
if (isFeatrue) {
e.preventDefault();
}
};
_this.handleTransitionEnd = function (e) {
if (!_this.state.transitionEnd || _this.state.visibleStart) {
_this.setState({
visibleStart: false,
transitionEnd: true
});
}
};
_this.handleCanvasMouseDown = function (e) {
_this.props.onMaskClick(e);
};
_this.getActiveImage = function () {
var activeIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
var activeImg = {
src: '',
alt: '',
downloadUrl: ''
};
var images = _this.props.images || [];
var realActiveIndex = null;
if (activeIndex !== undefined) {
realActiveIndex = activeIndex;
} else {
realActiveIndex = _this.state.activeIndex;
}
if (images.length > 0 && realActiveIndex >= 0) {
activeImg = images[realActiveIndex];
}
return activeImg;
};
_this.handleMouseScroll = function (e) {
e.preventDefault();
var direct = 0;
if (e.deltaY === 0) {
direct = 0;
} else {
direct = e.deltaY > 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.handleScrollZoom(x, y, direct);
}
};
_this.prefixCls = 'react-viewer';
_this.state = {
visible: false,
visibleStart: false,
transitionEnd: false,
activeIndex: _this.props.activeIndex,
width: 0,
height: 0,
top: 15,
left: null,
rotate: 0,
imageWidth: 0,
imageHeight: 0,
scaleX: _this.props.defaultScale,
scaleY: _this.props.defaultScale,
loading: false,
loadFailed: false
};
_this.setContainerWidthHeight();
_this.footerHeight = constants.FOOTER_HEIGHT;
return _this;
}
ViewerCore.prototype.setContainerWidthHeight = function setContainerWidthHeight() {
this.containerWidth = window.innerWidth;
this.containerHeight = window.innerHeight;
if (this.props.container) {
this.containerWidth = this.props.container.offsetWidth;
this.containerHeight = this.props.container.offsetHeight;
this.setInlineContainerHeight();
}
};
ViewerCore.prototype.setInlineContainerHeight = function setInlineContainerHeight() {
var core = this.refs['viewerCore'];
if (core) {
this.containerHeight = core.offsetHeight;
}
};
ViewerCore.prototype.startVisible = function startVisible(activeIndex) {
var _this2 = this;
if (!this.props.container) {
document.body.style.overflow = 'hidden';
if (document.body.scrollHeight > document.body.clientHeight) {
document.body.style.paddingRight = '15px';
}
}
this.setState({
visibleStart: true
});
setTimeout(function () {
_this2.setState({
visible: true,
activeIndex: activeIndex
});
setTimeout(function () {
_this2.bindEvent();
_this2.loadImg(activeIndex);
}, 300);
}, 10);
};
ViewerCore.prototype.componentDidMount = function componentDidMount() {
var core = this.refs['viewerCore'];
core.addEventListener('transitionend', this.handleTransitionEnd, false); // Though onWheel can be directly used on the div "viewerCore", to be able to
// prevent default action, a listener is added here instead
this.refs['viewerCore'].addEventListener('mousewheel', this.handleMouseScroll, false);
if (this.containerHeight === 0) {
this.setInlineContainerHeight();
}
this.startVisible(this.state.activeIndex);
};
ViewerCore.prototype.getImgWidthHeight = function getImgWidthHeight(imgWidth, imgHeight) {
var width = 0;
var height = 0;
var maxWidth = this.containerWidth * 0.8;
var maxHeight = (this.containerHeight - this.footerHeight) * 0.8;
width = Math.min(maxWidth, imgWidth);
height = width / imgWidth * imgHeight;
if (height > maxHeight) {
height = maxHeight;
width = height / imgHeight * imgWidth;
}
if (this.props.noLimitInitializationSize) {
width = imgWidth;
height = imgHeight;
}
return [width, height];
};
ViewerCore.prototype.loadImg = function loadImg(activeIndex) {
var _this3 = this;
var isNewImage = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var activeImage = null;
var images = this.props.images || [];
if (images.length > 0) {
activeImage = images[activeIndex];
}
var loadComplete = false;
var img = new Image();
this.setState({
activeIndex: activeIndex,
loading: true,
loadFailed: false
}, function () {
img.onload = function () {
if (!loadComplete) {
_this3.loadImgSuccess(activeImage, img.width, img.height, isNewImage);
}
};
img.onerror = function () {
if (_this3.props.defaultImg) {
_this3.setState({
loadFailed: true
});
var deafultImgWidth = _this3.props.defaultImg.width || _this3.containerWidth * .5;
var defaultImgHeight = _this3.props.defaultImg.height || _this3.containerHeight * .5;
_this3.loadImgSuccess(activeImage, deafultImgWidth, defaultImgHeight, isNewImage);
} else {
_this3.setState({
activeIndex: activeIndex,
imageWidth: 0,
imageHeight: 0,
loading: false
});
}
};
img.src = activeImage.src;
if (img.complete) {
loadComplete = true;
_this3.loadImgSuccess(activeImage, img.width, img.height, isNewImage);
}
});
};
ViewerCore.prototype.bindEvent = function bindEvent() {
var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
var funcName = 'addEventListener';
if (remove) {
funcName = 'removeEventListener';
}
if (!this.props.disableKeyboardSupport) {
document[funcName]('keydown', this.handleKeydown, false);
}
};
ViewerCore.prototype.componentWillUnmount = function componentWillUnmount() {
this.bindEvent(true);
this.refs['viewerCore'].removeEventListener('transitionend', this.handleTransitionEnd, false);
};
ViewerCore.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
var _this4 = this;
if (!this.props.visible && nextProps.visible) {
this.startVisible(nextProps.activeIndex);
return;
}
if (this.props.visible && !nextProps.visible) {
this.bindEvent(true);
this.handleZoom(this.containerWidth / 2, (this.containerHeight - this.footerHeight) / 2, -1, (this.state.scaleX > 0 ? 1 : -1) * this.state.scaleX - 0.11);
setTimeout(function () {
document.body.style.overflow = '';
document.body.style.paddingRight = '';
_this4.setState({
visible: false,
transitionEnd: false,
width: 0,
height: 0,
scaleX: _this4.props.defaultScale,
scaleY: _this4.props.defaultScale,
rotate: 1,
imageWidth: 0,
imageHeight: 0,
loadFailed: false
});
}, transitionDuration);
return;
}
if (this.props.activeIndex !== nextProps.activeIndex) {
this.handleChangeImg(nextProps.activeIndex);
return;
}
};
ViewerCore.prototype.render = function render() {
var activeImg = {
src: '',
alt: ''
};
var zIndex = 1000;
if (this.props.zIndex) {
zIndex = this.props.zIndex;
}
var viewerStryle = {
opacity: this.state.visible ? 1 : 0
};
if (!this.state.visible && this.state.transitionEnd) {
viewerStryle.display = 'none';
}
if (!this.state.visible && this.state.visibleStart) {
viewerStryle.display = 'block';
}
if (this.state.visible && this.state.transitionEnd) {
activeImg = this.getActiveImage();
}
var className = this.prefixCls + ' ' + this.prefixCls + '-transition';
if (this.props.container) {
className += ' ' + this.prefixCls + '-inline';
}
return React.createElement('div', {
ref: 'viewerCore',
className: className,
style: viewerStryle
}, React.createElement('div', {
className: this.prefixCls + '-mask',
style: {
zIndex: zIndex
}
}), this.props.noClose || React.createElement('div', {
className: this.prefixCls + '-close ' + this.prefixCls + '-btn',
onClick: this.handleClose,
style: {
zIndex: zIndex + 10
}
}, React.createElement(_Icon2.defa