feat: position timeline item refs absolute

Author: stampaaaron

src/components/Timeline.css

@@ -11,4 +11,5 @@ div.timeline__line {
 
 .timeline-item {
   position: absolute;
+  width: 50%;
 }

src/components/Timeline.stories.mdx

@@ -5,8 +5,13 @@ import { Timeline } from './Timeline';
 
 <Timeline
   items={[
-    { title: 'test1', date: new Date() },
-    { title: 'test2', date: new Date() },
+    {
+      title: 'test1',
+      date: new Date(),
+      children:
+        'alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj alsjflskdfjsdklfjsdlkjdslkjdsalfjadslkajdfsöfj fsdjf lskdfj alsfj fljsdflö dsakfjd slkfj  ',
+    },
+    { title: 'test2', date: new Date(), children: 'askflkfjds flksjfdsölfks flkalkja sflkjdsf lsdkf sdflkajlkfs f' },
     { title: 'test3', date: new Date() },
   ]}
 />

src/components/Timeline.tsx

@@ -1,13 +1,13 @@
 import './Timeline.css';
-import { useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import { TimelineItem, TimelineItemProps } from './TimelineItem';
 
 export type TimelineProps = {
   items: TimelineItemProps[];
 };
 
 export function Timeline({ items }: TimelineProps) {
-  const itemsRef = useRef<Map<Date, HTMLDivElement>>();
+  const itemsRef = useRef<Map<Date, HTMLElement>>();
 
   function getRefMap() {
     if (!itemsRef.current) {
@@ -17,11 +17,23 @@ export function Timeline({ items }: TimelineProps) {
     return itemsRef.current;
   }
 
+  useEffect(() => {
+    const elements = Array.from(getRefMap().values());
+    const heights = elements.map((item) => item.offsetHeight);
+
+    elements.forEach((item, index) => {
+      const element = item;
+      const topOffset = heights.slice(0, index).reduce((prev, curr) => prev + curr, 0);
+      element.style.top = `${topOffset}px`;
+    });
+  }, [itemsRef]);
+
   return (
     <div className="timeline">
       <div className="timeline__line" />
       {items.map((item) => (
-        <div
+        <TimelineItem
+          {...item}
           ref={(node) => {
             const map = getRefMap();
             if (node) {
@@ -30,9 +42,8 @@ export function Timeline({ items }: TimelineProps) {
               map.delete(item.date);
             }
           }}
-        >
-          <TimelineItem key={item.date.toISOString()} {...item} />
-        </div>
+          key={item.date.toISOString()}
+        />
       ))}
     </div>
   );

src/components/TimelineItem.tsx

@@ -1,17 +1,17 @@
-import { PropsWithChildren } from 'react';
+import { forwardRef, PropsWithChildren } from 'react';
 
 export type TimelineItemProps = PropsWithChildren<{
   className?: string;
   date: Date;
   title: string;
 }>;
 
-export function TimelineItem({ className, title, date, children }: TimelineItemProps) {
+export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(({ className, title, date, children }, ref) => {
   return (
-    <div className={`${className} timeline-item`}>
+    <div ref={ref} className={`${className} timeline-item`}>
       <p>{date.toISOString()}</p>
       <p>{title}</p>
       {children}
     </div>
   );
-}
+});