cloud-b2b 1.0.0 → 1.0.1

package/lib/SuperUpload/SuperUpload.js

@@ -0,0 +1,324 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _upload = _interopRequireDefault(require("antd/lib/upload"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _button = _interopRequireDefault(require("antd/lib/button"));
+
+var _icon = _interopRequireDefault(require("antd/lib/icon"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _helper = _interopRequireDefault(require("../helper"));
+
+var _Title = _interopRequireDefault(require("../Title"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var FORMATS = ['image/jpeg', 'image/gif', 'image/bmp', 'image/jpg', 'image/png', 'image/tiff', 'image/gif', 'image/pcx', 'image/tga', 'image/exif', 'image/fpx', 'image/svg', 'image/psd', 'image/cdr', 'image/pcd', 'image/dxf', 'image/ufo', 'image/eps', 'image/ai', 'image/raw', 'image/WMF'];
+var FORMATS1 = ['.jpeg', '.gif', '.bmp', '.jpg', '.png', '.tiff', '.pcx', '.tga', '.exif', '.fpx', '.svg', '.psd', '.cdr', '.pcd', '.dxf', '.ufo', '.eps', '.ai', '.raw', '.WMF']; //组件属性定义
+
+var propTypes = {
+  fileList: _propTypes["default"].array,
+  //文件列表
+  fileDeleteList: _propTypes["default"].array,
+  //需要在页面关闭时删除的服务端文件
+  title: _propTypes["default"].string,
+  //附件组的标题
+  required: _propTypes["default"].bool,
+  //是否必须上传,默认false
+  listType: _propTypes["default"].oneOf[('text', 'picture', 'picture-card')],
+  //上传列表的内建样式，支持三种,默认text
+  readonly: _propTypes["default"].bool,
+  //所在页面是否只读,默认false
+  multiple: _propTypes["default"].bool,
+  //可否多选文件上传,默认true
+  limitNumber: _propTypes["default"].number,
+  //附件限制个数，默认10
+  limitText: _propTypes["default"].any,
+  //附件个数达到时的文本，或者设置为false则不显示，为true时显示默认文本，默认值true
+  limitSize: _propTypes["default"].number,
+  //单个附件限制大小，单位M,默认5
+  buttonTitle: _propTypes["default"].string,
+  //上传按钮的标题，默认‘上传’
+  onFileChange: _propTypes["default"].func //文件变更的回掉函数，func({fileList, fileDeleteList})
+
+};
+
+var convertFileList = function convertFileList(fileList) {
+  return (0, _map["default"])(fileList).call(fileList, function (item) {
+    return {
+      fileFormat: item.fileFormat || 'id',
+      fileName: item.name,
+      fileUrl: item.response ? item.response.result : ''
+    };
+  });
+};
+
+var getUploadProps = function getUploadProps(props, onPreview, fileList, setFileList) {
+  var _props$readonly = props.readonly,
+      readonly = _props$readonly === void 0 ? false : _props$readonly,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === void 0 ? true : _props$multiple,
+      _props$limitSize = props.limitSize,
+      limitSize = _props$limitSize === void 0 ? 5 : _props$limitSize,
+      _props$listType = props.listType,
+      listType = _props$listType === void 0 ? 'picture-card' : _props$listType,
+      _props$fileDeleteList = props.fileDeleteList,
+      fileDeleteList = _props$fileDeleteList === void 0 ? [] : _props$fileDeleteList,
+      onFileChange = props.onFileChange;
+
+  var onChange = function onChange(_ref) {
+    var file = _ref.file,
+        fileList = _ref.fileList;
+    if (!file) return; //过滤掉不符合条件的响应
+
+    var newList = [];
+
+    if (file.response && file.response.returnCode !== 0) {
+      //检查是否上传到文件服务器成功
+      _helper["default"].showError("\u4E0A\u4F20\u5931\u8D25\uFF0C".concat(file.response.returnMsg || ''));
+
+      newList = (0, _filter["default"])(fileList).call(fileList, function (item) {
+        return item.uid !== file.uid;
+      });
+    } else {
+      var _context;
+
+      newList = (0, _map["default"])(_context = (0, _filter["default"])(fileList).call(fileList, function (item) {
+        return item.status;
+      })).call(_context, function (item) {
+        return (0, _indexOf["default"])(FORMATS).call(FORMATS, item.type) === -1 ? _objectSpread(_objectSpread({}, item), {}, {
+          thumbUrl: '/default.png'
+        }) : item;
+      });
+    }
+
+    file.response && onFileChange && onFileChange({
+      fileList: convertFileList(newList),
+      fileDeleteList: fileDeleteList
+    });
+    setFileList(newList);
+  };
+
+  var onRemove = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileRemove) {
+      return _regenerator["default"].wrap(function _callee$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onRemove(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return {
+    action: _this.props.action || '/api/proxy/zuul/ict-service/file/upload/document',
+    fileList: fileList,
+    listType: listType,
+    multiple: multiple,
+    onChange: onChange,
+    onRemove: onRemove,
+    onPreview: listType === 'text' ? undefined : onPreview,
+    beforeUpload: function beforeUpload(currentFile) {
+      var isLt = currentFile.size / 1024 / 1024 < limitSize; // 附件大小限制，单位M
+
+      if (!isLt) {
+        _helper["default"].showError("\u9644\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7".concat(limitSize, "M"));
+      }
+
+      return isLt;
+    },
+    showUploadList: {
+      showPreviewIcon: listType !== 'text',
+      showRemoveIcon: !readonly,
+      showDownloadIcon: true
+    }
+  };
+};
+
+function UploadButton(_ref3) {
+  var _ref3$buttonLabel = _ref3.buttonLabel,
+      buttonLabel = _ref3$buttonLabel === void 0 ? '上传' : _ref3$buttonLabel,
+      _ref3$title = _ref3.title,
+      title = _ref3$title === void 0 ? '附件' : _ref3$title,
+      _ref3$required = _ref3.required,
+      required = _ref3$required === void 0 ? false : _ref3$required,
+      _ref3$fileList = _ref3.fileList,
+      fileList = _ref3$fileList === void 0 ? [] : _ref3$fileList,
+      _ref3$limitText = _ref3.limitText,
+      limitText = _ref3$limitText === void 0 ? true : _ref3$limitText,
+      _ref3$limitNumber = _ref3.limitNumber,
+      limitNumber = _ref3$limitNumber === void 0 ? 10 : _ref3$limitNumber,
+      _ref3$listType = _ref3.listType,
+      listType = _ref3$listType === void 0 ? 'picture-card' : _ref3$listType;
+  var canUpload = fileList.length < limitNumber;
+  return canUpload ? listType === 'picture-card' ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+    type: "plus"
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ant-upload-text"
+  }, "Upload")) : /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+    title: title,
+    required: required
+  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
+    size: "small",
+    style: {
+      display: 'block',
+      margin: '8px'
+    }
+  }, buttonLabel)) : listType === 'picture-card' ? null : /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+    title: title,
+    required: required
+  }, !limitText ? null : /*#__PURE__*/_react["default"].createElement("span", null, limitText === true ? "\u9644\u4EF6\u4E2A\u6570\u82E5\u5927\u4E8E".concat(limitNumber, "\u4E2A\u8BF7\u538B\u7F29\u540E\u4E0A\u4F20") : limitText));
+}
+
+function SuperUpload(props) {
+  var _this2 = this;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      fileList = _useState4[0],
+      setFileList = _useState4[1];
+
+  var getFileList = this.props.getFileList;
+  (0, _react.useEffect)(function () {
+    function fetchImgData() {
+      return _fetchImgData.apply(this, arguments);
+    }
+
+    function _fetchImgData() {
+      _fetchImgData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var initFileList;
+        return _regenerator["default"].wrap(function _callee2$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                _context3.next = 2;
+                return getFileList(props.fileList);
+
+              case 2:
+                initFileList = _context3.sent;
+                setFileList(initFileList);
+                setLoading(false);
+
+              case 5:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee2);
+      }));
+      return _fetchImgData.apply(this, arguments);
+    }
+
+    fetchImgData();
+  }, []);
+
+  var onPreview = /*#__PURE__*/function () {
+    var _ref4 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(file) {
+      var onPreview;
+      return _regenerator["default"].wrap(function _callee3$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              onPreview = _this2.props.onPreview;
+              onPreview && onPreview(file);
+
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee3);
+    }));
+
+    return function onPreview(_x2) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+
+  var uploadProps = getUploadProps(props, onPreview, fileList, setFileList);
+  var _props$listType2 = props.listType,
+      listType = _props$listType2 === void 0 ? 'picture-card' : _props$listType2,
+      _props$limitNumber = props.limitNumber,
+      limitNumber = _props$limitNumber === void 0 ? 10 : _props$limitNumber,
+      readonly = props.readonly,
+      title = props.title;
+  var className = listType === 'picture-card' && fileList.length < limitNumber ? (0, _variables["default"])('SuperUpload') : (0, _variables["default"])('SuperUpload2');
+  return loading ? /*#__PURE__*/_react["default"].createElement("div", null, "loading...") : /*#__PURE__*/_react["default"].createElement("div", {
+    className: className
+  }, (listType === 'picture-card' || readonly) && title ? /*#__PURE__*/_react["default"].createElement(_Title["default"], {
+    title: props.title || '附件',
+    required: props.required
+  }) : null, /*#__PURE__*/_react["default"].createElement(_upload["default"], uploadProps, readonly ? null : /*#__PURE__*/_react["default"].createElement(UploadButton, _objectSpread(_objectSpread({}, props), {}, {
+    fileList: fileList
+  }))));
+}
+
+var _default = SuperUpload;
+exports["default"] = _default;

package/lib/SuperUpload/SuperUpload.less

@@ -0,0 +1,27 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-SuperUpload{
+  overflow: hidden;
+
+  :global(.ant-upload-list-item) {
+    display: inline-block;
+    margin: 10px;
+  }
+
+  :global(.ant-upload-select-picture-card) {
+    margin: 10px;
+  }
+}
+
+.@{cloudlink-prefix}-SuperUpload2 {
+  overflow: hidden;
+
+  :global(.ant-upload-list-item) {
+    display: inline-block;
+    margin: 10px;
+  }
+
+  :global(.ant-upload-select-picture-card) {
+    display: block !important;
+  }
+}

package/lib/SuperUpload/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "SuperUpload",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./SuperUpload.js"
+}

package/lib/Viewer/ImageViews.js

@@ -0,0 +1,323 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _icon = _interopRequireDefault(require("antd/lib/icon"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _variables = _interopRequireDefault(require("../variables"));
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var addEvent = function addEvent(el, event, handler) {
+  if (!el) return;
+
+  if (el.attachEvent) {
+    el.attachEvent('on' + event, handler);
+  } else if (el.addEventListener) {
+    el.addEventListener(event, handler, false);
+  } else {
+    el['on' + event] = handler;
+  }
+};
+
+var removeEvent = function removeEvent(el, event, handler) {
+  if (!el) return;
+
+  if (el.detachEvent) {
+    el.detachEvent('on' + event, handler);
+  } else if (el.removeEventListener) {
+    el.removeEventListener(event, handler, false);
+  } else {
+    el['on' + event] = null;
+  }
+};
+
+var getCss = function getCss(o, key) {
+  return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o)[key];
+}; // 获取元素旋转的角度
+
+
+var getRotateDeg = function getRotateDeg(target) {
+  var rotateMatrix = getCss(target, 'transform');
+
+  var _rotateMatrix$split$ = rotateMatrix.split('(')[1].split(')')[0].split(','),
+      _rotateMatrix$split$2 = (0, _slicedToArray2["default"])(_rotateMatrix$split$, 2),
+      a = _rotateMatrix$split$2[0],
+      b = _rotateMatrix$split$2[1];
+
+  return Math.round(Math.atan2(b, a) * (180 / Math.PI));
+};
+
+var ImageViews = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(ImageViews, _React$Component);
+
+  var _super = _createSuper(ImageViews);
+
+  function ImageViews(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, ImageViews);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onwheel", function (e) {
+      var zoom = _this.state.zoom;
+      /*事件兼容*/
+
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      var delta;
+
+      if (event.nativeEvent.wheelDelta) {
+        delta = event.nativeEvent.wheelDelta / 1200;
+      } else if (event.nativeEvent.deltaY) {
+        delta = -event.nativeEvent.deltaY / 1200;
+      }
+
+      var zoomVal = zoom + delta;
+
+      if (zoomVal >= 0.2) {
+        imageDOM.style.transform = "translate(-50%,-50%) scale(".concat(zoomVal, ")");
+      } else {
+        zoomVal = 0.2;
+        imageDOM.style.transform = "translate(-50%,-50%) scale(".concat(zoomVal, ")");
+      }
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseDown", function (e) {
+      /*事件兼容*/
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      event.preventDefault(); //阻止浏览器的默认事件
+
+      var startTouch = {};
+      startTouch.initiated = true; //initiated为true表示开始滑动
+
+      /*获取鼠标按下的地方距离元素左侧和上侧的距离*/
+
+      startTouch.startX = event.nativeEvent.clientX - imageDOM.offsetLeft;
+      startTouch.startY = event.nativeEvent.clientY - imageDOM.offsetTop;
+
+      _this.setState({
+        startTouch: startTouch
+      });
+
+      addEvent(document, 'mousemove', _this._onMouseMove);
+      addEvent(document, 'mouseup', _this._onMouseUp);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseMove", function (e) {
+      var event = e || window.event;
+      var imageDOM = _this.imgRef;
+      var startTouch = _this.state.startTouch;
+      if (!startTouch.initiated) return; //滑动距离
+
+      var deltaX = event.clientX - startTouch.startX;
+      var deltaY = event.clientY - startTouch.startY;
+      imageDOM.style.left = "".concat(deltaX, "px");
+      imageDOM.style.top = "".concat(deltaY, "px");
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMouseUp", function () {
+      var startTouch = _this.state.startTouch;
+      if (!startTouch.initiated) return;
+      var endTouch = JSON.parse((0, _stringify["default"])(startTouch));
+      endTouch.initiated = false;
+
+      _this.setState({
+        startTouch: startTouch
+      });
+
+      removeEvent(document, 'mousemove', _this._onMouseMove);
+      removeEvent(document, 'mouseup', _this._onMouseDown);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onPlus", function (event) {
+      var zoom = _this.state.zoom;
+      var imageDOM = _this.imgRef;
+      var zoomVal = zoom + 0.1;
+      var originDeg = getRotateDeg(imageDOM);
+      event.stopPropagation();
+
+      if (zoomVal >= 0.2) {
+        var _context;
+
+        imageDOM.style.transform = (0, _concat["default"])(_context = "translate(-50%,-50%) scale(".concat(zoomVal, ") rotate(")).call(_context, originDeg, "deg)");
+      }
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_onMinus", function () {
+      var _context2;
+
+      var zoom = _this.state.zoom;
+      var imageDOM = _this.imgRef;
+      var zoomVal = zoom - 0.1;
+      var originDeg = getRotateDeg(imageDOM);
+
+      if (zoomVal < 0.2) {
+        zoomVal = 0.2;
+      }
+
+      imageDOM.style.transform = (0, _concat["default"])(_context2 = "translate(-50%,-50%) scale(".concat(zoomVal, ") rotate(")).call(_context2, originDeg, "deg)");
+
+      _this.setState({
+        zoom: zoomVal
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_reload", function () {
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_arrowLeft", function () {
+      var onLeft = _this.props.onLeft;
+      onLeft && onLeft();
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_arrowRight", function () {
+      var onRight = _this.props.onRight;
+      onRight && onRight();
+      var imageDOM = _this.imgRef;
+      imageDOM.style.transform = "translate(-50%,-50%) scale(1) rotate(0deg)";
+      imageDOM.style.left = "50%";
+      imageDOM.style.top = "50%";
+
+      _this.setState({
+        zoom: 1
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "rotate", function (isLeft) {
+      return function () {
+        var _context3;
+
+        var imageDOM = _this.imgRef;
+        var originDeg = getRotateDeg(imageDOM);
+        var zoom = _this.state.zoom;
+        var rotateDeg = isLeft ? originDeg - 90 : originDeg + 90;
+        imageDOM.style.transform = (0, _concat["default"])(_context3 = "translate(-50%,-50%) rotate(".concat(rotateDeg, "deg) scale(")).call(_context3, zoom, ")");
+      };
+    });
+    _this.state = {
+      zoom: 1,
+      startTouch: {}
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(ImageViews, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var image = this.props.image;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('ImageViews')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        role: "imgWrapper"
+      }, /*#__PURE__*/_react["default"].createElement("img", {
+        src: image.src,
+        alt: image.alt,
+        ref: function ref(imgRef) {
+          _this2.imgRef = imgRef;
+        },
+        onWheel: this._onwheel //缩放事件
+        ,
+        onMouseDown: this._onMouseDown //拖拽事件
+
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('ImageViews').footer
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _variables["default"])('ImageViews').toolBar
+      }, /*#__PURE__*/_react["default"].createElement("ul", null, /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u653E\u5927",
+        onClick: this._onPlus,
+        onDoubleClick: function onDoubleClick(event) {
+          return event.preventDefault();
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "plus"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u7F29\u5C0F",
+        onClick: this._onMinus
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "minus"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u4E0A\u4E00\u5F20",
+        onClick: this._arrowLeft
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "arrow-left"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u4E0B\u4E00\u5F20",
+        onClick: this._arrowRight
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "arrow-right"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u5411\u5DE6\u65CB\u8F6C",
+        onClick: this.rotate(true)
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "pld-rotateleft"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u5411\u53F3\u65CB\u8F6C",
+        onClick: this.rotate(false)
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "pld-rotateright"
+      })), /*#__PURE__*/_react["default"].createElement("li", {
+        title: "\u590D\u539F",
+        onClick: this._reload
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        type: "delete"
+      }))))));
+    }
+  }]);
+  return ImageViews;
+}(_react["default"].Component);
+
+var _default = ImageViews;
+exports["default"] = _default;