(refactor) Add background color on scrolling sticky results menu

openmrs · Sep 30, 2024 · 5488af2 · 5488af2
1 parent b07de64
commit 5488af2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 6 deletions.
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
@@ -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<ResultsViewerProps> = ({ 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<ResultsViewerProps> = ({ patientUuid, basePath, lo
   if (isTablet) {
     return (
       <div className={styles.resultsContainer}>
-        <div className={styles.resultsHeader}>
+        <div
+          ref={headerRef}
+          id="data-element-sticky"
+          className={classNames(styles.resultsHeader, { [styles.stickyResultsHeader]: showStickyHeader })}
+        >
           <h4 style={{ flexGrow: 1 }}>{`${t('results', 'Results')} ${
             totalResultsCount ? `(${totalResultsCount})` : ''
           }`}</h4>
@@ -123,7 +156,11 @@ const ResultsViewer: React.FC<ResultsViewerProps> = ({ patientUuid, basePath, lo
 
   return (
     <div className={styles.resultsContainer}>
-      <div className={styles.resultsHeader}>
+      <div
+        ref={headerRef}
+        id="data-element-sticky"
+        className={classNames(styles.resultsHeader, { [styles.stickyResultsHeader]: showStickyHeader })}
+      >
         <div className={classNames(styles.leftSection, styles.leftHeaderSection)}>
           <h4>{t('tests', 'Tests')}</h4>
           <Button

diff --git a/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss b/packages/esm-patient-labs-app/src/test-results/results-viewer/results-viewer.scss
@@ -41,11 +41,16 @@
 
 .resultsHeader {
   padding: layout.$spacing-03 0;
-  z-index: 10;
+  z-index: 100;
   background-color: $openmrs-background-grey;
-  position: sticky;
-  top: layout.$spacing-09;
+  top: 2.8rem;
   display: flex;
+  position: sticky;
+}
+
+.stickyResultsHeader {
+  @extend .resultsHeader;
+  border-bottom: 1px solid #e1e1e1;
 }
 
 .leftHeaderSection {