diff --git a/src/components/encounter/ohri-encounter-form.component.tsx b/src/components/encounter/ohri-encounter-form.component.tsx index 258c6da0..de3bc81b 100644 --- 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; - isCollapsed: boolean; + isFormExpanded: boolean; sessionMode: SessionMode; scrollablePages: Set; handlers: Map; @@ -60,7 +60,7 @@ export const OHRIEncounterForm: React.FC = ({ location, visit, values, - isCollapsed, + isFormExpanded, sessionMode, scrollablePages, workspaceLayout, @@ -651,7 +651,7 @@ export const OHRIEncounterForm: React.FC = ({ 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 = ({ 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 index 24f6682d..73c75b8b 100644 --- a/src/components/page/ohri-form-page.tsx +++ b/src/components/page/ohri-form-page.tsx @@ -1,25 +1,20 @@ -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 ( - handleEnter(newLabel)} topOffset="50%" bottomOffset="60%"> -
+ setSelectedPage(trimmedLabel)} topOffset="50%" bottomOffset="60%"> +

{page.label}

@@ -27,7 +22,7 @@ function OHRIFormPage({ page, onFieldChange, setSelectedPage, isCollapsed }) { {visibleSections.map(section => (
diff --git a/src/ohri-form.component.tsx b/src/ohri-form.component.tsx index 204faeb0..9353b27e 100644 --- a/src/ohri-form.component.tsx +++ b/src/ohri-form.component.tsx @@ -107,7 +107,7 @@ const OHRIForm: React.FC = ({ const [initialValues, setInitialValues] = useState({}); const [scrollablePages, setScrollablePages] = useState(new Set()); const [selectedPage, setSelectedPage] = useState(''); - const [collapsed, setCollapsed] = useState(true); + const [isFormExpanded, setIsFormExpanded] = useState(undefined); const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [pagesWithErrors, setPagesWithErrors] = useState([]); @@ -134,7 +134,7 @@ const OHRIForm: React.FC = ({ ), meta: { handleCollapse: (value: boolean) => { - setCollapsed(value); + setIsFormExpanded(value); }, }, }; @@ -290,7 +290,7 @@ const OHRIForm: React.FC = ({ location={location} visit={visit} values={props.values} - isCollapsed={collapsed} + isFormExpanded={isFormExpanded} sessionMode={sessionMode} scrollablePages={scrollablePages} setAllInitialValues={setInitialValues}