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;