fix comments 20-11

Author: SharglutDev

ui-manchette-with-spacetimechart/src/stories/base-with-waypoint-menu.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unresolved */
 import React, { useRef, useState } from 'react';
 
 import { EyeClosed, Telescope } from '@osrd-project/ui-icons';
@@ -34,9 +33,11 @@ const ManchetteWithSpaceTimeWrapper = ({
   const manchetteWithSpaceTimeChartRef = useRef<HTMLDivElement>(null);
 
   const [activeWaypointId, setActiveWaypointPointId] = useState<string>();
-  const [activeWaypointRef, setActiveWaypointRef] = useState<React.RefObject<HTMLDivElement>>();
+  // const [activeWaypointRef, setActiveWaypointRef] = useState<React.RefObject<HTMLDivElement>>();
 
-  const isElementInView = useElementInView(activeWaypointRef, manchetteWithSpaceTimeChartRef);
+  // const isElementInView = useElementInView(activeWaypointRef, manchetteWithSpaceTimeChartRef, {
+  //   rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+  // });
 
   const menuItems: MenuItem[] = [
     {
@@ -58,11 +59,11 @@ const ManchetteWithSpaceTimeWrapper = ({
   ];
 
   const handleWaypointClick = (
-    waypointId: string,
-    waypointRef: React.RefObject<HTMLDivElement>
+    waypointId: string
+    // waypointRef: React.RefObject<HTMLDivElement>
   ) => {
     setActiveWaypointPointId(waypointId);
-    setActiveWaypointRef(waypointRef);
+    // setActiveWaypointRef(waypointRef);
   };
 
   const { manchetteProps, spaceTimeChartProps, handleScroll } = useManchettesWithSpaceTimeChart(
@@ -93,7 +94,8 @@ const ManchetteWithSpaceTimeWrapper = ({
           waypointMenuData={{
             activeWaypointId,
             menu: <Menu items={menuItems} />,
-            isWaypointInView: isElementInView,
+            // isWaypointInView: isElementInView,
+            scrollableParentRef: manchetteWithSpaceTimeChartRef,
           }}
         />
         <div

ui-manchette-with-spacetimechart/src/stories/useElementInView.ts

@@ -1,7 +1,4 @@
 import { useState, useEffect, type RefObject } from 'react';
-
-const MANCHETTE_ACTIONS_HEIGHT = '-40px';
-
 /**
  * Check if an element is in the viewport of a container
  * @param ref the element we want to observe
@@ -16,7 +13,7 @@ const useElementInView = <T extends HTMLElement>(
   containerRef?: RefObject<HTMLElement>,
   options: IntersectionObserverInit = {
     threshold: 1,
-    rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+    rootMargin: `0px`,
   }
 ): boolean => {
   const [isInView, setIsInView] = useState(false);

ui-manchette/src/components/Waypoint.tsx

@@ -5,23 +5,30 @@ import cx from 'classnames';
 import { type InteractiveWaypoint } from '../types';
 import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
+import useElementInView from '../hooks/useElementInView';
+
+const MANCHETTE_ACTIONS_HEIGHT = '-40px';
 
 type WaypointProps = {
   waypoint: InteractiveWaypoint;
   isActive: boolean;
   waypointMenu?: React.ReactNode;
-  waypointsContainerRef: React.RefObject<HTMLDivElement>;
-  isWaypointInView?: boolean;
+  scrollableParentRef?: React.RefObject<HTMLElement>;
 };
 
 const Waypoint = ({
   waypoint: { name, secondaryCode, id, position, display, onClick },
   isActive,
   waypointMenu,
-  isWaypointInView,
+  scrollableParentRef,
 }: WaypointProps) => {
   const waypointRef = useRef<HTMLDivElement>(null);
 
+  const isWaypointInView = useElementInView(waypointRef, scrollableParentRef, {
+    rootMargin: `0px 0px ${MANCHETTE_ACTIONS_HEIGHT} 0px`,
+  });
+
+  console.log('waypoint', { waypointMenu, scrollableParentRef, isWaypointInView });
   if (!display) return null;
 
   return (
@@ -31,7 +38,7 @@ const Waypoint = ({
       })}
       id={id}
       onClick={() => {
-        if (onClick) onClick(id, waypointRef);
+        if (onClick) onClick(id);
       }}
     >
       <div ref={waypointRef} className="waypoint-position justify-self-start text-end">

ui-manchette/src/components/WaypointList.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React from 'react';
 
 import Waypoint from './Waypoint';
 import type { WaypointMenuData, InteractiveWaypoint } from '../types';
@@ -8,28 +8,23 @@ type WaypointListProps = {
   waypointMenuData?: WaypointMenuData;
 };
 
-const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => {
-  const waypointsContainerRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <div ref={waypointsContainerRef} className="waypoint-list ">
-      {waypoints.map((waypoint) => (
-        <div
-          key={waypoint.id}
-          className="waypoint-wrapper flex flex-col justify-start"
-          style={waypoint.styles}
-        >
-          <Waypoint
-            waypoint={waypoint}
-            isActive={waypointMenuData?.activeWaypointId === waypoint.id}
-            waypointMenu={waypointMenuData?.menu}
-            waypointsContainerRef={waypointsContainerRef}
-            isWaypointInView={waypointMenuData?.isWaypointInView}
-          />
-        </div>
-      ))}
-    </div>
-  );
-};
+const WaypointList = ({ waypoints, waypointMenuData }: WaypointListProps) => (
+  <div className="waypoint-list ">
+    {waypoints.map((waypoint) => (
+      <div
+        key={waypoint.id}
+        className="waypoint-wrapper flex flex-col justify-start"
+        style={waypoint.styles}
+      >
+        <Waypoint
+          waypoint={waypoint}
+          isActive={waypointMenuData?.activeWaypointId === waypoint.id}
+          waypointMenu={waypointMenuData?.menu}
+          scrollableParentRef={waypointMenuData?.scrollableParentRef}
+        />
+      </div>
+    ))}
+  </div>
+);
 
 export default WaypointList;

ui-manchette/src/hooks/useElementInView.ts

@@ -0,0 +1,50 @@
+import { useState, useEffect, type RefObject } from 'react';
+/**
+ * Check if an element is in the viewport of a container
+ * @param ref the element we want to observe
+ * @param containerRef the container we want to observe the element in (needs to be the first scrollable parent)
+ * @param options the options for the intersection observer
+ * - threshold is used to configure how much of the element needs to be visible before the callback is invoked
+ * - rootMargin is used to configure the margin around the root (container) where the intersection observer will trigger
+ * @returns a boolean indicating if the element is in the viewport
+ */
+const useElementInView = <T extends HTMLElement>(
+  ref?: RefObject<T>,
+  containerRef?: RefObject<HTMLElement>,
+  options: IntersectionObserverInit = {
+    threshold: 1,
+    rootMargin: `0px`,
+  }
+): boolean => {
+  const [isInView, setIsInView] = useState(false);
+
+  useEffect(() => {
+    const currentRef = ref?.current;
+    const root = containerRef?.current || null;
+
+    if (!currentRef) {
+      // If the user implementing ui-manchette doesn't provide a ref to handle the menu visibility,
+      // the menu should always be visible
+      setIsInView(true);
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsInView(entry.isIntersecting);
+      },
+      {
+        ...options,
+        root,
+      }
+    );
+
+    observer.observe(currentRef.parentElement!);
+
+    return () => observer.disconnect();
+  }, [ref, containerRef, options]);
+
+  return isInView;
+};
+
+export default useElementInView;

ui-manchette/src/types.ts

@@ -10,13 +10,15 @@ export type Waypoint = {
 export type InteractiveWaypoint = Waypoint & {
   styles?: CSSProperties;
   display?: boolean;
-  onClick?: (waypointId: string, waypointRef: React.RefObject<HTMLDivElement>) => void;
+  onClick?: (waypointId: string) => void;
 };
 
 export type WaypointMenuData = {
   menu: React.ReactNode;
   activeWaypointId?: string;
-  isWaypointInView?: boolean;
+  // isWaypointInView?: boolean;
+  // Ref of the scrollable parent of the waypoints list to enable the menu hidding behavior
+  scrollableParentRef?: React.RefObject<HTMLElement>;
 };
 
 export type ProjectPathTrainResult = {