@titaui/pc 1.11.3 → 1.11.4

package/lib/components/file-list/components/single-file/index.js

@@ -39,7 +39,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var prefix = "titaui-new-file-list-single-file";
+var prefix = 'titaui-new-file-list-single-file';
 
 var SingleFile = function SingleFile(_ref) {
   var data = _ref.data,
@@ -75,24 +75,24 @@ var SingleFile = function SingleFile(_ref) {
   }, isMouseEnter && /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(prefix, "__operate"),
     onMouseLeave: handleMouseLeave
-  }, !isImg && canPreview && data.previewUrl && /*#__PURE__*/_react["default"].createElement("a", {
+  }, showDownload && /*#__PURE__*/_react["default"].createElement("a", {
+    className: (0, _classnames["default"])("".concat(prefix, "__operate-item"), _defineProperty({}, "".concat(prefix, "__not-preview"), !canPreview || !data.previewUrl)),
+    href: data.downloadUrl
+  }, /*#__PURE__*/_react["default"].createElement("i", {
+    className: (0, _classnames["default"])('tu-icon-APP-xiazai', "".concat(prefix, "__operate-item-icon"))
+  }), (0, _getLocale.getLocale)('Mod_Download')), !isImg && canPreview && data.previewUrl && /*#__PURE__*/_react["default"].createElement("a", {
     className: (0, _classnames["default"])("".concat(prefix, "__operate-item"), _defineProperty({}, "".concat(prefix, "__operate-item--only"), !showDownload)),
     href: data.previewUrl,
     target: "_blank",
     rel: "noreferrer"
   }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: (0, _classnames["default"])("tu-icon-yulan", "".concat(prefix, "__operate-item-icon"))
-  }), (0, _getLocale.getLocale)("Mod_Preview")), isImg && data.previewUrl && /*#__PURE__*/_react["default"].createElement("a", {
+    className: (0, _classnames["default"])('tu-icon-yulan', "".concat(prefix, "__operate-item-icon"))
+  }), (0, _getLocale.getLocale)('Mod_Preview')), isImg && data.previewUrl && /*#__PURE__*/_react["default"].createElement("a", {
     className: (0, _classnames["default"])("".concat(prefix, "__operate-item"), _defineProperty({}, "".concat(prefix, "__operate-item--only"), !showDownload)),
     onClick: handlePreviewImg
   }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: (0, _classnames["default"])("tu-icon-yulan", "".concat(prefix, "__operate-item-icon"))
-  }), (0, _getLocale.getLocale)("Mod_Preview")), showDownload && /*#__PURE__*/_react["default"].createElement("a", {
-    className: (0, _classnames["default"])("".concat(prefix, "__operate-item"), _defineProperty({}, "".concat(prefix, "__not-preview"), !canPreview || !data.previewUrl)),
-    href: data.downloadUrl
-  }, /*#__PURE__*/_react["default"].createElement("i", {
-    className: (0, _classnames["default"])("tu-icon-APP-xiazai", "".concat(prefix, "__operate-item-icon"))
-  }), (0, _getLocale.getLocale)("Mod_Download"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])('tu-icon-yulan', "".concat(prefix, "__operate-item-icon"))
+  }), (0, _getLocale.getLocale)('Mod_Preview'))), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(prefix, "__file-preview")),
     onMouseEnter: handleMouseEnter,
     style: {

package/lib/components/img-viewer/index.css

@@ -80,6 +80,13 @@
 
 .titaui-img-viewer__body-img {
   max-width: 800px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: move;
 }
 
 .titaui-img-viewer__body-operate-btn {

package/lib/components/img-viewer/index.js

@@ -85,7 +85,18 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       isLoading = _useState12[0],
       setIsLoading = _useState12[1];
 
+  var _useState13 = (0, _react.useState)(0),
+      _useState14 = _slicedToArray(_useState13, 2),
+      moveX = _useState14[0],
+      setMoveX = _useState14[1];
+
+  var _useState15 = (0, _react.useState)(0),
+      _useState16 = _slicedToArray(_useState15, 2),
+      moveY = _useState16[0],
+      setMoveY = _useState16[1];
+
   var imgRef = (0, _react.useRef)(document.createElement("img"));
+  var DragRef = (0, _react.useRef)(document.createElement("div"));
 
   var showPreview = function showPreview() {
     var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -120,6 +131,31 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     setCurrentRotateDeg(currentRotateDeg - 90);
   };
 
+  var handleMouseDownImg = function handleMouseDownImg(e) {
+    e.preventDefault();
+    var downX = e.clientX;
+    var downY = e.clientY; // 因为这个moveX不闭包的话在拖动的时候他就 一直累加
+
+    var beforeX = moveX;
+    var beforeY = moveY;
+
+    DragRef.current.onmousemove = function (e1) {
+      //获取x和y
+      var nx = e1.clientX;
+      var ny = e1.clientY; // //计算移动后的左偏移量和顶部的偏移量
+
+      var nl = nx - downX + beforeX;
+      var nt = ny - downY + beforeY;
+      setMoveX(nl);
+      setMoveY(nt);
+    };
+  };
+
+  var handleMouseUpImg = function handleMouseUpImg(e) {
+    e.preventDefault();
+    DragRef.current.onmousemove = null;
+  };
+
   var handleRightRotate = function handleRightRotate() {
     setCurrentRotateDeg(currentRotateDeg + 90);
   };
@@ -170,7 +206,10 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className: (0, _classnames["default"])("tu-icon-close", "".concat(prefix, "__header-close")),
       onClick: hidePreview
     }))), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "".concat(prefix, "__body")
+      className: "".concat(prefix, "__body"),
+      ref: DragRef,
+      onMouseDown: handleMouseDownImg,
+      onMouseUp: handleMouseUpImg
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: (0, _classnames["default"])("".concat(prefix, "__body-operate-btn"), "".concat(prefix, "__body-operate-btn--left"), _defineProperty({}, "".concat(prefix, "__body-operate-btn--disable"), currentIndex === 0)),
       onClick: handlePreImgClick
@@ -184,17 +223,17 @@ var ImgViewer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     })), isLoading && /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(prefix, "__body--loading")
     }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: _loading["default"]
-    })), /*#__PURE__*/_react["default"].createElement("div", {
-      style: {
-        transform: "rotate(".concat(currentRotateDeg, "deg)")
-      }
-    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: _loading["default"],
+      alt: ""
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("img", {
       className: "".concat(prefix, "__body-img"),
       ref: imgRef,
+      alt: "",
       src: (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.previewUrl) || (currentImgData === null || currentImgData === void 0 ? void 0 : currentImgData.bigImageUrl),
       style: {
-        transform: "scale(".concat(currentScale, ")")
+        transform: "scale(".concat(currentScale, ") rotate(").concat(currentRotateDeg, "deg) "),
+        left: "".concat(moveX, "px"),
+        top: "".concat(moveY, "px")
       }
     }))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "".concat(prefix, "__footer")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@titaui/pc",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "nameCN": "",
   "description": "",
   "main": "lib/index.js",