ListItem.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. var _typeof = require("@babel/runtime/helpers/typeof");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.listItemProps = exports.default = void 0;
  8. var _vue = require("vue");
  9. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  10. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  11. var _EyeOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/EyeOutlined"));
  12. var _DeleteOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/DeleteOutlined"));
  13. var _DownloadOutlined = _interopRequireDefault(require("@ant-design/icons-vue/lib/icons/DownloadOutlined"));
  14. var _tooltip = _interopRequireDefault(require("../../tooltip"));
  15. var _progress = _interopRequireDefault(require("../../progress"));
  16. var _useConfigInject2 = _interopRequireDefault(require("../../_util/hooks/useConfigInject"));
  17. var _transition = _interopRequireWildcard(require("../../_util/transition"));
  18. function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
  19. function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
  20. var listItemProps = function listItemProps() {
  21. return {
  22. prefixCls: String,
  23. locale: {
  24. type: Object,
  25. default: undefined
  26. },
  27. file: Object,
  28. items: Array,
  29. listType: String,
  30. isImgUrl: Function,
  31. showRemoveIcon: {
  32. type: Boolean,
  33. default: undefined
  34. },
  35. showDownloadIcon: {
  36. type: Boolean,
  37. default: undefined
  38. },
  39. showPreviewIcon: {
  40. type: Boolean,
  41. default: undefined
  42. },
  43. removeIcon: Function,
  44. downloadIcon: Function,
  45. previewIcon: Function,
  46. iconRender: Function,
  47. actionIconRender: Function,
  48. itemRender: Function,
  49. onPreview: Function,
  50. onClose: Function,
  51. onDownload: Function,
  52. progress: Object
  53. };
  54. };
  55. exports.listItemProps = listItemProps;
  56. var _default2 = (0, _vue.defineComponent)({
  57. compatConfig: {
  58. MODE: 3
  59. },
  60. name: 'ListItem',
  61. inheritAttrs: false,
  62. props: listItemProps(),
  63. setup: function setup(props, _ref) {
  64. var slots = _ref.slots,
  65. attrs = _ref.attrs;
  66. var showProgress = (0, _vue.ref)(false);
  67. var progressRafRef = (0, _vue.ref)();
  68. (0, _vue.onMounted)(function () {
  69. progressRafRef.value = setTimeout(function () {
  70. showProgress.value = true;
  71. }, 300);
  72. });
  73. (0, _vue.onBeforeUnmount)(function () {
  74. clearTimeout(progressRafRef.value);
  75. });
  76. var _useConfigInject = (0, _useConfigInject2.default)('upload', props),
  77. rootPrefixCls = _useConfigInject.rootPrefixCls;
  78. var transitionProps = (0, _vue.computed)(function () {
  79. return (0, _transition.getTransitionProps)("".concat(rootPrefixCls.value, "-fade"));
  80. });
  81. return function () {
  82. var _infoUploadingClass, _listContainerNameCla;
  83. var prefixCls = props.prefixCls,
  84. locale = props.locale,
  85. listType = props.listType,
  86. file = props.file,
  87. items = props.items,
  88. progressProps = props.progress,
  89. _props$iconRender = props.iconRender,
  90. iconRender = _props$iconRender === void 0 ? slots.iconRender : _props$iconRender,
  91. _props$actionIconRend = props.actionIconRender,
  92. actionIconRender = _props$actionIconRend === void 0 ? slots.actionIconRender : _props$actionIconRend,
  93. _props$itemRender = props.itemRender,
  94. itemRender = _props$itemRender === void 0 ? slots.itemRender : _props$itemRender,
  95. isImgUrl = props.isImgUrl,
  96. showPreviewIcon = props.showPreviewIcon,
  97. showRemoveIcon = props.showRemoveIcon,
  98. showDownloadIcon = props.showDownloadIcon,
  99. _props$previewIcon = props.previewIcon,
  100. customPreviewIcon = _props$previewIcon === void 0 ? slots.previewIcon : _props$previewIcon,
  101. _props$removeIcon = props.removeIcon,
  102. customRemoveIcon = _props$removeIcon === void 0 ? slots.removeIcon : _props$removeIcon,
  103. _props$downloadIcon = props.downloadIcon,
  104. customDownloadIcon = _props$downloadIcon === void 0 ? slots.downloadIcon : _props$downloadIcon,
  105. onPreview = props.onPreview,
  106. onDownload = props.onDownload,
  107. onClose = props.onClose;
  108. var className = attrs.class,
  109. style = attrs.style;
  110. // This is used for legacy span make scrollHeight the wrong value.
  111. // We will force these to be `display: block` with non `picture-card`
  112. var spanClassName = "".concat(prefixCls, "-span");
  113. var iconNode = iconRender({
  114. file: file
  115. });
  116. var icon = (0, _vue.createVNode)("div", {
  117. "class": "".concat(prefixCls, "-text-icon")
  118. }, [iconNode]);
  119. if (listType === 'picture' || listType === 'picture-card') {
  120. if (file.status === 'uploading' || !file.thumbUrl && !file.url) {
  121. var _uploadingClassName;
  122. var uploadingClassName = (_uploadingClassName = {}, (0, _defineProperty2.default)(_uploadingClassName, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2.default)(_uploadingClassName, "".concat(prefixCls, "-list-item-file"), file.status !== 'uploading'), _uploadingClassName);
  123. icon = (0, _vue.createVNode)("div", {
  124. "class": uploadingClassName
  125. }, [iconNode]);
  126. } else {
  127. var _aClassName;
  128. var thumbnail = isImgUrl !== null && isImgUrl !== void 0 && isImgUrl(file) ? (0, _vue.createVNode)("img", {
  129. "src": file.thumbUrl || file.url,
  130. "alt": file.name,
  131. "class": "".concat(prefixCls, "-list-item-image")
  132. }, null) : iconNode;
  133. var aClassName = (_aClassName = {}, (0, _defineProperty2.default)(_aClassName, "".concat(prefixCls, "-list-item-thumbnail"), true), (0, _defineProperty2.default)(_aClassName, "".concat(prefixCls, "-list-item-file"), isImgUrl && !isImgUrl(file)), _aClassName);
  134. icon = (0, _vue.createVNode)("a", {
  135. "class": aClassName,
  136. "onClick": function onClick(e) {
  137. return onPreview(file, e);
  138. },
  139. "href": file.url || file.thumbUrl,
  140. "target": "_blank",
  141. "rel": "noopener noreferrer"
  142. }, [thumbnail]);
  143. }
  144. }
  145. var infoUploadingClass = (_infoUploadingClass = {}, (0, _defineProperty2.default)(_infoUploadingClass, "".concat(prefixCls, "-list-item"), true), (0, _defineProperty2.default)(_infoUploadingClass, "".concat(prefixCls, "-list-item-").concat(file.status), true), (0, _defineProperty2.default)(_infoUploadingClass, "".concat(prefixCls, "-list-item-list-type-").concat(listType), true), _infoUploadingClass);
  146. var linkProps = typeof file.linkProps === 'string' ? JSON.parse(file.linkProps) : file.linkProps;
  147. var removeIcon = showRemoveIcon ? actionIconRender({
  148. customIcon: customRemoveIcon ? customRemoveIcon({
  149. file: file
  150. }) : (0, _vue.createVNode)(_DeleteOutlined.default, null, null),
  151. callback: function callback() {
  152. return onClose(file);
  153. },
  154. prefixCls: prefixCls,
  155. title: locale.removeFile
  156. }) : null;
  157. var downloadIcon = showDownloadIcon && file.status === 'done' ? actionIconRender({
  158. customIcon: customDownloadIcon ? customDownloadIcon({
  159. file: file
  160. }) : (0, _vue.createVNode)(_DownloadOutlined.default, null, null),
  161. callback: function callback() {
  162. return onDownload(file);
  163. },
  164. prefixCls: prefixCls,
  165. title: locale.downloadFile
  166. }) : null;
  167. var downloadOrDelete = listType !== 'picture-card' && (0, _vue.createVNode)("span", {
  168. "key": "download-delete",
  169. "class": ["".concat(prefixCls, "-list-item-card-actions"), {
  170. picture: listType === 'picture'
  171. }]
  172. }, [downloadIcon, removeIcon]);
  173. var listItemNameClass = "".concat(prefixCls, "-list-item-name");
  174. var preview = file.url ? [(0, _vue.createVNode)("a", (0, _objectSpread2.default)((0, _objectSpread2.default)({
  175. "key": "view",
  176. "target": "_blank",
  177. "rel": "noopener noreferrer",
  178. "class": listItemNameClass,
  179. "title": file.name
  180. }, linkProps), {}, {
  181. "href": file.url,
  182. "onClick": function onClick(e) {
  183. return onPreview(file, e);
  184. }
  185. }), [file.name]), downloadOrDelete] : [(0, _vue.createVNode)("span", {
  186. "key": "view",
  187. "class": listItemNameClass,
  188. "onClick": function onClick(e) {
  189. return onPreview(file, e);
  190. },
  191. "title": file.name
  192. }, [file.name]), downloadOrDelete];
  193. var previewStyle = {
  194. pointerEvents: 'none',
  195. opacity: 0.5
  196. };
  197. var previewIcon = showPreviewIcon ? (0, _vue.createVNode)("a", {
  198. "href": file.url || file.thumbUrl,
  199. "target": "_blank",
  200. "rel": "noopener noreferrer",
  201. "style": file.url || file.thumbUrl ? undefined : previewStyle,
  202. "onClick": function onClick(e) {
  203. return onPreview(file, e);
  204. },
  205. "title": locale.previewFile
  206. }, [customPreviewIcon ? customPreviewIcon({
  207. file: file
  208. }) : (0, _vue.createVNode)(_EyeOutlined.default, null, null)]) : null;
  209. var actions = listType === 'picture-card' && file.status !== 'uploading' && (0, _vue.createVNode)("span", {
  210. "class": "".concat(prefixCls, "-list-item-actions")
  211. }, [previewIcon, file.status === 'done' && downloadIcon, removeIcon]);
  212. var message;
  213. if (file.response && typeof file.response === 'string') {
  214. message = file.response;
  215. } else {
  216. var _file$error, _file$error2;
  217. message = ((_file$error = file.error) === null || _file$error === void 0 ? void 0 : _file$error.statusText) || ((_file$error2 = file.error) === null || _file$error2 === void 0 ? void 0 : _file$error2.message) || locale.uploadError;
  218. }
  219. var iconAndPreview = (0, _vue.createVNode)("span", {
  220. "class": spanClassName
  221. }, [icon, preview]);
  222. var dom = (0, _vue.createVNode)("div", {
  223. "class": infoUploadingClass
  224. }, [(0, _vue.createVNode)("div", {
  225. "class": "".concat(prefixCls, "-list-item-info")
  226. }, [iconAndPreview]), actions, showProgress.value && (0, _vue.createVNode)(_transition.default, transitionProps.value, {
  227. default: function _default() {
  228. return [(0, _vue.withDirectives)((0, _vue.createVNode)("div", {
  229. "class": "".concat(prefixCls, "-list-item-progress")
  230. }, ['percent' in file ? (0, _vue.createVNode)(_progress.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, progressProps), {}, {
  231. "type": "line",
  232. "percent": file.percent
  233. }), null) : null]), [[_vue.vShow, file.status === 'uploading']])];
  234. }
  235. })]);
  236. var listContainerNameClass = (_listContainerNameCla = {}, (0, _defineProperty2.default)(_listContainerNameCla, "".concat(prefixCls, "-list-").concat(listType, "-container"), true), (0, _defineProperty2.default)(_listContainerNameCla, "".concat(className), !!className), _listContainerNameCla);
  237. var item = file.status === 'error' ? (0, _vue.createVNode)(_tooltip.default, {
  238. "title": message,
  239. "getPopupContainer": function getPopupContainer(node) {
  240. return node.parentNode;
  241. }
  242. }, {
  243. default: function _default() {
  244. return [dom];
  245. }
  246. }) : dom;
  247. return (0, _vue.createVNode)("div", {
  248. "class": listContainerNameClass,
  249. "style": style,
  250. "ref": _vue.ref
  251. }, [itemRender ? itemRender({
  252. originNode: item,
  253. file: file,
  254. fileList: items,
  255. actions: {
  256. download: onDownload.bind(null, file),
  257. preview: onPreview.bind(null, file),
  258. remove: onClose.bind(null, file)
  259. }
  260. }) : item]);
  261. };
  262. }
  263. });
  264. exports.default = _default2;