68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
// import { useState } from 'react';
|
|
import { FaMinus, FaPlus } from 'react-icons/fa6';
|
|
// npm install react-icons | Auf der npm Seite mit --save, ist nicht mehr nötig
|
|
const InputAmount = (props) => {
|
|
const { amount = 0, max = 100, min = -100 } = props;
|
|
// const [amount, setAmount] = useState(props.amount || 0);
|
|
|
|
// EventHandlers ================
|
|
const handleChange = (e) => {
|
|
const inputValue = e.target.value;
|
|
const numericRegExp = new RegExp(/^-?\d*$/); // regular expression for numbers (including optional minus sign)
|
|
|
|
if (!numericRegExp.test(inputValue)) return;
|
|
// setAmount(inputValue);
|
|
props.onHandleAmount(inputValue);
|
|
};
|
|
const handleClickDec = (e) => {
|
|
// Guard
|
|
if (amount < min) return;
|
|
|
|
props.onHandleAmount(amount - 1);
|
|
// setAmount((prevState) => prevState - 1);
|
|
};
|
|
|
|
const handleClickInc = (e) => {
|
|
// Guard
|
|
if (amount > max) return;
|
|
|
|
// setAmount((prevState) => prevState + 1);
|
|
props.onHandleAmount(amount + 1);
|
|
};
|
|
|
|
return (
|
|
<div className="m-input-amount input-amount">
|
|
<div className="input-group mb-3">
|
|
<span className="input-group-text">
|
|
<button
|
|
className="btn btn-dark button-decrease"
|
|
aria-label="Decrease Amount"
|
|
onClick={handleClickDec}
|
|
disabled={amount <= min}>
|
|
<FaMinus />
|
|
</button>
|
|
</span>
|
|
<input
|
|
type="number"
|
|
name="amount"
|
|
placeholder="0"
|
|
aria-label="Amount"
|
|
value={amount}
|
|
className="form-control input-amount"
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="input-group-text">
|
|
<button
|
|
className="btn btn-dark button-increase"
|
|
aria-label="Increase Amount"
|
|
onClick={handleClickInc}
|
|
disabled={amount >= max}>
|
|
<FaPlus />
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default InputAmount;
|