@douyinfe/semi-ui 2.1.4 → 2.2.0-beta.1

package/lib/cjs/timeline/item.js

@@ -18,6 +18,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
 
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -46,7 +48,8 @@ class Item extends _react.PureComponent {
       type,
       style,
       time,
-      extra
+      extra,
+      onClick
     } = this.props;
     const itemCls = (0, _classnames.default)(prefixCls, className);
     const dotCls = (0, _classnames.default)({
@@ -61,16 +64,17 @@ class Item extends _react.PureComponent {
     } : null;
     return /*#__PURE__*/_react.default.createElement("li", {
       className: itemCls,
-      style: style
+      style: style,
+      onClick: onClick
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-tail")
     }), /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
       className: dotCls
     }, dotStyle), dot), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content")
-    }, children, extra ? /*#__PURE__*/_react.default.createElement("div", {
+    }, children, extra && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content-extra")
-    }, extra) : null, /*#__PURE__*/_react.default.createElement("div", {
+    }, extra), time && /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(prefixCls, "-content-time")
     }, time)));
   }
@@ -80,15 +84,17 @@ class Item extends _react.PureComponent {
 exports.default = Item;
 Item.propTypes = {
   color: _propTypes.default.string,
-  time: _propTypes.default.string,
+  time: _propTypes.default.node,
   type: _propTypes.default.oneOf(_constants.strings.ITEM_TYPE),
   dot: _propTypes.default.node,
   extra: _propTypes.default.node,
   position: _propTypes.default.oneOf(_constants.strings.ITEM_POS),
   className: _propTypes.default.string,
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  onClick: _propTypes.default.func
 };
 Item.defaultProps = {
   type: 'default',
-  time: ''
+  time: '',
+  onClick: _noop2.default
 };

package/lib/cjs/tree/treeNode.js

@@ -100,8 +100,6 @@ class TreeNode extends _react.PureComponent {
       const {
         onNodeRightClick
       } = this.context;
-      e.stopPropagation();
-      e.nativeEvent.stopImmediatePropagation();
       onNodeRightClick(e, this.props);
     };
 

package/lib/cjs/upload/fileCard.d.ts

@@ -26,6 +26,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
         style: PropTypes.Requireable<object>;
         url: PropTypes.Requireable<string>;
         validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        index: PropTypes.Requireable<number>;
     };
     static defaultProps: {
         listType: "list";
@@ -39,6 +40,7 @@ declare class FileCard extends PureComponent<FileCardProps> {
     renderValidateMessage(): ReactNode;
     renderPicValidateMsg(): ReactNode;
     renderPic(locale: Locale['Upload']): ReactNode;
+    renderFile(locale: Locale["Upload"]): JSX.Element;
     onRemove(e: MouseEvent): void;
     onReplace(e: MouseEvent): void;
     onRetry(e: MouseEvent): void;

package/lib/cjs/upload/fileCard.js

@@ -26,6 +26,8 @@ var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
 
 var _utils = require("@douyinfe/semi-foundation/lib/cjs/upload/utils");
 
+var _semiIcons = require("@douyinfe/semi-icons");
+
 var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
 
 var _index = _interopRequireDefault(require("../iconButton/index"));
@@ -38,8 +40,6 @@ var _index4 = _interopRequireDefault(require("../spin/index"));
 
 var _reactUtils = require("../_base/reactUtils");
 
-var _semiIcons = require("@douyinfe/semi-icons");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
@@ -191,16 +191,23 @@ class FileCard extends _react.PureComponent {
       status,
       disabled,
       style,
-      onPreviewClick
+      onPreviewClick,
+      showPicInfo,
+      renderPicInfo,
+      renderThumbnail,
+      name,
+      index
     } = this.props;
+    const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
     const filePicCardCls = (0, _classnames.default)({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
-      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
+      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined',
+      ["".concat(prefixCls, "-picture-file-card-error")]: status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
+      ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
-    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
-    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
     const closeCls = "".concat(prefixCls, "-picture-file-card-close");
 
     const retry = /*#__PURE__*/_react.default.createElement("div", {
@@ -223,47 +230,38 @@ class FileCard extends _react.PureComponent {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
 
+    const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-pic-info")
+    }, index + 1);
+    const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : /*#__PURE__*/_react.default.createElement("img", {
+      src: url,
+      alt: "picture of ".concat(name)
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       className: filePicCardCls,
       style: style,
       onClick: onPreviewClick
-    }, /*#__PURE__*/_react.default.createElement("img", {
-      src: url
-    }), showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+    }, thumbnail, showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
       percent: percent,
       type: "circle",
       size: "small",
       orbitStroke: '#FFF'
-    }) : null, showRetry ? retry : null, showReplace && replace, disabled ? null : /*#__PURE__*/_react.default.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
+    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/_react.default.createElement("div", {
+      className: closeCls
     }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
-      size: "extra-small"
+      size: "extra-small",
+      onClick: e => this.onRemove(e)
     })), this.renderPicValidateMsg());
   }
 
-  onRemove(e) {
-    e.stopPropagation();
-    this.props.onRemove(this.props, e);
-  }
-
-  onReplace(e) {
-    e.stopPropagation();
-    this.props.onReplace(this.props, e);
-  }
-
-  onRetry(e) {
-    e.stopPropagation();
-    this.props.onRetry(this.props, e);
-  }
-
-  render() {
+  renderFile(locale) {
     const {
       name,
       size,
       percent,
       url,
-      listType,
+      showRetry: propsShowRetry,
+      showReplace: propsShowReplace,
       preview,
       previewFile,
       status,
@@ -284,15 +282,8 @@ class FileCard extends _react.PureComponent {
     const replaceCls = "".concat(prefixCls, "-file-card-replace");
     const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === _constants.strings.FILE_STATUS_UPLOADING; // only show retry when upload fail & showRetry is true, no need to show during validate fail
 
-    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
-    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
-
-    if (listType === _constants.strings.FILE_LIST_PIC) {
-      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-        componentName: "Upload"
-      }, locale => this.renderPic(locale));
-    }
-
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && propsShowRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && propsShowReplace;
     const fileSize = this.transSize(size);
     let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
       src: url
@@ -304,9 +295,7 @@ class FileCard extends _react.PureComponent {
       previewContent = previewFile(this.props);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-      componentName: "Upload"
-    }, locale => /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement("div", {
       className: fileCardCls,
       style: style,
       onClick: onPreviewClick
@@ -351,7 +340,42 @@ class FileCard extends _react.PureComponent {
       theme: "borderless",
       size: "small",
       className: closeCls
-    })));
+    }));
+  }
+
+  onRemove(e) {
+    e.stopPropagation();
+    this.props.onRemove(this.props, e);
+  }
+
+  onReplace(e) {
+    e.stopPropagation();
+    this.props.onReplace(this.props, e);
+  }
+
+  onRetry(e) {
+    e.stopPropagation();
+    this.props.onRetry(this.props, e);
+  }
+
+  render() {
+    const {
+      listType
+    } = this.props;
+
+    if (listType === _constants.strings.FILE_LIST_PIC) {
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => this.renderPic(locale));
+    }
+
+    if (listType === _constants.strings.FILE_LIST_DEFAULT) {
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => this.renderFile(locale));
+    }
+
+    return null;
   }
 
 }
@@ -374,7 +398,8 @@ FileCard.propTypes = {
   status: _propTypes.default.string,
   style: _propTypes.default.object,
   url: _propTypes.default.string,
-  validateMessage: _propTypes.default.node
+  validateMessage: _propTypes.default.node,
+  index: _propTypes.default.number
 };
 FileCard.defaultProps = {
   listType: _constants.strings.FILE_LIST_DEFAULT,

package/lib/cjs/upload/index.d.ts

@@ -1,6 +1,6 @@
-import { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
+import React, { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
 import PropTypes from 'prop-types';
-import UploadFoundation, { UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
+import UploadFoundation, { CustomFile, UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
 import FileCard from './fileCard';
 import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
 import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
@@ -54,7 +54,10 @@ export interface UploadProps {
     prompt?: ReactNode;
     promptPosition?: PromptPositionType;
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
+    showPicInfo?: boolean;
     showReplace?: boolean;
     showRetry?: boolean;
     showUploadList?: boolean;
@@ -121,7 +124,10 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
+        renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;
+        showPicInfo: PropTypes.Requireable<boolean>;
         showReplace: PropTypes.Requireable<boolean>;
         showRetry: PropTypes.Requireable<boolean>;
         showUploadList: PropTypes.Requireable<boolean>;
@@ -157,13 +163,28 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
     onReplaceChange: (e: ChangeEvent<HTMLInputElement>) => void;
     clear: () => void;
     remove: (fileItem: FileItem) => void;
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+    insert: (files: Array<CustomFile>, index: number) => void;
+    /**
+     * ref method
+     * manual upload by user
+     */
     upload: () => void;
     renderFile: (file: FileItem, index: number, locale: Locale['Upload']) => ReactNode;
     renderFileList: () => ReactNode;
+    renderFileListPic: () => JSX.Element;
+    renderFileListDefault: () => JSX.Element;
     onDrop: (e: DragEvent<HTMLDivElement>) => void;
     onDragOver: (e: DragEvent<HTMLDivElement>) => void;
     onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
     onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+    renderAddContent: () => React.ReactNode;
     renderDragArea: () => ReactNode;
     render(): ReactNode;
 }

package/lib/cjs/upload/index.js

@@ -97,6 +97,23 @@ class Upload extends _baseComponent.default {
     this.remove = fileItem => {
       this.foundation.handleRemove(fileItem);
     };
+    /**
+     * ref method
+     * insert files at index
+     * @param files Array<CustomFile>
+     * @param index number
+     * @returns
+     */
+
+
+    this.insert = (files, index) => {
+      return this.foundation.insertFileToList(files, index);
+    };
+    /**
+     * ref method
+     * manual upload by user
+     */
+
 
     this.upload = () => {
       const {
@@ -112,14 +129,18 @@ class Upload extends _baseComponent.default {
         name,
         status,
         validateMessage,
-        _sizeInvalid
+        _sizeInvalid,
+        uid
       } = file;
       const {
         previewFile,
         listType,
         itemStyle,
         showRetry,
+        showPicInfo,
+        renderPicInfo,
         renderFileItem,
+        renderThumbnail,
         disabled,
         onPreviewClick,
         showReplace
@@ -140,10 +161,14 @@ class Upload extends _baseComponent.default {
         listType,
         onRemove,
         onRetry,
-        key: (0, _concat.default)(_context = "".concat(name)).call(_context, index),
+        index,
+        key: uid || (0, _concat.default)(_context = "".concat(name)).call(_context, index),
         showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
+        showPicInfo,
+        renderPicInfo,
+        renderThumbnail,
         showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
@@ -165,28 +190,69 @@ class Upload extends _baseComponent.default {
     };
 
     this.renderFileList = () => {
+      const {
+        listType
+      } = this.props;
+
+      if (listType === _constants.strings.FILE_LIST_PIC) {
+        return this.renderFileListPic();
+      }
+
+      if (listType === _constants.strings.FILE_LIST_DEFAULT) {
+        return this.renderFileListDefault();
+      }
+
+      return null;
+    };
+
+    this.renderFileListPic = () => {
       const {
         showUploadList,
-        listType,
         limit,
         disabled,
-        children
+        children,
+        draggable
       } = this.props;
       const {
-        fileList: stateFileList
+        fileList: stateFileList,
+        dragAreaStatus
       } = this.state;
       const fileList = this.props.fileList || stateFileList;
-      const isPicType = listType === _constants.strings.FILE_LIST_PIC;
-      const showAddTriggerInList = isPicType && (limit ? limit > fileList.length : true);
+      const showAddTriggerInList = limit ? limit > fileList.length : true;
+      const dragAreaBaseCls = "".concat(prefixCls, "-drag-area");
       const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"), {
-        ["".concat(prefixCls, "-picture-add")]: isPicType,
+        ["".concat(prefixCls, "-picture-add")]: true,
         ["".concat(prefixCls, "-picture-add-disabled")]: disabled
       });
-
-      const addContent = /*#__PURE__*/_react.default.createElement("div", {
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
+        ["".concat(prefixCls, "-picture-file-list")]: true
+      });
+      const dragAreaCls = (0, _classnames.default)({
+        ["".concat(dragAreaBaseCls, "-legal")]: dragAreaStatus === _constants.strings.DRAG_AREA_LEGAL,
+        ["".concat(dragAreaBaseCls, "-illegal")]: dragAreaStatus === _constants.strings.DRAG_AREA_ILLEGAL
+      });
+      const mainCls = "".concat(prefixCls, "-file-list-main");
+      const addContentProps = {
         className: uploadAddCls,
         onClick: this.onClick
-      }, children);
+      };
+      const containerProps = {
+        className: fileListCls
+      };
+      const draggableProps = {
+        onDrop: this.onDrop,
+        onDragOver: this.onDragOver,
+        onDragLeave: this.onDragLeave,
+        onDragEnter: this.onDragEnter
+      };
+
+      if (draggable) {
+        (0, _assign.default)(addContentProps, draggableProps, {
+          className: (0, _classnames.default)(uploadAddCls, dragAreaCls)
+        });
+      }
+
+      const addContent = /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, addContentProps), children);
 
       if (!showUploadList || !fileList.length) {
         if (showAddTriggerInList) {
@@ -196,18 +262,39 @@ class Upload extends _baseComponent.default {
         return null;
       }
 
-      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"), {
-        ["".concat(prefixCls, "-picture-file-list")]: isPicType
-      });
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), /*#__PURE__*/_react.default.createElement("div", {
+        className: mainCls
+      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+    };
+
+    this.renderFileListDefault = () => {
+      const {
+        showUploadList,
+        limit,
+        disabled
+      } = this.props;
+      const {
+        fileList: stateFileList
+      } = this.state;
+      const fileList = this.props.fileList || stateFileList;
+      const fileListCls = (0, _classnames.default)("".concat(prefixCls, "-file-list"));
       const titleCls = "".concat(prefixCls, "-file-list-title");
       const mainCls = "".concat(prefixCls, "-file-list-main");
-      const showTitle = limit !== 1 && fileList.length && listType !== _constants.strings.FILE_LIST_PIC;
+      const showTitle = limit !== 1 && fileList.length;
       const showClear = this.props.showClear && !disabled;
+      const containerProps = {
+        className: fileListCls
+      };
+
+      if (!showUploadList || !fileList.length) {
+        return null;
+      }
+
       return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
         componentName: "Upload"
-      }, locale => /*#__PURE__*/_react.default.createElement("div", {
-        className: fileListCls
-      }, showTitle ? /*#__PURE__*/_react.default.createElement("div", {
+      }, locale => /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, containerProps), showTitle ? /*#__PURE__*/_react.default.createElement("div", {
         className: titleCls
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(titleCls, "-choosen")
@@ -216,7 +303,7 @@ class Upload extends _baseComponent.default {
         className: "".concat(titleCls, "-clear")
       }, locale.clear) : null) : null, /*#__PURE__*/_react.default.createElement("div", {
         className: mainCls
-      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, (0, _map.default)(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)))));
     };
 
     this.onDrop = e => {
@@ -236,6 +323,28 @@ class Upload extends _baseComponent.default {
       this.foundation.handleDragEnter(e);
     };
 
+    this.renderAddContent = () => {
+      const {
+        draggable,
+        children,
+        listType
+      } = this.props;
+      const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
+
+      if (listType === _constants.strings.FILE_LIST_PIC) {
+        return null;
+      }
+
+      if (draggable) {
+        return this.renderDragArea();
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: uploadAddCls,
+        onClick: this.onClick
+      }, children);
+    };
+
     this.renderDragArea = () => {
       const {
         dragAreaStatus
@@ -422,7 +531,6 @@ class Upload extends _baseComponent.default {
       ["".concat(prefixCls, "-warning")]: validateStatus === 'warning',
       ["".concat(prefixCls, "-success")]: validateStatus === 'success'
     }, className);
-    const uploadAddCls = (0, _classnames.default)("".concat(prefixCls, "-add"));
     const inputCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input"));
     const inputReplaceCls = (0, _classnames.default)("".concat(prefixCls, "-hidden-input-replace"));
     const promptCls = (0, _classnames.default)("".concat(prefixCls, "-prompt"));
@@ -431,10 +539,6 @@ class Upload extends _baseComponent.default {
       directory: 'directory',
       webkitdirectory: 'webkitdirectory'
     } : {};
-    const addContent = listType !== _constants.strings.FILE_LIST_PIC ? /*#__PURE__*/_react.default.createElement("div", {
-      className: uploadAddCls,
-      onClick: this.onClick
-    }, children) : null;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: uploadCls,
       style: style,
@@ -460,7 +564,7 @@ class Upload extends _baseComponent.default {
       tabIndex: -1,
       className: inputReplaceCls,
       ref: this.replaceInputRef
-    }), draggable ? this.renderDragArea() : addContent, prompt ? /*#__PURE__*/_react.default.createElement("div", {
+    }), this.renderAddContent(), prompt ? /*#__PURE__*/_react.default.createElement("div", {
       className: promptCls
     }, prompt) : null, validateMessage ? /*#__PURE__*/_react.default.createElement("div", {
       className: validateMsgCls
@@ -515,7 +619,10 @@ Upload.propTypes = {
   prompt: _propTypes.default.node,
   promptPosition: _propTypes.default.oneOf(_constants.strings.PROMPT_POSITION),
   renderFileItem: _propTypes.default.func,
+  renderPicInfo: _propTypes.default.func,
+  renderThumbnail: _propTypes.default.func,
   showClear: _propTypes.default.bool,
+  showPicInfo: _propTypes.default.bool,
   showReplace: _propTypes.default.bool,
   showRetry: _propTypes.default.bool,
   showUploadList: _propTypes.default.bool,
@@ -549,6 +656,7 @@ Upload.defaultProps = {
   onSuccess: _noop2.default,
   promptPosition: 'right',
   showClear: true,
+  showPicInfo: false,
   showReplace: false,
   showRetry: true,
   showUploadList: true,

package/lib/cjs/upload/interface.d.ts

@@ -42,12 +42,15 @@ export interface FileItem extends BaseFileItem {
     validateMessage?: ReactNode;
 }
 export interface RenderFileItemProps extends FileItem {
+    index?: number;
     previewFile?: (fileItem: RenderFileItemProps) => ReactNode;
     listType: UploadListType;
     onRemove: (props: RenderFileItemProps, e: MouseEvent) => void;
     onRetry: (props: RenderFileItemProps, e: MouseEvent) => void;
     onReplace: (props: RenderFileItemProps, e: MouseEvent) => void;
     key: string;
+    showPicInfo?: boolean;
+    renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     showRetry: boolean;
     showReplace: boolean;
     style?: CSSProperties;

package/lib/es/_base/base.css

@@ -399,7 +399,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-border: rgba(var(--semi-grey-9), .08);
   --semi-color-nav-bg: rgba(var(--semi-white), 1);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-grey-8), .05);
   --semi-color-fill-1: rgba(var(--semi-grey-8), .09);
   --semi-color-fill-2: rgba(var(--semi-grey-8), .13);
@@ -486,7 +486,7 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-link-visited: rgba(var(--semi-blue-5), 1);
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
-  --semi-overlay-bg: rgba(22, 22, 26, .6);
+  --semi-color-overlay-bg: rgba(22, 22, 26, .6);
   --semi-color-fill-0: rgba(var(--semi-white), .05);
   --semi-color-fill-1: rgba(var(--semi-white), .09);
   --semi-color-fill-2: rgba(var(--semi-white), .13);

package/lib/es/_utils/index.d.ts

@@ -30,6 +30,7 @@ export declare function cloneDeep(value: any, customizer?: (value: any) => void)
 export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
     style: Record<string, any>;
     className: string;
+    key: string;
 }, string | React.JSXElementConstructor<any>>)[];
 export interface RegisterMediaQueryOption {
     match?: (e: MediaQueryList | MediaQueryListEvent) => void;