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

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _UploadContainer = _interopRequireDefault(require("./UploadContainer"));
var _view = _interopRequireDefault(require("../view"));
var _Crop = _interopRequireDefault(require("../components/Crop"));
var _Preview = _interopRequireDefault(require("../components/Preview"));
// 包裹上传组件区域： 拓展其他结构

const LmUploadWrapper = ({
  instance
}) => {
  const uploadRef = (0, _react.useRef)(null);
  const hoverRef = (0, _react.useRef)(false);
  const instanceRef = (0, _react.useRef)(instance);
  (0, _react.useEffect)(() => {
    instanceRef.current = instance;
  }, [instance]);
  const checkOpen = instance.onPasteUpload && instance.listType === 'card' && !instance.readOnly && !instance.disabled;

  /** 监听剪贴kgwr */
  const onPaste = evt => {
    if (hoverRef.current) {
      evt.preventDefault();
      if (instanceRef.current?.maxCount > instanceRef.current?.fileList?.length) {
        if (evt?.clipboardData && evt?.clipboardData.items) {
          let index = evt?.clipboardData?.types?.findIndex(v => v === 'Files');
          let item = index > -1 ? evt?.clipboardData.items[index] : evt?.clipboardData?.items[0];
          // if (item && item.kind === 'file' && item.type?.match(/^image\//i)) {
          if (item && item.kind === 'file') {
            const imgItem = item.getAsFile();
            console.log('imgItem', imgItem);
            instanceRef.current?.beforeUpload([imgItem]);
          }
        }
      }
    }
  };

  /** 监听拖动 */
  const handleDrop = evt => {
    evt.preventDefault();
    if (instanceRef.current?.maxCount > instanceRef.current?.fileList?.length) {
      if (evt.dataTransfer && evt.dataTransfer.files && evt.dataTransfer.files.length) {
        const files = Array.from(evt.dataTransfer.files);
        try {
          console.log('files', files);
          instance.beforeUpload(files);
        } catch (err) {
          console.log('拖拽图片错误:', err);
        }
      }
    }
  };
  (0, _react.useEffect)(() => {
    if (checkOpen) {
      document.removeEventListener('paste', onPaste);
      document.addEventListener('paste', onPaste);
    }
    return () => {
      document.removeEventListener('paste', onPaste);
    };
  }, [checkOpen]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_upload_wrapper"
  }, checkOpen ? /*#__PURE__*/_react.default.createElement("div", {
    className: "lm_paste_upload",
    onMouseMove: () => hoverRef.current = true,
    onMouseLeave: () => hoverRef.current = false,
    onDrop: handleDrop,
    onDragOver: handleDrop,
    onDragLeave: handleDrop,
    ref: uploadRef
  }, /*#__PURE__*/_react.default.createElement(_UploadContainer.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_view.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_Crop.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_Preview.default, {
    instance: instance
  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_UploadContainer.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_view.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_Crop.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement(_Preview.default, {
    instance: instance
  })));
};
var _default = /*#__PURE__*/_react.default.memo(LmUploadWrapper);
exports.default = _default;