diff --git a/src/components/BaseInput.jsx b/src/components/BaseInput.jsx
index 102abed..88384f5 100644
--- a/src/components/BaseInput.jsx
+++ b/src/components/BaseInput.jsx
@@ -4,6 +4,7 @@ const BaseInput = ({
onChangeCallback,
placeholder = "",
suffix,
+ inputMode,
inputWidth = "w-[60px]",
inputClassName = "",
}) => {
diff --git a/src/components/LoanPrincipalInput.jsx b/src/components/LoanPrincipalInput.jsx
index 95b429b..68431fd 100644
--- a/src/components/LoanPrincipalInput.jsx
+++ b/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 }) => {
+ const decoratedChangeHandler = (event) => {
+ const digitDecoratedHandler = () => {
+ OnlyDigitsEventMiddleware({
+ event: event,
+ next: onChangeCallback,
+ });
+ };
+
+ const minMaxDecoratedHandler = MinMaxEventMiddleware({
+ event: event,
+ next: digitDecoratedHandler,
+ min: 0,
+ max: 100_000_000,
+ });
+
+ return minMaxDecoratedHandler;
+ };
+
+ return (
+
+ );
+};
export default LoanPrincipalInput;
diff --git a/src/eventMiddlewares/MinMaxEventMiddleware.js b/src/eventMiddlewares/MinMaxEventMiddleware.js
new file mode 100644
index 0000000..462eb60
--- /dev/null
+++ b/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;
diff --git a/src/eventMiddlewares/OnlyDigitsEventMiddleware.js b/src/eventMiddlewares/OnlyDigitsEventMiddleware.js
new file mode 100644
index 0000000..3e08635
--- /dev/null
+++ b/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;