Replaced appropriate number fields with calculator field. BOD-398

client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx

@@ -1,31 +1,19 @@
-import { Input, Popover } from "antd";
-import React, { useEffect, useState, forwardRef } from "react";
+import { InputNumber, Popover } from "antd";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 
 const FormInputNUmberCalculator = (
-  { value: formValue, onChange: formOnChange },
-  ref
+  { value: formValue, onChange: formOnChange, ...restProps },
+  refProp
 ) => {
   const [value, setValue] = useState(formValue);
   const [total, setTotal] = useState(0);
   const [history, setHistory] = useState([]);
 
-  const handleChange = (e) => {
-    const key = e.target.value;
-    switch (key) {
-      case "/":
-      case "*":
-      case "+":
-      case "-":
-        return;
-      default:
-        setValue(key);
-        return;
-    }
-  };
+  const ref = useRef(null);
 
   const handleKeyDown = (e) => {
+    console.log("e :>> ", e.currentTarget.value);
     const { key } = e;
-
     let action;
     switch (key) {
       case "/":
@@ -38,11 +26,13 @@ const FormInputNUmberCalculator = (
         action = "=";
         break;
       default:
+        setValue(e.currentTarget.value);
         return;
     }
-
     const val = parseFloat(value);
     setValue(null);
+    ref.current.blur();
+    ref.current.focus();
     if (!isNaN(val)) {
       setHistory([...history, val, action]);
     }
@@ -82,7 +72,12 @@ const FormInputNUmberCalculator = (
         }
       }, 0);
       setTotal(subTotal);
-      if (history[history.length - 1] === "=") setValue(subTotal);
+      if (history[history.length - 1] === "=") {
+        setValue(subTotal);
+        ref.current.blur();
+        ref.current.focus();
+        setHistory([]);
+      }
     }
   }, [history]);
 
@@ -101,13 +96,13 @@ const FormInputNUmberCalculator = (
   return (
     <div>
       <Popover content={popContent} visible={history.length > 0}>
-        <Input
+        <InputNumber
           ref={ref}
           value={value}
           defaultValue={value}
-          onChange={handleChange}
           onKeyDown={handleKeyDown}
           onBlur={(e) => setHistory([])}
+          {...restProps}
         />
       </Popover>
     </div>