linkmore-design/es/lm-upload/wrapper/UploadWrapper.js

🌈 🚀lm组件库。🚀

// 包裹上传组件区域： 拓展其他结构
import React, { useEffect, useRef } from 'react';
import LmUploadContainer from "./UploadContainer";
import LmUploadView from "../view";
import Crop from "../components/Crop";
import Preview from "../components/Preview";
var LmUploadWrapper = function LmUploadWrapper(_ref) {
  var instance = _ref.instance;
  var uploadRef = useRef(null);
  var hoverRef = useRef(false);
  var instanceRef = useRef(instance);
  useEffect(function () {
    instanceRef.current = instance;
  }, [instance]);
  var checkOpen = instance.onPasteUpload && instance.listType === 'card' && !instance.readOnly && !instance.disabled;

  /** 监听剪贴kgwr */
  var onPaste = function onPaste(evt) {
    if (hoverRef.current) {
      var _instanceRef$current, _instanceRef$current2, _instanceRef$current3;
      evt.preventDefault();
      if (((_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 ? void 0 : _instanceRef$current.maxCount) > ((_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : (_instanceRef$current3 = _instanceRef$current2.fileList) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.length)) {
        if (evt !== null && evt !== void 0 && evt.clipboardData && evt !== null && evt !== void 0 && evt.clipboardData.items) {
          var _evt$clipboardData, _evt$clipboardData$ty, _evt$clipboardData2;
          var index = evt === null || evt === void 0 ? void 0 : (_evt$clipboardData = evt.clipboardData) === null || _evt$clipboardData === void 0 ? void 0 : (_evt$clipboardData$ty = _evt$clipboardData.types) === null || _evt$clipboardData$ty === void 0 ? void 0 : _evt$clipboardData$ty.findIndex(function (v) {
            return v === 'Files';
          });
          var item = index > -1 ? evt === null || evt === void 0 ? void 0 : evt.clipboardData.items[index] : evt === null || evt === void 0 ? void 0 : (_evt$clipboardData2 = evt.clipboardData) === null || _evt$clipboardData2 === void 0 ? void 0 : _evt$clipboardData2.items[0];
          // if (item && item.kind === 'file' && item.type?.match(/^image\//i)) {
          if (item && item.kind === 'file') {
            var _instanceRef$current4;
            var imgItem = item.getAsFile();
            console.log('imgItem', imgItem);
            (_instanceRef$current4 = instanceRef.current) === null || _instanceRef$current4 === void 0 ? void 0 : _instanceRef$current4.beforeUpload([imgItem]);
          }
        }
      }
    }
  };

  /** 监听拖动 */
  var handleDrop = function handleDrop(evt) {
    var _instanceRef$current5, _instanceRef$current6, _instanceRef$current7;
    evt.preventDefault();
    if (((_instanceRef$current5 = instanceRef.current) === null || _instanceRef$current5 === void 0 ? void 0 : _instanceRef$current5.maxCount) > ((_instanceRef$current6 = instanceRef.current) === null || _instanceRef$current6 === void 0 ? void 0 : (_instanceRef$current7 = _instanceRef$current6.fileList) === null || _instanceRef$current7 === void 0 ? void 0 : _instanceRef$current7.length)) {
      if (evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files.length) {
        var files = Array.from(evt.dataTransfer.files);
        try {
          console.log('files', files);
          instance.beforeUpload(files);
        } catch (err) {
          console.log('拖拽图片错误:', err);
        }
      }
    }
  };
  useEffect(function () {
    if (checkOpen) {
      document.removeEventListener('paste', onPaste);
      document.addEventListener('paste', onPaste);
    }
    return function () {
      document.removeEventListener('paste', onPaste);
    };
  }, [checkOpen]);
  return /*#__PURE__*/React.createElement("div", {
    className: "lm_upload_wrapper"
  }, checkOpen ? /*#__PURE__*/React.createElement("div", {
    className: "lm_paste_upload",
    onMouseMove: function onMouseMove() {
      return hoverRef.current = true;
    },
    onMouseLeave: function onMouseLeave() {
      return hoverRef.current = false;
    },
    onDrop: handleDrop,
    onDragOver: handleDrop,
    onDragLeave: handleDrop,
    ref: uploadRef
  }, /*#__PURE__*/React.createElement(LmUploadContainer, {
    instance: instance
  }), /*#__PURE__*/React.createElement(LmUploadView, {
    instance: instance
  }), /*#__PURE__*/React.createElement(Crop, {
    instance: instance
  }), /*#__PURE__*/React.createElement(Preview, {
    instance: instance
  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LmUploadContainer, {
    instance: instance
  }), /*#__PURE__*/React.createElement(LmUploadView, {
    instance: instance
  }), /*#__PURE__*/React.createElement(Crop, {
    instance: instance
  }), /*#__PURE__*/React.createElement(Preview, {
    instance: instance
  })));
};
export default /*#__PURE__*/React.memo(LmUploadWrapper);