ListItem.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. "use strict";
  2. "use client";
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var React = _interopRequireWildcard(require("react"));
  10. var _DeleteOutlined = _interopRequireDefault(require("@ant-design/icons/DeleteOutlined"));
  11. var _DownloadOutlined = _interopRequireDefault(require("@ant-design/icons/DownloadOutlined"));
  12. var _EyeOutlined = _interopRequireDefault(require("@ant-design/icons/EyeOutlined"));
  13. var _classnames = _interopRequireDefault(require("classnames"));
  14. var _rcMotion = _interopRequireDefault(require("rc-motion"));
  15. var _configProvider = require("../../config-provider");
  16. var _progress = _interopRequireDefault(require("../../progress"));
  17. var _tooltip = _interopRequireDefault(require("../../tooltip"));
  18. const ListItem = /*#__PURE__*/React.forwardRef(({
  19. prefixCls,
  20. className,
  21. style,
  22. locale,
  23. listType,
  24. file,
  25. items,
  26. progress: progressProps,
  27. iconRender,
  28. actionIconRender,
  29. itemRender,
  30. isImgUrl,
  31. showPreviewIcon,
  32. showRemoveIcon,
  33. showDownloadIcon,
  34. previewIcon: customPreviewIcon,
  35. removeIcon: customRemoveIcon,
  36. downloadIcon: customDownloadIcon,
  37. extra: customExtra,
  38. onPreview,
  39. onDownload,
  40. onClose
  41. }, ref) => {
  42. var _a, _b;
  43. // Status: which will ignore `removed` status
  44. const {
  45. status
  46. } = file;
  47. const [mergedStatus, setMergedStatus] = React.useState(status);
  48. React.useEffect(() => {
  49. if (status !== 'removed') {
  50. setMergedStatus(status);
  51. }
  52. }, [status]);
  53. // Delay to show the progress bar
  54. const [showProgress, setShowProgress] = React.useState(false);
  55. React.useEffect(() => {
  56. const timer = setTimeout(() => {
  57. setShowProgress(true);
  58. }, 300);
  59. return () => {
  60. clearTimeout(timer);
  61. };
  62. }, []);
  63. const iconNode = iconRender(file);
  64. let icon = /*#__PURE__*/React.createElement("div", {
  65. className: `${prefixCls}-icon`
  66. }, iconNode);
  67. if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {
  68. if (mergedStatus === 'uploading' || !file.thumbUrl && !file.url) {
  69. const uploadingClassName = (0, _classnames.default)(`${prefixCls}-list-item-thumbnail`, {
  70. [`${prefixCls}-list-item-file`]: mergedStatus !== 'uploading'
  71. });
  72. icon = /*#__PURE__*/React.createElement("div", {
  73. className: uploadingClassName
  74. }, iconNode);
  75. } else {
  76. const thumbnail = (isImgUrl === null || isImgUrl === void 0 ? void 0 : isImgUrl(file)) ? (/*#__PURE__*/React.createElement("img", {
  77. src: file.thumbUrl || file.url,
  78. alt: file.name,
  79. className: `${prefixCls}-list-item-image`,
  80. crossOrigin: file.crossOrigin
  81. })) : iconNode;
  82. const aClassName = (0, _classnames.default)(`${prefixCls}-list-item-thumbnail`, {
  83. [`${prefixCls}-list-item-file`]: isImgUrl && !isImgUrl(file)
  84. });
  85. icon = /*#__PURE__*/React.createElement("a", {
  86. className: aClassName,
  87. onClick: e => onPreview(file, e),
  88. href: file.url || file.thumbUrl,
  89. target: "_blank",
  90. rel: "noopener noreferrer"
  91. }, thumbnail);
  92. }
  93. }
  94. const listItemClassName = (0, _classnames.default)(`${prefixCls}-list-item`, `${prefixCls}-list-item-${mergedStatus}`);
  95. const linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
  96. const removeIcon = (typeof showRemoveIcon === 'function' ? showRemoveIcon(file) : showRemoveIcon) ? actionIconRender((typeof customRemoveIcon === 'function' ? customRemoveIcon(file) : customRemoveIcon) || (/*#__PURE__*/React.createElement(_DeleteOutlined.default, null)), () => onClose(file), prefixCls, locale.removeFile,
  97. // acceptUploadDisabled is true, only remove icon will follow Upload disabled prop
  98. // https://github.com/ant-design/ant-design/issues/46171
  99. true) : null;
  100. const downloadIcon = (typeof showDownloadIcon === 'function' ? showDownloadIcon(file) : showDownloadIcon) && mergedStatus === 'done' ? actionIconRender((typeof customDownloadIcon === 'function' ? customDownloadIcon(file) : customDownloadIcon) || /*#__PURE__*/React.createElement(_DownloadOutlined.default, null), () => onDownload(file), prefixCls, locale.downloadFile) : null;
  101. const downloadOrDelete = listType !== 'picture-card' && listType !== 'picture-circle' && (/*#__PURE__*/React.createElement("span", {
  102. key: "download-delete",
  103. className: (0, _classnames.default)(`${prefixCls}-list-item-actions`, {
  104. picture: listType === 'picture'
  105. })
  106. }, downloadIcon, removeIcon));
  107. const extraContent = typeof customExtra === 'function' ? customExtra(file) : customExtra;
  108. const extra = extraContent && (/*#__PURE__*/React.createElement("span", {
  109. className: `${prefixCls}-list-item-extra`
  110. }, extraContent));
  111. const listItemNameClass = (0, _classnames.default)(`${prefixCls}-list-item-name`);
  112. const fileName = file.url ? (/*#__PURE__*/React.createElement("a", Object.assign({
  113. key: "view",
  114. target: "_blank",
  115. rel: "noopener noreferrer",
  116. className: listItemNameClass,
  117. title: file.name
  118. }, linkProps, {
  119. href: file.url,
  120. onClick: e => onPreview(file, e)
  121. }), file.name, extra)) : (/*#__PURE__*/React.createElement("span", {
  122. key: "view",
  123. className: listItemNameClass,
  124. onClick: e => onPreview(file, e),
  125. title: file.name
  126. }, file.name, extra));
  127. const previewIcon = (typeof showPreviewIcon === 'function' ? showPreviewIcon(file) : showPreviewIcon) && (file.url || file.thumbUrl) ? (/*#__PURE__*/React.createElement("a", {
  128. href: file.url || file.thumbUrl,
  129. target: "_blank",
  130. rel: "noopener noreferrer",
  131. onClick: e => onPreview(file, e),
  132. title: locale.previewFile
  133. }, typeof customPreviewIcon === 'function' ? customPreviewIcon(file) : customPreviewIcon || /*#__PURE__*/React.createElement(_EyeOutlined.default, null))) : null;
  134. const pictureCardActions = (listType === 'picture-card' || listType === 'picture-circle') && mergedStatus !== 'uploading' && (/*#__PURE__*/React.createElement("span", {
  135. className: `${prefixCls}-list-item-actions`
  136. }, previewIcon, mergedStatus === 'done' && downloadIcon, removeIcon));
  137. const {
  138. getPrefixCls
  139. } = React.useContext(_configProvider.ConfigContext);
  140. const rootPrefixCls = getPrefixCls();
  141. const dom = /*#__PURE__*/React.createElement("div", {
  142. className: listItemClassName
  143. }, icon, fileName, downloadOrDelete, pictureCardActions, showProgress && (/*#__PURE__*/React.createElement(_rcMotion.default, {
  144. motionName: `${rootPrefixCls}-fade`,
  145. visible: mergedStatus === 'uploading',
  146. motionDeadline: 2000
  147. }, ({
  148. className: motionClassName
  149. }) => {
  150. // show loading icon if upload progress listener is disabled
  151. const loadingProgress = 'percent' in file ? (/*#__PURE__*/React.createElement(_progress.default, Object.assign({
  152. type: "line",
  153. percent: file.percent,
  154. "aria-label": file['aria-label'],
  155. "aria-labelledby": file['aria-labelledby']
  156. }, progressProps))) : null;
  157. return /*#__PURE__*/React.createElement("div", {
  158. className: (0, _classnames.default)(`${prefixCls}-list-item-progress`, motionClassName)
  159. }, loadingProgress);
  160. })));
  161. const message = file.response && typeof file.response === 'string' ? file.response : ((_a = file.error) === null || _a === void 0 ? void 0 : _a.statusText) || ((_b = file.error) === null || _b === void 0 ? void 0 : _b.message) || locale.uploadError;
  162. const item = mergedStatus === 'error' ? (/*#__PURE__*/React.createElement(_tooltip.default, {
  163. title: message,
  164. getPopupContainer: node => node.parentNode
  165. }, dom)) : dom;
  166. return /*#__PURE__*/React.createElement("div", {
  167. className: (0, _classnames.default)(`${prefixCls}-list-item-container`, className),
  168. style: style,
  169. ref: ref
  170. }, itemRender ? itemRender(item, file, items, {
  171. download: onDownload.bind(null, file),
  172. preview: onPreview.bind(null, file),
  173. remove: onClose.bind(null, file)
  174. }) : item);
  175. });
  176. var _default = exports.default = ListItem;