95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
import React, { useState, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import styles from './UploadPhotoBlock.module.css';
|
|
import { getTranslation } from '../../constants/translations';
|
|
|
|
interface UploadPhotoBlockProps {
|
|
onPhotoSelect?: (file: File) => void;
|
|
previewUrl?: string;
|
|
}
|
|
|
|
const UploadPhotoBlock: React.FC<UploadPhotoBlockProps> = ({ onPhotoSelect, previewUrl }) => {
|
|
const navigate = useNavigate();
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
|
|
const handleFileSelect = (file: File) => {
|
|
if (file && file.type.startsWith('image/')) {
|
|
// Очищаем предыдущие данные изображения при загрузке нового
|
|
localStorage.removeItem('stickerPreviewUrl');
|
|
localStorage.removeItem('stickerImageData');
|
|
|
|
onPhotoSelect?.(file);
|
|
navigate('/crop-photo', { state: { file } });
|
|
}
|
|
};
|
|
|
|
const handleClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragging(false);
|
|
|
|
const file = e.dataTransfer.files[0];
|
|
if (file) {
|
|
handleFileSelect(file);
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
setIsDragging(true);
|
|
};
|
|
|
|
const handleDragLeave = () => {
|
|
setIsDragging(false);
|
|
};
|
|
|
|
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
handleFileSelect(file);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div
|
|
className={`${styles.uploadArea} ${isDragging ? styles.dragging : ''} ${previewUrl ? styles.hasPreview : ''}`}
|
|
onClick={handleClick}
|
|
onDrop={handleDrop}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
>
|
|
{previewUrl ? (
|
|
<div className={styles.preview}>
|
|
<img src={previewUrl} alt={getTranslation('preview_alt')} className={styles.previewImage} />
|
|
<div className={styles.changeOverlay}>
|
|
<span className={styles.changeText}>{getTranslation('change_photo')}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className={styles.icon}>📷</div>
|
|
<div className={styles.text}>
|
|
<span className={styles.title}>{getTranslation('upload_photo_block_title')}</span>
|
|
<span className={styles.subtitle}>{getTranslation('upload_photo_block_subtitle')}</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={handleFileChange}
|
|
className={styles.fileInput}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UploadPhotoBlock;
|