100 lines
2.7 KiB
JavaScript
100 lines
2.7 KiB
JavaScript
import { useState } from "react";
|
||
import "../../styles/components/AddItemForm.css";
|
||
import SuggestionList from "../items/SuggestionList";
|
||
|
||
export default function AddItemForm({ onAdd, onSuggest, suggestions, buttonText = "Add" }) {
|
||
const [itemName, setItemName] = useState("");
|
||
const [quantity, setQuantity] = useState(1);
|
||
const [showSuggestions, setShowSuggestions] = useState(false);
|
||
|
||
const handleSubmit = (e) => {
|
||
e.preventDefault();
|
||
if (!itemName.trim()) return;
|
||
|
||
onAdd(itemName, quantity);
|
||
setItemName("");
|
||
setQuantity(1);
|
||
};
|
||
|
||
const handleInputChange = (text) => {
|
||
setItemName(text);
|
||
onSuggest(text);
|
||
};
|
||
|
||
const handleSuggestionSelect = (suggestion) => {
|
||
setItemName(suggestion);
|
||
setShowSuggestions(false);
|
||
onSuggest(suggestion); // Trigger button text update
|
||
};
|
||
|
||
const incrementQuantity = () => {
|
||
setQuantity(prev => prev + 1);
|
||
};
|
||
|
||
const decrementQuantity = () => {
|
||
setQuantity(prev => Math.max(1, prev - 1));
|
||
};
|
||
|
||
const isDisabled = !itemName.trim();
|
||
|
||
return (
|
||
<div className="add-item-form-container">
|
||
<form onSubmit={handleSubmit} className="add-item-form">
|
||
<div className="add-item-form-field">
|
||
<input
|
||
type="text"
|
||
className="add-item-form-input"
|
||
placeholder="Enter item name"
|
||
value={itemName}
|
||
onChange={(e) => handleInputChange(e.target.value)}
|
||
onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
|
||
onClick={() => setShowSuggestions(true)}
|
||
/>
|
||
|
||
{showSuggestions && suggestions.length > 0 && (
|
||
<SuggestionList
|
||
suggestions={suggestions}
|
||
onSelect={handleSuggestionSelect}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
<div className="add-item-form-actions">
|
||
<div className="add-item-form-quantity-control">
|
||
<button
|
||
type="button"
|
||
className="quantity-btn quantity-btn-minus"
|
||
onClick={decrementQuantity}
|
||
disabled={quantity <= 1}
|
||
>
|
||
−
|
||
</button>
|
||
<input
|
||
type="number"
|
||
min="1"
|
||
className="add-item-form-quantity-input"
|
||
value={quantity}
|
||
readOnly
|
||
/>
|
||
<button
|
||
type="button"
|
||
className="quantity-btn quantity-btn-plus"
|
||
onClick={incrementQuantity}
|
||
>
|
||
+
|
||
</button>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className={`add-item-form-submit ${isDisabled ? 'disabled' : ''}`}
|
||
disabled={isDisabled}
|
||
>
|
||
{buttonText}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
);
|
||
}
|