feat(Upload): image-card support imageProps (#3317)

* feat(upload): image-card support imageProps

#3271

* test(upload): update test snap

* chore: text starts with lowercase letters

---------

Co-authored-by: Heising <[email protected]>

Author: HaixingOoO

src/upload/__tests__/upload.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, vi, mockDelay } from '@test/utils';
+import Upload from '../upload';
+
+const files = [
+  {
+    url: 'https://tdesign.gtimg.com/demo/demo-image-1.png',
+    name: 'default.jpeg',
+    status: 'success',
+  },
+];
+
+describe('upload 组件测试', () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('imageProps', async () => {
+    const { container } = render(
+      <Upload
+        files={files}
+        action="//service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
+        theme="image"
+        accept="image/*"
+        imageProps={{
+          className: 'tdesign',
+        }}
+      />,
+    );
+
+    await mockDelay();
+    expect(container).toBeInTheDocument();
+    expect(container.querySelector('.tdesign')).toBeInTheDocument();
+  });
+});

src/upload/themes/ImageCard.tsx

@@ -26,16 +26,28 @@ export interface ImageCardUploadProps extends CommonDisplayFileProps {
   cancelUpload?: (context: { e: MouseEvent<HTMLElement>; file: UploadFile }) => void;
   onPreview?: TdUploadProps['onPreview'];
   showImageFileName?: boolean;
+  imageProps?: TdUploadProps['imageProps'];
 }
 
 const ImageCard = (props: ImageCardUploadProps) => {
-  const { displayFiles, locale, classPrefix, multiple, max = 0, onRemove, disabled, fileListDisplay } = props;
+  const {
+    displayFiles,
+    locale,
+    classPrefix,
+    multiple,
+    max = 0,
+    onRemove,
+    disabled,
+    fileListDisplay,
+    imageProps = {},
+  } = props;
   const { BrowseIcon, DeleteIcon, AddIcon, ErrorCircleFilledIcon } = useGlobalIcon({
     AddIcon: TdAddIcon,
     BrowseIcon: TdBrowseIcon,
     DeleteIcon: TdDeleteIcon,
     ErrorCircleFilledIcon: TdErrorCircleFilledIcon,
   });
+  const { className: imageClassName, ...restImageProps } = imageProps;
 
   const showTrigger = React.useMemo(() => {
     if (multiple) {
@@ -47,11 +59,10 @@ const ImageCard = (props: ImageCardUploadProps) => {
   const renderMainContent = (file: UploadFile, index: number) => (
     <div className={`${classPrefix}-upload__card-content ${classPrefix}-upload__card-box`}>
       <Image
-        className={`${classPrefix}-upload__card-image`}
         fit="contain"
+        className={classNames(`${classPrefix}-upload__card-image`, imageClassName)}
+        {...restImageProps}
         src={file.url || file.raw}
-        error=""
-        loading=""
       />
       <div className={`${classPrefix}-upload__card-mask`}>
         <span className={`${classPrefix}-upload__card-mask-item`} onClick={(e) => e.stopPropagation()}>

src/upload/type.ts

@@ -9,6 +9,7 @@ import { UploadConfig } from '../config-provider/type';
 import { ButtonProps } from '../button';
 import { PlainObject, TNode, UploadDisplayDragEvents } from '../common';
 import { CSSProperties, MouseEvent, DragEvent } from 'react';
+import { ImageProps } from '../image';
 
 export interface TdUploadProps<T extends UploadFile = UploadFile> {
   /**
@@ -100,6 +101,10 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
    * 设置上传的请求头部，`action` 存在时有效
    */
   headers?: { [key: string]: string };
+  /**
+   * 用于在上传图片场景下，透传属性配置至 Image 组件
+   */
+  imageProps?: ImageProps;
   /**
    * 透传图片预览组件全部属性
    */

src/upload/upload.en-US.md

@@ -27,6 +27,7 @@ format | Function | - | to redefine  `UploadFile` data structure。Typescript：
 formatRequest | Function | - | redefine request data。Typescript：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
 formatResponse | Function | - | redefine response data structure。Typescript：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N
 headers | Object | - | HTTP Request Header。Typescript：`{[key: string]: string}` | N
+imageProps | Object | - | \- | N
 imageViewerProps | Object | - | ImageViewer Component Props。Typescript：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | add attributes to HTML element `input`。Typescript：`CSSProperties` | N
 isBatchUpload | Boolean | false | make all files to be a whole package, files can only be replaced or deleted together, can not add more files | N

src/upload/upload.md

@@ -27,6 +27,7 @@ format | Function | - | 转换文件 `UploadFile` 的数据结构，可新增或
 formatRequest | Function | - | 用于新增或修改文件上传请求 参数。`action` 存在时有效。一个请求上传一个文件时，默认请求字段有 `file`。<br/>一个请求上传多个文件时，默认字段有 `file[0]/file[1]/file[2]/.../length`，其中 `length` 表示本次上传的文件数量。<br/>⚠️非常注意，此处的 `file[0]/file[1]` 仅仅是一个字段名，并非表示 `file` 是一个数组，接口获取字段时注意区分。<br/>可以使用 `name` 定义 `file` 字段的别名。<br/>也可以使用 `formatRequest` 自定义任意字段，如添加一个字段 `fileList` ，存储文件数组。TS 类型：`(requestData: { [key: string]: any }) => { [key: string]: any }` | N
 formatResponse | Function | - | 用于格式化文件上传后的接口响应数据，`response` 便是接口响应的原始数据。`action` 存在时有效。<br/> 示例返回值：`{ error, url, status, files }` <br/> 此函数的返回值 `error` 会作为错误文本提醒，表示上传失败的原因，如果存在会判定为本次上传失败。<br/> 此函数的返回值 `url` 会作为单个文件上传成功后的链接。<br/> `files` 表示一个请求同时上传多个文件后的文件列表。TS 类型：`(response: any, context: FormatResponseContext) => ResponseType ` `type ResponseType = { error?: string; url?: string; status?: 'fail' \| 'success'; files?: UploadFile[] } & Record<string, any>` `interface FormatResponseContext { file: UploadFile; currentFiles?: UploadFile[] }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N
 headers | Object | - | 设置上传的请求头部，`action` 存在时有效。TS 类型：`{[key: string]: string}` | N
+imageProps | Object | - | 用于在上传图片场景下，透传属性配置至 Image 组件 | N
 imageViewerProps | Object | - | 透传图片预览组件全部属性。TS 类型：`ImageViewerProps`，[ImageViewer API Documents](./image-viewer?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/upload/type.ts) | N
 inputAttributes | Object | - | 用于添加属性到 HTML 元素 `input`。TS 类型：`CSSProperties` | N
 isBatchUpload | Boolean | false | 多个文件是否作为一个独立文件包，整体替换，整体删除。不允许追加文件，只允许替换文件。`theme=file-flow` 时有效 | N

src/upload/upload.tsx

@@ -20,7 +20,7 @@ import useGlobalIcon from '../hooks/useGlobalIcon';
 // const Upload = forwardRef((props: UploadProps, ref) => {
 function TdUpload<T extends UploadFile = UploadFile>(originalProps: UploadProps<T>, ref: ForwardedRef<UploadRef>) {
   const props = useDefaultProps<UploadProps<T>>(originalProps, uploadDefaultProps);
-  const { theme } = props;
+  const { theme, imageProps } = props;
   const {
     locale,
     classPrefix,
@@ -141,6 +141,7 @@ function TdUpload<T extends UploadFile = UploadFile>(originalProps: UploadProps<
       cancelUpload={cancelUpload}
       onPreview={props.onPreview}
       showImageFileName={props.showImageFileName}
+      imageProps={imageProps}
     />
   );