diff --git a/packages/semi-foundation/upload/upload.scss b/packages/semi-foundation/upload/upload.scss index 9d97eeebf0..1943c13ebe 100644 --- a/packages/semi-foundation/upload/upload.scss +++ b/packages/semi-foundation/upload/upload.scss @@ -358,6 +358,15 @@ $module: #{$prefix}-upload; border-radius: $radius-upload_picture_file_card_img; } + &-custom-thumbnail { + .#{$prefix}-image { + img { + width: inherit; + height: inherit; + } + } + } + &-close { visibility: hidden; display: inline-flex; diff --git a/packages/semi-ui/upload/fileCard.tsx b/packages/semi-ui/upload/fileCard.tsx index 5293cb8ce3..63ab1e9e17 100644 --- a/packages/semi-ui/upload/fileCard.tsx +++ b/packages/semi-ui/upload/fileCard.tsx @@ -153,13 +153,15 @@ class FileCard extends BaseComponent { 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 customThumbnail = typeof renderThumbnail === 'function'; const filePicCardCls = cls({ [`${prefixCls}-picture-file-card`]: true, [`${prefixCls}-picture-file-card-preview-fallback`]: fallbackPreview, [`${prefixCls}-picture-file-card-disabled`]: disabled, [`${prefixCls}-picture-file-card-show-pointer`]: typeof onPreviewClick !== 'undefined', [`${prefixCls}-picture-file-card-error`]: status === strings.FILE_STATUS_UPLOAD_FAIL, - [`${prefixCls}-picture-file-card-uploading`]: showProgress + [`${prefixCls}-picture-file-card-uploading`]: showProgress, + [`${prefixCls}-picture-file-card-custom-thumbnail`]: customThumbnail && picHeight && picWidth }); const retry = (
this.onRetry(e)}> @@ -175,7 +177,7 @@ class FileCard extends BaseComponent { ); const preview = (
- {typeof renderPicPreviewIcon === 'function'? renderPicPreviewIcon(this.props): null} + {typeof renderPicPreviewIcon === 'function' ? renderPicPreviewIcon(this.props) : null}
); const close = ( @@ -203,7 +205,7 @@ class FileCard extends BaseComponent { const defaultThumbTail = !fallbackPreview ? {name} this.foundation.handleImageError(error)} style={imgStyle}/> : ; - const thumbnail = typeof renderThumbnail === 'function' ? renderThumbnail(this.props) : defaultThumbTail; + const thumbnail = customThumbnail ? renderThumbnail(this.props) : defaultThumbTail; return (
@@ -243,7 +245,7 @@ class FileCard extends BaseComponent { if (previewFile) { previewContent = previewFile(this.props); } - const operation = typeof renderFileOperation === 'function'? renderFileOperation(this.props) :