100 lines
2.8 KiB
JavaScript
100 lines
2.8 KiB
JavaScript
import { useRef, useState } from "react";
|
||
import "../../styles/AddImageModal.css";
|
||
|
||
export default function AddImageModal({ itemName, onClose, onAddImage }) {
|
||
const [selectedImage, setSelectedImage] = useState(null);
|
||
const [imagePreview, setImagePreview] = useState(null);
|
||
const cameraInputRef = useRef(null);
|
||
const galleryInputRef = useRef(null);
|
||
|
||
const handleFileSelect = (e) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
setSelectedImage(file);
|
||
const reader = new FileReader();
|
||
reader.onloadend = () => {
|
||
setImagePreview(reader.result);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const handleCameraClick = () => {
|
||
cameraInputRef.current?.click();
|
||
};
|
||
|
||
const handleGalleryClick = () => {
|
||
galleryInputRef.current?.click();
|
||
};
|
||
|
||
const handleConfirm = () => {
|
||
if (selectedImage) {
|
||
onAddImage(selectedImage);
|
||
}
|
||
};
|
||
|
||
const removeImage = () => {
|
||
setSelectedImage(null);
|
||
setImagePreview(null);
|
||
};
|
||
|
||
return (
|
||
<div className="modal-overlay" onClick={onClose}>
|
||
<div className="modal" onClick={(e) => e.stopPropagation()}>
|
||
<h2 className="modal-title">Add Image</h2>
|
||
<p className="text-center mb-4" style={{ color: 'var(--color-text-secondary)', fontSize: '0.95em' }}>
|
||
There's no image for <strong className="text-primary">"{itemName}"</strong> yet. Add a new image?
|
||
</p>
|
||
|
||
{!imagePreview ? (
|
||
<div className="add-image-options">
|
||
<button onClick={handleCameraClick} className="add-image-option-btn camera">
|
||
📷 Use Camera
|
||
</button>
|
||
<button onClick={handleGalleryClick} className="add-image-option-btn gallery">
|
||
🖼️ Choose from Gallery
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="add-image-preview-container">
|
||
<div className="add-image-preview">
|
||
<img src={imagePreview} alt="Preview" />
|
||
<button type="button" onClick={removeImage} className="add-image-remove">
|
||
×
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<input
|
||
ref={cameraInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
capture="environment"
|
||
onChange={handleFileSelect}
|
||
style={{ display: "none" }}
|
||
/>
|
||
|
||
<input
|
||
ref={galleryInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleFileSelect}
|
||
style={{ display: "none" }}
|
||
/>
|
||
|
||
<div className="modal-actions">
|
||
<button onClick={onClose} className="btn btn-outline flex-1">
|
||
Cancel
|
||
</button>
|
||
{imagePreview && (
|
||
<button onClick={handleConfirm} className="btn btn-success flex-1">
|
||
Add Image
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|