ydb-components-material 0.1.183 → 0.1.185

package/es/components/file-list/item.js

@@ -357,6 +357,7 @@ var FileItem = function FileItem(_ref) {
             return _context2.abrupt("return");
           case 1:
             console.log('fileUrl', fileUrl, fileId);
+            captureComponentTop();
             setPreviewIframeUrl(fileUrl);
             setIsShowPreview(true);
             // if (!fileId) return;
@@ -411,6 +412,7 @@ var FileItem = function FileItem(_ref) {
       return _regeneratorRuntime.wrap(function (_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
+            captureComponentTop();
             if (!materialUrlMap[id]) {
               _context3.next = 1;
               break;
@@ -579,11 +581,16 @@ var FileItem = function FileItem(_ref) {
     };
   }();
 
-  // 打开维护签署人信息弹窗，同时记录当前组件距离浏览器窗口顶部的距离，用于弹窗定位
-  var openSignerInfo = function openSignerInfo() {
+  // 记录当前组件距离浏览器窗口顶部的距离，用于弹窗/预览定位
+  var captureComponentTop = function captureComponentTop() {
     if (rootRef.current) {
       setComponentTop(rootRef.current.getBoundingClientRect().top);
     }
+  };
+
+  // 打开维护签署人信息弹窗
+  var openSignerInfo = function openSignerInfo() {
+    captureComponentTop();
     setShowSignerInfo(true);
   };
   var signAndSeal = function signAndSeal() {
@@ -723,6 +730,7 @@ var FileItem = function FileItem(_ref) {
           case 2:
             guideImgRes = _context5.sent;
             if (guideImgRes.presignedUrlList.length && guideImgRes.presignedUrlList[2]) {
+              captureComponentTop();
               setGuideurl(guideImgRes.presignedUrlList[2]);
               setIsShowGuide(true);
             }
@@ -1244,7 +1252,9 @@ var FileItem = function FileItem(_ref) {
   }), isShowPreview && /*#__PURE__*/React.createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/React.createElement("img", {
     className: "close",
@@ -1252,7 +1262,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowPreview(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/React.createElement("iframe", {
     src: previewIframeUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
     frameborder: "0",
@@ -1261,7 +1274,9 @@ var FileItem = function FileItem(_ref) {
   })), isShowMaterialPreview && /*#__PURE__*/React.createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/React.createElement("img", {
     className: "close",
@@ -1269,7 +1284,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowMaterialPreview(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/React.createElement("iframe", {
     src: materialPreviewUrl,
     frameborder: "0",
@@ -1278,7 +1296,9 @@ var FileItem = function FileItem(_ref) {
   })), isShowGuide && /*#__PURE__*/React.createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/React.createElement("img", {
     className: "close",
@@ -1286,7 +1306,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowGuide(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/React.createElement("div", {
     className: "view"
   }, /*#__PURE__*/React.createElement("img", {

package/es/components/file-list/signerInfo.js

@@ -38,6 +38,7 @@ function SignerInfo(props) {
     showQRcode = _useState[0],
     setShowQRcode = _useState[1];
   var canvasRef = useRef(null);
+  var qrcodeRef = useRef(null);
   var _useState2 = useState(''),
     url = _useState2[0],
     setUrl = _useState2[1];
@@ -178,6 +179,25 @@ function SignerInfo(props) {
     });
     setSignerInfoList(newList);
   };
+
+  // 显示复制成功提示，并把它定位到 qrcode 弹窗上方
+  var showSuccessAboveQRcode = function showSuccessAboveQRcode() {
+    if (isPC && qrcodeRef.current) {
+      // 测量 qrcode 弹窗顶部距视口顶部的距离
+      var qrcodeTop = qrcodeRef.current.getBoundingClientRect().top;
+      // Message toast 的 wrapper 固定定位在视口 top 处，这里把 top 设为 qrcode 上方 20px
+      _Message.config({
+        top: qrcodeTop - 20
+      });
+      _Message.success('复制成功');
+      // Message.config 是全局单例配置，渲染完成后再恢复默认值，避免影响后续消息的显示位置
+      _Message.config({
+        top: 8
+      });
+    } else {
+      _Message.success('复制成功');
+    }
+  };
   var onCopy = function onCopy() {
     var _navigator$clipboard;
     if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
@@ -192,7 +212,7 @@ function SignerInfo(props) {
       document.execCommand('copy');
       document.body.removeChild(textarea);
     }
-    _Message.success('复制成功');
+    showSuccessAboveQRcode();
   };
   useEffect(function () {
     if (signInfoMap && file) {
@@ -436,7 +456,8 @@ function SignerInfo(props) {
     className: "qrcode" + (isPC ? ' qrcode-pc' : ''),
     style: isPC && componentTop ? {
       top: componentTop - 200
-    } : undefined
+    } : undefined,
+    ref: qrcodeRef
   }, /*#__PURE__*/React.createElement("img", {
     className: "qrcode-close",
     src: closeIcon,

package/lib/components/file-list/item.js

@@ -363,6 +363,7 @@ var FileItem = function FileItem(_ref) {
             return _context2.abrupt("return");
           case 1:
             console.log('fileUrl', fileUrl, fileId);
+            captureComponentTop();
             setPreviewIframeUrl(fileUrl);
             setIsShowPreview(true);
             // if (!fileId) return;
@@ -417,6 +418,7 @@ var FileItem = function FileItem(_ref) {
       return _regenerator["default"].wrap(function (_context3) {
         while (1) switch (_context3.prev = _context3.next) {
           case 0:
+            captureComponentTop();
             if (!materialUrlMap[id]) {
               _context3.next = 1;
               break;
@@ -585,11 +587,16 @@ var FileItem = function FileItem(_ref) {
     };
   }();
 
-  // 打开维护签署人信息弹窗，同时记录当前组件距离浏览器窗口顶部的距离，用于弹窗定位
-  var openSignerInfo = function openSignerInfo() {
+  // 记录当前组件距离浏览器窗口顶部的距离，用于弹窗/预览定位
+  var captureComponentTop = function captureComponentTop() {
     if (rootRef.current) {
       setComponentTop(rootRef.current.getBoundingClientRect().top);
     }
+  };
+
+  // 打开维护签署人信息弹窗
+  var openSignerInfo = function openSignerInfo() {
+    captureComponentTop();
     setShowSignerInfo(true);
   };
   var signAndSeal = function signAndSeal() {
@@ -729,6 +736,7 @@ var FileItem = function FileItem(_ref) {
           case 2:
             guideImgRes = _context5.sent;
             if (guideImgRes.presignedUrlList.length && guideImgRes.presignedUrlList[2]) {
+              captureComponentTop();
               setGuideurl(guideImgRes.presignedUrlList[2]);
               setIsShowGuide(true);
             }
@@ -1250,7 +1258,9 @@ var FileItem = function FileItem(_ref) {
   }), isShowPreview && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "close",
@@ -1258,7 +1268,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowPreview(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/_react["default"].createElement("iframe", {
     src: previewIframeUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
     frameborder: "0",
@@ -1267,7 +1280,9 @@ var FileItem = function FileItem(_ref) {
   })), isShowMaterialPreview && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "close",
@@ -1275,7 +1290,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowMaterialPreview(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/_react["default"].createElement("iframe", {
     src: materialPreviewUrl,
     frameborder: "0",
@@ -1284,7 +1302,9 @@ var FileItem = function FileItem(_ref) {
   })), isShowGuide && /*#__PURE__*/_react["default"].createElement("div", {
     className: "preview",
     style: isPC ? {
-      height: '40vh'
+      height: '100vh',
+      paddingTop: componentTop - 200,
+      justifyContent: 'flex-start'
     } : undefined
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "close",
@@ -1292,7 +1312,10 @@ var FileItem = function FileItem(_ref) {
     alt: "",
     onClick: function onClick() {
       return setIsShowGuide(false);
-    }
+    },
+    style: isPC ? {
+      top: componentTop - 220
+    } : undefined
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "view"
   }, /*#__PURE__*/_react["default"].createElement("img", {

package/lib/components/file-list/signerInfo.js

@@ -44,6 +44,7 @@ function SignerInfo(props) {
     showQRcode = _useState[0],
     setShowQRcode = _useState[1];
   var canvasRef = (0, _react.useRef)(null);
+  var qrcodeRef = (0, _react.useRef)(null);
   var _useState2 = (0, _react.useState)(''),
     url = _useState2[0],
     setUrl = _useState2[1];
@@ -184,6 +185,25 @@ function SignerInfo(props) {
     });
     setSignerInfoList(newList);
   };
+
+  // 显示复制成功提示，并把它定位到 qrcode 弹窗上方
+  var showSuccessAboveQRcode = function showSuccessAboveQRcode() {
+    if (isPC && qrcodeRef.current) {
+      // 测量 qrcode 弹窗顶部距视口顶部的距离
+      var qrcodeTop = qrcodeRef.current.getBoundingClientRect().top;
+      // Message toast 的 wrapper 固定定位在视口 top 处，这里把 top 设为 qrcode 上方 20px
+      _message["default"].config({
+        top: qrcodeTop - 20
+      });
+      _message["default"].success('复制成功');
+      // Message.config 是全局单例配置，渲染完成后再恢复默认值，避免影响后续消息的显示位置
+      _message["default"].config({
+        top: 8
+      });
+    } else {
+      _message["default"].success('复制成功');
+    }
+  };
   var onCopy = function onCopy() {
     var _navigator$clipboard;
     if ((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.writeText) {
@@ -198,7 +218,7 @@ function SignerInfo(props) {
       document.execCommand('copy');
       document.body.removeChild(textarea);
     }
-    _message["default"].success('复制成功');
+    showSuccessAboveQRcode();
   };
   (0, _react.useEffect)(function () {
     if (signInfoMap && file) {
@@ -442,7 +462,8 @@ function SignerInfo(props) {
     className: "qrcode" + (isPC ? ' qrcode-pc' : ''),
     style: isPC && componentTop ? {
       top: componentTop - 200
-    } : undefined
+    } : undefined,
+    ref: qrcodeRef
   }, /*#__PURE__*/_react["default"].createElement("img", {
     className: "qrcode-close",
     src: _close_black["default"],

package/lowcode_es/meta.js

@@ -98,7 +98,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.183';
+    version = '0.1.185';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/lowcode_lib/meta.js

@@ -103,7 +103,7 @@ function fillRealVersion(meta, packageName, version, basicLibraryVersion) {
     packageName = 'ydb-components-material';
   }
   if (version === void 0) {
-    version = '0.1.183';
+    version = '0.1.185';
   }
   if (basicLibraryVersion === void 0) {
     basicLibraryVersion = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-components-material",
-  "version": "0.1.183",
+  "version": "0.1.185",
   "description": "ydb-components-material",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -102,10 +102,10 @@
   },
   "componentConfig": {
     "isComponentLibrary": true,
-    "materialSchema": "https://unpkg.com/ydb-components-material@0.1.183/build/lowcode/assets-prod.json"
+    "materialSchema": "https://unpkg.com/ydb-components-material@0.1.185/build/lowcode/assets-prod.json"
   },
   "lcMeta": {
     "type": "component"
   },
-  "homepage": "https://unpkg.com/ydb-components-material@0.1.183/build/index.html"
+  "homepage": "https://unpkg.com/ydb-components-material@0.1.185/build/index.html"
 }