front: split manchette with div

Signed-off-by: theocrsb <[email protected]>
OpenRailAssociation · Feb 27, 2025 · 88ff89d · 88ff89d
1 parent 2f5e675
commit 88ff89d
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 25 deletions.
diff --git a/storybook/stories/ManchetteSplit/ManchetteSplit.stories.tsx b/storybook/stories/ManchetteSplit/ManchetteSplit.stories.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import '@osrd-project/ui-core/dist/theme.css';
+import '@osrd-project/ui-manchette/dist/theme.css';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Manchette from '../../../ui-manchette/src/components/Manchette';
+import { SAMPLE_WAYPOINTS } from '../../../ui-manchette/src/stories/assets/sampleData';
+const meta: Meta<typeof Manchette> = {
+  component: Manchette,
+  title: 'Manchette/ManchetteSplit',
+  tags: ['autodocs'],
+  argTypes: { contents: { control: { type: 'object' } } },
+};
+
+export default meta;
+type Story = StoryObj<typeof Manchette>;
+
+const customDiv = (
+  <div style={{ height: 'auto', minHeight: 24, backgroundColor: 'rgba(152, 192, 245, 1)' }}>
+    Hello World
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    contents: [
+      SAMPLE_WAYPOINTS[0],
+      customDiv,
+      SAMPLE_WAYPOINTS[1],
+      SAMPLE_WAYPOINTS[2],
+      customDiv,
+      SAMPLE_WAYPOINTS[3],
+      customDiv,
+    ],
+  },
+};
diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts
@@ -151,7 +151,7 @@ const useManchettesWithSpaceTimeChart = (
 
   const manchetteProps = useMemo(
     () => ({
-      waypoints: waypointsToDisplay,
+      contents: waypointsToDisplay,
       zoomYIn,
       zoomYOut,
       resetZoom,

diff --git a/ui-manchette-with-spacetimechart/src/stories/base-with-waypoint-menu.stories.tsx b/ui-manchette-with-spacetimechart/src/stories/base-with-waypoint-menu.stories.tsx
@@ -122,7 +122,7 @@ const ManchetteWithSpaceTimeWrapper = ({
       >
         <Manchette
           {...manchetteProps}
-          waypoints={manchetteProps.waypoints.map((op) => ({
+          contents={manchetteProps.contents.map((op) => ({
             ...op,
             onClick: handleWaypointClick,
           }))}

diff --git a/ui-manchette/src/components/Manchette.tsx b/ui-manchette/src/components/Manchette.tsx
@@ -8,7 +8,7 @@ import WaypointList from './WaypointList';
 import type { InteractiveWaypoint, WaypointMenuData } from '../types';
 
 export type ManchetteProps = {
-  waypoints: InteractiveWaypoint[];
+  contents: (InteractiveWaypoint | React.ReactNode)[];
   waypointMenuData?: WaypointMenuData;
   zoomYIn: () => void;
   zoomYOut: () => void;
@@ -25,7 +25,7 @@ const Manchette = ({
   zoomYOut,
   resetZoom,
   yZoom = 1,
-  waypoints,
+  contents,
   waypointMenuData,
   isProportional = true,
   toggleMode,
@@ -57,7 +57,7 @@ const Manchette = ({
       )}
       <div className="bg-white-100 border-r border-grey-30" style={{ minHeight: `${height}px` }}>
         <WaypointList
-          waypoints={waypoints}
+          contents={contents}
           activeWaypointId={waypointMenuData?.activeWaypointId}
           activeWaypointRef={activeWaypointRef}
         />

diff --git a/ui-manchette/src/components/WaypointList.tsx b/ui-manchette/src/components/WaypointList.tsx
@@ -4,27 +4,36 @@ import Waypoint from './Waypoint';
 import type { InteractiveWaypoint } from '../types';
 
 type WaypointListProps = {
-  waypoints: InteractiveWaypoint[];
+  contents: (InteractiveWaypoint | React.ReactNode)[];
   activeWaypointId?: string;
   activeWaypointRef?: React.RefObject<HTMLDivElement>;
 };
 
-const WaypointList = ({ waypoints, activeWaypointId, activeWaypointRef }: WaypointListProps) => (
-  <div className="waypoint-list ">
-    {waypoints.map((waypoint) => (
-      <div
-        key={waypoint.id}
-        className="waypoint-wrapper flex justify-start"
-        style={waypoint.styles}
-      >
-        <Waypoint
-          waypoint={waypoint}
-          nameRef={activeWaypointId === waypoint.id ? activeWaypointRef : undefined}
-          isActive={activeWaypointId === waypoint.id}
-          isMenuActive={!!activeWaypointId}
-        />
-      </div>
-    ))}
+const isInteractiveWaypoint = (
+  item: InteractiveWaypoint | React.ReactNode
+): item is InteractiveWaypoint =>
+  item != null && typeof item === 'object' && 'id' in item && 'position' in item;
+
+const WaypointList = ({ contents, activeWaypointId, activeWaypointRef }: WaypointListProps) => (
+  <div className="waypoint-list">
+    {contents.map((content, index) =>
+      isInteractiveWaypoint(content) ? (
+        <div
+          key={content.id}
+          className="waypoint-wrapper flex justify-start"
+          style={content.styles}
+        >
+          <Waypoint
+            waypoint={content}
+            nameRef={activeWaypointId === content.id ? activeWaypointRef : undefined}
+            isActive={activeWaypointId === content.id}
+            isMenuActive={!!activeWaypointId}
+          />
+        </div>
+      ) : (
+        <div key={index}>{content}</div>
+      )
+    )}
   </div>
 );
 

diff --git a/ui-manchette/src/stories/Manchette.stories.tsx b/ui-manchette/src/stories/Manchette.stories.tsx
@@ -10,7 +10,7 @@ const meta: Meta<typeof Manchette> = {
   title: 'Manchette/Manchette',
   tags: ['autodocs'],
   argTypes: {
-    waypoints: {
+    contents: {
       control: {
         type: 'object',
       },
@@ -29,6 +29,6 @@ type Story = StoryObj<typeof Manchette>;
 
 export const Default: Story = {
   args: {
-    waypoints: SAMPLE_WAYPOINTS,
+    contents: SAMPLE_WAYPOINTS,
   },
 };
diff --git a/ui-manchette/src/stories/WaypointList.stories.ts b/ui-manchette/src/stories/WaypointList.stories.ts
@@ -16,6 +16,6 @@ type Story = StoryObj<typeof WaypointList>;
 
 export const Default: Story = {
   args: {
-    waypoints: SAMPLE_WAYPOINTS,
+    contents: SAMPLE_WAYPOINTS,
   },
 };