bhd-components 0.9.17 → 0.9.19

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

@@ -0,0 +1,480 @@
+import { _ as _assert_this_initialized } from "@swc/helpers/_/_assert_this_initialized";
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _class_call_check } from "@swc/helpers/_/_class_call_check";
+import { _ as _create_class } from "@swc/helpers/_/_create_class";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _inherits } from "@swc/helpers/_/_inherits";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _create_super } from "@swc/helpers/_/_create_super";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+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";
+var ViewImage = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(ViewImage, _React_Component);
+    var _super = _create_super(ViewImage);
+    function ViewImage() {
+        _class_call_check(this, ViewImage);
+        var _this;
+        _this = _super.apply(this, arguments);
+        _define_property(_assert_this_initialized(_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(_assert_this_initialized(_this), "scaleChange", function(value) {
+            var _this_state = _this.state, maxScale = _this_state.maxScale, minScale = _this_state.minScale;
+            if (value >= maxScale) {
+                value = maxScale;
+            }
+            if (value <= minScale) {
+                value = minScale;
+            }
+            _this.setState({
+                scaleValue: value
+            });
+        });
+        _define_property(_assert_this_initialized(_this), "moveImg", function(ev) {
+            var _this_state = _this.state, imgLeft = _this_state.imgLeft, imgTop = _this_state.imgTop;
+            ev.preventDefault();
+            var dom = document.getElementsByClassName("".concat(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;
+            var mouseMove = function(ev) {
+                _this.setState({
+                    imgLeft: ev.pageX - disx,
+                    imgTop: ev.pageY - disy
+                }, function() {});
+            };
+            var mouseUp = function() {
+                document.removeEventListener("mousemove", mouseMove);
+                document.removeEventListener("mouseup", mouseUp);
+            };
+            document.addEventListener("mousemove", mouseMove);
+            document.addEventListener("mouseup", mouseUp);
+        });
+        _define_property(_assert_this_initialized(_this), "base64Down", function(src) {
+            var filename = _this.props.filename;
+            var base64 = src.toString(); // imgSrc 就是base64哈
+            var type = "png";
+            var byteCharacters = atob(base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, function(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 = "".concat(filename || "download", ".").concat(type); //这里写保存时的图片名称
+            var blobUrl = URL.createObjectURL(blob);
+            aLink.href = blobUrl;
+            aLink.click();
+            URL.revokeObjectURL(blobUrl);
+        });
+        _define_property(_assert_this_initialized(_this), "downloadUrl", function() {
+            var imgSrc = _this.state.imgSrc;
+            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(_assert_this_initialized(_this), "downloadFile", function(url, headers) {
+            var callback = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : function() {};
+            var filename = _this.props.filename;
+            var 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(var 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 = "".concat(filename || "download", ".").concat(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(_assert_this_initialized(_this), "reset", function() {
+            _this.setState({
+                imgLeft: "auto",
+                imgTop: "auto",
+                rotateValue: 0,
+                scaleValue: 100
+            });
+        });
+        _define_property(_assert_this_initialized(_this), "rotate", function() {
+            _this.setState({
+                rotateValue: _this.state.rotateValue + 90
+            });
+        });
+        _define_property(_assert_this_initialized(_this), "close", function() {
+            _this.props.onCancel();
+        });
+        var _this1 = _assert_this_initialized(_this);
+        //获取图片
+        _define_property(_assert_this_initialized(_this), "getSrc", function() {
+            var _ref = _async_to_generator(function(curIndex) {
+                var src;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            _this1.setState({
+                                loading: true,
+                                curIndex: curIndex
+                            });
+                            if (!_this1.state.multiSelect) return [
+                                3,
+                                2
+                            ];
+                            return [
+                                4,
+                                _this1.props.getSrc(curIndex)
+                            ];
+                        case 1:
+                            src = _state.sent();
+                            return [
+                                3,
+                                4
+                            ];
+                        case 2:
+                            return [
+                                4,
+                                _this1.props.getSrc()
+                            ];
+                        case 3:
+                            src = _state.sent();
+                            _state.label = 4;
+                        case 4:
+                            _this1.setState({
+                                imgSrc: src,
+                                loading: false
+                            });
+                            return [
+                                2
+                            ];
+                    }
+                });
+            });
+            return function(curIndex) {
+                return _ref.apply(this, arguments);
+            };
+        }());
+        var _this2 = _assert_this_initialized(_this);
+        _define_property(_assert_this_initialized(_this), "preChange", /*#__PURE__*/ _async_to_generator(function() {
+            var curIndex;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        curIndex = _this2.state.curIndex;
+                        if (curIndex == 0) return [
+                            2
+                        ];
+                        return [
+                            4,
+                            _this2.getSrc(curIndex - 1)
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        }));
+        var _this3 = _assert_this_initialized(_this);
+        _define_property(_assert_this_initialized(_this), "nextChange", /*#__PURE__*/ _async_to_generator(function() {
+            var curIndex;
+            return _ts_generator(this, function(_state) {
+                switch(_state.label){
+                    case 0:
+                        curIndex = _this3.state.curIndex;
+                        if (curIndex == _this3.props.multiSelect.length - 1) return [
+                            2
+                        ];
+                        return [
+                            4,
+                            _this3.getSrc(curIndex + 1)
+                        ];
+                    case 1:
+                        _state.sent();
+                        return [
+                            2
+                        ];
+                }
+            });
+        }));
+        _define_property(_assert_this_initialized(_this), "imgLoad", function() {
+            _this.setState({
+                imgError: false
+            });
+        });
+        _define_property(_assert_this_initialized(_this), "imgErr", function() {
+            _this.setState({
+                imgError: true
+            });
+        });
+        return _this;
+    }
+    _create_class(ViewImage, [
+        {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+                var _this = this;
+                this.setState({
+                    multiSelect: !!this.props.multiSelect || false
+                }, function() {
+                    if (!_this.state.multiSelect) {
+                        _this.getSrc();
+                    } else {
+                        //多张
+                        _this.getSrc(0);
+                    }
+                });
+                document.oncontextmenu = function() {
+                    return false;
+                };
+            }
+        },
+        {
+            key: "componentWillUnmount",
+            value: function componentWillUnmount() {
+                document.oncontextmenu = null;
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                var _this = this;
+                var _this_state = this.state, scaleValue = _this_state.scaleValue, imgSrc = _this_state.imgSrc, imgLeft = _this_state.imgLeft, imgTop = _this_state.imgTop, rotateValue = _this_state.rotateValue, loading = _this_state.loading, multiSelect = _this_state.multiSelect, imgError = _this_state.imgError;
+                var _this_props = this.props, content = _this_props.content, download = _this_props.download;
+                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(".concat(scaleValue / 100, ",").concat(scaleValue / 100, ") rotate(").concat(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: 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, {})
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        content && /*#__PURE__*/ _jsx("div", {
+                            className: styles.viewImgInfo,
+                            children: content()
+                        })
+                    ]
+                });
+            }
+        }
+    ]);
+    return ViewImage;
+}(React.Component);
+var AppViewImage = /*#__PURE__*/ forwardRef(function(props, ref) {
+    var visible = props.visible, className = props.className;
+    var viewRef = useRef(null);
+    useImperativeHandle(ref, function() {
+        return {
+            updateSrc: function() {
+                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: "".concat(styles.AppViewImage, " ").concat(className || ""),
+        children: visible && /*#__PURE__*/ _jsx(ViewImage, _object_spread_props(_object_spread({}, props), {
+            ref: viewRef
+        }))
+    });
+});
+export default AppViewImage;

package/esm/viewImage/index.d.ts

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