bhd-components 0.9.17 → 0.9.19

package/esm/viewImage/index.js

@@ -13,7 +13,7 @@ import * as React from "react";
 import { useRef, useImperativeHandle, forwardRef } from "react";
 import styles from "./index.module.less";
 import { Modal } from "antd";
-import { LeftOutlined, RightOutlined, MinusOutlined, PlusOutlined, CustomClose, CustomXuanZuan, CustomDownLoad } from "../icons";
+import { LeftOutlined, RightOutlined, MinusOutlined, PlusOutlined, CustomClose, CustomScreenXuanZuan, CustomDownLoad } from "../icons";
 import { getStyle } from "../utils/dom";
 import { Loading } from "../images";
 import BhdTipModal from "../bhdTipModal";
@@ -36,7 +36,8 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
             loading: false,
             curIndex: 0,
             multiSelect: false,
-            imgError: false
+            imgError: false,
+            actionCloseFlag: 0 // 关闭按钮位置 0是跟随图片 1固定右上角
         });
         _define_property(_assert_this_initialized(_this), "scaleChange", function(value) {
             var _this_state = _this.state, maxScale = _this_state.maxScale, minScale = _this_state.minScale;
@@ -48,8 +49,24 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
             }
             _this.setState({
                 scaleValue: value
+            }, function() {
+                _this.moveActionClose();
             });
         });
+        _define_property(_assert_this_initialized(_this), "moveActionClose", function() {
+            setTimeout(function() {
+                var rect = document.getElementById("viewImgBody_pic").getBoundingClientRect();
+                if (rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) - 40 && rect.right <= (window.innerWidth || document.documentElement.clientWidth) - 52) {
+                    _this.setState({
+                        actionCloseFlag: 0
+                    });
+                } else {
+                    _this.setState({
+                        actionCloseFlag: 1
+                    });
+                }
+            }, 10);
+        });
         _define_property(_assert_this_initialized(_this), "moveImg", function(ev) {
             var _this_state = _this.state, imgLeft = _this_state.imgLeft, imgTop = _this_state.imgTop;
             ev.preventDefault();
@@ -67,7 +84,9 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
                 _this.setState({
                     imgLeft: ev.pageX - disx,
                     imgTop: ev.pageY - disy
-                }, function() {});
+                }, function() {
+                    _this.moveActionClose();
+                });
             };
             var mouseUp = function() {
                 document.removeEventListener("mousemove", mouseMove);
@@ -345,23 +364,58 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
                         /*#__PURE__*/ _jsxs("div", {
                             className: styles.viewImgContent,
                             children: [
+                                this.state.actionCloseFlag === 1 && /*#__PURE__*/ _jsx("div", {
+                                    className: "".concat(styles.viewImgAction, " ").concat(styles.actionTop),
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        // id="actionClose"
+                                        // style={{right:`calc(-40px + (-12px * (1 / ${scaleValue / 100}) ))` ,transform: `scale(calc(1 / ${scaleValue / 100}),calc(1 / ${scaleValue / 100}))`,transformOrigin: `top left`}} 
+                                        className: styles.viewImgActionClose,
+                                        title: "关闭",
+                                        onClick: this.close,
+                                        children: /*#__PURE__*/ _jsx(CustomClose, {})
+                                    })
+                                }),
                                 /*#__PURE__*/ _jsxs("div", {
                                     className: styles.viewImgAction,
                                     children: [
                                         /*#__PURE__*/ _jsx("span", {
                                             title: "旋转",
                                             onClick: this.rotate,
-                                            children: /*#__PURE__*/ _jsx(CustomXuanZuan, {})
+                                            children: /*#__PURE__*/ _jsx(CustomScreenXuanZuan, {})
                                         }),
                                         download && !imgError && /*#__PURE__*/ _jsx("span", {
                                             title: "下载",
                                             onClick: this.downloadUrl,
                                             children: /*#__PURE__*/ _jsx(CustomDownLoad, {})
                                         }),
-                                        /*#__PURE__*/ _jsx("span", {
-                                            title: "关闭",
-                                            onClick: this.close,
-                                            children: /*#__PURE__*/ _jsx(CustomClose, {})
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: styles.viewImgBodyScale,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: styles.viewImgBodyScale_minu,
+                                                    onClick: function() {
+                                                        scaleValue = scaleValue - 10;
+                                                        _this.scaleChange(scaleValue);
+                                                    },
+                                                    children: /*#__PURE__*/ _jsx(MinusOutlined, {})
+                                                }),
+                                                /*#__PURE__*/ _jsxs("span", {
+                                                    className: styles.viewImgBodyScale_value,
+                                                    onClick: this.reset,
+                                                    children: [
+                                                        scaleValue,
+                                                        "%"
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    className: styles.viewImgBodyScale_add,
+                                                    onClick: function() {
+                                                        scaleValue = scaleValue + 10;
+                                                        _this.scaleChange(scaleValue);
+                                                    },
+                                                    children: /*#__PURE__*/ _jsx(PlusOutlined, {})
+                                                })
+                                            ]
                                         })
                                     ]
                                 }),
@@ -376,20 +430,40 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
                                                 color: "#FFFFFF"
                                             },
                                             children: imgSrc ? "图片加载错误" : "暂无内容"
-                                        }) : /*#__PURE__*/ _jsx("img", {
-                                            src: imgSrc,
-                                            alt: "图片加载错误",
-                                            draggable: "false",
+                                        }) : /*#__PURE__*/ _jsxs("div", {
                                             onMouseDown: this.moveImg,
                                             style: {
-                                                transform: "scale(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ") rotate(").concat(rotateValue, "deg)"),
+                                                transform: "scale(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ")"),
                                                 left: imgLeft == "auto" ? "auto" : imgLeft + "px",
                                                 top: imgTop == "auto" ? "auto" : imgTop + "px"
                                             },
                                             className: styles.viewImgBody_pic,
-                                            onLoad: this.imgLoad,
-                                            onError: this.imgErr
-                                        }, "img"),
+                                            children: [
+                                                /*#__PURE__*/ _jsx("img", {
+                                                    id: "viewImgBody_pic",
+                                                    src: imgSrc,
+                                                    alt: "图片加载错误",
+                                                    draggable: "false",
+                                                    style: {
+                                                        transform: "rotate(".concat(rotateValue, "deg)")
+                                                    },
+                                                    onLoad: this.imgLoad,
+                                                    onError: this.imgErr
+                                                }, "img"),
+                                                this.state.actionCloseFlag === 0 && /*#__PURE__*/ _jsx("span", {
+                                                    id: "actionClose",
+                                                    style: {
+                                                        right: "calc(-40px + (-12px * (1 / ".concat(scaleValue / 100, ") ))"),
+                                                        transform: "scale(calc(1 / ".concat(scaleValue / 100, "),calc(1 / ").concat(scaleValue / 100, "))"),
+                                                        transformOrigin: "top left"
+                                                    },
+                                                    className: styles.viewImgActionClose,
+                                                    title: "关闭",
+                                                    onClick: this.close,
+                                                    children: /*#__PURE__*/ _jsx(CustomClose, {})
+                                                })
+                                            ]
+                                        }),
                                         multiSelect && /*#__PURE__*/ _jsxs(_Fragment, {
                                             children: [
                                                 this.state.curIndex !== 0 && /*#__PURE__*/ _jsx("div", {
@@ -405,35 +479,6 @@ var ViewImage = /*#__PURE__*/ function(_React_Component) {
                                             ]
                                         })
                                     ]
-                                }),
-                                /*#__PURE__*/ _jsxs("div", {
-                                    className: styles.viewImgBodyScale,
-                                    children: [
-                                        /*#__PURE__*/ _jsx("span", {
-                                            className: styles.viewImgBodyScale_minu,
-                                            onClick: function() {
-                                                scaleValue = scaleValue - 10;
-                                                _this.scaleChange(scaleValue);
-                                            },
-                                            children: /*#__PURE__*/ _jsx(MinusOutlined, {})
-                                        }),
-                                        /*#__PURE__*/ _jsxs("span", {
-                                            className: styles.viewImgBodyScale_value,
-                                            onClick: this.reset,
-                                            children: [
-                                                scaleValue,
-                                                "%"
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ _jsx("span", {
-                                            className: styles.viewImgBodyScale_add,
-                                            onClick: function() {
-                                                scaleValue = scaleValue + 10;
-                                                _this.scaleChange(scaleValue);
-                                            },
-                                            children: /*#__PURE__*/ _jsx(PlusOutlined, {})
-                                        })
-                                    ]
                                 })
                             ]
                         }),

package/esm/viewImage/index.module(/345/216/237).less

@@ -0,0 +1,173 @@
+@import "../theme/variable.less";
+.AppViewImage {
+  :global {
+    .bhd-modal {
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 600px;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      max-width: none;
+      .bhd-modal-content {
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        box-shadow: none;
+        border-radius: none;
+        .bhd-modal-body {
+          width: 100%;
+          height: 100%;
+          padding: 0px;
+        }
+      }
+    }
+  }
+}
+
+.viewImgBody {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  .viewImgContent {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .viewImgAction {
+      width: 100%;
+      display: flex;
+      position: absolute;
+      top: 40px;
+      justify-content: flex-end;
+      padding-right: 40px;
+      box-sizing: border-box;
+      z-index: 10;
+      & > span {
+        display: flex;
+        width: 40px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.45);
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        color: #ffffff;
+        cursor: pointer;
+        border-radius: 8px;
+        margin-left: 24px;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+    .viewImgBody {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .viewImgBody_load {
+        width: 80px;
+        height: 80px;
+      }
+      .viewImgBody_pic {
+        max-width: 80%;
+        max-height: 80%;
+        cursor: move;
+        position: absolute;
+        user-select: none;
+      }
+      .viewImgBody_pre {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        border-left: 1px solid rgba(255, 255, 255, 0.25);
+        border-right: 1px solid rgba(255, 255, 255, 0.25);
+        box-sizing: border-box;
+        background: rgba(0, 0, 0, 0.45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        cursor: pointer;
+        user-select: none;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 40px;
+        border-radius: 50%;
+      }
+      .viewImgBody_next {
+        position: absolute;
+        width: 40px;
+        height: 40px;
+        border-left: 1px solid rgba(255, 255, 255, 0.25);
+        border-right: 1px solid rgba(255, 255, 255, 0.25);
+        box-sizing: border-box;
+        background: rgba(0, 0, 0, 0.45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        cursor: pointer;
+        user-select: none;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 40px;
+        border-radius: 50%;
+      }
+    }
+    .viewImgBodyScale {
+      width: 100%;
+      padding-right: 40px;
+      box-sizing: border-box;
+      position: absolute;
+      bottom: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      user-select: none;
+      z-index: 10;
+      .viewImgBodyScale_minu,
+      .viewImgBodyScale_add {
+        width: 40px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        color: #ffffff;
+        background-color: rgba(0, 0, 0, 0.45);
+        cursor: pointer;
+      }
+
+      .viewImgBodyScale_minu {
+        border-radius: 4px 0 0 4px;
+      }
+
+      .viewImgBodyScale_add {
+        border-radius: 0 4px 4px 0;
+      }
+      .viewImgBodyScale_value {
+        width: 80px;
+        height: 40px;
+        border-left: 1px solid rgba(255, 255, 255, 0.25);
+        border-right: 1px solid rgba(255, 255, 255, 0.25);
+        box-sizing: border-box;
+        background: rgba(0, 0, 0, 0.45);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        cursor: pointer;
+        user-select: none;
+      }
+    }
+  }
+  .viewImgInfo {
+    height: 100%;
+    flex-shrink: 0;
+    background: #ffffff;
+    position: relative;
+    z-index: 1001;
+    min-height: 600px;
+  }
+}

package/esm/viewImage/index.module.less

@@ -37,11 +37,16 @@
       width: 100%;
       display: flex;
       position: absolute;
-      top: 40px;
+      bottom: 40px;
       justify-content: flex-end;
       padding-right: 40px;
       box-sizing: border-box;
       z-index: 10;
+      gap: 24px;
+      &.actionTop{
+        top: 40px;
+        bottom: auto;
+      }
       & > span {
         display: flex;
         width: 40px;
@@ -53,7 +58,6 @@
         color: #ffffff;
         cursor: pointer;
         border-radius: 8px;
-        margin-left: 24px;
         &:first-child {
           margin-left: 0;
         }
@@ -71,10 +75,29 @@
       }
       .viewImgBody_pic {
         max-width: 80%;
-        max-height: 80%;
+        max-height:  80%;
         cursor: move;
         position: absolute;
         user-select: none;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .viewImgActionClose{        
+        position: absolute;
+        top: 0;
+        right: -52px;
+        display: flex;
+        width: 40px;
+        height: 40px;
+        background: rgba(0, 0, 0, 0.45);
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        color: #ffffff;
+        cursor: pointer;
+        border-radius: 8px;
       }
       .viewImgBody_pre {
         position: absolute;
@@ -116,16 +139,13 @@
       }
     }
     .viewImgBodyScale {
-      width: 100%;
-      padding-right: 40px;
       box-sizing: border-box;
-      position: absolute;
-      bottom: 40px;
-      display: flex;
+      display: inline-flex;
       align-items: center;
-      justify-content: flex-end;
+      justify-content: center;
       user-select: none;
       z-index: 10;
+      gap: 4px;
       .viewImgBodyScale_minu,
       .viewImgBodyScale_add {
         width: 40px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.9.17",
+  "version": "0.9.19",
   "description": "组件功能描述",
   "config": {
     "commitizen": {