bhd-components 0.9.28 → 0.9.29

package/es2017/bhdEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * as WangeditorForReact from "@wangeditor/editor-for-react";
+export * from "@wangeditor/editor";

package/es2017/bhdEditor/index.js

@@ -0,0 +1,3 @@
+import * as _WangeditorForReact from "@wangeditor/editor-for-react";
+export { _WangeditorForReact as WangeditorForReact };
+export * from "@wangeditor/editor";

package/es2017/bhdModalCropper/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ModalProps } from "antd";
+interface BhdModalCropperProps extends ModalProps {
+    cropperProps?: any;
+    imgSrc: string;
+    uploadMaxSize?: number;
+    accept?: string[];
+}
+declare const BhdModalCropper: React.ForwardRefExoticComponent<BhdModalCropperProps & React.RefAttributes<unknown>>;
+export default BhdModalCropper;

package/es2017/bhdModalCropper/index.js

@@ -0,0 +1,144 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+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";
+const BhdModalCropper = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { centered = true, wrapClassName = "", width = 456, cropperProps = {}, uploadMaxSize = 500 * 1024, accept = [
+        "jpg",
+        "png",
+        "jpeg"
+    ] } = props;
+    useImperativeHandle(ref, ()=>({
+            getCropper: ()=>{
+                return cropperRef.current.cropper;
+            },
+            getSrc: ()=>{
+                return cropperRef.current.cropper.getCroppedCanvas().toDataURL();
+            }
+        }));
+    const [imgSrc, setImgSrc] = useState(props.imgSrc);
+    const cropperRef = useRef(null);
+    const enlarge = ()=>{
+        console.dir(cropperRef.current);
+        try {
+            // 放大
+            cropperRef.current.cropper.zoom(0.1);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+    const shrink = ()=>{
+        try {
+            // 缩小
+            cropperRef.current.cropper.zoom(-0.1);
+        } catch (err) {
+            console.log(err);
+        }
+    };
+    const customRequest = (files)=>{
+        const { file } = files;
+        let flag = false;
+        for(let i = 0; i < accept.length; i++){
+            let reg = new RegExp("\\." + accept[i] + "$");
+            if (reg.test(file.name)) {
+                flag = true;
+                break;
+            }
+        }
+        if (file.size > uploadMaxSize || !flag) {
+            let uploadMaxSizeStr = "";
+            if (uploadMaxSize < 1024 * 1024) {
+                uploadMaxSizeStr = `${uploadMaxSize / 1024}K`;
+            } else {
+                uploadMaxSizeStr = `${uploadMaxSize / 1024 / 1024}M`;
+            }
+            BhdTipModal.warning({
+                title: "提示",
+                content: `支持的图片格式为(${accept.join("、")})，大小限制为${uploadMaxSizeStr}`
+            });
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function(evt) {
+            let replaceSrc = evt.target.result;
+            setImgSrc(replaceSrc);
+        };
+        reader.readAsDataURL(file);
+    };
+    const getAcceptStr = ()=>{
+        let str = "";
+        accept.forEach((item, index)=>{
+            str += `.${item}`;
+            if (index != accept.length - 1) {
+                str += ",";
+            }
+        });
+        return str;
+    };
+    return /*#__PURE__*/ _jsx(Modal, _object_spread_props(_object_spread({}, props), {
+        centered: centered,
+        wrapClassName: `${wrapClassName} ${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: ()=>enlarge(),
+                                    children: /*#__PURE__*/ _jsx(MinusOutlined, {})
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    onClick: ()=>shrink(),
+                                    children: /*#__PURE__*/ _jsx(PlusOutlined, {})
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    }));
+});
+export default BhdModalCropper;

package/es2017/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/es2017/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/es2017/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/esm/bhdEditor/index.d.ts

@@ -0,0 +1,2 @@
+export * as WangeditorForReact from "@wangeditor/editor-for-react";
+export * from "@wangeditor/editor";

package/esm/bhdEditor/index.js

@@ -0,0 +1,3 @@
+import * as _WangeditorForReact from "@wangeditor/editor-for-react";
+export { _WangeditorForReact as WangeditorForReact };
+export * from "@wangeditor/editor";

package/esm/bhdModalCropper/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { ModalProps } from "antd";
+interface BhdModalCropperProps extends ModalProps {
+    cropperProps?: any;
+    imgSrc: string;
+    uploadMaxSize?: number;
+    accept?: string[];
+}
+declare const BhdModalCropper: React.ForwardRefExoticComponent<BhdModalCropperProps & React.RefAttributes<unknown>>;
+export default BhdModalCropper;