fix(Upload): support itemRender on Dragger, close alibaba-fusion#4840 …

…and alibaba-fusion#4721
FairyYang · Jul 16, 2024 · 1d1a4c6 · 1d1a4c6
1 parent d24e621
commit 1d1a4c6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 37 deletions.
diff --git a/components/upload/__tests__/index-spec.tsx b/components/upload/__tests__/index-spec.tsx
@@ -190,6 +190,29 @@ describe('Upload', () => {
             cy.get('.next-upload-inner').should('have.length', 1);
             cy.get('.next-upload-inner').should('have.class', 'next-hidden');
         });
+
+        it('should support itemRender on Dragger', () => {
+            const itemRender = () => <div className="test">test</div>;
+            cy.mount(
+                <Upload.Dragger
+                    itemRender={itemRender}
+                    listType="card"
+                    accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp"
+                    defaultValue={[
+                        {
+                            uid: '0',
+                            name: 'IMG.png',
+                            state: 'done',
+                            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                            downloadURL:
+                                'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',
+                        },
+                    ]}
+                />
+            );
+            cy.get('.test').should('have.length', 1);
+        });
     });
 
     describe('[behavior] Upload Request', () => {

diff --git a/components/upload/types.ts b/components/upload/types.ts
@@ -76,7 +76,7 @@ export interface UploadProps extends UploadCommonProps {
 
     /**
      * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
-     *  @en Optional parameters, upload success callback function, the parameter is the response information and file
+     * @en Optional parameters, upload success callback function, the parameter is the response information and file
      * @param file - 文件 - file
      * @param value - 值 - value
      * @defaultValue func.noop
@@ -296,7 +296,8 @@ export interface UploadProps extends UploadCommonProps {
     previewOnFileName?: boolean;
 
     /**
-     * 自定义成功和失败的列表渲染方式
+     * 自定义成功和失败的列表渲染方式，仅在listType 是 card 时生效
+     * @en Customize success and failure list rendering, only in listType is card
      */
     itemRender?: (file: UploadFile, obj: { remove?: () => void }) => ReactNode;
 
@@ -383,8 +384,8 @@ export interface CardProps extends UploadProps {
     onCancel?: () => void;
 
     /**
-     * 自定义成功和失败的列表渲染方式
-     * @en Customize success and failure list rendering
+     * 自定义成功和失败的列表渲染方式，仅在listType 是 card 时生效
+     * @en Customize success and failure list rendering，only in listType is card
      * @param file - 文件对象 - file object
      * @param obj - 包含属性 remove: 删除回调 - contains properties remove: delete callback
      * @version 1.21
@@ -694,51 +695,18 @@ export interface NObject {
 
 export interface IframeUploaderProps {
     name?: string;
-    /**
-     * 上传的地址
-     */
     action?: string;
-    /**
-     * 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)
-     */
     accept?: string;
-    /**
-     * 上传额外传参
-     */
     data?: object | ((file: unknown) => void);
     disabled?: boolean;
     className?: string;
     style?: CSSProperties;
-    /**
-     * 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件
-     */
     multiple?: boolean;
-    /**
-     * 设置上传的请求头部
-     */
     headers?: { [key: string]: unknown; 'X-Requested-With'?: string | undefined };
-    /**
-     * 是否允许请求携带 cookie
-     */
     withCredentials?: boolean;
-    /**
-     * 可选参数，详见 [beforeUpload](#beforeUpload)
-     */
     beforeUpload?: (file: unknown, options: unknown) => boolean | object | Promise<object>;
-    /**
-     * 上传中
-     */
     onProgress?: () => void;
-    /**
-     * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
-     */
     onSuccess?: (param: unknown, file: ObjectFile | UploadFile) => void;
-    /**
-     * 可选参数，上传失败回调函数
-     * err
-     * params
-     * file
-     */
     onError?: (err: UploadError, params: unknown, file: ObjectFile) => void;
     onSelect?: (file: IframeFile[]) => void;
     onStart?: (file: UploadFile) => void;

diff --git a/components/upload/upload.tsx b/components/upload/upload.tsx
@@ -403,6 +403,7 @@ class Upload extends Base<UploadProps, UploadState> {
             fileNameRender,
             actionRender,
             previewOnFileName,
+            itemRender,
             ...others
         } = this.props;
 
@@ -501,6 +502,7 @@ class Upload extends Base<UploadProps, UploadState> {
                         extraRender={extraRender}
                         rtl={rtl}
                         previewOnFileName={previewOnFileName}
+                        itemRender={itemRender}
                     />
                 ) : null}
             </div>