diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx index 44832ea2a..9a3fb6a46 100644 --- a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx +++ b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.extension.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useContext, useState } from 'react'; +import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'; import classNames from 'classnames'; import { type TFunction, useTranslation } from 'react-i18next'; import { useParams } from 'react-router-dom'; @@ -15,6 +15,7 @@ import Trendline from '../trendline/trendline.component'; import type { ConfigObject } from '../../config-schema'; import styles from './results-viewer.scss'; import { type viewOpts } from '../../types'; +import debounce from 'lodash-es/debounce'; type panelOpts = 'tree' | 'panel'; @@ -65,6 +66,34 @@ const ResultsViewer: React.FC = ({ patientUuid, basePath, lo const isExpanded = view === 'full'; const trendlineView = testUuid && type === 'trendline'; const responsiveSize = isTablet ? 'lg' : 'md'; + const [showStickyHeader, setShowStickyHeader] = useState(false); + const headerRef = useRef(null); + const headerPositionRef = useRef(0); + + useEffect(() => { + const setInitialPosition = () => { + if (headerRef.current) { + headerPositionRef.current = headerRef.current.getBoundingClientRect().top + window.scrollY; + } + }; + + setInitialPosition(); + + const handleScroll = () => { + if (headerRef.current) { + const scrollPosition = window.scrollY; + setShowStickyHeader(scrollPosition > headerPositionRef.current); + } + }; + + window.addEventListener('scroll', handleScroll); + window.addEventListener('resize', setInitialPosition); + + return () => { + window.removeEventListener('scroll', handleScroll); + window.removeEventListener('resize', setInitialPosition); + }; + }, []); const navigateBackFromTrendlineView = useCallback(() => { navigate({ @@ -75,7 +104,11 @@ const ResultsViewer: React.FC = ({ patientUuid, basePath, lo if (isTablet) { return (
-
+

{`${t('results', 'Results')} ${ totalResultsCount ? `(${totalResultsCount})` : '' }`}

@@ -123,7 +156,11 @@ const ResultsViewer: React.FC = ({ patientUuid, basePath, lo return (
-
+

{t('tests', 'Tests')}