Pickup section.isExpanded (#82)

openmrs · May 23, 2023 · fd804a6 · fd804a6
1 parent c2f52a2
commit fd804a6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 18 deletions.
diff --git a/src/components/encounter/ohri-encounter-form.component.tsx b/src/components/encounter/ohri-encounter-form.component.tsx
@@ -37,7 +37,7 @@ interface OHRIEncounterFormProps {
   location: SessionLocation;
   visit?: Visit;
   values: Record<string, any>;
-  isCollapsed: boolean;
+  isFormExpanded: boolean;
   sessionMode: SessionMode;
   scrollablePages: Set<OHRIFormPageProps>;
   handlers: Map<string, FormSubmissionHandler>;
@@ -60,7 +60,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
   location,
   visit,
   values,
-  isCollapsed,
+  isFormExpanded,
   sessionMode,
   scrollablePages,
   workspaceLayout,
@@ -651,7 +651,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
               location={location}
               visit={visit}
               values={values}
-              isCollapsed={isCollapsed}
+              isFormExpanded={isFormExpanded}
               sessionMode={sessionMode}
               scrollablePages={scrollablePages}
               setAllInitialValues={setAllInitialValues}
@@ -672,7 +672,7 @@ export const OHRIEncounterForm: React.FC<OHRIEncounterFormProps> = ({
             page={page}
             onFieldChange={onFieldChange}
             setSelectedPage={setSelectedPage}
-            isCollapsed={isCollapsed}
+            isFormExpanded={isFormExpanded}
             key={index}
           />
         );

diff --git a/src/components/page/ohri-form-page.tsx b/src/components/page/ohri-form-page.tsx
@@ -1,33 +1,28 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Accordion, AccordionItem } from '@carbon/react';
 import { Waypoint } from 'react-waypoint';
 import { isTrue } from '../../utils/boolean-utils';
 import OHRIFormSection from '../section/ohri-form-section.component';
 import styles from './ohri-form-page.scss';
 
-function OHRIFormPage({ page, onFieldChange, setSelectedPage, isCollapsed }) {
-  let newLabel = page.label.replace(/\s/g, '');
-
-  const handleEnter = elementID => {
-    setSelectedPage(elementID);
-  };
-
+function OHRIFormPage({ page, onFieldChange, setSelectedPage, isFormExpanded }) {
+  const trimmedLabel = useMemo(() => page.label.replace(/\s/g, ''), [page.label]);
   const visibleSections = page.sections.filter(section => {
     const hasVisibleQuestions = section.questions.some(question => !isTrue(question.isHidden));
     return !isTrue(section.isHidden) && hasVisibleQuestions;
   });
 
   return (
-    <Waypoint onEnter={() => handleEnter(newLabel)} topOffset="50%" bottomOffset="60%">
-      <div id={newLabel} className={styles.pageContent}>
+    <Waypoint onEnter={() => setSelectedPage(trimmedLabel)} topOffset="50%" bottomOffset="60%">
+      <div id={trimmedLabel} className={styles.pageContent}>
         <div className={styles.pageHeader}>
           <p className={styles.pageTitle}>{page.label}</p>
         </div>
         <Accordion>
           {visibleSections.map(section => (
             <AccordionItem
               title={section.label}
-              open={isCollapsed}
+              open={isFormExpanded !== undefined ? isFormExpanded : isTrue(section.isExpanded)}
               className={styles.sectionContent}
               key={`section-${section.id}`}>
               <div className={styles.formSection}>

diff --git a/src/ohri-form.component.tsx b/src/ohri-form.component.tsx
@@ -107,7 +107,7 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
   const [initialValues, setInitialValues] = useState({});
   const [scrollablePages, setScrollablePages] = useState(new Set<OHRIFormPageProps>());
   const [selectedPage, setSelectedPage] = useState('');
-  const [collapsed, setCollapsed] = useState(true);
+  const [isFormExpanded, setIsFormExpanded] = useState<boolean | undefined>(undefined);
   const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [pagesWithErrors, setPagesWithErrors] = useState([]);
@@ -134,7 +134,7 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
       ),
       meta: {
         handleCollapse: (value: boolean) => {
-          setCollapsed(value);
+          setIsFormExpanded(value);
         },
       },
     };
@@ -290,7 +290,7 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
                         location={location}
                         visit={visit}
                         values={props.values}
-                        isCollapsed={collapsed}
+                        isFormExpanded={isFormExpanded}
                         sessionMode={sessionMode}
                         scrollablePages={scrollablePages}
                         setAllInitialValues={setInitialValues}