@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/lib/es/table/Table.js

@@ -505,10 +505,17 @@ class Table extends BaseComponent {
           titleArr.push(sorter);
         }
 
+        const stateFilteredValue = _get(curQuery, 'filteredValue');
+
+        const defaultFilteredValue = _get(curQuery, 'defaultFilteredValue');
+
+        const filteredValue = stateFilteredValue ? stateFilteredValue : defaultFilteredValue;
+
         if (_Array$isArray(column.filters) && column.filters.length || /*#__PURE__*/isValidElement(column.filterDropdown)) {
           const filter = /*#__PURE__*/React.createElement(ColumnFilter, _Object$assign({
             key: strings.DEFAULT_KEY_COLUMN_FILTER
           }, curQuery, {
+            filteredValue: filteredValue,
             onFilterDropdownVisibleChange: visible => _this.foundation.toggleShowFilter(dataIndex, visible),
             onSelect: data => _this.foundation.handleFilterSelect(dataIndex, data)
           }));
@@ -1097,11 +1104,12 @@ class Table extends BaseComponent {
       willUpdateStates.cachedColumns = props.columns;
       willUpdateStates.cachedChildren = null;
     } else if (props.children && props.children !== state.cachedChildren) {
-      const newFlattenColumns = flattenColumns(getColumns(props.children));
+      const newNestedColumns = getColumns(props.children);
+      const newFlattenColumns = flattenColumns(newNestedColumns);
       const columns = mergeColumns(state.queries, newFlattenColumns, null, false);
       willUpdateStates.flattenColumns = newFlattenColumns;
       willUpdateStates.queries = [...columns];
-      willUpdateStates.cachedColumns = [...columns];
+      willUpdateStates.cachedColumns = [...newNestedColumns];
       willUpdateStates.cachedChildren = props.children;
     } // Update controlled selection column
 

package/lib/es/table/interface.d.ts

@@ -63,6 +63,7 @@ export interface ColumnProps<RecordType extends Record<string, any> = any> {
     className?: string;
     colSpan?: number;
     dataIndex?: string;
+    defaultFilteredValue?: any[];
     defaultSortOrder?: SortOrder;
     filterChildrenRecord?: boolean;
     filterDropdown?: React.ReactNode;

package/lib/es/tabs/interface.d.ts

@@ -52,7 +52,7 @@ export interface TabBarProps {
 export interface TabPaneProps {
     className?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: ReactNode;
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;

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

@@ -67,7 +67,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         motion: PropTypes.Requireable<boolean | object>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
-        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver" | "leftBottomOver" | "rightBottomOver">;
         getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
         mouseEnterDelay: PropTypes.Requireable<number>;
         mouseLeaveDelay: PropTypes.Requireable<number>;

package/lib/es/tooltip/index.js

@@ -443,11 +443,15 @@ export default class Tooltip extends BaseComponent {
           }
         };
 
-        document.addEventListener('click', this.clickOutsideHandler, false);
+        document.addEventListener('mousedown', this.clickOutsideHandler, {
+          capture: true
+        });
       },
       unregisterClickOutsideHandler: () => {
         if (this.clickOutsideHandler) {
-          document.removeEventListener('click', this.clickOutsideHandler, false);
+          document.removeEventListener('mousedown', this.clickOutsideHandler, {
+            capture: true
+          });
           this.clickOutsideHandler = null;
         }
       },

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

@@ -70,6 +70,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
         onDrop: PropTypes.Requireable<(...args: any[]) => any>;
         labelEllipsis: PropTypes.Requireable<boolean>;
+        checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: {
@@ -90,6 +91,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         disableStrictly: boolean;
         draggable: boolean;
         autoExpandWhenDragEnter: boolean;
+        checkRelation: string;
     };
     static TreeNode: typeof TreeNode;
     inputRef: React.RefObject<typeof Input>;

package/lib/es/tree/index.js

@@ -177,6 +177,7 @@ class Tree extends BaseComponent {
       selectedKeys: [],
       checkedKeys: new _Set(),
       halfCheckedKeys: new _Set(),
+      realCheckedKeys: new _Set([]),
       motionKeys: new _Set([]),
       motionType: 'hide',
       expandedKeys: new _Set(props.expandedKeys),
@@ -387,12 +388,16 @@ class Tree extends BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new _Set(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // update loadedKeys
 
@@ -402,7 +407,7 @@ class Tree extends BaseComponent {
     } // update disableStrictly
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -723,6 +728,7 @@ Tree.propTypes = {
   onDragStart: PropTypes.func,
   onDrop: PropTypes.func,
   labelEllipsis: PropTypes.bool,
+  checkRelation: PropTypes.string,
   'aria-label': PropTypes.string
 };
 Tree.defaultProps = {
@@ -742,7 +748,8 @@ Tree.defaultProps = {
   expandAction: false,
   disableStrictly: false,
   draggable: false,
-  autoExpandWhenDragEnter: true
+  autoExpandWhenDragEnter: true,
+  checkRelation: 'related'
 };
 Tree.TreeNode = TreeNode;
 export default Tree;

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

@@ -168,6 +168,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         optionListStyle: PropTypes.Requireable<object>;
         searchRender: PropTypes.Requireable<boolean | ((...args: any[]) => any)>;
         renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
+        checkRelation: PropTypes.Requireable<string>;
         'aria-label': PropTypes.Requireable<string>;
     };
     static defaultProps: Partial<TreeSelectProps>;
@@ -192,6 +193,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     removeTag: (removedKey: TreeNodeData['key']) => void;
     handleClick: (e: React.MouseEvent) => void;
     handleSelectionEnterPress: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+    hasValue: () => boolean;
     showClearBtn: () => boolean;
     renderTagList: () => React.ReactNode[];
     /**

package/lib/es/treeSelect/index.js

@@ -115,34 +115,52 @@ class TreeSelect extends BaseComponent {
       this.foundation.handleSelectionEnterPress(e);
     };
 
-    this.showClearBtn = () => {
+    this.hasValue = () => {
       const {
-        searchPosition
+        multiple,
+        checkRelation
       } = this.props;
       const {
-        inputValue
+        realCheckedKeys,
+        checkedKeys,
+        selectedKeys
       } = this.state;
-      const triggerSearchHasInputValue = searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue;
+      let hasValue = false;
+
+      if (multiple) {
+        if (checkRelation === 'related') {
+          hasValue = Boolean(checkedKeys.size);
+        } else if (checkRelation === 'unRelated') {
+          hasValue = Boolean(realCheckedKeys.size);
+        }
+      } else {
+        hasValue = Boolean(selectedKeys.length);
+      }
+
+      return hasValue;
+    };
+
+    this.showClearBtn = () => {
       const {
         showClear,
         disabled,
-        multiple
+        searchPosition
       } = this.props;
       const {
-        selectedKeys,
-        checkedKeys,
+        inputValue,
         isOpen,
         isHovering
       } = this.state;
-      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
-      return showClear && (hasValue || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
+      const triggerSearchHasInputValue = searchPosition === strings.SEARCH_POSITION_TRIGGER && inputValue;
+      return showClear && (this.hasValue() || triggerSearchHasInputValue) && !disabled && (isOpen || isHovering);
     };
 
     this.renderTagList = () => {
       const {
         checkedKeys,
         keyEntities,
-        disabledKeys
+        disabledKeys,
+        realCheckedKeys
       } = this.state;
       const {
         treeNodeLabelProp,
@@ -150,13 +168,21 @@ class TreeSelect extends BaseComponent {
         disabled,
         disableStrictly,
         size,
+        checkRelation,
         renderSelectedItem: propRenderSelectedItem
       } = this.props;
       const renderSelectedItem = _isFunction(propRenderSelectedItem) ? propRenderSelectedItem : item => ({
         isRenderInTag: true,
         content: _get(item, treeNodeLabelProp, null)
       });
-      const renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+      let renderKeys = [];
+
+      if (checkRelation === 'related') {
+        renderKeys = normalizeKeyList([...checkedKeys], keyEntities, leafOnly);
+      } else if (checkRelation === 'unRelated') {
+        renderKeys = [...realCheckedKeys];
+      }
+
       const tagList = []; // eslint-disable-next-line @typescript-eslint/no-shadow
 
       _forEachInstanceProperty(renderKeys).call(renderKeys, key => {
@@ -245,11 +271,6 @@ class TreeSelect extends BaseComponent {
         searchPosition,
         filterTreeNode
       } = this.props;
-      const {
-        selectedKeys,
-        checkedKeys
-      } = this.state;
-      const hasValue = multiple ? Boolean(checkedKeys.size) : Boolean(selectedKeys.length);
       const isTriggerPositionSearch = filterTreeNode && searchPosition === strings.SEARCH_POSITION_TRIGGER; // searchPosition = trigger
 
       if (isTriggerPositionSearch) {
@@ -257,7 +278,7 @@ class TreeSelect extends BaseComponent {
       } // searchPosition = dropdown and single seleciton
 
 
-      if (!multiple || !hasValue) {
+      if (!multiple || !this.hasValue()) {
         const renderText = this.foundation.getRenderTextInSingle();
         const spanCls = cls({
           ["".concat(prefixcls, "-selection-placeholder")]: !renderText
@@ -514,14 +535,23 @@ class TreeSelect extends BaseComponent {
         size,
         searchAutoFocus,
         placeholder,
-        maxTagCount
+        maxTagCount,
+        checkRelation
       } = this.props;
       const {
         keyEntities,
         checkedKeys,
-        inputValue
+        inputValue,
+        realCheckedKeys
       } = this.state;
-      const keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+      let keyList = [];
+
+      if (checkRelation === 'related') {
+        keyList = normalizeKeyList(checkedKeys, keyEntities, leafOnly);
+      } else if (checkRelation === 'unRelated') {
+        keyList = [...realCheckedKeys];
+      }
+
       return /*#__PURE__*/React.createElement(TagInput, {
         maxTagCount: maxTagCount,
         disabled: disabled,
@@ -846,6 +876,7 @@ class TreeSelect extends BaseComponent {
       selectedKeys: [],
       checkedKeys: new _Set(),
       halfCheckedKeys: new _Set(),
+      realCheckedKeys: new _Set([]),
       disabledKeys: new _Set(),
       motionKeys: new _Set([]),
       motionType: 'hide',
@@ -966,12 +997,16 @@ class TreeSelect extends BaseComponent {
       }
 
       if (checkedKeyValues) {
-        const {
-          checkedKeys,
-          halfCheckedKeys
-        } = calcCheckedKeys(checkedKeyValues, keyEntities);
-        newState.checkedKeys = checkedKeys;
-        newState.halfCheckedKeys = halfCheckedKeys;
+        if (props.checkRelation === 'unRelated') {
+          newState.realCheckedKeys = new _Set(checkedKeyValues);
+        } else if (props.checkRelation === 'related') {
+          const {
+            checkedKeys,
+            halfCheckedKeys
+          } = calcCheckedKeys(checkedKeyValues, keyEntities);
+          newState.checkedKeys = checkedKeys;
+          newState.halfCheckedKeys = halfCheckedKeys;
+        }
       }
     } // loadedKeys
 
@@ -986,7 +1021,7 @@ class TreeSelect extends BaseComponent {
     } // ================ disableStrictly =================
 
 
-    if (treeData && props.disableStrictly) {
+    if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
 
@@ -1252,6 +1287,7 @@ TreeSelect.propTypes = {
   optionListStyle: PropTypes.object,
   searchRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
   renderSelectedItem: PropTypes.func,
+  checkRelation: PropTypes.string,
   'aria-label': PropTypes.string
 };
 TreeSelect.defaultProps = {
@@ -1280,6 +1316,7 @@ TreeSelect.defaultProps = {
   expandAction: false,
   clickToHide: true,
   searchAutoFocus: false,
+  checkRelation: 'related',
   'aria-label': 'TreeSelect'
 };
 export default TreeSelect;

package/lib/es/upload/fileCard.js

@@ -4,9 +4,9 @@ import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
 import { getFileSize } from '@douyinfe/semi-foundation/lib/es/upload/utils';
-import { IconAlertCircle, IconClose, IconFile, IconRefresh } from '@douyinfe/semi-icons';
+import { IconAlertCircle, IconClose, IconClear, IconFile, IconRefresh } from '@douyinfe/semi-icons';
 import LocaleConsumer from '../locale/localeConsumer';
-import IconButton from '../iconButton/index';
+import Button from '../button/index';
 import Progress from '../progress/index';
 import Tooltip from '../tooltip/index';
 import Spin from '../spin/index';
@@ -167,6 +167,7 @@ class FileCard extends PureComponent {
       onPreviewClick,
       showPicInfo,
       renderPicInfo,
+      renderPicPreviewIcon,
       renderThumbnail,
       name,
       index
@@ -174,6 +175,7 @@ class FileCard extends PureComponent {
     const showProgress = status === strings.FILE_STATUS_UPLOADING && percent !== 100;
     const showRetry = status === strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
     const showReplace = status === strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const showPreview = status === strings.FILE_STATUS_SUCCESS && !this.props.showReplace;
     const filePicCardCls = cls({
       ["".concat(prefixCls, "-picture-file-card")]: true,
       ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
@@ -181,7 +183,6 @@ class FileCard extends PureComponent {
       ["".concat(prefixCls, "-picture-file-card-error")]: status === strings.FILE_STATUS_UPLOAD_FAIL,
       ["".concat(prefixCls, "-picture-file-card-uploading")]: showProgress
     });
-    const closeCls = "".concat(prefixCls, "-picture-file-card-close");
     const retry = /*#__PURE__*/React.createElement("div", {
       role: "button",
       tabIndex: 0,
@@ -204,6 +205,17 @@ class FileCard extends PureComponent {
     }, /*#__PURE__*/React.createElement(ReplaceSvg, {
       className: "".concat(prefixCls, "-picture-file-card-icon-replace")
     })));
+    const preview = /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-preview")
+    }, typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null);
+    const close = /*#__PURE__*/React.createElement("div", {
+      role: "button",
+      tabIndex: 0,
+      className: "".concat(prefixCls, "-picture-file-card-close"),
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/React.createElement(IconClear, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-close")
+    }));
     const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefixCls, "-picture-file-card-pic-info")
     }, index + 1);
@@ -222,14 +234,7 @@ class FileCard extends PureComponent {
       size: "small",
       orbitStroke: '#FFF',
       "aria-label": "uploading file progress"
-    }) : null, showRetry ? retry : null, showReplace && replace, showPicInfo && picInfo, !disabled && /*#__PURE__*/React.createElement("div", {
-      className: closeCls,
-      onClick: e => this.onRemove(e)
-    }, /*#__PURE__*/React.createElement(IconClose, {
-      tabIndex: 0,
-      role: "button",
-      size: "extra-small"
-    })), this.renderPicValidateMsg());
+    }) : null, showRetry ? retry : null, showReplace && replace, showPreview && preview, showPicInfo && picInfo, !disabled && close, this.renderPicValidateMsg());
   }
 
   renderFile(locale) {
@@ -244,7 +249,8 @@ class FileCard extends PureComponent {
       previewFile,
       status,
       style,
-      onPreviewClick
+      onPreviewClick,
+      renderFileOperation
     } = this.props;
     const fileCardCls = cls({
       ["".concat(prefixCls, "-file-card")]: true,
@@ -274,6 +280,14 @@ class FileCard extends PureComponent {
       previewContent = previewFile(this.props);
     }
 
+    const operation = typeof renderFileOperation === 'function' ? renderFileOperation(this.props) : /*#__PURE__*/React.createElement(Button, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/React.createElement(IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    });
     return /*#__PURE__*/React.createElement("div", {
       role: "listitem",
       className: fileCardCls,
@@ -294,7 +308,7 @@ class FileCard extends PureComponent {
       position: "top",
       showArrow: false,
       content: locale.replace
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    }, /*#__PURE__*/React.createElement(Button, {
       onClick: e => this.onReplace(e),
       type: "tertiary",
       theme: "borderless",
@@ -316,29 +330,22 @@ class FileCard extends PureComponent {
       tabIndex: 0,
       className: "".concat(infoCls, "-retry"),
       onClick: e => this.onRetry(e)
-    }, locale.retry) : null)), /*#__PURE__*/React.createElement(IconButton, {
-      onClick: e => this.onRemove(e),
-      type: "tertiary",
-      icon: /*#__PURE__*/React.createElement(IconClose, null),
-      theme: "borderless",
-      size: "small",
-      className: closeCls
-    }));
+    }, locale.retry) : null)), operation);
   }
 
   onRemove(e) {
     e.stopPropagation();
-    this.props.onRemove(this.props, e);
+    this.props.onRemove();
   }
 
   onReplace(e) {
     e.stopPropagation();
-    this.props.onReplace(this.props, e);
+    this.props.onReplace();
   }
 
   onRetry(e) {
     e.stopPropagation();
-    this.props.onRetry(this.props, e);
+    this.props.onRetry();
   }
 
   render() {

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

@@ -29,6 +29,7 @@ export interface UploadProps {
     fileList?: Array<FileItem>;
     fileName?: string;
     headers?: Record<string, any> | ((file: File) => Record<string, string>);
+    hotSpotLocation?: 'start' | 'end';
     itemStyle?: CSSProperties;
     limit?: number;
     listType?: UploadListType;
@@ -56,6 +57,8 @@ export interface UploadProps {
     renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
     showPicInfo?: boolean;
     showReplace?: boolean;
@@ -99,6 +102,7 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         fileList: PropTypes.Requireable<any[]>;
         fileName: PropTypes.Requireable<string>;
         headers: PropTypes.Requireable<object>;
+        hotSpotLocation: PropTypes.Requireable<string>;
         itemStyle: PropTypes.Requireable<object>;
         limit: PropTypes.Requireable<number>;
         listType: PropTypes.Requireable<"picture" | "list">;
@@ -124,6 +128,8 @@ declare class Upload extends BaseComponent<UploadProps, UploadState> {
         prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
         renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderPicPreviewIcon: PropTypes.Requireable<(...args: any[]) => any>;
+        renderFileOperation: PropTypes.Requireable<(...args: any[]) => any>;
         renderPicInfo: PropTypes.Requireable<(...args: any[]) => any>;
         renderThumbnail: PropTypes.Requireable<(...args: any[]) => any>;
         showClear: PropTypes.Requireable<boolean>;

package/lib/es/upload/index.js

@@ -1,3 +1,4 @@
+import _pick from "lodash/pick";
 import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
@@ -111,14 +112,14 @@ class Upload extends BaseComponent {
         previewFile,
         listType,
         itemStyle,
-        showRetry,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderFileItem,
         renderThumbnail,
         disabled,
-        onPreviewClick,
-        showReplace
+        onPreviewClick
       } = this.props;
 
       const onRemove = () => this.remove(file);
@@ -131,20 +132,20 @@ class Upload extends BaseComponent {
         this.replace(index);
       };
 
-      const fileCardProps = _Object$assign(_Object$assign({}, file), {
+      const fileCardProps = _Object$assign(_Object$assign(_Object$assign({}, _pick(this.props, ['showRetry', 'showReplace', ''])), file), {
         previewFile,
         listType,
         onRemove,
         onRetry,
         index,
         key: uid || _concatInstanceProperty(_context = "".concat(name)).call(_context, index),
-        showRetry: typeof file.showRetry !== 'undefined' ? file.showRetry : showRetry,
         style: itemStyle,
         disabled,
         showPicInfo,
         renderPicInfo,
+        renderPicPreviewIcon,
+        renderFileOperation,
         renderThumbnail,
-        showReplace: typeof file.showReplace !== 'undefined' ? file.showReplace : showReplace,
         onReplace,
         onPreviewClick: typeof onPreviewClick !== 'undefined' ? () => this.foundation.handlePreviewClick(file) : undefined
       });
@@ -186,7 +187,8 @@ class Upload extends BaseComponent {
         limit,
         disabled,
         children,
-        draggable
+        draggable,
+        hotSpotLocation
       } = this.props;
       const {
         fileList: stateFileList,
@@ -244,7 +246,7 @@ class Upload extends BaseComponent {
         className: mainCls,
         role: "list",
         "aria-label": "picture list"
-      }, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList ? addContent : null)));
+      }, showAddTriggerInList && hotSpotLocation === 'start' ? addContent : null, _mapInstanceProperty(fileList).call(fileList, (file, index) => this.renderFile(file, index, locale)), showAddTriggerInList && hotSpotLocation === 'end' ? addContent : null)));
     };
 
     this.renderFileListDefault = () => {
@@ -584,6 +586,7 @@ Upload.propTypes = {
   fileList: PropTypes.array,
   fileName: PropTypes.string,
   headers: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  hotSpotLocation: PropTypes.oneOf(['start', 'end']),
   itemStyle: PropTypes.object,
   limit: PropTypes.number,
   listType: PropTypes.oneOf(strings.LIST_TYPE),
@@ -609,6 +612,8 @@ Upload.propTypes = {
   prompt: PropTypes.node,
   promptPosition: PropTypes.oneOf(strings.PROMPT_POSITION),
   renderFileItem: PropTypes.func,
+  renderPicPreviewIcon: PropTypes.func,
+  renderFileOperation: PropTypes.func,
   renderPicInfo: PropTypes.func,
   renderThumbnail: PropTypes.func,
   showClear: PropTypes.bool,
@@ -628,6 +633,7 @@ Upload.defaultProps = {
   defaultFileList: [],
   disabled: false,
   listType: 'list',
+  hotSpotLocation: 'end',
   multiple: false,
   onAcceptInvalid: _noop,
   onChange: _noop,

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

@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties, MouseEvent } from 'react';
+import { ReactNode, CSSProperties } from 'react';
 import { BaseFileItem } from '@douyinfe/semi-foundation/lib/es/upload/foundation';
 import { strings } from '@douyinfe/semi-foundation/lib/es/upload/constants';
 import { ArrayElement } from '../_base/base';
@@ -45,14 +45,16 @@ 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;
+    onRemove: () => void;
+    onRetry: () => void;
+    onReplace: () => void;
     key: string;
     showPicInfo?: boolean;
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
-    showRetry: boolean;
-    showReplace: boolean;
+    renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
+    showRetry?: boolean;
+    showReplace?: boolean;
     style?: CSSProperties;
     disabled: boolean;
     onPreviewClick: () => void;