New source found from dndbeyond.com

ddb_main/subApps/builder/components/HpManageModal/HpManageModal.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { FC, HTMLAttributes, useMemo, useState } from "react";
+import { FC, FocusEvent, useMemo, useState } from "react";
 import { useDispatch } from "react-redux";
 
 import {
@@ -19,8 +19,8 @@ import {
   HP_BONUS_VALUE,
   HP_OVERRIDE_MAX_VALUE,
 } from "~/subApps/sheet/constants";
-import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
 
+import { InputField } from "../InputField";
 import styles from "./styles.module.css";
 
 export interface HpManageModalProps
@@ -65,52 +65,55 @@ export const HpManageModal: FC<HpManageModalProps> = ({
     reset();
   };
 
-  const transformBaseHp = (value: string): number => {
+  const handleBaseHp = (e: FocusEvent<HTMLInputElement>) => {
     let parsedNumber = HelperUtils.parseInputInt(
-      value,
+      e.target.value,
       RuleDataUtils.getMinimumHpTotal(ruleData)
     );
-    return HelperUtils.clampInt(
+
+    const clampedValue = HelperUtils.clampInt(
       parsedNumber,
       RuleDataUtils.getMinimumHpTotal(ruleData),
       HP_BASE_MAX_VALUE
     );
+
+    setBaseHp(clampedValue);
   };
 
-  const transformBonusHp = (value: string): number | null => {
-    let parsedNumber = HelperUtils.parseInputInt(value);
-    if (parsedNumber === null) {
-      return parsedNumber;
-    }
-    return HelperUtils.clampInt(
+  const handleBonusHp = (e: FocusEvent<HTMLInputElement>) => {
+    let parsedNumber = HelperUtils.parseInputInt(e.target.value);
+
+    if (parsedNumber === null) return parsedNumber;
+
+    const clampedValue = HelperUtils.clampInt(
       parsedNumber,
       HP_BONUS_VALUE.MIN,
       HP_BONUS_VALUE.MAX
     );
+
+    setBonusHp(clampedValue);
   };
 
-  const transformOverrideHp = (value: string): number | null => {
-    let parsedNumber = HelperUtils.parseInputInt(value, null);
+  const handleOverrideHp = (e: FocusEvent<HTMLInputElement>) => {
+    let parsedNumber = HelperUtils.parseInputInt(e.target.value, null);
+
     if (parsedNumber === null) {
+      setOverrideHp(null);
       return parsedNumber;
     }
-    return HelperUtils.clampInt(
+
+    const clampedValue = HelperUtils.clampInt(
       parsedNumber,
       RuleDataUtils.getMinimumHpTotal(ruleData)
     );
-  };
 
-  const handleOverrideHpUpdate = (value: number | null): void => {
-    const newOverride =
-      value === null
-        ? null
-        : HelperUtils.clampInt(
-            value,
-            RuleDataUtils.getMinimumHpTotal(ruleData),
-            HP_OVERRIDE_MAX_VALUE
-          );
+    const clampedOverride = HelperUtils.clampInt(
+      clampedValue,
+      RuleDataUtils.getMinimumHpTotal(ruleData),
+      HP_OVERRIDE_MAX_VALUE
+    );
 
-    setOverrideHp(newOverride);
+    setOverrideHp(clampedOverride);
   };
 
   const totalHp = useMemo(() => {
@@ -148,35 +151,33 @@ export const HpManageModal: FC<HpManageModalProps> = ({
               <span className={styles.baseHpValue}>{baseHp}</span>
             </p>
           ) : (
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Rolled HP"
               initialValue={baseHp}
               type="number"
-              onBlur={(value) => setBaseHp(value as number)}
-              transformValueOnBlur={transformBaseHp}
+              onBlur={handleBaseHp}
             />
           )}
-          <FormInputField
+          <InputField
+            className={styles.inputField}
             label="HP Modifier"
             initialValue={bonusHp}
             type="number"
-            placeholder={"--"}
-            onBlur={(value) => setBonusHp(value as number)}
-            transformValueOnBlur={transformBonusHp}
+            placeholder="--"
+            onBlur={handleBonusHp}
           />
-          <FormInputField
-            inputAttributes={
-              {
-                min: RuleDataUtils.getMinimumHpTotal(ruleData),
-                max: HP_OVERRIDE_MAX_VALUE,
-              } as HTMLAttributes<HTMLInputElement>
-            }
+          <InputField
+            className={styles.inputField}
             label="Override HP"
             initialValue={overrideHp}
             type="number"
             placeholder={"--"}
-            onBlur={handleOverrideHpUpdate}
-            transformValueOnBlur={transformOverrideHp}
+            inputProps={{
+              min: RuleDataUtils.getMinimumHpTotal(ruleData),
+              max: HP_OVERRIDE_MAX_VALUE,
+            }}
+            onBlur={handleOverrideHp}
           />
         </div>