fun with middlewares

src/components/BaseInput.jsx

@@ -4,6 +4,7 @@ const BaseInput = ({
   onChangeCallback,
   placeholder = "",
   suffix,
+  inputMode,
   inputWidth = "w-[60px]",
   inputClassName = "",
 }) => {

src/components/LoanPrincipalInput.jsx

@@ -1,15 +1,37 @@
 import BaseInput from "./BaseInput";
+import OnlyDigitsEventMiddleware from "../eventMiddlewares/OnlyDigitsEventMiddleware";
+import MinMaxEventMiddleware from "../eventMiddlewares/MinMaxEventMiddleware";
 
-const LoanPrincipalInput = ({ onChangeCallback, loanPrincipal }) => (
+const LoanPrincipalInput = ({ onChangeCallback, loanPrincipal }) => {
-  <BaseInput
+  const decoratedChangeHandler = (event) => {
-    label="Capital prestado"
+    const digitDecoratedHandler = () => {
-    value={loanPrincipal}
+      OnlyDigitsEventMiddleware({
-    onChangeCallback={onChangeCallback}
+        event: event,
-    suffix="€"
+        next: onChangeCallback,
-    inputWidth="w-[120px]"
+      });
-    placeholder="1000"
+    };
-    inputClassName="placeholder-gray-400"
+
-  />
+    const minMaxDecoratedHandler = MinMaxEventMiddleware({
-);
+      event: event,
+      next: digitDecoratedHandler,
+      min: 0,
+      max: 100_000_000,
+    });
+
+    return minMaxDecoratedHandler;
+  };
+
+  return (
+    <BaseInput
+      label="Capital prestado"
+      value={loanPrincipal}
+      onChangeCallback={decoratedChangeHandler}
+      suffix="€"
+      inputWidth="w-[120px]"
+      placeholder="1000"
+      inputClassName="!placeholder-gray-400"
+    />
+  );
+};
 
 export default LoanPrincipalInput;

src/eventMiddlewares/MinMaxEventMiddleware.js

@@ -0,0 +1,29 @@
+const MinMaxEventMiddleware = ({ event, next, min = null, max = null }) => {
+  const valueNumber = Number(event.target.value);
+
+  if ((min || min === 0) && max) {
+    if (min <= valueNumber && valueNumber <= max) {
+      console.log("min <= valueNumber <= max");
+      next(event);
+    }
+    return;
+  }
+
+  if (min) {
+    console.log("Min");
+    if (min <= valueNumber) {
+      next(event);
+    }
+    return;
+  }
+
+  if (max) {
+    console.log("Max");
+    if (valueNumber <= max) {
+      next(event);
+    }
+    return;
+  }
+};
+
+export default MinMaxEventMiddleware;

src/eventMiddlewares/OnlyDigitsEventMiddleware.js

@@ -0,0 +1,7 @@
+const OnlyDigitsEventMiddleware = ({ event, next }) => {
+  const digitsOnly = event.target.value.replace(/\D/g, "");
+  event.target.value = digitsOnly;
+  next(event);
+};
+
+export default OnlyDigitsEventMiddleware;