New source found from dndbeyond.com

ddb_main/tools/js/CharacterBuilder/containers/pages/DescriptionManage/DescriptionManage.tsx

@@ -1,6 +1,6 @@
 import axios, { Canceler } from "axios";
 import { orderBy } from "lodash";
-import React, { HTMLAttributes, useContext } from "react";
+import React, { FocusEvent, HTMLAttributes, useContext } from "react";
 import { DispatchProp } from "react-redux";
 
 import { LoadingPlaceholder, Select } from "@dndbeyond/character-components/es";
@@ -52,12 +52,12 @@ import { HtmlContent } from "~/components/HtmlContent";
 import { Link } from "~/components/Link";
 import { useSource } from "~/hooks/useSource";
 import { EditorWithDialog } from "~/subApps/builder/components/EditorWithDialog";
+import { InputField } from "~/subApps/builder/components/InputField";
 import { RouteKey } from "~/subApps/builder/constants";
 import {
   ModalData,
   useModalManager,
 } from "~/subApps/builder/contexts/ModalManager";
-import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
 import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
 
 import { toastMessageActions } from "../../../../Shared/actions";
@@ -195,7 +195,7 @@ class CustomBackgroundManager extends React.PureComponent<
               <div className="custom-background-property-value">
                 <input
                   type="text"
-                  defaultValue={name ? name : ""}
+                  defaultValue={name || ""}
                   onBlur={this.handleTextInputBlur.bind(this, "name")}
                 />
               </div>
@@ -204,7 +204,7 @@ class CustomBackgroundManager extends React.PureComponent<
             <div className="custom-background-property custom-background-property-textarea">
               <div className="custom-background-property-value">
                 <textarea
-                  defaultValue={description ? description : ""}
+                  defaultValue={description || ""}
                   onBlur={this.handleTextInputBlur.bind(this, "description")}
                 />
               </div>
@@ -471,35 +471,35 @@ class DescriptionManage extends React.PureComponent<Props, State> {
     dispatch(characterActions.traitSet(traitType, content));
   };
 
-  handleHairChange = (value: string): void => {
+  handleHairChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.hairSet(value));
+    dispatch(characterActions.hairSet(e.target.value));
   };
 
-  handleSkinChange = (value: string): void => {
+  handleSkinChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.skinSet(value));
+    dispatch(characterActions.skinSet(e.target.value));
   };
 
-  handleEyesChange = (value: string): void => {
+  handleEyesChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.eyesSet(value));
+    dispatch(characterActions.eyesSet(e.target.value));
   };
 
-  handleHeightChange = (value: string): void => {
+  handleHeightChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.heightSet(value));
+    dispatch(characterActions.heightSet(e.target.value));
   };
 
-  handleWeightChange = (value: string): void => {
+  handleWeightChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    let parsedValue = HelperUtils.parseInputInt(value);
+    let parsedValue = this.handleTransformValueToNumberOnBlur(e.target.value);
     dispatch(characterActions.weightSet(parsedValue));
   };
 
-  handleAgeChange = (value: string): void => {
+  handleAgeChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    let parsedValue = HelperUtils.parseInputInt(value);
+    let parsedValue = this.handleTransformValueToNumberOnBlur(e.target.value);
     dispatch(characterActions.ageSet(parsedValue));
   };
 
@@ -517,9 +517,9 @@ class DescriptionManage extends React.PureComponent<Props, State> {
     return clampedValue;
   };
 
-  handleGenderChange = (value: string): void => {
+  handleGenderChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.genderSet(value));
+    dispatch(characterActions.genderSet(e.target.value));
   };
 
   handleBackgroundChangePromise = (
@@ -608,9 +608,9 @@ class DescriptionManage extends React.PureComponent<Props, State> {
     dispatch(characterActions.lifestyleSet(HelperUtils.parseInputInt(value)));
   };
 
-  handleFaithChange = (value: string): void => {
+  handleFaithChange = (e: FocusEvent<HTMLInputElement>): void => {
     const { dispatch } = this.props;
-    dispatch(characterActions.faithSet(value));
+    dispatch(characterActions.faithSet(e.target.value));
   };
 
   handleCustomBackgroundSave = (properties: any): void => {
@@ -716,7 +716,7 @@ class DescriptionManage extends React.PureComponent<Props, State> {
               <DetailChoice
                 {...choice}
                 choice={choice}
-                key={choiceId ? choiceId : ""}
+                key={choiceId || ""}
                 options={availableOptions}
                 onChange={this.handleChoiceChange}
                 choiceInfo={choiceInfo}
@@ -1035,7 +1035,7 @@ class DescriptionManage extends React.PureComponent<Props, State> {
         ) : (
           <HtmlContent
             className="description-manage-background-description"
-            html={shortDescription ? shortDescription : ""}
+            html={shortDescription || ""}
             withoutTooltips
           />
         )}
@@ -1325,17 +1325,17 @@ class DescriptionManage extends React.PureComponent<Props, State> {
               {alignmentDescriptionNode}
             </div>
             <div className="description-manage-faith">
-              <FormInputField
+              <InputField
                 label="Faith"
                 initialValue={faith}
                 onBlur={this.handleFaithChange}
-                inputAttributes={
+                maxLength={512}
+                inputProps={
                   {
                     spellCheck: false,
                     autoComplete: "off",
                   } as HTMLAttributes<HTMLInputElement>
                 }
-                maxLength={512}
               />
             </div>
             <div className="description-manage-lifestyle">
@@ -1367,47 +1367,52 @@ class DescriptionManage extends React.PureComponent<Props, State> {
             ]}
             variant="paper"
           >
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Hair"
               initialValue={hair}
               onBlur={this.handleHairChange}
               maxLength={50}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Skin"
               initialValue={skin}
               onBlur={this.handleSkinChange}
               maxLength={50}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Eyes"
               initialValue={eyes}
               onBlur={this.handleEyesChange}
               maxLength={50}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Height"
               initialValue={height}
               onBlur={this.handleHeightChange}
               maxLength={50}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Weight (lbs)"
-              type={"number"}
+              type="number"
               initialValue={weight}
               onBlur={this.handleWeightChange}
-              transformValueOnBlur={this.handleTransformValueToNumberOnBlur}
-              inputAttributes={numberInputAttributes}
+              inputProps={numberInputAttributes}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Age (Years)"
-              type={"number"}
+              type="number"
               initialValue={age}
               onBlur={this.handleAgeChange}
-              transformValueOnBlur={this.handleTransformValueToNumberOnBlur}
-              inputAttributes={numberInputAttributes}
+              inputProps={numberInputAttributes}
             />
-            <FormInputField
+            <InputField
+              className={styles.inputField}
               label="Gender"
               initialValue={gender}
               onBlur={this.handleGenderChange}