webseite-react-php/react-app/src/components/inputs/InputAmount.jsx

@@ -0,0 +1,67 @@
+// 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;