115 lines
2.7 KiB
JavaScript
115 lines
2.7 KiB
JavaScript
import React, { useRef, useEffect, useState } from "react";
|
|
import styles from "./ItemType.module.css";
|
|
|
|
export default function ItemType({
|
|
onClick,
|
|
onCreate,
|
|
blank,
|
|
name,
|
|
imageUrl,
|
|
selected,
|
|
rectangular,
|
|
}) {
|
|
const inputRef = useRef(null);
|
|
const [namee, setName] = useState(name);
|
|
const [selectedImage, setSelectedImage] = useState(null);
|
|
const [previewUrl, setPreviewUrl] = useState(imageUrl);
|
|
|
|
// Effect to update local state when name prop changes
|
|
useEffect(() => {
|
|
setName(name);
|
|
}, [name]);
|
|
|
|
useEffect(() => {
|
|
if (blank && inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [blank]);
|
|
|
|
useEffect(() => {
|
|
if (selectedImage) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
onClick(reader.result, selectedImage);
|
|
};
|
|
reader.readAsDataURL(selectedImage);
|
|
} else {
|
|
setPreviewUrl(imageUrl);
|
|
}
|
|
}, [selectedImage, imageUrl]);
|
|
|
|
const handleImageChange = (e) => {
|
|
setSelectedImage(e.target.files[0]);
|
|
console.log(e.target.files[0]);
|
|
e.target.value = null; // This clears the input
|
|
};
|
|
|
|
const handleNameChange = (e) => {
|
|
setName(e.target.value);
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
if (!selectedImage) {
|
|
console.error("No image selected");
|
|
return;
|
|
}
|
|
|
|
onCreate(namee, selectedImage);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={
|
|
styles[
|
|
namee
|
|
? "item-type"
|
|
: rectangular
|
|
? "item-type-rectangular"
|
|
: "item-type-nomargin"
|
|
]
|
|
}
|
|
style={{ zIndex: blank ? 301 : "inherit" }}
|
|
>
|
|
<div
|
|
onClick={
|
|
rectangular ? (blank ? null : () => onClick(imageUrl)) : onClick
|
|
}
|
|
className={styles["item-type-rect"]}
|
|
style={{
|
|
top: selected ? "-10px" : "initial",
|
|
}}
|
|
>
|
|
<img
|
|
src={previewUrl}
|
|
alt={namee}
|
|
className={styles["item-type-image"]}
|
|
/>
|
|
{blank && rectangular && (
|
|
<div className={styles["item-type-image-container"]}>
|
|
<input
|
|
type="file"
|
|
accept=".png, .jpg, .jpeg"
|
|
className={styles["item-type-image-input"]}
|
|
onChange={handleImageChange}
|
|
id="image-input"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{!rectangular && !blank && (
|
|
<input
|
|
ref={inputRef}
|
|
className={`${styles["item-type-name"]} ${styles.noborder}`}
|
|
value={namee}
|
|
onChange={handleNameChange}
|
|
disabled={true}
|
|
style={{
|
|
top: selected ? "-5px" : "initial",
|
|
borderBottom: selected ? "1px solid #000" : "none",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|