[add] Upload: support custom imageSize

YaoApp · Oct 17, 2023 · fe1d1a2 · fe1d1a2
1 parent 011f73a
commit fe1d1a2
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 50 deletions.
diff --git a/packages/xgen/components/edit/Upload/components/Image.tsx b/packages/xgen/components/edit/Upload/components/Image.tsx
@@ -0,0 +1,23 @@
+import { getFileSrc } from '@/knife'
+import { DeleteOutlined } from '@ant-design/icons'
+
+import type { IPropsCustomImage } from '../types'
+
+const Index = (props: IPropsCustomImage) => {
+	const { file, imageSize, remove } = props
+
+	return (
+		<div className='upload_custom_wrap flex relative'>
+			<div className='icon_delete absolute justify_center align_center transition_normal' onClick={remove}>
+				<DeleteOutlined className='icon'></DeleteOutlined>
+			</div>
+			<img
+				className='image'
+				src={getFileSrc(file.response!)}
+				style={{ borderRadius: 6, objectFit: 'cover', ...imageSize }}
+			></img>
+		</div>
+	)
+}
+
+export default window.$app.memo(Index)
diff --git a/packages/xgen/components/edit/Upload/components/Video.tsx b/packages/xgen/components/edit/Upload/components/Video.tsx
@@ -1,13 +1,13 @@
-import { DeleteOutlined } from '@ant-design/icons'
 import { getFileSrc } from '@/knife'
+import { DeleteOutlined } from '@ant-design/icons'
 
-import type { IPropsVideo } from '../types'
+import type { IPropsCustomRender } from '../types'
 
-const Index = (props: IPropsVideo) => {
+const Index = (props: IPropsCustomRender) => {
 	const { file, remove } = props
 
 	return (
-		<div className='upload_video_wrap flex relative'>
+		<div className='upload_custom_wrap flex relative'>
 			<div className='icon_delete absolute justify_center align_center transition_normal' onClick={remove}>
 				<DeleteOutlined className='icon'></DeleteOutlined>
 			</div>

diff --git a/packages/xgen/components/edit/Upload/index.less b/packages/xgen/components/edit/Upload/index.less
@@ -7,11 +7,33 @@
 				padding-top: 11px;
 				padding-left: 10px;
 
+				&.custom {
+					@image_size: unset;
+					@min_image_size: 83px;
+
+					.xgen-upload-select-picture-card {
+						min-width: @min_image_size;
+						min-height: @min_image_size;
+						width: @image_size;
+						height: @image_size;
+					}
+
+					.xgen-upload-list-picture-card-container {
+						min-width: @min_image_size;
+						min-height: @min_image_size;
+						width: @image_size;
+						height: @image_size;
+					}
+				}
+
 				@image_size: 83px;
 
 				.xgen-upload-select-picture-card {
 					width: @image_size;
 					height: @image_size;
+                              display: inline-flex;
+                              align-items: center;
+                              justify-content: center;
 				}
 
 				.xgen-upload-list-picture-card-container {
@@ -58,53 +80,53 @@
 					height: 160px;
 				}
 			}
-
-			.upload_video_wrap {
-				&:hover {
-					.icon_delete {
-						display: flex;
-					}
-				}
-
-				.video {
-					width: 100%;
-					height: 160px;
-					border-radius: 6px;
-
-					object-fit: fill;
-				}
-
-				.icon_delete {
-					right: -1px;
-					bottom: -1px;
-					z-index: 1;
-					display: none;
-					width: 27px;
-					height: 27px;
-					border-top-left-radius: 6px;
-					border-bottom-right-radius: 6px;
-					background-color: white;
-					color: black;
-					cursor: pointer;
-
-					&:hover {
-						background-color: var(--color_danger);
-
-						.icon {
-							color: white;
-						}
-					}
-
-					.icon {
-						color: var(--color_danger);
-						font-size: 15px;
-					}
-				}
-			}
 		}
 	}
 
 	:global {
+            .upload_custom_wrap {
+                  &:hover {
+                        .icon_delete {
+                              display: flex;
+                        }
+                  }
+
+                  .video {
+                        width: 100%;
+                        height: 160px;
+                        border-radius: 6px;
+
+                        object-fit: fill;
+                  }
+
+                  .icon_delete {
+                        right: -1px;
+                        bottom: -1px;
+                        z-index: 1;
+                        display: none;
+                        width: 27px;
+                        height: 27px;
+                        border-top-left-radius: 6px;
+                        border-bottom-right-radius: 6px;
+                        background-color: white;
+                        color: black;
+                        cursor: pointer;
+
+                        &:hover {
+                              background-color: var(--color_danger);
+
+                              .icon {
+                                    color: white;
+                              }
+                        }
+
+                        .icon {
+                              color: var(--color_danger);
+                              font-size: 15px;
+                        }
+                  }
+            }
+
 		.xgen-upload.xgen-upload-select-picture-card {
 			margin-right: 11px;
 			margin-bottom: 11px;

diff --git a/packages/xgen/components/edit/Upload/index.tsx b/packages/xgen/components/edit/Upload/index.tsx
@@ -6,6 +6,7 @@ import { useMemo } from 'react'
 import { Item } from '@/components'
 import { getToken } from '@/knife'
 
+import Image from './components/Image'
 import UploadBtn from './components/UploadBtn'
 import filemap from './filemap'
 import useList from './hooks/useList'
@@ -17,7 +18,7 @@ import type { UploadProps } from 'antd'
 import type { IProps, CustomProps, IPropsUploadBtn } from './types'
 
 const Custom = window.$app.memo((props: CustomProps) => {
-	const { api, filetype, maxCount, desc, onChange: trigger } = props
+	const { api, filetype, maxCount, desc, imageSize, onChange: trigger } = props
 	const { list, setList } = useList(props.value)
 	const visible_btn = useVisibleBtn(list.length, maxCount || 1)
 
@@ -43,7 +44,11 @@ const Custom = window.$app.memo((props: CustomProps) => {
 		...props,
 		name: 'file',
 		listType: filemap[filetype].listType,
-		className: clsx(['form_item_upload_wrap', filemap[filetype].className]),
+		className: clsx([
+			'form_item_upload_wrap',
+			filemap[filetype].className,
+			filetype === 'image' && imageSize && 'custom'
+		]),
 		action,
 		headers: { authorization: getToken() },
 		fileList: list,
@@ -55,6 +60,12 @@ const Custom = window.$app.memo((props: CustomProps) => {
 		props_upload['itemRender'] = filemap[filetype].render
 	}
 
+	if (filetype === 'image' && imageSize) {
+		props_upload['itemRender'] = (_, file, _fileList, { remove }) => (
+			<Image file={file} imageSize={imageSize} remove={remove}></Image>
+		)
+	}
+
 	const props_upload_btn: IPropsUploadBtn = {
 		length: list.length,
 		filetype,

diff --git a/packages/xgen/components/edit/Upload/types.ts b/packages/xgen/components/edit/Upload/types.ts
@@ -6,6 +6,7 @@ interface CommonProps {
 	value: Array<string>
 	filetype: 'image' | 'file' | 'video'
 	desc?: string
+	imageSize?: { width: string; height: string }
 }
 
 export interface IProps extends UploadProps, Component.PropsEditComponent, CommonProps {
@@ -25,11 +26,15 @@ export interface FileType {
 	}
 }
 
-export interface IPropsVideo {
+export interface IPropsCustomRender {
 	file: UploadFile<string>
 	remove: () => void
 }
 
+export interface IPropsCustomImage extends IPropsCustomRender {
+	imageSize: CommonProps['imageSize']
+}
+
 export interface IPropsUploadBtn {
 	length: number
 	filetype: IProps['filetype']