bhd-components 0.2.2 → 0.2.4

package/esm/titleBar/index.module.less

@@ -0,0 +1,44 @@
+.titleBar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .left {
+    margin-right: 40px;
+    display: flex;
+    width: 100%;
+    overflow: hidden;
+    .leftIcon {
+        margin-right: 16px;
+        flex-shrink: 0;
+    }
+    .leftContent {
+      width: 100%;
+      overflow: hidden;
+      .leftTitle {
+        font-weight: 500;
+        font-size: 20px;
+        line-height: 24px;
+        color: rgba(0, 0, 0, 0.85);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+      }
+      .leftSubTitle {
+        margin-top: 8px;
+        color: rgba(0, 0, 0, 0.45);
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 1.5;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+      }
+    }
+  }
+  .right {
+    flex: 0 0 auto;
+  }
+}

package/esm/viewImage/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const AppViewImage: (props: any) => JSX.Element;
+export default AppViewImage;

package/esm/viewImage/index.js

@@ -0,0 +1,185 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
+import * as React from "react";
+import { useState, useEffect, useImperativeHandle, useRef } from "react";
+import styles from "./index.module.less";
+import { Modal } from "antd";
+var ViewImage = function(props) {
+    var _useState = _sliced_to_array(useState(100), 2), scaleValue = _useState[0], setScaleValue = _useState[1];
+    var _useState1 = _sliced_to_array(useState(500), 2), maxScale = _useState1[0], setMaxScale = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(1), 2), minScale = _useState2[0], setMinScale = _useState2[1];
+    var _useState3 = _sliced_to_array(useState(""), 2), imgSrc = _useState3[0], setImgSrc = _useState3[1];
+    var _useState4 = _sliced_to_array(useState("left"), 2), imgLeft = _useState4[0], setImgLeft = _useState4[1];
+    var _useState5 = _sliced_to_array(useState("right"), 2), imgTop = _useState5[0], setImgTop = _useState5[1];
+    var _useState6 = _sliced_to_array(useState(0), 2), rotateValue = _useState6[0], setRotateValue = _useState6[1];
+    var _useState7 = _sliced_to_array(useState(false), 2), loading = _useState7[0], setLoading = _useState7[1];
+    var _useState8 = _sliced_to_array(useState(0), 2), curIndex = _useState8[0], setCurIndex = _useState8[1];
+    var _useState9 = _sliced_to_array(useState(props.multiSelect || false), 2), multiSelect = _useState9[0], setMultiSelect = _useState9[1]; //是否多张图片 切换
+    var _useState10 = _sliced_to_array(useState(false), 2), imgError = _useState10[0], setImgError = _useState10[1]; //图片是否加载出错
+    var event_contextmenu = function() {
+        return false;
+    };
+    var getSrc = function() {};
+    var rotate = function() {};
+    var downloadUrl = function() {};
+    var close = function() {};
+    var reset = function() {};
+    var imgLoad = function() {};
+    var imgErr = function() {};
+    var preChange = function() {};
+    var nextChange = function() {};
+    var moveImg = function(ev) {
+    //   ev.preventDefault();
+    //   if (imgLeft == "auto") {
+    //     imgLeft = parseFloat($(".appSelf_viewImage_body_pic").css("left"));
+    //   }
+    //   if (imgTop == "auto") {
+    //     imgTop = parseFloat($(".appSelf_viewImage_body_pic").css("top"));
+    //   }
+    };
+    useEffect(function() {
+        if (multiSelect) getSrc(0);
+        else getSrc();
+        document.addEventListener("contextmenu", event_contextmenu);
+        return function() {
+            document.removeEventListener("contextmenu", event_contextmenu);
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.viewBody,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles.viewContent,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.viewAction,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                title: "旋转",
+                                onClick: rotate,
+                                children: /*#__PURE__*/ _jsx("i", {
+                                    className: "iconxuanzhuan iconfont"
+                                })
+                            }),
+                            props.download && !imgError && /*#__PURE__*/ _jsx("span", {
+                                title: "下载",
+                                onClick: downloadUrl,
+                                children: /*#__PURE__*/ _jsx("i", {
+                                    className: "iconfont iconxiazai1"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                title: "关闭",
+                                onClick: close,
+                                children: /*#__PURE__*/ _jsx("i", {
+                                    className: "iconfont iconcuo"
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.viewPicBody,
+                        children: [
+                            loading ? /*#__PURE__*/ _jsx("img", {
+                                //   src="/new_yun/images/accountManage/loading.png"
+                                className: styles.viewLoad
+                            }, "load") : imgError ? /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    color: "#FFFFFF"
+                                },
+                                children: imgSrc ? "图片加载错误" : "暂无内容"
+                            }) : /*#__PURE__*/ _jsx("img", {
+                                src: imgSrc,
+                                alt: "图片加载错误",
+                                draggable: "false",
+                                onMouseDown: moveImg,
+                                style: {
+                                    transform: "scale(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ") rotate(").concat(rotateValue, "deg)"),
+                                    left: imgLeft == "auto" ? "auto" : imgLeft + "px",
+                                    top: imgTop == "auto" ? "auto" : imgTop + "px"
+                                },
+                                className: styles.viewPic,
+                                onLoad: imgLoad,
+                                onError: imgErr
+                            }, "img"),
+                            multiSelect && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: styles.viewPrev,
+                                        onClick: preChange
+                                    }),
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: styles.viewNext,
+                                        onClick: nextChange
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: styles.viewScale,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: styles.scaleMinus,
+                                onClick: function() {
+                                //   scaleValue = scaleValue - 10;
+                                //   this.scaleChange(scaleValue);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                className: styles.scaleValue,
+                                onClick: reset,
+                                children: [
+                                    scaleValue,
+                                    "%"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                className: styles.scaleAdd,
+                                onClick: function() {
+                                //   scaleValue = scaleValue + 10;
+                                //   this.scaleChange(scaleValue);
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            props.content && /*#__PURE__*/ _jsx("div", {
+                className: styles.viewInfoMain,
+                children: props.content()
+            })
+        ]
+    });
+};
+var AppViewImage = function(props) {
+    var visible = props.visible, wraperClassName = props.wraperClassName;
+    var viewRef = useRef(null);
+    useImperativeHandle(props.viewImageRef, function() {
+        return {
+            updateSrc: function() {
+                viewRef.current.getSrc();
+            }
+        };
+    });
+    return /*#__PURE__*/ _jsx(Modal, {
+        transitionName: "",
+        maskTransitionName: "",
+        title: null,
+        footer: null,
+        closable: false,
+        centered: true,
+        open: visible,
+        keyboard: false,
+        maskStyle: {
+            background: "rgba(0, 0, 0, 0.65)"
+        },
+        wrapClassName: "".concat(styles.viewImageRoot, " ").concat(wraperClassName || ""),
+        children: /*#__PURE__*/ _jsx(ViewImage, _object_spread_props(_object_spread({}, props), {
+            ref: viewRef
+        }))
+    });
+};
+export default AppViewImage;

package/esm/viewImage/index.module.less

@@ -0,0 +1,170 @@
+.viewImageRoot {
+  :global {
+    .ant-modal {
+      width: 100% !important;
+      height: 100% !important;
+      min-height: 600px;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      .ant-modal-content {
+        width: 100%;
+        height: 100%;
+        background: transparent;
+        box-shadow: none;
+        border-radius: none;
+        .ant-modal-body {
+          width: 100%;
+          height: 100%;
+          padding: 0px;
+        }
+      }
+    }
+  }
+  .viewBody {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    .viewContent {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      .viewAction {
+        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;
+          }
+        }
+      }
+
+      .viewScale {
+        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;
+        .scaleMinus,
+        .scaleAdd {
+          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;
+        }
+
+        .scaleMinus {
+          border-radius: 4px 0 0 4px;
+        }
+        .scaleAdd {
+          border-radius: 0 4px 4px 0;
+        }
+        .scaleValue {
+          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;
+        }
+      }
+
+      .viewPicBody {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .viewPic {
+          max-width: 80%;
+          max-height: 80%;
+          cursor: move;
+          position: absolute;
+        }
+        .viewLoad {
+          width: 80px;
+          height: 80px;
+        }
+        .viewPrev {
+          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%;
+        }
+        .viewNext {
+          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%;
+        }
+      }
+    }
+    .viewInfoMain {
+      height: 100%;
+      flex-shrink: 0;
+      background: #ffffff;
+      position: relative;
+      z-index: 1001;
+      min-height: 600px;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "组件功能描述",
   "files": [
     "esm",
@@ -47,20 +47,21 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ice/jsx-runtime": "^0.2.0",
-    "@swc/helpers": "^0.4.14",
+    "@swc/helpers": "^0.5.1",
     "antd": "^5.4.6",
     "less": "^4.1.3",
-    "less-loader": "^11.1.0"
+    "less-loader": "^11.1.0",
+    "raw-loader": "^4.0.2"
   },
   "devDependencies": {
     "@ice/pkg": "^1.0.0",
     "@ice/pkg-plugin-docusaurus": "^1.0.0",
     "@iceworks/spec": "^1.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "eslint": "^7.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "stylelint": "^13.7.2"
   },
   "peerDependencies": {