bhd-components 0.9.17 → 0.9.19

package/es2017/viewImage/index(/345/216/237).js

@@ -0,0 +1,384 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+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, Fragment as _Fragment } from "@ice/jsx-runtime/jsx-runtime";
+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 { getStyle } from "../utils/dom";
+import { Loading } from "../images";
+import BhdTipModal from "../bhdTipModal";
+class ViewImage extends React.Component {
+    componentDidMount() {
+        this.setState({
+            multiSelect: !!this.props.multiSelect || false
+        }, ()=>{
+            if (!this.state.multiSelect) {
+                this.getSrc();
+            } else {
+                //多张
+                this.getSrc(0);
+            }
+        });
+        document.oncontextmenu = function() {
+            return false;
+        };
+    }
+    componentWillUnmount() {
+        document.oncontextmenu = null;
+    }
+    render() {
+        let { scaleValue, imgSrc, imgLeft, imgTop, rotateValue, loading, multiSelect, imgError } = this.state;
+        let { content, download } = this.props;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: styles.viewImgBody,
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: styles.viewImgContent,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.viewImgAction,
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    title: "旋转",
+                                    onClick: this.rotate,
+                                    children: /*#__PURE__*/ _jsx(CustomXuanZuan, {})
+                                }),
+                                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.viewImgBody,
+                            children: [
+                                loading ? /*#__PURE__*/ _jsx("img", {
+                                    src: Loading,
+                                    className: styles.viewImgBody_load
+                                }, "load") : imgError ? /*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        color: "#FFFFFF"
+                                    },
+                                    children: imgSrc ? "图片加载错误" : "暂无内容"
+                                }) : /*#__PURE__*/ _jsx("img", {
+                                    src: imgSrc,
+                                    alt: "图片加载错误",
+                                    draggable: "false",
+                                    onMouseDown: this.moveImg,
+                                    style: {
+                                        transform: `scale(${scaleValue / 100},${scaleValue / 100}) rotate(${rotateValue}deg)`,
+                                        left: imgLeft == "auto" ? "auto" : imgLeft + "px",
+                                        top: imgTop == "auto" ? "auto" : imgTop + "px"
+                                    },
+                                    className: styles.viewImgBody_pic,
+                                    onLoad: this.imgLoad,
+                                    onError: this.imgErr
+                                }, "img"),
+                                multiSelect && /*#__PURE__*/ _jsxs(_Fragment, {
+                                    children: [
+                                        this.state.curIndex !== 0 && /*#__PURE__*/ _jsx("div", {
+                                            className: styles.viewImgBody_pre,
+                                            onClick: this.preChange,
+                                            children: /*#__PURE__*/ _jsx(LeftOutlined, {})
+                                        }),
+                                        this.state.curIndex < this.props.multiSelect.length - 1 && /*#__PURE__*/ _jsx("div", {
+                                            className: styles.viewImgBody_next,
+                                            onClick: this.nextChange,
+                                            children: /*#__PURE__*/ _jsx(RightOutlined, {})
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: styles.viewImgBodyScale,
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: styles.viewImgBodyScale_minu,
+                                    onClick: ()=>{
+                                        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: ()=>{
+                                        scaleValue = scaleValue + 10;
+                                        this.scaleChange(scaleValue);
+                                    },
+                                    children: /*#__PURE__*/ _jsx(PlusOutlined, {})
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                content && /*#__PURE__*/ _jsx("div", {
+                    className: styles.viewImgInfo,
+                    children: content()
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args);
+        _define_property(this, "state", {
+            scaleValue: 100,
+            maxScale: 500,
+            minScale: 1,
+            imgSrc: "",
+            imgLeft: "auto",
+            imgTop: "auto",
+            rotateValue: 0,
+            loading: false,
+            curIndex: 0,
+            multiSelect: false,
+            imgError: false
+        });
+        _define_property(this, "scaleChange", (value)=>{
+            let { maxScale, minScale } = this.state;
+            if (value >= maxScale) {
+                value = maxScale;
+            }
+            if (value <= minScale) {
+                value = minScale;
+            }
+            this.setState({
+                scaleValue: value
+            });
+        });
+        _define_property(this, "moveImg", (ev)=>{
+            let { imgLeft, imgTop } = this.state;
+            ev.preventDefault();
+            let dom = document.getElementsByClassName(`${styles.viewImgBody_pic}`)[0];
+            if (!dom) return;
+            if (imgLeft == "auto") {
+                imgLeft = getStyle(dom, "left");
+            }
+            if (imgTop == "auto") {
+                imgTop = getStyle(dom, "top");
+            }
+            var disx = ev.pageX - imgLeft;
+            var disy = ev.pageY - imgTop;
+            const mouseMove = (ev)=>{
+                this.setState({
+                    imgLeft: ev.pageX - disx,
+                    imgTop: ev.pageY - disy
+                }, ()=>{});
+            };
+            const mouseUp = ()=>{
+                document.removeEventListener("mousemove", mouseMove);
+                document.removeEventListener("mouseup", mouseUp);
+            };
+            document.addEventListener("mousemove", mouseMove);
+            document.addEventListener("mouseup", mouseUp);
+        });
+        _define_property(this, "base64Down", (src)=>{
+            let { filename } = this.props;
+            var base64 = src.toString(); // imgSrc 就是base64哈
+            let type = "png";
+            var byteCharacters = atob(base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, (a, b)=>{
+                type = b;
+                return "";
+            }));
+            var byteNumbers = new Array(byteCharacters.length);
+            for(var i = 0; i < byteCharacters.length; i++){
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            var byteArray = new Uint8Array(byteNumbers);
+            var blob = new Blob([
+                byteArray
+            ], {
+                type: undefined
+            });
+            var aLink = document.createElement("a");
+            aLink.download = `${filename || "download"}.${type}`; //这里写保存时的图片名称
+            let blobUrl = URL.createObjectURL(blob);
+            aLink.href = blobUrl;
+            aLink.click();
+            URL.revokeObjectURL(blobUrl);
+        });
+        _define_property(this, "downloadUrl", ()=>{
+            let { imgSrc } = this.state;
+            if (/^data:/.test(imgSrc)) {
+                try {
+                    this.base64Down(imgSrc);
+                } catch (error) {
+                    BhdTipModal.confirm({
+                        title: "提示信息",
+                        centered: true,
+                        content: "图片资源不支持下载",
+                        cancelBtn: false
+                    });
+                }
+            } else if (/^(https?:\/\/[^\s]+)/.test(imgSrc)) {
+                //在线url
+                try {
+                    this.downloadFile(imgSrc);
+                } catch (error) {
+                    BhdTipModal.confirm({
+                        title: "提示信息",
+                        centered: true,
+                        content: "图片资源不支持下载",
+                        cancelBtn: false
+                    });
+                }
+            } else {
+                //不支持下载
+                BhdTipModal.confirm({
+                    title: "提示信息",
+                    centered: true,
+                    content: "图片资源不支持下载",
+                    cancelBtn: false
+                });
+            }
+        });
+        _define_property(this, "downloadFile", (url, headers, callback = ()=>{})=>{
+            let { filename } = this.props;
+            let suffix = "png";
+            var xhr = new XMLHttpRequest();
+            if (url.indexOf("?") != -1) {
+                url = url + "&down_t=" + new Date().valueOf();
+            } else {
+                url = url + "?down_t=" + new Date().valueOf();
+            }
+            xhr.open("GET", url, true);
+            for(let key in headers){
+                xhr.setRequestHeader(key, headers[key]);
+            }
+            xhr.responseType = "blob";
+            //关键部分
+            xhr.onload = function(e) {
+                //如果请求执行成功
+                if (this.status == 200) {
+                    var blob = this.response;
+                    var a = document.createElement("a");
+                    if (this.response.type) {
+                        try {
+                            suffix = this.response.type.replace("image/", "");
+                        } catch (error) {
+                            suffix = "png";
+                            console.error(error);
+                        }
+                    }
+                    //创键临时url对象
+                    var url = URL.createObjectURL(blob);
+                    a.href = url;
+                    a.download = `${filename || "download"}.${suffix}`;
+                    a.click();
+                    //释放之前创建的URL对象
+                    window.URL.revokeObjectURL(url);
+                    typeof callback == "function" && callback();
+                }
+            };
+            xhr.onerror = function() {
+                BhdTipModal.confirm({
+                    title: "提示信息",
+                    centered: true,
+                    content: "图片资源不支持下载",
+                    cancelBtn: false
+                });
+            };
+            //发送请求
+            xhr.send();
+        });
+        _define_property(this, "reset", ()=>{
+            this.setState({
+                imgLeft: "auto",
+                imgTop: "auto",
+                rotateValue: 0,
+                scaleValue: 100
+            });
+        });
+        _define_property(this, "rotate", ()=>{
+            this.setState({
+                rotateValue: this.state.rotateValue + 90
+            });
+        });
+        _define_property(this, "close", ()=>{
+            this.props.onCancel();
+        });
+        //获取图片
+        _define_property(this, "getSrc", async (curIndex)=>{
+            this.setState({
+                loading: true,
+                curIndex
+            });
+            let src;
+            if (this.state.multiSelect) {
+                src = await this.props.getSrc(curIndex);
+            } else {
+                src = await this.props.getSrc();
+            }
+            this.setState({
+                imgSrc: src,
+                loading: false
+            });
+        });
+        _define_property(this, "preChange", async ()=>{
+            let { curIndex } = this.state;
+            if (curIndex == 0) return;
+            await this.getSrc(curIndex - 1);
+        });
+        _define_property(this, "nextChange", async ()=>{
+            let { curIndex } = this.state;
+            if (curIndex == this.props.multiSelect.length - 1) return;
+            await this.getSrc(curIndex + 1);
+        });
+        _define_property(this, "imgLoad", ()=>{
+            this.setState({
+                imgError: false
+            });
+        });
+        _define_property(this, "imgErr", ()=>{
+            this.setState({
+                imgError: true
+            });
+        });
+    }
+}
+const AppViewImage = /*#__PURE__*/ forwardRef((props, ref)=>{
+    let { visible, className } = props;
+    const viewRef = useRef(null);
+    useImperativeHandle(ref, ()=>({
+            updateSrc: ()=>{
+                viewRef.current.getSrc();
+            }
+        }));
+    return /*#__PURE__*/ _jsx(Modal, {
+        transitionName: "",
+        maskTransitionName: "",
+        title: null,
+        footer: null,
+        closable: false,
+        centered: true,
+        // destroyOnClose
+        open: visible,
+        keyboard: false,
+        maskStyle: {
+            background: "rgba(0, 0, 0, 0.65)"
+        },
+        wrapClassName: `${styles.AppViewImage} ${className || ""}`,
+        children: visible && /*#__PURE__*/ _jsx(ViewImage, _object_spread_props(_object_spread({}, props), {
+            ref: viewRef
+        }))
+    });
+});
+export default AppViewImage;

package/es2017/viewImage/index.d.ts

@@ -24,6 +24,7 @@ export interface ViewImageState {
     curIndex: number;
     imgError: boolean;
     multiSelect: boolean;
+    actionCloseFlag: number;
 }
 export interface ViewImageProps extends AppViewImageProps {
 }

package/es2017/viewImage/index.js

@@ -6,7 +6,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";
@@ -38,23 +38,58 @@ class ViewImage extends React.Component {
                 /*#__PURE__*/ _jsxs("div", {
                     className: styles.viewImgContent,
                     children: [
+                        this.state.actionCloseFlag === 1 && /*#__PURE__*/ _jsx("div", {
+                            className: `${styles.viewImgAction} ${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: ()=>{
+                                                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: ()=>{
+                                                scaleValue = scaleValue + 10;
+                                                this.scaleChange(scaleValue);
+                                            },
+                                            children: /*#__PURE__*/ _jsx(PlusOutlined, {})
+                                        })
+                                    ]
                                 })
                             ]
                         }),
@@ -69,20 +104,40 @@ class ViewImage extends React.Component {
                                         color: "#FFFFFF"
                                     },
                                     children: imgSrc ? "图片加载错误" : "暂无内容"
-                                }) : /*#__PURE__*/ _jsx("img", {
-                                    src: imgSrc,
-                                    alt: "图片加载错误",
-                                    draggable: "false",
+                                }) : /*#__PURE__*/ _jsxs("div", {
                                     onMouseDown: this.moveImg,
                                     style: {
-                                        transform: `scale(${scaleValue / 100},${scaleValue / 100}) rotate(${rotateValue}deg)`,
+                                        transform: `scale(${scaleValue / 100},${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(${rotateValue}deg)`
+                                            },
+                                            onLoad: this.imgLoad,
+                                            onError: this.imgErr
+                                        }, "img"),
+                                        this.state.actionCloseFlag === 0 && /*#__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, {})
+                                        })
+                                    ]
+                                }),
                                 multiSelect && /*#__PURE__*/ _jsxs(_Fragment, {
                                     children: [
                                         this.state.curIndex !== 0 && /*#__PURE__*/ _jsx("div", {
@@ -98,35 +153,6 @@ class ViewImage extends React.Component {
                                     ]
                                 })
                             ]
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: styles.viewImgBodyScale,
-                            children: [
-                                /*#__PURE__*/ _jsx("span", {
-                                    className: styles.viewImgBodyScale_minu,
-                                    onClick: ()=>{
-                                        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: ()=>{
-                                        scaleValue = scaleValue + 10;
-                                        this.scaleChange(scaleValue);
-                                    },
-                                    children: /*#__PURE__*/ _jsx(PlusOutlined, {})
-                                })
-                            ]
                         })
                     ]
                 }),
@@ -150,7 +176,8 @@ class ViewImage extends React.Component {
             loading: false,
             curIndex: 0,
             multiSelect: false,
-            imgError: false
+            imgError: false,
+            actionCloseFlag: 0 // 关闭按钮位置 0是跟随图片 1固定右上角
         });
         _define_property(this, "scaleChange", (value)=>{
             let { maxScale, minScale } = this.state;
@@ -162,8 +189,24 @@ class ViewImage extends React.Component {
             }
             this.setState({
                 scaleValue: value
+            }, ()=>{
+                this.moveActionClose();
             });
         });
+        _define_property(this, "moveActionClose", ()=>{
+            setTimeout(()=>{
+                const 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(this, "moveImg", (ev)=>{
             let { imgLeft, imgTop } = this.state;
             ev.preventDefault();
@@ -181,7 +224,9 @@ class ViewImage extends React.Component {
                 this.setState({
                     imgLeft: ev.pageX - disx,
                     imgTop: ev.pageY - disy
-                }, ()=>{});
+                }, ()=>{
+                    this.moveActionClose();
+                });
             };
             const mouseUp = ()=>{
                 document.removeEventListener("mousemove", mouseMove);