Improve Notes TextArea; Improve i18n (#8396)

* Improve Notes TextArea; Improve i18n * Update defaultRows for Discussion Notes Page * Reset on Clear
ohcnetwork · Aug 22, 2024 · a34d9e3 · a34d9e3
1 parent 6c18e2b
commit a34d9e3
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/src/Components/Facility/ConsultationDoctorNotes/index.tsx b/src/Components/Facility/ConsultationDoctorNotes/index.tsx
@@ -15,6 +15,7 @@ import { classNames, isAppleDevice } from "../../../Utils/utils.js";
 import AutoExpandingTextInputFormField from "../../Form/FormFields/AutoExpandingTextInputFormField.js";
 import { PATIENT_NOTES_THREADS } from "../../../Common/constants.js";
 import useAuthUser from "../../../Common/hooks/useAuthUser.js";
+import { t } from "i18next";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -154,14 +155,14 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
           <AutoExpandingTextInputFormField
             id="doctor_consultation_notes"
             maxHeight={160}
-            rows={1}
+            rows={2}
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
             className="w-full grow"
             innerClassName="pr-10"
             errorClassName="hidden"
-            placeholder="Type your Note"
+            placeholder={t("notes_placeholder")}
             disabled={!patientActive}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}

diff --git a/src/Components/Facility/PatientNotesSlideover.tsx b/src/Components/Facility/PatientNotesSlideover.tsx
@@ -15,6 +15,7 @@ import useAuthUser from "../../Common/hooks/useAuthUser";
 import { PATIENT_NOTES_THREADS } from "../../Common/constants.js";
 import useNotificationSubscriptionState from "../../Common/hooks/useNotificationSubscriptionState.js";
 import { Link } from "raviger";
+import { t } from "i18next";
 
 interface PatientNotesProps {
   patientId: string;
@@ -224,14 +225,14 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             <AutoExpandingTextInputFormField
               id="doctor_notes_textarea"
               maxHeight={160}
-              rows={1}
+              rows={2}
               name="note"
               value={noteField}
               onChange={(e) => setNoteField(e.value)}
               className="w-full grow"
               errorClassName="hidden"
               innerClassName="pr-10"
-              placeholder="Type your Note"
+              placeholder={t("notes_placeholder")}
               disabled={!patientActive}
               onFocus={() => setFocused(true)}
               onBlur={() => setFocused(false)}

diff --git a/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx b/src/Components/Form/FormFields/AutoExpandingTextInputFormField.tsx
@@ -8,24 +8,42 @@ type AutoExpandingTextInputFormFieldProps = TextAreaFormFieldProps & {
 const AutoExpandingTextInputFormField = (
   props: AutoExpandingTextInputFormFieldProps,
 ) => {
-  const myref = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   useEffect(() => {
-    if (myref.current == null) return;
-    const text = myref.current.textContent?.split("\n");
-    const len = text?.length || 1;
-    // 46 is height of the textarea when there is only 1 line
-    // getting line height from window
-    const lineHeight =
-      window.getComputedStyle(myref.current).lineHeight.slice(0, -2) || "20";
-    // added 26 for padding (20+26 = 46)
-    const height =
-      Math.min(len * parseInt(lineHeight), (props.maxHeight || 160) - 26) + 26;
-    // 160 is the max height of the textarea if not specified
-    myref.current.style.cssText = "height:" + height + "px";
-  });
-
-  return <TextAreaFormField ref={myref} {...props} />;
+    const resizeTextArea = () => {
+      if (textareaRef.current == null) return;
+
+      // Reset the height to allow shrink on deleting text
+      textareaRef.current.style.height = "auto";
+
+      // Check if the text area is empty, reset to initial height if true
+      if (textareaRef.current.value.trim() === "") {
+        textareaRef.current.style.height = "initial";
+      } else {
+        // Calculate new height based on scroll height, considering maxHeight if provided
+        const newHeight = Math.min(
+          textareaRef.current.scrollHeight,
+          props.maxHeight || 160,
+        );
+        textareaRef.current.style.height = `${newHeight}px`;
+      }
+    };
+
+    resizeTextArea();
+
+    // Add an event listener to handle dynamic resizing as user types
+    textareaRef.current?.addEventListener("input", resizeTextArea);
+
+    const currentRef = textareaRef.current;
+
+    // Cleanup event listener on component unmount
+    return () => {
+      currentRef?.removeEventListener("input", resizeTextArea);
+    };
+  }, [props.maxHeight, props.value]);
+
+  return <TextAreaFormField ref={textareaRef} {...props} />;
 };
 
 export default AutoExpandingTextInputFormField;
diff --git a/src/Components/Patient/PatientNotes.tsx b/src/Components/Patient/PatientNotes.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import * as Notification from "../../Utils/Notifications.js";
 import CareIcon from "../../CAREUI/icons/CareIcon";
-import TextFormField from "../Form/FormFields/TextFormField";
 import ButtonV2 from "../Common/components/ButtonV2";
 import { NonReadOnlyUsers } from "../../Utils/AuthorizeFor";
 import PatientNotesList from "../Facility/PatientNotesList";
@@ -13,6 +12,8 @@ import routes from "../../Redux/api";
 import { PATIENT_NOTES_THREADS } from "../../Common/constants.js";
 import useAuthUser from "../../Common/hooks/useAuthUser.js";
 import { classNames } from "../../Utils/utils.js";
+import AutoExpandingTextInputFormField from "../Form/FormFields/AutoExpandingTextInputFormField.js";
+import { t } from "i18next";
 
 interface PatientNotesProps {
   patientId: any;
@@ -136,14 +137,16 @@ const PatientNotes = (props: PatientNotesProps) => {
         />
 
         <div className="relative mx-4 flex items-center">
-          <TextFormField
+          <AutoExpandingTextInputFormField
+            maxHeight={160}
+            rows={2}
             name="note"
             value={noteField}
             onChange={(e) => setNoteField(e.value)}
-            className="grow"
-            type="text"
+            className="w-full grow"
             errorClassName="hidden"
-            placeholder="Type your Note"
+            innerClassName="pr-10"
+            placeholder={t("notes_placeholder")}
             disabled={!patientActive}
           />
           <ButtonV2

diff --git a/src/Locale/en/Common.json b/src/Locale/en/Common.json
@@ -158,6 +158,7 @@
   "never": "never",
   "notes": "Notes",
   "add_notes": "Add notes",
+  "notes_placeholder": "Type your Notes",
   "optional": "Optional",
   "discontinue": "Discontinue",
   "discontinued": "Discontinued",