acud/lib/upload/UploadList/ListItem.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _rcMotion = _interopRequireDefault(require("rc-motion"));
var _classnames = _interopRequireDefault(require("classnames"));
var _OutlinedEye = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedEye"));
var _OutlinedDelete = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedDelete"));
var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
var _OutlinedCloudDownload = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedCloudDownload"));
var _OutlinedButtonUpload = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedButtonUpload"));
var _tooltip = _interopRequireDefault(require("../../tooltip"));
var _progress = _interopRequireDefault(require("../../progress"));
var _configProvider = require("../../config-provider");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/*
 * upload 上传
 * author zhousheng
 */

var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var prefixCls = _ref.prefixCls,
    className = _ref.className,
    style = _ref.style,
    locale = _ref.locale,
    listType = _ref.listType,
    file = _ref.file,
    items = _ref.items,
    progressProps = _ref.progress,
    iconRender = _ref.iconRender,
    actionIconRender = _ref.actionIconRender,
    itemRender = _ref.itemRender,
    isImgUrl = _ref.isImgUrl,
    _ref$motionDeadline = _ref.motionDeadline,
    motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
    showPreviewIcon = _ref.showPreviewIcon,
    showRemoveIcon = _ref.showRemoveIcon,
    showDownloadIcon = _ref.showDownloadIcon,
    internalShowUploadIcon = _ref.showUploadIcon,
    customRemoveIcon = _ref.removeIcon,
    customUploadIcon = _ref.uploadIcon,
    customDownloadIcon = _ref.downloadIcon,
    onPreview = _ref.onPreview,
    onDownload = _ref.onDownload,
    onClose = _ref.onClose,
    onUpload = _ref.onUpload;
  var _a, _b;
  var status = file.status;
  var _React$useState = React.useState(status),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    mergedStatus = _React$useState2[0],
    setMergedStatus = _React$useState2[1];
  React.useEffect(function () {
    if (status !== 'removed') {
      setMergedStatus(status);
    }
  }, [status]);
  // Delay to show the progress bar
  var _React$useState3 = React.useState(false),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    showProgress = _React$useState4[0],
    setShowProgress = _React$useState4[1];
  // 外部传入的file 无法重传，根据originFileObj来判断是本地选中的
  var showUploadIcon = React.useMemo(function () {
    return !!(file === null || file === void 0 ? void 0 : file.originFileObj) && internalShowUploadIcon;
  }, [file, internalShowUploadIcon]);
  React.useEffect(function () {
    var timer = setTimeout(function () {
      setShowProgress(true);
    }, 300);
    return function () {
      window.clearTimeout(timer);
    };
  }, []);
  // This is used for legacy span make scrollHeight the wrong value.
  // We will force these to be `display: block` with non `picture-card`
  var spanClassName = "".concat(prefixCls, "-span");
  var iconNode = iconRender(file);
  var icon = /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-text-icon")
  }, iconNode);
  if (listType === 'picture' || listType === 'picture-card') {
    if (mergedStatus === 'uploading' || !file.thumbUrl && !file.url) {
      var uploadingClassName = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-list-item-thumbnail"), true), "".concat(prefixCls, "-list-item-file"), mergedStatus !== 'uploading'));
      icon = /*#__PURE__*/React.createElement("div", {
        className: uploadingClassName
      }, iconNode);
    } else {
      var thumbnail = (isImgUrl === null || isImgUrl === void 0 ? void 0 : isImgUrl(file)) ? /*#__PURE__*/React.createElement("img", {
        src: file.thumbUrl || file.url,
        alt: file.name,
        className: "".concat(prefixCls, "-list-item-image")
      }) : iconNode;
      var aClassName = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-list-item-thumbnail"), true), "".concat(prefixCls, "-list-item-file"), isImgUrl && !isImgUrl(file)));
      icon = /*#__PURE__*/React.createElement("a", {
        className: aClassName,
        onClick: function onClick(e) {
          return onPreview(file, e);
        },
        href: file.url || file.thumbUrl,
        target: "_blank",
        rel: "noopener noreferrer"
      }, thumbnail);
    }
  }
  var infoUploadingClass = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-list-item"), true), "".concat(prefixCls, "-list-item-").concat(mergedStatus), true), "".concat(prefixCls, "-list-item-list-type-").concat(listType), true));
  var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
  var removeIcon = showRemoveIcon ? actionIconRender((typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (listType === 'text' ? /*#__PURE__*/React.createElement(_OutlinedClose["default"], {
    width: 16
  }) : /*#__PURE__*/React.createElement(_OutlinedDelete["default"], {
    width: 16
  })), function () {
    return onClose(file);
  }, prefixCls, locale.removeFile) : null;
  var downloadIcon = showDownloadIcon ? actionIconRender((typeof customDownloadIcon === 'function' ? customDownloadIcon(file) : customDownloadIcon) || /*#__PURE__*/React.createElement(_OutlinedCloudDownload["default"], null), function () {
    return onDownload(file);
  }, prefixCls, locale.downloadFile) : null;
  // 下载icon
  var downloadOrDelete = listType !== 'picture-card' && /*#__PURE__*/React.createElement("span", {
    key: "download-delete",
    className: (0, _classnames["default"])("".concat(prefixCls, "-list-item-card-actions"), {
      picture: listType === 'picture'
    })
  }, downloadIcon, removeIcon);
  var listItemNameClass = (0, _classnames["default"])("".concat(prefixCls, "-list-item-name"));
  var preview = file.url ? [/*#__PURE__*/React.createElement("a", (0, _extends2["default"])({
    key: "view",
    target: "_blank",
    rel: "noopener noreferrer",
    className: listItemNameClass,
    title: file.name
  }, linkProps, {
    href: file.url,
    onClick: function onClick(e) {
      return onPreview(file, e);
    }
  }), file.name), downloadOrDelete] : [/*#__PURE__*/React.createElement("span", {
    key: "view",
    className: listItemNameClass,
    onClick: function onClick(e) {
      return onPreview(file, e);
    },
    title: file.name
  }, file.name), downloadOrDelete];
  var previewStyle = {
    pointerEvents: 'none',
    opacity: 0.5
  };
  // 预览icon
  var previewIcon = showPreviewIcon ? /*#__PURE__*/React.createElement("a", {
    href: file.url || file.thumbUrl,
    target: "_blank",
    rel: "noopener noreferrer",
    style: file.url || file.thumbUrl ? undefined : previewStyle,
    onClick: function onClick(e) {
      return onPreview(file, e);
    },
    title: locale.previewFile
  }, /*#__PURE__*/React.createElement(_OutlinedEye["default"], null)) : null;
  // 上传icon
  var uploadIcon = showUploadIcon ? actionIconRender((typeof customUploadIcon === 'function' ? customUploadIcon(file) : customUploadIcon) || /*#__PURE__*/React.createElement(_OutlinedButtonUpload["default"], null), function () {
    return onUpload(file);
  }, prefixCls, locale.uploadFile) : null;
  var actions = listType === 'picture-card' && mergedStatus !== 'uploading' && /*#__PURE__*/React.createElement("span", {
    className: "".concat(prefixCls, "-list-item-actions")
  }, mergedStatus === 'done' && previewIcon, mergedStatus === 'done' && downloadIcon, ['error', 'done'].includes(mergedStatus) && uploadIcon, removeIcon);
  var message;
  if (file.response && typeof file.response === 'string') {
    message = file.response;
  } else {
    message = ((_a = file.error) === null || _a === void 0 ? void 0 : _a.statusText) || ((_b = file.error) === null || _b === void 0 ? void 0 : _b.message) || locale.uploadError;
  }
  var iconAndPreview = /*#__PURE__*/React.createElement("span", {
    className: spanClassName
  }, icon, preview);
  var _React$useContext = React.useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var rootPrefixCls = getPrefixCls();
  var dom = /*#__PURE__*/React.createElement("div", {
    className: infoUploadingClass
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-list-item-info")
  }, iconAndPreview), actions, showProgress && /*#__PURE__*/React.createElement(_rcMotion["default"], {
    motionName: "".concat(rootPrefixCls, "-fade"),
    visible: mergedStatus === 'uploading'
    // rc-motion 锁了版本2.4.3，但是新版本（2.7.3）已经fix，所以采用key
    // https://github.com/react-component/motion/pull/24
    ,
    key: mergedStatus,
    motionDeadline: motionDeadline
  }, function (_ref2) {
    var motionClassName = _ref2.className;
    // show loading icon if upload progress listener is disabled
    var loadingProgress = 'percent' in file ? /*#__PURE__*/React.createElement(_progress["default"], (0, _extends2["default"])({
      trailColor: "#DADBDD",
      strokeColor: "#2468F2",
      infoType: "none",
      type: "line",
      percent: file.percent,
      strokeWidth: listType === 'text' ? 2 : 4
    }, progressProps)) : null;
    return /*#__PURE__*/React.createElement("div", {
      className: (0, _classnames["default"])("".concat(prefixCls, "-list-item-progress"), motionClassName)
    }, loadingProgress);
  }));
  var listContainerNameClass = (0, _classnames["default"])("".concat(prefixCls, "-list-").concat(listType, "-container"), className);
  var item = mergedStatus === 'error' ? /*#__PURE__*/React.createElement(_tooltip["default"], {
    title: message,
    overlayClassName: "error-tooltip",
    getPopupContainer: function getPopupContainer(node) {
      return node.parentNode;
    }
  }, dom) : dom;
  return /*#__PURE__*/React.createElement("div", {
    className: listContainerNameClass,
    style: style,
    ref: ref
  }, itemRender ? itemRender(item, file, items, {
    download: onDownload.bind(null, file),
    preview: onPreview.bind(null, file),
    upload: onUpload.bind(null, file),
    remove: onClose.bind(null, file)
  }) : item);
});
var _default = exports["default"] = ListItem;