acud/lib/upload/UploadList/index.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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _rcMotion = _interopRequireWildcard(require("rc-motion"));
var _classnames = _interopRequireDefault(require("classnames"));
var _OutlinedLoading = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedLoading"));
var _OutlinedFileDoc = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFileDoc"));
var _OutlinedFileImage = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFileImage"));
var _OutlinedFileVideo = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFileVideo"));
var _OutlinedFileMusic = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFileMusic"));
var _OutlinedFileZip = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFileZip"));
var _OutlinedPhoto = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedPhoto"));
var _OutlinedFile = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedFile"));
var _reactNode = require("../../_util/reactNode");
var _utils = require("../utils");
var _motion = _interopRequireDefault(require("../../_util/motion"));
var _configProvider = require("../../config-provider");
var _button = _interopRequireDefault(require("../../button"));
var _useForceUpdate = _interopRequireDefault(require("../../_util/hooks/useForceUpdate"));
var _ListItem = _interopRequireDefault(require("./ListItem"));
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 listItemMotion = (0, _extends2["default"])({}, _motion["default"]);
delete listItemMotion.onAppearEnd;
delete listItemMotion.onEnterEnd;
delete listItemMotion.onLeaveEnd;
var renderIcon = function renderIcon(fileName) {
  var type = (0, _utils.getFiletypeByName)(fileName);
  var Icon = _OutlinedFileDoc["default"];
  switch (type) {
    case 'image':
      Icon = _OutlinedFileImage["default"];
      break;
    case 'video':
      Icon = _OutlinedFileVideo["default"];
      break;
    case 'audio':
      Icon = _OutlinedFileMusic["default"];
      break;
    case 'zip':
      Icon = _OutlinedFileZip["default"];
      break;
    default:
      break;
  }
  return /*#__PURE__*/React.createElement(Icon, {
    width: 16
  });
};
var InternalUploadList = function InternalUploadList(_ref, ref) {
  var listType = _ref.listType,
    previewFile = _ref.previewFile,
    onPreview = _ref.onPreview,
    onDownload = _ref.onDownload,
    onRemove = _ref.onRemove,
    onUpload = _ref.onUpload,
    locale = _ref.locale,
    iconRender = _ref.iconRender,
    isImgUrl = _ref.isImageUrl,
    customizePrefixCls = _ref.prefixCls,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? [] : _ref$items,
    showPreviewIcon = _ref.showPreviewIcon,
    showUploadIcon = _ref.showUploadIcon,
    showRemoveIcon = _ref.showRemoveIcon,
    showDownloadIcon = _ref.showDownloadIcon,
    removeIcon = _ref.removeIcon,
    downloadIcon = _ref.downloadIcon,
    uploadIcon = _ref.uploadIcon,
    progress = _ref.progress,
    _ref$motionDeadline = _ref.motionDeadline,
    motionDeadline = _ref$motionDeadline === void 0 ? 2000 : _ref$motionDeadline,
    appendAction = _ref.appendAction,
    itemRender = _ref.itemRender;
  var forceUpdate = (0, _useForceUpdate["default"])();
  var _React$useState = React.useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    motionAppear = _React$useState2[0],
    setMotionAppear = _React$useState2[1];
  var _React$useContext = React.useContext(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls,
    direction = _React$useContext.direction;
  // ============================= Render =============================
  var prefixCls = getPrefixCls('upload', customizePrefixCls);
  // ============================= Effect =============================
  React.useEffect(function () {
    if (listType !== 'picture' && listType !== 'picture-card') {
      return;
    }
    (items || []).forEach(function (file) {
      if (typeof document === 'undefined' || typeof window === 'undefined' || !window.FileReader || !window.File || !(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) {
        return;
      }
      file.thumbUrl = '';
      if (previewFile) {
        previewFile(file.originFileObj).then(function (previewDataUrl) {
          // Need append '' to avoid dead loop
          file.thumbUrl = previewDataUrl || '';
          forceUpdate();
        });
      }
    });
  }, [listType, items, previewFile]);
  React.useEffect(function () {
    setMotionAppear(true);
  }, []);
  // ============================= Events =============================
  var onInternalPreview = function onInternalPreview(file, e) {
    if (!onPreview) {
      return;
    }
    e === null || e === void 0 ? void 0 : e.preventDefault();
    return onPreview(file);
  };
  var onInternalDownload = function onInternalDownload(file) {
    if (typeof onDownload === 'function') {
      onDownload(file);
    } else if (file.url) {
      window.open(file.url);
    }
  };
  var onInternalClose = function onInternalClose(file) {
    onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
  };
  var onInternalUpload = function onInternalUpload(file) {
    onUpload === null || onUpload === void 0 ? void 0 : onUpload(file);
  };
  var internalIconRender = function internalIconRender(file) {
    if (iconRender) {
      return iconRender(file, listType);
    }
    var isLoading = file.status === 'uploading';
    var fileIcon = isImgUrl && isImgUrl(file) ? /*#__PURE__*/React.createElement(_OutlinedPhoto["default"], {
      width: 24
    }) : /*#__PURE__*/React.createElement(_OutlinedFile["default"], {
      width: 24
    });
    var icon = renderIcon(file.name || file.fileName);
    if (listType === 'picture') {
      icon = isLoading ? /*#__PURE__*/React.createElement(_OutlinedLoading["default"], {
        animation: "spin"
      }) : fileIcon;
    } else if (listType === 'picture-card') {
      icon = isLoading ? "".concat(locale.uploading, "...") : fileIcon;
    }
    return icon;
  };
  var actionIconRender = function actionIconRender(customIcon, callback, prefixCls, title) {
    var btnProps = {
      type: 'text',
      size: 'small',
      title: title,
      onClick: function onClick(e) {
        callback();
        if ((0, _reactNode.isValidElement)(customIcon) && customIcon.props.onClick) {
          customIcon.props.onClick(e);
        }
      },
      className: "".concat(prefixCls, "-list-item-card-actions-btn")
    };
    if ((0, _reactNode.isValidElement)(customIcon)) {
      var btnIcon = (0, _reactNode.cloneElement)(customIcon, (0, _extends2["default"])((0, _extends2["default"])({}, customIcon.props), {
        onClick: function onClick() {}
      }));
      return /*#__PURE__*/React.createElement(_button["default"], (0, _extends2["default"])({}, btnProps, {
        icon: btnIcon
      }));
    }
    return /*#__PURE__*/React.createElement(_button["default"], btnProps, /*#__PURE__*/React.createElement("span", null, customIcon));
  };
  // ============================== Ref ===============================
  // Test needs
  React.useImperativeHandle(ref, function () {
    return {
      handlePreview: onInternalPreview,
      handleDownload: onInternalDownload
    };
  });
  // >>> Motion config
  var motionKeyList = (0, _toConsumableArray2["default"])(items.map(function (file) {
    return {
      key: file.uid,
      file: file
    };
  }));
  var animationDirection = listType === 'picture-card' ? 'animate-inline' : 'animate';
  // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
  var motionConfig = {
    motionDeadline: motionDeadline,
    motionName: "".concat(prefixCls, "-").concat(animationDirection),
    keys: motionKeyList,
    motionAppear: motionAppear
  };
  if (listType !== 'picture-card') {
    motionConfig = (0, _extends2["default"])((0, _extends2["default"])({}, listItemMotion), motionConfig);
  }
  var listClassNames = (0, _classnames["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-list"), true), "".concat(prefixCls, "-list-").concat(listType), true), "".concat(prefixCls, "-list-rtl"), direction === 'rtl'));
  return /*#__PURE__*/React.createElement("div", {
    className: listClassNames
  }, appendAction && /*#__PURE__*/React.createElement(_rcMotion["default"], motionConfig, function (_ref2) {
    var motionClassName = _ref2.className,
      motionStyle = _ref2.style;
    return (0, _reactNode.cloneElement)(appendAction, function (oriProps) {
      return {
        className: (0, _classnames["default"])(oriProps.className, motionClassName),
        style: (0, _extends2["default"])((0, _extends2["default"])({}, motionStyle), oriProps.style)
      };
    });
  }), /*#__PURE__*/React.createElement(_rcMotion.CSSMotionList, (0, _extends2["default"])({}, motionConfig, {
    component: false
  }), function (_ref3) {
    var key = _ref3.key,
      file = _ref3.file,
      motionClassName = _ref3.className,
      motionStyle = _ref3.style;
    return /*#__PURE__*/React.createElement(_ListItem["default"], {
      key: key,
      locale: locale,
      prefixCls: prefixCls,
      className: motionClassName,
      style: motionStyle,
      file: file,
      items: items,
      progress: progress,
      listType: listType,
      isImgUrl: isImgUrl,
      showPreviewIcon: showPreviewIcon,
      showUploadIcon: showUploadIcon,
      showRemoveIcon: showRemoveIcon,
      showDownloadIcon: showDownloadIcon,
      removeIcon: removeIcon,
      downloadIcon: downloadIcon,
      uploadIcon: uploadIcon,
      iconRender: internalIconRender,
      actionIconRender: actionIconRender,
      itemRender: itemRender,
      onPreview: onInternalPreview,
      onDownload: onInternalDownload,
      onClose: onInternalClose,
      onUpload: onInternalUpload,
      motionDeadline: motionDeadline
    });
  }));
};
var UploadList = /*#__PURE__*/React.forwardRef(InternalUploadList);
UploadList.displayName = 'UploadList';
UploadList.defaultProps = {
  listType: 'text',
  progress: {
    // strokeWidth: 4,
    // showInfo: false
  },
  showUploadIcon: true,
  motionDeadline: 2000,
  showRemoveIcon: true,
  showDownloadIcon: false,
  showPreviewIcon: true,
  previewFile: _utils.previewImage,
  isImageUrl: _utils.isImageUrl
};
var _default = exports["default"] = UploadList;