index.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. "use strict";
  2. "use client";
  3. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  4. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  5. Object.defineProperty(exports, "__esModule", {
  6. value: true
  7. });
  8. exports.default = void 0;
  9. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  10. var React = _interopRequireWildcard(require("react"));
  11. var _FileTwoTone = _interopRequireDefault(require("@ant-design/icons/FileTwoTone"));
  12. var _LoadingOutlined = _interopRequireDefault(require("@ant-design/icons/LoadingOutlined"));
  13. var _PaperClipOutlined = _interopRequireDefault(require("@ant-design/icons/PaperClipOutlined"));
  14. var _PictureTwoTone = _interopRequireDefault(require("@ant-design/icons/PictureTwoTone"));
  15. var _classnames = _interopRequireDefault(require("classnames"));
  16. var _rcMotion = _interopRequireWildcard(require("rc-motion"));
  17. var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
  18. var _useForceUpdate = _interopRequireDefault(require("../../_util/hooks/useForceUpdate"));
  19. var _motion = _interopRequireDefault(require("../../_util/motion"));
  20. var _reactNode = require("../../_util/reactNode");
  21. var _button = _interopRequireDefault(require("../../button"));
  22. var _configProvider = require("../../config-provider");
  23. var _utils = require("../utils");
  24. var _ListItem = _interopRequireDefault(require("./ListItem"));
  25. const InternalUploadList = (props, ref) => {
  26. const {
  27. listType = 'text',
  28. previewFile = _utils.previewImage,
  29. onPreview,
  30. onDownload,
  31. onRemove,
  32. locale,
  33. iconRender,
  34. isImageUrl: isImgUrl = _utils.isImageUrl,
  35. prefixCls: customizePrefixCls,
  36. items = [],
  37. showPreviewIcon = true,
  38. showRemoveIcon = true,
  39. showDownloadIcon = false,
  40. removeIcon,
  41. previewIcon,
  42. downloadIcon,
  43. extra,
  44. progress = {
  45. size: [-1, 2],
  46. showInfo: false
  47. },
  48. appendAction,
  49. appendActionVisible = true,
  50. itemRender,
  51. disabled
  52. } = props;
  53. const forceUpdate = (0, _useForceUpdate.default)();
  54. const [motionAppear, setMotionAppear] = React.useState(false);
  55. const isPictureCardOrCirle = ['picture-card', 'picture-circle'].includes(listType);
  56. // ============================= Effect =============================
  57. React.useEffect(() => {
  58. if (!listType.startsWith('picture')) {
  59. return;
  60. }
  61. (items || []).forEach(file => {
  62. if (!(file.originFileObj instanceof File || file.originFileObj instanceof Blob) || file.thumbUrl !== undefined) {
  63. return;
  64. }
  65. file.thumbUrl = '';
  66. previewFile === null || previewFile === void 0 ? void 0 : previewFile(file.originFileObj).then(previewDataUrl => {
  67. // Need append '' to avoid dead loop
  68. file.thumbUrl = previewDataUrl || '';
  69. forceUpdate();
  70. });
  71. });
  72. }, [listType, items, previewFile]);
  73. React.useEffect(() => {
  74. setMotionAppear(true);
  75. }, []);
  76. // ============================= Events =============================
  77. const onInternalPreview = (file, e) => {
  78. if (!onPreview) {
  79. return;
  80. }
  81. e === null || e === void 0 ? void 0 : e.preventDefault();
  82. return onPreview(file);
  83. };
  84. const onInternalDownload = file => {
  85. if (typeof onDownload === 'function') {
  86. onDownload(file);
  87. } else if (file.url) {
  88. window.open(file.url);
  89. }
  90. };
  91. const onInternalClose = file => {
  92. onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
  93. };
  94. const internalIconRender = file => {
  95. if (iconRender) {
  96. return iconRender(file, listType);
  97. }
  98. const isLoading = file.status === 'uploading';
  99. if (listType.startsWith('picture')) {
  100. const loadingIcon = listType === 'picture' ? /*#__PURE__*/React.createElement(_LoadingOutlined.default, null) : locale.uploading;
  101. const fileIcon = (isImgUrl === null || isImgUrl === void 0 ? void 0 : isImgUrl(file)) ? /*#__PURE__*/React.createElement(_PictureTwoTone.default, null) : /*#__PURE__*/React.createElement(_FileTwoTone.default, null);
  102. return isLoading ? loadingIcon : fileIcon;
  103. }
  104. return isLoading ? /*#__PURE__*/React.createElement(_LoadingOutlined.default, null) : /*#__PURE__*/React.createElement(_PaperClipOutlined.default, null);
  105. };
  106. const actionIconRender = (customIcon, callback, prefixCls, title, acceptUploadDisabled) => {
  107. const btnProps = {
  108. type: 'text',
  109. size: 'small',
  110. title,
  111. onClick: e => {
  112. var _a, _b;
  113. callback();
  114. if (/*#__PURE__*/React.isValidElement(customIcon)) {
  115. (_b = (_a = customIcon.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
  116. }
  117. },
  118. className: `${prefixCls}-list-item-action`,
  119. disabled: acceptUploadDisabled ? disabled : false
  120. };
  121. return /*#__PURE__*/React.isValidElement(customIcon) ? (/*#__PURE__*/React.createElement(_button.default, Object.assign({}, btnProps, {
  122. icon: (0, _reactNode.cloneElement)(customIcon, Object.assign(Object.assign({}, customIcon.props), {
  123. onClick: () => {}
  124. }))
  125. }))) : (/*#__PURE__*/React.createElement(_button.default, Object.assign({}, btnProps), /*#__PURE__*/React.createElement("span", null, customIcon)));
  126. };
  127. // ============================== Ref ===============================
  128. // Test needs
  129. React.useImperativeHandle(ref, () => ({
  130. handlePreview: onInternalPreview,
  131. handleDownload: onInternalDownload
  132. }));
  133. const {
  134. getPrefixCls
  135. } = React.useContext(_configProvider.ConfigContext);
  136. // ============================= Render =============================
  137. const prefixCls = getPrefixCls('upload', customizePrefixCls);
  138. const rootPrefixCls = getPrefixCls();
  139. const listClassNames = (0, _classnames.default)(`${prefixCls}-list`, `${prefixCls}-list-${listType}`);
  140. const listItemMotion = React.useMemo(() => (0, _omit.default)((0, _motion.default)(rootPrefixCls), ['onAppearEnd', 'onEnterEnd', 'onLeaveEnd']), [rootPrefixCls]);
  141. const motionConfig = Object.assign(Object.assign({}, isPictureCardOrCirle ? {} : listItemMotion), {
  142. motionDeadline: 2000,
  143. motionName: `${prefixCls}-${isPictureCardOrCirle ? 'animate-inline' : 'animate'}`,
  144. keys: (0, _toConsumableArray2.default)(items.map(file => ({
  145. key: file.uid,
  146. file
  147. }))),
  148. motionAppear
  149. });
  150. return /*#__PURE__*/React.createElement("div", {
  151. className: listClassNames
  152. }, /*#__PURE__*/React.createElement(_rcMotion.CSSMotionList, Object.assign({}, motionConfig, {
  153. component: false
  154. }), ({
  155. key,
  156. file,
  157. className: motionClassName,
  158. style: motionStyle
  159. }) => (/*#__PURE__*/React.createElement(_ListItem.default, {
  160. key: key,
  161. locale: locale,
  162. prefixCls: prefixCls,
  163. className: motionClassName,
  164. style: motionStyle,
  165. file: file,
  166. items: items,
  167. progress: progress,
  168. listType: listType,
  169. isImgUrl: isImgUrl,
  170. showPreviewIcon: showPreviewIcon,
  171. showRemoveIcon: showRemoveIcon,
  172. showDownloadIcon: showDownloadIcon,
  173. removeIcon: removeIcon,
  174. previewIcon: previewIcon,
  175. downloadIcon: downloadIcon,
  176. extra: extra,
  177. iconRender: internalIconRender,
  178. actionIconRender: actionIconRender,
  179. itemRender: itemRender,
  180. onPreview: onInternalPreview,
  181. onDownload: onInternalDownload,
  182. onClose: onInternalClose
  183. }))), appendAction && (/*#__PURE__*/React.createElement(_rcMotion.default, Object.assign({}, motionConfig, {
  184. visible: appendActionVisible,
  185. forceRender: true
  186. }), ({
  187. className: motionClassName,
  188. style: motionStyle
  189. }) => (0, _reactNode.cloneElement)(appendAction, oriProps => ({
  190. className: (0, _classnames.default)(oriProps.className, motionClassName),
  191. style: Object.assign(Object.assign(Object.assign({}, motionStyle), {
  192. // prevent the element has hover css pseudo-class that may cause animation to end prematurely.
  193. pointerEvents: motionClassName ? 'none' : undefined
  194. }), oriProps.style)
  195. })))));
  196. };
  197. const UploadList = /*#__PURE__*/React.forwardRef(InternalUploadList);
  198. if (process.env.NODE_ENV !== 'production') {
  199. UploadList.displayName = 'UploadList';
  200. }
  201. var _default = exports.default = UploadList;