bhd-components 0.9.28 → 0.9.29

package/esm/bhdModalCropper/index.js

@@ -0,0 +1,151 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { jsx as _jsx, jsxs as _jsxs } from "@ice/jsx-runtime/jsx-runtime";
+import * as React from "react";
+import { useState, useRef, forwardRef, useImperativeHandle } from "react";
+import styles from "./index.module.less";
+import { Modal, Upload, Button } from "antd";
+import BhdTipModal from "../bhdTipModal";
+import Cropper from "react-cropper";
+import { PlusOutlined, MinusOutlined } from "../icons";
+var BhdModalCropper = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var _props_centered = props.centered, centered = _props_centered === void 0 ? true : _props_centered, _props_wrapClassName = props.wrapClassName, wrapClassName = _props_wrapClassName === void 0 ? "" : _props_wrapClassName, _props_width = props.width, width = _props_width === void 0 ? 456 : _props_width, _props_cropperProps = props.cropperProps, cropperProps = _props_cropperProps === void 0 ? {} : _props_cropperProps, _props_uploadMaxSize = props.uploadMaxSize, uploadMaxSize = _props_uploadMaxSize === void 0 ? 500 * 1024 : _props_uploadMaxSize, _props_accept = props.accept, accept = _props_accept === void 0 ? [
+        "jpg",
+        "png",
+        "jpeg"
+    ] : _props_accept;
+    useImperativeHandle(ref, function() {
+        return {
+            getCropper: function() {
+                return cropperRef.current.cropper;
+            },
+            getSrc: function() {
+                return cropperRef.current.cropper.getCroppedCanvas().toDataURL();
+            }
+        };
+    });
+    var _useState = _sliced_to_array(useState(props.imgSrc), 2), imgSrc = _useState[0], setImgSrc = _useState[1];
+    var cropperRef = useRef(null);
+    var enlarge = function() {
+        console.dir(cropperRef.current);
+        try {
+            // 放大
+            cropperRef.current.cropper.zoom(0.1);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+    var shrink = function() {
+        try {
+            // 缩小
+            cropperRef.current.cropper.zoom(-0.1);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+    var customRequest = function(files) {
+        var file = files.file;
+        var flag = false;
+        for(var i = 0; i < accept.length; i++){
+            var reg = new RegExp("\\." + accept[i] + "$");
+            if (reg.test(file.name)) {
+                flag = true;
+                break;
+            }
+        }
+        if (file.size > uploadMaxSize || !flag) {
+            var uploadMaxSizeStr = "";
+            if (uploadMaxSize < 1024 * 1024) {
+                uploadMaxSizeStr = "".concat(uploadMaxSize / 1024, "K");
+            } else {
+                uploadMaxSizeStr = "".concat(uploadMaxSize / 1024 / 1024, "M");
+            }
+            BhdTipModal.warning({
+                title: "提示",
+                content: "支持的图片格式为(".concat(accept.join("、"), ")，大小限制为").concat(uploadMaxSizeStr)
+            });
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function customRequest(evt) {
+            var replaceSrc = evt.target.result;
+            setImgSrc(replaceSrc);
+        };
+        reader.readAsDataURL(file);
+    };
+    var getAcceptStr = function() {
+        var str = "";
+        accept.forEach(function(item, index) {
+            str += ".".concat(item);
+            if (index != accept.length - 1) {
+                str += ",";
+            }
+        });
+        return str;
+    };
+    return /*#__PURE__*/ _jsx(Modal, _object_spread_props(_object_spread({}, props), {
+        centered: centered,
+        wrapClassName: "".concat(wrapClassName, " ").concat(styles.BhdModalCropper),
+        width: width,
+        children: open && /*#__PURE__*/ _jsxs("div", {
+            className: styles.cropperBox,
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: styles.cropperMain,
+                    children: /*#__PURE__*/ _jsx(Cropper, _object_spread_props(_object_spread({
+                        src: imgSrc,
+                        orginStyle: {
+                            width: 30,
+                            height: 20
+                        },
+                        background: false,
+                        aspectRatio: 80 / 80,
+                        guides: true,
+                        cropBoxMovable: false,
+                        cropBoxResizable: false,
+                        dragMode: "move",
+                        dragCrop: false,
+                        style: {
+                            width: "392px",
+                            height: "240px"
+                        }
+                    }, cropperProps), {
+                        ref: cropperRef
+                    }))
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.cropperBtn,
+                    children: [
+                        /*#__PURE__*/ _jsx(Upload, {
+                            fileList: [],
+                            accept: getAcceptStr(),
+                            customRequest: customRequest,
+                            children: /*#__PURE__*/ _jsx(Button, {
+                                children: "重新上传"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.icons,
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    onClick: function() {
+                                        return enlarge();
+                                    },
+                                    children: /*#__PURE__*/ _jsx(MinusOutlined, {})
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    onClick: function() {
+                                        return shrink();
+                                    },
+                                    children: /*#__PURE__*/ _jsx(PlusOutlined, {})
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }));
+});
+export default BhdModalCropper;

package/esm/bhdModalCropper/index.module.less

@@ -0,0 +1,362 @@
+.BhdModalCropper {
+  :global {
+    .bhd-modal-content {
+      .bhd-modal-header {
+        border-bottom: 0;
+        padding: 24px 32px;
+      }
+      .bhd-modal-body {
+        padding: 0 32px;
+      }
+      .bhd-modal-close {
+        right: 29px;
+        top: 24px;
+      }
+      .bhd-modal-footer {
+        border-top: 0;
+        padding: 24px 32px;
+      }
+    }
+  }
+}
+
+.cropperBox {
+  :global {
+    /*!
+ * Cropper.js v1.6.2
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2024-04-21T07:43:02.731Z
+ */
+
+    .cropper-container {
+      direction: ltr;
+      font-size: 0;
+      line-height: 0;
+      position: relative;
+      -ms-touch-action: none;
+      touch-action: none;
+      -webkit-touch-callout: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+    }
+
+    .cropper-container img {
+      backface-visibility: hidden;
+      display: block;
+      height: 100%;
+      image-orientation: 0deg;
+      max-height: none !important;
+      max-width: none !important;
+      min-height: 0 !important;
+      min-width: 0 !important;
+      width: 100%;
+    }
+
+    .cropper-wrap-box,
+    .cropper-canvas,
+    .cropper-drag-box,
+    .cropper-crop-box,
+    .cropper-modal {
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
+    .cropper-wrap-box,
+    .cropper-canvas {
+      overflow: hidden;
+    }
+
+    .cropper-drag-box {
+      background-color: #fff;
+      opacity: 0;
+    }
+
+    .cropper-modal {
+      background-color: #000;
+      opacity: 0.5;
+    }
+
+    .cropper-view-box {
+      display: block;
+      height: 100%;
+      outline: 1px solid #39f;
+      outline-color: rgba(51, 153, 255, 0.75);
+      overflow: hidden;
+      width: 100%;
+    }
+
+    .cropper-dashed {
+      border: 0 dashed #eee;
+      display: block;
+      opacity: 0.5;
+      position: absolute;
+    }
+
+    .cropper-dashed.dashed-h {
+      border-bottom-width: 1px;
+      border-top-width: 1px;
+      height: calc(100% / 3);
+      left: 0;
+      top: calc(100% / 3);
+      width: 100%;
+    }
+
+    .cropper-dashed.dashed-v {
+      border-left-width: 1px;
+      border-right-width: 1px;
+      height: 100%;
+      left: calc(100% / 3);
+      top: 0;
+      width: calc(100% / 3);
+    }
+
+    .cropper-center {
+      display: block;
+      height: 0;
+      left: 50%;
+      opacity: 0.75;
+      position: absolute;
+      top: 50%;
+      width: 0;
+    }
+
+    .cropper-center::before,
+    .cropper-center::after {
+      background-color: #eee;
+      content: " ";
+      display: block;
+      position: absolute;
+    }
+
+    .cropper-center::before {
+      height: 1px;
+      left: -3px;
+      top: 0;
+      width: 7px;
+    }
+
+    .cropper-center::after {
+      height: 7px;
+      left: 0;
+      top: -3px;
+      width: 1px;
+    }
+
+    .cropper-face,
+    .cropper-line,
+    .cropper-point {
+      display: block;
+      height: 100%;
+      opacity: 0.1;
+      position: absolute;
+      width: 100%;
+    }
+
+    .cropper-face {
+      background-color: #fff;
+      left: 0;
+      top: 0;
+    }
+
+    .cropper-line {
+      background-color: #39f;
+    }
+
+    .cropper-line.line-e {
+      cursor: ew-resize;
+      right: -3px;
+      top: 0;
+      width: 5px;
+    }
+
+    .cropper-line.line-n {
+      cursor: ns-resize;
+      height: 5px;
+      left: 0;
+      top: -3px;
+    }
+
+    .cropper-line.line-w {
+      cursor: ew-resize;
+      left: -3px;
+      top: 0;
+      width: 5px;
+    }
+
+    .cropper-line.line-s {
+      bottom: -3px;
+      cursor: ns-resize;
+      height: 5px;
+      left: 0;
+    }
+
+    .cropper-point {
+      background-color: #39f;
+      height: 5px;
+      opacity: 0.75;
+      width: 5px;
+    }
+
+    .cropper-point.point-e {
+      cursor: ew-resize;
+      margin-top: -3px;
+      right: -3px;
+      top: 50%;
+    }
+
+    .cropper-point.point-n {
+      cursor: ns-resize;
+      left: 50%;
+      margin-left: -3px;
+      top: -3px;
+    }
+
+    .cropper-point.point-w {
+      cursor: ew-resize;
+      left: -3px;
+      margin-top: -3px;
+      top: 50%;
+    }
+
+    .cropper-point.point-s {
+      bottom: -3px;
+      cursor: s-resize;
+      left: 50%;
+      margin-left: -3px;
+    }
+
+    .cropper-point.point-ne {
+      cursor: nesw-resize;
+      right: -3px;
+      top: -3px;
+    }
+
+    .cropper-point.point-nw {
+      cursor: nwse-resize;
+      left: -3px;
+      top: -3px;
+    }
+
+    .cropper-point.point-sw {
+      bottom: -3px;
+      cursor: nesw-resize;
+      left: -3px;
+    }
+
+    .cropper-point.point-se {
+      bottom: -3px;
+      cursor: nwse-resize;
+      height: 20px;
+      opacity: 1;
+      right: -3px;
+      width: 20px;
+    }
+
+    @media (min-width: 768px) {
+      .cropper-point.point-se {
+        height: 15px;
+        width: 15px;
+      }
+    }
+
+    @media (min-width: 992px) {
+      .cropper-point.point-se {
+        height: 10px;
+        width: 10px;
+      }
+    }
+
+    @media (min-width: 1200px) {
+      .cropper-point.point-se {
+        height: 5px;
+        opacity: 0.75;
+        width: 5px;
+      }
+    }
+
+    .cropper-point.point-se::before {
+      background-color: #39f;
+      bottom: -50%;
+      content: " ";
+      display: block;
+      height: 200%;
+      opacity: 0;
+      position: absolute;
+      right: -50%;
+      width: 200%;
+    }
+
+    .cropper-invisible {
+      opacity: 0;
+    }
+
+    .cropper-bg {
+      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
+    }
+
+    .cropper-hide {
+      display: block;
+      height: 0;
+      position: absolute;
+      width: 0;
+    }
+
+    .cropper-hidden {
+      display: none !important;
+    }
+
+    .cropper-move {
+      cursor: move;
+    }
+
+    .cropper-crop {
+      cursor: crosshair;
+    }
+
+    .cropper-disabled .cropper-drag-box,
+    .cropper-disabled .cropper-face,
+    .cropper-disabled .cropper-line,
+    .cropper-disabled .cropper-point {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.cropperBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24px;
+  .icons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    & > span {
+      display: flex;
+      align-items: center;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      padding: 4px;
+      cursor: pointer;
+      color: rgba(0, 0, 0, 0.65);
+      &:hover {
+        border-color: #ff7d66;
+        color: #ff7d66;
+      }
+    }
+    :global {
+      .anticon {
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}

package/esm/index.d.ts

@@ -82,3 +82,4 @@ export { default as BhdAppLayout } from "./bhdAppLayout";
 export { default as CustomerService } from "./customerService";
 export { default as BhdDatePicker } from "./bhdDatePicker";
 export { default as BhdEnterInput } from "./bhdEnterInput";
+export { default as BhdModalCropper } from "./bhdModalCropper";

package/esm/index.js

@@ -87,3 +87,4 @@ export { default as BhdAppLayout } from "./bhdAppLayout"; //封装 BhdAppLayout
 export { default as CustomerService } from "./customerService"; //封装 智能客服
 export { default as BhdDatePicker } from "./bhdDatePicker"; //封装 日历组件
 export { default as BhdEnterInput } from "./bhdEnterInput"; //封装 Input
+export { default as BhdModalCropper } from "./bhdModalCropper"; //裁剪头像

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhd-components",
-  "version": "0.9.28",
+  "version": "0.9.29",
   "description": "组件功能描述",
   "config": {
     "commitizen": {
@@ -40,6 +40,7 @@
     "*.css"
   ],
   "scripts": {
+    "start:large-memory": "node --max-old-space-size=8192 node_modules/.bin/ice-pkg start",
     "start": "ice-pkg start",
     "build": "ice-pkg build",
     "build:esm": "cross-env NODE_TYPE=esm ice-pkg build",
@@ -53,7 +54,7 @@
     "prepare": "husky install",
     "commit": "git add . && npx cz",
     "nodemon": "nodemon --config nodemon.json",
-    "proxy":"node lib/proxy/index.js"
+    "proxy": "node lib/proxy/index.js"
   },
   "keywords": [
     "ice",
@@ -67,6 +68,8 @@
     "@microsoft/fetch-event-source": "^2.0.1",
     "@rangermauve/fetch-event-source": "^1.0.3",
     "@swc/helpers": "^0.5.1",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-react": "^1.0.6",
     "antd": "5.6.1",
     "cross-env": "^7.0.3",
     "highlight.js": "^11.9.0",
@@ -74,6 +77,7 @@
     "less": "^4.1.3",
     "less-loader": "^11.1.0",
     "raw-loader": "^4.0.2",
+    "react-cropper": "^2.3.3",
     "react-image-crop": "^11.0.5",
     "remarkable": "^2.0.1"
   },