feat: add renderPicClose suppport in upload (#2714)

* feat: add renderPicClose suppport in upload

* fix: add type RenderPictureCloseProps import in upload/index.tsx

---------

Co-authored-by: zhangyumei.0319 <[email protected]>

content/input/upload/index-en-US.md

@@ -1396,6 +1396,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |promptPosition | The position of the prompt text. When the listType is list, the reference object is the children element; when the listType is picture, the reference object is the picture list. Optional values ​​`left`, `right`, `bottom`<br/> (In picture wall mode, promptPosition is only supported after v1.3.0) | string |'right' | |
 |renderFileItem | Custom rendering of fileCard | (renderProps: RenderFileItemProps) => ReactNode | | 1.0.0 |
 |renderFileOperation | Custom list item operation area | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
+|renderPicClose| Customize the photo wall close button, only valid in photo wall mode| ({className: string, remove: (e: MouseEvent) => void})=>ReactNode | | 2.75.0 |
 |renderPicInfo| Custom photo wall information, only valid in photo wall mode| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |
 |renderPicPreviewIcon| The preview icon displayed when customizing the photo wall hover, only valid in photo wall mode | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
 |renderThumbnail| Custom picture wall thumb, only valid in photo wall mode| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |

content/input/upload/index.md

@@ -1405,6 +1405,7 @@ import { IconUpload } from '@douyinfe/semi-icons';
 |promptPosition | 提示文本的位置，当 listType 为 list 时，参照物为 children 元素；当 listType 为 picture 时，参照物为图片列表。可选值 `left`、`right`、`bottom`<br/>（图片墙模式下，v1.3.0 后才支持使用 promptPosition） | string | 'right' |  |
 |renderFileItem | fileCard 的自定义渲染 | (renderProps: RenderFileItemProps) => ReactNode |  |  |
 |renderFileOperation | 自定义列表项操作区 | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
+|renderPicClose| 自定义照片墙 close 按钮，只在照片墙模式下有效| ({className: string, remove: (e: MouseEvent) => void})=>ReactNode | | 2.75.0 |
 |renderPicInfo| 自定义照片墙信息，只在照片墙模式下有效| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |
 |renderPicPreviewIcon| 自定义照片墙hover时展示的预览图标，只在照片墙模式下有效 | (renderProps: RenderFileItemProps)=>ReactNode | | 2.5.0 |
 |renderThumbnail| 自定义图片墙缩略图，只在照片墙模式下有效| (renderProps: RenderFileItemProps)=>ReactNode | | 2.2.0 |

packages/semi-ui/upload/_story/upload.stories.jsx

@@ -1374,3 +1374,31 @@ export const fix2448 = () => {
         </>
     );
 };
+
+export const CustomPicCloseIcon = () => {
+    let action = 'https://api.semi.design/upload';
+    const defaultFileList = [
+        {
+            uid: '1',
+            name: 'dy.png',
+            status: 'success',
+            size: '130KB',
+            preview: true,
+            url:
+                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',
+        },
+    ];
+    const renderPicClose = ({ className, remove }) => (
+        <div className={className} onClick={remove}>delete</div>
+    )
+    return (
+        <>
+            <Upload 
+                renderPicClose={renderPicClose}
+                action={action} listType="picture" accept="image/*" multiple defaultFileList={defaultFileList}
+            >
+                <IconPlus size="extra-large" />
+            </Upload>
+        </>
+    );
+};

packages/semi-ui/upload/fileCard.tsx

@@ -148,7 +148,7 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
 
     renderPic(locale: Locale['Upload']): ReactNode {
         const { fallbackPreview } = this.state;
-        const { url, percent, status, disabled, style, onPreviewClick, showPicInfo, renderPicInfo, renderPicPreviewIcon, renderThumbnail, name, index, picHeight, picWidth } = this.props;
+        const { url, percent, status, disabled, style, onPreviewClick, showPicInfo, renderPicInfo, renderPicClose, renderPicPreviewIcon, renderThumbnail, name, index, picHeight, picWidth } = this.props;
         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;
@@ -180,14 +180,20 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
                 {typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null}
             </div>
         );
+
         const close = (
-            <div role="button" tabIndex={0} className={`${prefixCls}-picture-file-card-close`} onClick={e => this.onRemove(e)}>
-                <IconClear className={`${prefixCls}-picture-file-card-icon-close`} />
-            </div>
+            <>
+                {typeof renderPicClose === 'function' ?
+                    <>{renderPicClose({ className: `${prefixCls}-picture-file-card-close`, remove: e => this.onRemove(e) })}</>
+                    : <div role="button" tabIndex={0} className={`${prefixCls}-picture-file-card-close`} onClick={e => this.onRemove(e)}>
+                        <IconClear className={`${prefixCls}-picture-file-card-icon-close`} />
+                    </div>
+                }
+            </>
         );
 
         const picInfo = typeof renderPicInfo === 'function' ? renderPicInfo(this.props) : (
-            <div className={`${prefixCls }-picture-file-card-pic-info`}>{index + 1}</div>
+            <div className={`${prefixCls}-picture-file-card-pic-info`}>{index + 1}</div>
         );
 
         let imgStyle: { height?: number | string; width?: number | string } = {};
@@ -202,8 +208,7 @@ class FileCard extends BaseComponent<FileCardProps, FileCardState> {
             itemStyle.width = picWidth;
             imgStyle.width = picWidth;
         }
-        
-        const defaultThumbTail = !fallbackPreview ? <img src={url} alt={name} onError={error => this.foundation.handleImageError(error)} style={imgStyle}/> : <IconFile size="large" />;
+        const defaultThumbTail = !fallbackPreview ? <img src={url} alt={name} onError={error => this.foundation.handleImageError(error)} style={imgStyle} /> : <IconFile size="large" />;
 
         const thumbnail = customThumbnail ? renderThumbnail(this.props) : defaultThumbTail;
 

packages/semi-ui/upload/index.tsx

@@ -18,6 +18,7 @@ import type {
     OnChangeProps,
     customRequestArgs,
     CustomError,
+    RenderPictureCloseProps,
 } from './interface';
 import { Locale } from '../locale/interface';
 import '@douyinfe/semi-foundation/upload/upload.scss';
@@ -105,6 +106,7 @@ export interface UploadProps {
     renderPicInfo?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderThumbnail?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
     renderPicPreviewIcon?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    renderPicClose?: (renderPicCloseProps: RenderPictureCloseProps) => ReactNode;
     renderFileOperation?: (fileItem: RenderFileItemProps) => ReactNode;
     showClear?: boolean;
     showPicInfo?: boolean; // Show pic info in picture wall
@@ -183,6 +185,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
         renderFileItem: PropTypes.func,
         renderPicPreviewIcon: PropTypes.func,
         renderFileOperation: PropTypes.func,
+        renderPicClose: PropTypes.func,
         renderPicInfo: PropTypes.func,
         renderThumbnail: PropTypes.func,
         showClear: PropTypes.bool,
@@ -412,6 +415,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             itemStyle,
             showPicInfo,
             renderPicInfo,
+            renderPicClose,
             renderPicPreviewIcon,
             renderFileOperation,
             renderFileItem,
@@ -442,6 +446,7 @@ class Upload extends BaseComponent<UploadProps, UploadState> {
             showPicInfo,
             renderPicInfo,
             renderPicPreviewIcon,
+            renderPicClose,
             renderFileOperation,
             renderThumbnail,
             onReplace,

packages/semi-ui/upload/interface.ts

@@ -61,4 +61,9 @@ export interface RenderFileItemProps extends FileItem {
     style?: CSSProperties;
     disabled: boolean;
     onPreviewClick: () => void
+}
+
+export interface RenderPictureCloseProps {
+    className: string;
+    remove: (e: MouseEvent) => void
 }