73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import Image from 'next/image'
|
|
import { Plus } from 'lucide-react'
|
|
import {
|
|
dropZoneActiveClass,
|
|
dropZoneIdleClass,
|
|
fieldHintClass,
|
|
fieldLabelClass,
|
|
uploadAreaButtonClass,
|
|
uploadAreaEmptyButtonClass,
|
|
uploadAreaTileClass,
|
|
} from './upload-field-styles'
|
|
|
|
interface DisplayImageUploadProps {
|
|
displayImageUrl: string
|
|
isDisplayImageDragging: boolean
|
|
displayImageDropZoneRef: React.RefObject<HTMLDivElement>
|
|
disabled?: boolean
|
|
onDisplayImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void
|
|
onDisplayImageDragEnter: (e: React.DragEvent) => void
|
|
onDisplayImageDragLeave: (e: React.DragEvent) => void
|
|
onDisplayImageDragOver: (e: React.DragEvent) => void
|
|
onDisplayImageDrop: (e: React.DragEvent) => void
|
|
materialType?: string
|
|
}
|
|
|
|
export default function DisplayImageUpload({
|
|
displayImageUrl,
|
|
isDisplayImageDragging,
|
|
displayImageDropZoneRef,
|
|
disabled = false,
|
|
onDisplayImageChange,
|
|
onDisplayImageDragEnter,
|
|
onDisplayImageDragLeave,
|
|
onDisplayImageDragOver,
|
|
onDisplayImageDrop,
|
|
materialType = '',
|
|
}: DisplayImageUploadProps) {
|
|
const inputRef = useRef<HTMLInputElement>(null)
|
|
const isBrandVI = materialType === '品牌VI灵感'
|
|
|
|
return (
|
|
<div>
|
|
<label className={fieldLabelClass}>{isBrandVI ? '展示图片（可选）' : '详情页展示图片 *'}</label>
|
|
<div
|
|
ref={displayImageDropZoneRef}
|
|
aria-disabled={disabled}
|
|
className={`${displayImageUrl ? 'flex flex-wrap items-center gap-3 p-3' : 'p-3'} ${disabled ? 'cursor-not-allowed opacity-60' : ''} ${isDisplayImageDragging ? dropZoneActiveClass : dropZoneIdleClass}`}
|
|
onDragEnter={onDisplayImageDragEnter}
|
|
onDragLeave={onDisplayImageDragLeave}
|
|
onDragOver={onDisplayImageDragOver}
|
|
onDrop={onDisplayImageDrop}
|
|
>
|
|
{displayImageUrl && (
|
|
<div className={uploadAreaTileClass}>
|
|
<Image src={displayImageUrl} alt="已选择的详情页展示图片" fill unoptimized className="object-cover" />
|
|
</div>
|
|
)}
|
|
<input ref={inputRef} type="file" accept="image/*" onChange={onDisplayImageChange} className="hidden" disabled={disabled} />
|
|
<button type="button" onClick={() => inputRef.current?.click()} className={displayImageUrl ? uploadAreaButtonClass : uploadAreaEmptyButtonClass} disabled={disabled}>
|
|
<Plus className="h-5 w-5" aria-hidden="true" />
|
|
{displayImageUrl ? '更换展示图片' : '选择展示图片'}
|
|
</button>
|
|
</div>
|
|
<p className={`mt-1.5 ${fieldHintClass}`}>
|
|
{isBrandVI ? '不上传时直接显示 PDF 预览' : '支持拖入图片 · 原图会自动压缩，高图会自动切片'}
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|