linkmore-design/lib/lm-upload/body/UploadCore.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _UploadPicture = _interopRequireDefault(require("./UploadPicture"));
// 上传核心
// 渲染上传区域样式, 仅用于触发上传事件
// type: 'card' 图片 | 'drag' 拖拽
const UploadCore = ({
  instance
}) => {
  const inputRef = _react.default.useRef(null);
  const {
    accept,
    disabled,
    children,
    beforeUpload,
    getUploadStatus,
    getIsMaxCount,
    multiple
  } = instance;

  // 点击事件触发文件上传
  const handleClick = (0, _react.useCallback)(() => {
    if (disabled) return;
    const isUploading = getUploadStatus().uploading;
    if (isUploading) return;
    inputRef?.current?.click();
  }, [disabled, getUploadStatus]);

  // 上传触发事件
  const uploadChange = (0, _react.useCallback)(e => {
    beforeUpload?.(e);
    if (inputRef.current?.value) {
      inputRef.current.value = '';
    }
  }, [beforeUpload, inputRef.current?.value]);
  const inputConfig = {
    type: 'file',
    accept,
    title: '',
    onChange: uploadChange,
    multiple,
    style: {
      display: 'none'
    }
  };
  return !getIsMaxCount() && /*#__PURE__*/_react.default.createElement("div", {
    onClick: handleClick,
    className: (0, _classnames.default)('lm_upload_core', disabled && 'disabled')
  }, children || /*#__PURE__*/_react.default.createElement(_UploadPicture.default, {
    instance: instance
  }), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
    ref: inputRef
  }, inputConfig)));
};
var _default = /*#__PURE__*/_react.default.memo(UploadCore);
exports.default = _default;