ui-manchette: fix waypoint menu position

- Move the menu next to its related waypoint so it can always be positioned relatively to it
- Rename some props to be more neutral

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

ui-manchette/src/components/OperationalPoint.tsx

@@ -2,24 +2,21 @@ import React, { useRef } from 'react';
 
 import cx from 'classnames';
 
-import type { WaypointMenuItem, StyledOperationalPointType } from '../types';
+import type { StyledOperationalPointType } from '../types';
 import '@osrd-project/ui-core/dist/theme.css';
 import { positionMmToKm } from '../utils';
-import WaypointMenu from './WaypointMenu';
 
 type OperationalPointProps = {
   operationalPoint: StyledOperationalPointType;
   isActive: boolean;
-  waypointMenuItems?: WaypointMenuItem[];
-  waypointMenuClassName?: string;
+  waypointMenu?: React.ReactNode;
   index: number;
 };
 
 const OperationalPoint = ({
   operationalPoint: { extensions, id, position, display, onClick },
   isActive,
-  waypointMenuItems,
-  waypointMenuClassName,
+  waypointMenu,
   index,
 }: OperationalPointProps) => {
   const opRef = useRef<HTMLDivElement>(null);
@@ -46,9 +43,7 @@ const OperationalPoint = ({
 
       <div className="op-type"></div>
       <div className="op-separator"></div>
-      {isActive && waypointMenuItems && (
-        <WaypointMenu items={waypointMenuItems} className={waypointMenuClassName} />
-      )}
+      {waypointMenu && isActive && waypointMenu}
     </div>
   );
 };

ui-manchette/src/components/OperationalPointList.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import OperationalPoint from './OperationalPoint';
-import type { WaypointMenuData, StyledOperationalPointType } from '../types';
+import type { StyledOperationalPointType, WaypointMenuData } from '../types';
 
 type OperationalPointListProps = {
   operationalPoints: StyledOperationalPointType[];
@@ -22,8 +22,7 @@ const OperationalPointList = ({
         <OperationalPoint
           operationalPoint={op}
           isActive={waypointMenuData?.activeWaypointIndex === index}
-          waypointMenuItems={waypointMenuData?.waypointMenuItems}
-          waypointMenuClassName={waypointMenuData?.waypointMenuClassName}
+          waypointMenu={waypointMenuData?.menu}
           index={index}
         />
       </div>

ui-manchette/src/components/WaypointMenu.tsx

@@ -7,7 +7,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { SAMPLE_PATH_PROPERTIES_DATA } from './assets/sampleData';
 import Manchette from '../components/Manchette';
-import type { WaypointMenuItem, StyledOperationalPointType } from '../types';
+import type { StyledOperationalPointType } from '../types';
+import Menu, { type MenuItem } from './components/Menu';
 
 const operationalPointListData: StyledOperationalPointType[] =
   SAMPLE_PATH_PROPERTIES_DATA.operational_points?.map((op) => ({ ...op, display: true })) ?? [];
@@ -34,7 +35,7 @@ const meta: Meta<typeof Manchette> = {
 const ManchetteWithWaypointMenu = () => {
   const [activeWaypointIndex, setActiveWaypointPointIndex] = useState<number>();
 
-  const menuItems: WaypointMenuItem[] = [
+  const menuItems: MenuItem[] = [
     {
       title: 'Action 1',
       icon: <EyeClosed />,
@@ -69,8 +70,7 @@ const ManchetteWithWaypointMenu = () => {
       toggleMode={() => {}}
       waypointMenuData={{
         activeWaypointIndex,
-        waypointMenuItems: menuItems,
-        waypointMenuClassName: 'menu',
+        menu: <Menu items={menuItems} />,
       }}
     />
   );

ui-manchette/src/stories/Manchette.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+export type MenuItem = {
+  title: string;
+  icon: React.ReactNode;
+  onClick: (e: React.MouseEvent) => void;
+};
+
+type MenuProps = {
+  items: MenuItem[];
+};
+
+/**
+ * Example of waypoint menu that could be passed to the manchette as props
+ */
+const Menu = ({ items }: MenuProps) => (
+  <div className="menu">
+    {items.map(({ title, icon, onClick }) => (
+      <button key={title} type="button" className="menu-item" onClick={onClick}>
+        <span className="icon">{icon}</span>
+        <span>{title}</span>
+      </button>
+    ))}
+  </div>
+);
+
+export default Menu;

ui-manchette/src/stories/components/Menu.tsx

@@ -2,5 +2,6 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 @import 'manchette.css';
+@import 'menu.css';
 @import 'operational-point.css';
 @import 'operational-point-list.css';

ui-manchette/src/styles/main.css

@@ -1,42 +1,4 @@
 .manchette-container {
-  .menu {
-    position: absolute;
-    z-index: 10;
-    @apply bg-grey-5;
-    width: 305px;
-    top: 30px;
-    left: 0;
-    border: 0.0625rem solid #b6b2af;
-    border-radius: 0.5rem;
-    box-shadow:
-      0 0.375rem 1.3125rem -0.3125rem rgba(101, 169, 232, 0.341810533216783),
-      0 1rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.2),
-      0 0.1875rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.1),
-      inset 0 0 0 0.0625rem #ffffff;
-
-    /* .menu-item { */
-    button {
-      width: 100%;
-      height: 2.75rem;
-      font-size: 0.875rem;
-      display: flex;
-      align-items: center;
-
-      &:not(:first-child) {
-        border-top: 0.0625rem solid #ffffff;
-      }
-
-      &:not(:only-of-type, :last-child) {
-        border-bottom: 0.0625rem solid #d3d1cf;
-      }
-
-      /* .icon { */
-      span:first-child {
-        @apply text-primary-40;
-        padding-inline: 1rem;
-      }
-    }
-  }
   .manchette-actions {
     z-index: 11;
     align-items: center;

ui-manchette/src/styles/manchette.css

@@ -0,0 +1,36 @@
+.menu {
+  position: absolute;
+  z-index: 10;
+  @apply bg-grey-5;
+  width: 305px;
+  top: 30px;
+  left: 0;
+  border: 0.0625rem solid #b6b2af;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 0.375rem 1.3125rem -0.3125rem rgba(101, 169, 232, 0.341810533216783),
+    0 1rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.2),
+    0 0.1875rem 0.3125rem -0.125rem rgba(0, 0, 0, 0.1),
+    inset 0 0 0 0.0625rem #ffffff;
+
+  .menu-item {
+    width: 100%;
+    height: 2.75rem;
+    font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+
+    &:not(:first-child) {
+      border-top: 0.0625rem solid #ffffff;
+    }
+
+    &:not(:only-of-type, :last-child) {
+      border-bottom: 0.0625rem solid #d3d1cf;
+    }
+
+    .icon {
+      @apply text-primary-40;
+      padding-inline: 1rem;
+    }
+  }
+}

ui-manchette/src/styles/menu.css

@@ -55,15 +55,8 @@ export type StyledOperationalPointType = OperationalPointType & {
 };
 
 export type WaypointMenuData = {
+  menu: React.ReactNode;
   activeWaypointIndex?: number;
-  waypointMenuItems?: WaypointMenuItem[];
-  waypointMenuClassName?: string;
-};
-
-export type WaypointMenuItem = {
-  title: string;
-  icon: React.ReactNode;
-  onClick: (e: React.MouseEvent) => void;
 };
 
 export type ProjectPathTrainResult = {