130 lines
3.6 KiB
TypeScript
130 lines
3.6 KiB
TypeScript
import { useRef, useState, useCallback, ReactNode, forwardRef, useImperativeHandle } from "react";
|
|
import { Button } from "./Button";
|
|
import uploadAreaStyles from "~/styles/components/upload-area.css?url";
|
|
|
|
interface UploadAreaProps {
|
|
onFilesSelected: (files: FileList) => void;
|
|
className?: string;
|
|
accept?: string;
|
|
multiple?: boolean;
|
|
icon?: string;
|
|
buttonText?: string;
|
|
mainText?: string;
|
|
tipText?: ReactNode;
|
|
disabled?: boolean;
|
|
shouldPreventFileSelect?: boolean;
|
|
}
|
|
|
|
export interface UploadAreaRef {
|
|
resetFileInput: () => void;
|
|
}
|
|
|
|
export function links() {
|
|
return [{ rel: "stylesheet", href: uploadAreaStyles }];
|
|
}
|
|
|
|
export const UploadArea = forwardRef<UploadAreaRef, UploadAreaProps>(({
|
|
onFilesSelected,
|
|
className = "",
|
|
accept = "",
|
|
multiple = false,
|
|
icon = "ri-upload-cloud-2-line",
|
|
buttonText = "选择文件",
|
|
mainText = "点击或拖拽文件到此区域上传",
|
|
tipText = "",
|
|
disabled = false,
|
|
shouldPreventFileSelect = false
|
|
}, ref) => {
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [isDragOver, setIsDragOver] = useState(false);
|
|
|
|
const resetFileInput = useCallback(() => {
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
}, []);
|
|
|
|
// 暴露resetFileInput方法给父组件
|
|
useImperativeHandle(ref, () => ({
|
|
resetFileInput
|
|
}));
|
|
|
|
const handleClick = useCallback(() => {
|
|
if (!disabled && !shouldPreventFileSelect && fileInputRef.current) {
|
|
fileInputRef.current.click();
|
|
}
|
|
}, [disabled, shouldPreventFileSelect]);
|
|
|
|
const handleFileChange = useCallback(() => {
|
|
if (fileInputRef.current?.files?.length) {
|
|
onFilesSelected(fileInputRef.current.files);
|
|
}
|
|
}, [onFilesSelected]);
|
|
|
|
const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
if (!disabled && !shouldPreventFileSelect) {
|
|
setIsDragOver(true);
|
|
}
|
|
}, [disabled, shouldPreventFileSelect]);
|
|
|
|
const handleDragLeave = useCallback(() => {
|
|
setIsDragOver(false);
|
|
}, []);
|
|
|
|
const handleDrop = useCallback((e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
setIsDragOver(false);
|
|
|
|
if (!disabled && !shouldPreventFileSelect && e.dataTransfer.files.length > 0) {
|
|
onFilesSelected(e.dataTransfer.files);
|
|
}
|
|
}, [disabled, shouldPreventFileSelect, onFilesSelected]);
|
|
|
|
const handleKeyDown = useCallback((e: React.KeyboardEvent<HTMLDivElement>) => {
|
|
if ((e.key === 'Enter' || e.key === ' ') && !disabled && !shouldPreventFileSelect) {
|
|
e.preventDefault();
|
|
handleClick();
|
|
}
|
|
}, [handleClick, disabled, shouldPreventFileSelect]);
|
|
|
|
return (
|
|
<div
|
|
className={`upload-area ${isDragOver ? 'dragover' : ''} ${disabled ? 'disabled' : ''} ${className}`}
|
|
onClick={handleClick}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
onKeyDown={handleKeyDown}
|
|
role="button"
|
|
tabIndex={disabled ? -1 : 0}
|
|
aria-label="上传文件区域"
|
|
>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
style={{ display: 'none' }}
|
|
onChange={handleFileChange}
|
|
accept={accept}
|
|
multiple={multiple}
|
|
disabled={disabled}
|
|
/>
|
|
<i className={`${icon} upload-icon`} aria-hidden="true"></i>
|
|
<div className="upload-text">{mainText}</div>
|
|
{tipText && <p className="upload-tip mb-2">{tipText}</p>}
|
|
<Button
|
|
type="primary"
|
|
icon="ri-file-upload-line"
|
|
disabled={disabled}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleClick();
|
|
}}
|
|
>
|
|
{buttonText}
|
|
</Button>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
UploadArea.displayName = "UploadArea";
|