@colisweb/rescript-toolkit 5.48.0 → 5.48.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "5.48.0",
+  "version": "5.48.2",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/src/ui/Toolkit__Ui_Timeline.res

@@ -44,9 +44,11 @@ type state = {
   measuringScale: measuringScale,
 }
 
+type contentParams = {index: int}
+
 type timelinePointExtras = {
   className?: string,
-  content?: React.element,
+  content?: contentParams => React.element,
   popoverContent?: React.element,
   popoverContentOptions?: Radix.Popover.Content.options,
 }
@@ -223,6 +225,7 @@ module Timeline = {
       ~markerClassName="",
       ~measuringScale,
       ~setMeasuringScale,
+      ~index: int,
     ) => {
       let markerOffset = getMarkerOffset(~marker, ~measuringScale)
 
@@ -273,7 +276,7 @@ module Timeline = {
           }
         }}
         style={{
-          "--x-offset": `${(markerOffset.offsetStart +. padding)->Float.toString}px`,
+          "--x-offset": `${markerOffset.offsetStart->Float.toString}px`,
           "--markerWidth": (markerOffset.width < 1. ? markerWidth : markerOffset.width)->formatToPx,
           "--markerHeight": switch marker {
           | Cluster(_) => markerWidth +. 10.
@@ -291,32 +294,33 @@ module Timeline = {
           },
         ])}>
         {switch marker {
-        | Cluster(p) => p->Array.length->React.int
+        | Cluster(p) =>
+          <span className={"font-bold text-neutral-700"}> {p->Array.length->React.int} </span>
         | Point({extras}) =>
           switch extras.popoverContent {
           | None =>
             <div
-              className={"w-full h-[--markerHeight] cursor-pointer"}
+              className={"w-full h-[--markerHeight] text-center font-semibold text-sm"}
               style={{
                 "--markerHeight": switch marker {
                 | Cluster(_) => markerWidth +. 10.
                 | Point(_) => markerWidth
                 }->formatToPx,
               }->Obj.magic}>
-              {extras.content->Option.getWithDefault(React.null)}
+              {extras.content->Option.mapWithDefault(React.null, fn => fn({index: index}))}
             </div>
           | Some(c) =>
             <Toolkit__Ui_Popover
               triggerAsChild={true}
               trigger={<div
-                className={"w-full h-[--markerHeight] cursor-pointer"}
+                className={"w-full h-[--markerHeight] cursor-pointer text-center font-semibold text-sm"}
                 style={{
                   "--markerHeight": switch marker {
                   | Cluster(_) => markerWidth +. 10.
                   | Point(_) => markerWidth
                   }->formatToPx,
                 }->Obj.magic}>
-                {extras.content->Option.getWithDefault(React.null)}
+                {extras.content->Option.mapWithDefault(React.null, fn => fn({index: index}))}
               </div>}
               contentOptions=?{extras.popoverContentOptions}
               content={c}
@@ -394,7 +398,11 @@ module Timeline = {
           {markers
           ->Array.mapWithIndex((i, marker) => {
             <Marker
-              key={`${timeline.id}-task-${i->Int.toString}`} marker measuringScale setMeasuringScale
+              index={i}
+              key={`${timeline.id}-task-${i->Int.toString}`}
+              marker
+              measuringScale
+              setMeasuringScale
             />
           })
           ->React.array}