maycur-business/lib/Viewer/js/ViewerCore.jsx

maycur business react components of web

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var React = _interopRequireWildcard(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _ViewerCanvas = _interopRequireDefault(require("./ViewerCanvas"));

var _ViewerNav = _interopRequireDefault(require("./ViewerNav"));

var _ViewerToolbar = _interopRequireWildcard(require("./ViewerToolbar"));

var _Icon = require("./Icon");

var constants = _interopRequireWildcard(require("./constants"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } 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"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

var prefixCls = "".concat(_utils["default"].prefixCls, "-viewer");

function noop() {}

var transitionDuration = 300;

var ViewerCore =
/*#__PURE__*/
function (_React$Component) {
  _inherits(ViewerCore, _React$Component);

  function ViewerCore(props) {
    var _this;

    _classCallCheck(this, ViewerCore);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(ViewerCore).call(this, props));

    _this.handleClose = function (e) {
      _this.props.onClose();
    };

    _this.loadImgSuccess = function (activeFile, imgWidth, imgHeight, isNewImage) {
      var realImgWidth = imgWidth;
      var realImgHeight = imgHeight;

      if (_this.props.defaultSize) {
        realImgWidth = _this.props.defaultSize.width;
        realImgHeight = _this.props.defaultSize.height;
      }

      if (activeFile.defaultSize) {
        realImgWidth = activeFile.defaultSize.width;
        realImgHeight = activeFile.defaultSize.height;
      }

      var _this$getImgWidthHeig = _this.getImgWidthHeight(realImgWidth, realImgHeight),
          _this$getImgWidthHeig2 = _slicedToArray(_this$getImgWidthHeig, 2),
          width = _this$getImgWidthHeig2[0],
          height = _this$getImgWidthHeig2[1];

      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({
        activeFile: activeFile,
        width: width,
        height: height,
        left: left,
        top: top,
        imageWidth: imgWidth,
        imageHeight: imgHeight,
        loading: false,
        rotate: 0,
        scaleX: scaleX,
        scaleY: scaleY
      });
    };

    _this.handleChangeImg = function (newIndex, files, onClick) {
      if (newIndex >= _this.props.files.length) {
        newIndex = 0;
      }

      if (newIndex < 0) {
        newIndex = _this.props.files.length - 1;
      }

      if (newIndex === _this.state.activeIndex && !files) {
        return;
      }

      if (_this.props.onChange) {
        var activeFile = _this.getActiveFile(newIndex, files);

        onClick && onClick(activeFile);

        _this.props.onChange(activeFile, newIndex);
      }

      _this.loadFile(newIndex, true, files);
    };

    _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;

        default:
          break;
      }
    };

    _this.handleAction = function (config) {
      _this.handleDefaultAction(config.actionType);

      if (config.onClick) {
        var activeFile = _this.getActiveFile();

        config.onClick(activeFile);
      }
    };

    _this.handleDownload = function () {
      var activeFile = _this.getActiveFile();

      if (activeFile.downloadUrl) {
        window.location.href = activeFile.downloadUrl;
      }
    };

    _this.handleScaleX = function () {
      var newScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1 | -1;

      _this.setState({
        scaleX: _this.state.scaleX * newScale
      });
    };

    _this.handleScaleY = function () {
      var newScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1 | -1;

      _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
      });
    };

    _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 () {
      var _this$state = _this.state,
          imageWidth = _this$state.imageWidth,
          imageHeight = _this$state.imageHeight;

      var _this$getImgWidthHeig5 = _this.getImgWidthHeight(imageWidth, imageHeight),
          _this$getImgWidthHeig6 = _slicedToArray(_this$getImgWidthHeig5, 2),
          width = _this$getImgWidthHeig6[0],
          height = _this$getImgWidthHeig6[1];

      _this.setContainerWidthHeight();

      if (_this.props.visible) {
        var left = (_this.containerWidth - width) / 2;
        var top = (_this.containerHeight - height - _this.footerHeight) / 2;

        _this.changeNavBarStyle(_this.props.activeIndex, _this.props.files);

        _this.setState({
          width: width,
          height: height,
          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;

        default:
          break;
      }

      if (isFeatrue) {
        e.preventDefault();
      }
    };

    _this.handleTransitionEnd = function (e) {
      if (!_this.state.transitionEnd || _this.state.visibleStart) {
        _this.setState({
          visibleStart: false,
          transitionEnd: true
        });
      }
    };

    _this.onRenderSuccess = function () {
      _this.setState({
        loading: false
      });
    };

    _this.refNavBar = function (ref) {
      _this.navBar = ref;
    };

    _this.handleCanvasMouseDown = function (e) {
      var onMaskClick = _this.props.onMaskClick;
      onMaskClick && onMaskClick(e);
    };

    _this.getActiveFile = function () {
      var activeIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
      var files = arguments.length > 1 ? arguments[1] : undefined;
      var activeImg = {
        src: '',
        alt: '',
        downloadUrl: ''
      };

      var _files = files || _this.props.files || [];

      var realActiveIndex = null;

      if (activeIndex !== undefined) {
        realActiveIndex = activeIndex;
      } else {
        realActiveIndex = _this.state.activeIndex;
      }

      if (_files.length > 0 && realActiveIndex >= 0) {
        activeImg = _files[realActiveIndex];
      }

      return activeImg;
    };

    _this.handleMouseScroll = function (e) {
      if (_this.detail) {
        return;
      } // e.preventDefault();


      var direct = 0 | 1 | -1;

      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.onPrev = function () {
      var prev = _this.props.customToolbar(_ViewerToolbar.defaultToolbars).filter(function (i) {
        return i.key === 'prev';
      })[0];

      var onClick = prev.onClick || null;

      _this.handleChangeImg(_this.state.activeIndex - 1, null, onClick);
    };

    _this.onNext = function () {
      var next = _this.props.customToolbar(_ViewerToolbar.defaultToolbars).filter(function (i) {
        return i.key === 'next';
      })[0];

      var onClick = next.onClick || null;

      _this.handleChangeImg(_this.state.activeIndex + 1, null, onClick);
    };

    _this.state = {
      visible: false,
      visibleStart: false,
      transitionEnd: false,
      activeFile: {
        src: ''
      },
      activeIndex: _this.props.activeIndex,
      isImage: false,
      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,
      navbarWidth: 0,
      //navBar宽度
      compareDistance: 0 //navBar移动距离

    };

    _this.setContainerWidthHeight();

    _this.footerHeight = constants.FOOTER_HEIGHT;
    return _this;
  }

  _createClass(ViewerCore, [{
    key: "setContainerWidthHeight",
    value: 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;
      }
    }
  }, {
    key: "startVisible",
    value: 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.loadFile(activeIndex);
        }, 300);
      }, 10);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.viewerCore.addEventListener('transitionend', this.handleTransitionEnd, false);
      this.startVisible(this.state.activeIndex);
      this.changeNavBarStyle(this.props.activeIndex, this.props.files);
    }
  }, {
    key: "getImgWidthHeight",
    value: function getImgWidthHeight(imgWidth, imgHeight) {
      var width = 0;
      var height = 0; // let maxWidth = this.containerWidth * 0.8;
      // let maxHeight = (this.containerHeight - this.footerHeight) * 0.8;

      this.setContainerWidthHeight();
      var maxWidth = this.containerWidth;
      var maxHeight = this.containerHeight - this.footerHeight;
      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];
    }
  }, {
    key: "loadFile",
    value: function loadFile(activeIndex, isNewImage, files) {
      var activeFile = null;

      var _files = files || this.props.files || [];

      if (_files.length > 0) {
        activeFile = _files[activeIndex];
        this.changeNavBarStyle(activeIndex, _files);
        var isImage = activeFile.imageType && activeFile.imageType.includes('image');

        if (isImage) {
          this.loadImg(activeIndex, isNewImage, activeFile);
        } else {
          this.loadPDF(activeIndex, activeFile);
        }
      }
    }
  }, {
    key: "loadImg",
    value: function loadImg(activeIndex, isNewImage, activeFile) {
      var _this3 = this;

      var loadComplete = false;
      var img = new Image();
      this.setState({
        isImage: true,
        activeIndex: activeIndex,
        loading: true,
        loadFailed: false
      }, function () {
        img.onload = function () {
          if (!loadComplete) {
            _this3.loadImgSuccess(activeFile, 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(activeFile, deafultImgWidth, defaultImgHeight, isNewImage);
          } else {
            _this3.setState({
              activeIndex: activeIndex,
              imageWidth: 0,
              imageHeight: 0,
              loading: false
            });
          }
        };

        img.src = activeFile.src || '';

        if (img.complete) {
          loadComplete = true;

          _this3.loadImgSuccess(activeFile, img.width, img.height, isNewImage);
        }
      });
    }
  }, {
    key: "loadPDF",
    value: function loadPDF(activeIndex, activeFile) {
      var width = this.containerWidth;
      var height = this.containerHeight - this.footerHeight; // let left = (this.containerWidth - width) / 2;
      // let top = (this.containerHeight - height - this.footerHeight) / 2;

      var left = 0;
      var top = 0;
      var scaleX = this.props.defaultScale;
      var scaleY = this.props.defaultScale;

      if (this.props.noResetZoomAfterChange) {
        scaleX = this.state.scaleX;
        scaleY = this.state.scaleY;
      }

      this.setState({
        activeIndex: activeIndex,
        isImage: false,
        activeFile: activeFile,
        width: width,
        height: height,
        left: left,
        top: top,
        imageWidth: this.containerWidth,
        imageHeight: this.containerHeight,
        loading: activeFile.src,
        rotate: 0,
        scaleX: scaleX,
        scaleY: scaleY
      });
    }
  }, {
    key: "changeNavBarStyle",
    value: function changeNavBarStyle(activeIndex, files) {
      if (this.navBar && this.navBar.clientWidth) {
        var clientWidth = this.navBar.clientWidth;
        var realLength = files.length;
        var currentLength = Math.min(parseInt(clientWidth / 46), realLength);
        var navbarWidth = currentLength * 46 - 6;
        var compareDistance = activeIndex + 1 > currentLength ? (currentLength - activeIndex - 1) * 46 : 0;
        this.setState({
          navbarWidth: navbarWidth,
          compareDistance: compareDistance
        });
      }
    }
  }, {
    key: "bindEvent",
    value: 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);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.bindEvent(true);
      this.viewerCore.removeEventListener('transitionend', this.handleTransitionEnd, false);
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_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,
            rotate: 0,
            imageWidth: 0,
            imageHeight: 0,
            loadFailed: false
          });
        }, transitionDuration);
        return;
      }

      if (this.props.activeIndex !== nextProps.activeIndex || !_lodash["default"].isEqual(this.props.files, nextProps.files)) {
        this.handleChangeImg(nextProps.activeIndex, nextProps.files);
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this5 = this;

      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.getActiveFile();
      }

      var className = "".concat(prefixCls, " ").concat(prefixCls, "-transition");

      if (this.props.container) {
        className += " ".concat(prefixCls, "-inline");
      }

      return React.createElement("div", {
        ref: function ref(_ref) {
          _this5.viewerCore = _ref;
        },
        className: className,
        style: viewerStryle,
        onWheel: this.handleMouseScroll
      }, !this.props.noMask && React.createElement("div", {
        className: "".concat(prefixCls, "-mask"),
        style: {
          zIndex: zIndex,
          background: this.props.container ? '' : 'rgba(55, 55, 55, 0.6)'
        }
      }), this.props.noClose || React.createElement("div", {
        className: "".concat(prefixCls, "-close ").concat(prefixCls, "-btn"),
        onClick: this.handleClose
      }, React.createElement("i", {
        className: "fm fm-cross"
      })), this.props.noToolbar || React.createElement(_ViewerToolbar["default"], {
        prefixCls: prefixCls,
        onAction: this.handleAction,
        activeFile: this.state.activeFile,
        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)
      }), React.createElement(_ViewerCanvas["default"], {
        prefixCls: prefixCls,
        activeFile: this.state.activeFile,
        isImage: this.state.isImage // fileSrc={this.state.loadFailed ? this.props.defaultImg.src || activeImg.src : activeImg.src}
        // fileSrc={this.state.activeFile.src}
        ,
        visible: this.props.visible,
        width: this.state.width,
        height: this.state.height,
        top: this.state.top,
        left: this.state.left,
        rotate: this.state.rotate,
        onChangeImgState: this.handleChangeImgState,
        onResize: this.handleResize,
        zIndex: zIndex + 5,
        scaleX: this.state.scaleX,
        scaleY: this.state.scaleY,
        loading: this.state.loading,
        drag: this.props.drag,
        containerWidth: this.containerWidth,
        containerHeight: this.containerHeight,
        footerHeight: this.footerHeight,
        renderDetail: this.props.renderDetail,
        closeDetail: this.closeDetail,
        onCanvasMouseDown: this.handleCanvasMouseDown,
        onRenderSuccess: this.onRenderSuccess
      }), this.props.noFooter || React.createElement("div", {
        className: "".concat(prefixCls, "-footer"),
        style: {
          zIndex: zIndex + 5
        }
      }, this.props.noNavbar || React.createElement(_ViewerNav["default"], {
        prefixCls: prefixCls,
        navbarWidth: this.state.navbarWidth,
        compareDistance: this.state.compareDistance,
        files: this.props.files,
        activeIndex: this.state.activeIndex,
        refNavBar: this.refNavBar,
        onPrev: this.onPrev,
        onNext: this.onNext,
        onChangeImg: this.handleChangeImg
      })));
    }
  }]);

  return ViewerCore;
}(React.Component);

exports["default"] = ViewerCore;
ViewerCore.defaultProps = {
  visible: false,
  onClose: noop,
  files: [],
  activeIndex: 0,
  zIndex: 1000,
  drag: true,
  attribute: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  onMaskClick: noop,
  changeable: true,
  customToolbar: function customToolbar(toolbars) {
    return toolbars;
  },
  zoomSpeed: .05,
  disableKeyboardSupport: false,
  noResetZoomAfterChange: false,
  noLimitInitializationSize: false,
  defaultScale: 1,
  noMask: true
};