chore: clean up code, separation of concerns

Author: stampaaaron

src/components/Timeline.tsx

@@ -1,26 +1,13 @@
 import './Timeline.css';
 import { Key, useEffect, useRef } from 'react';
 import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
-
-type OffsetConfig = number | { left?: number; right?: number };
-
-const resolveOffsets = (offset: OffsetConfig) =>
-  typeof offset === 'number' ? { right: offset, left: 0 } : { right: offset.right ?? 0, left: offset.left ?? 0 };
-
-const MIN_MARKER_OFFSET = 50;
-
-const getMarkerCompensationOffset = (left: number, right: number) => {
-  const heightDifference = Math.abs(left - right);
-  if (heightDifference < MIN_MARKER_OFFSET) {
-    return MIN_MARKER_OFFSET - heightDifference;
-  }
-  return 0;
-};
+import { OffsetConfig, resolveOffsets } from '../models/offset';
 
 export type TimelineProps = {
   items: PropsWithKey<TimelineItemProps>[];
   gap?: number;
   offset?: OffsetConfig;
+  minMarkerGap?: number;
   dateFormat?: string;
   dateLocale?: Locale;
   className?: string;
@@ -29,11 +16,12 @@ export type TimelineProps = {
 const defaultTimelineConfig: Partial<TimelineProps> = {
   gap: 50,
   offset: 50,
+  minMarkerGap: 50,
   dateFormat: 'P',
 };
 
 export function Timeline(props: TimelineProps) {
-  const { items, gap, offset, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
+  const { items, gap, offset, minMarkerGap, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
 
   const timelineRef = useRef<HTMLDivElement>(null);
   const itemsRef = useRef<Map<Key, HTMLElement>>();
@@ -46,6 +34,16 @@ export function Timeline(props: TimelineProps) {
     return itemsRef.current;
   }
 
+  function getMinMarkerGapCompensation(left: number, right: number) {
+    if (minMarkerGap) {
+      const heightDifference = Math.abs(left - right);
+      if (heightDifference < minMarkerGap) {
+        return minMarkerGap - heightDifference;
+      }
+    }
+    return 0;
+  }
+
   function positionTimelineItems() {
     const elements = Array.from(getRefMap().values());
 
@@ -57,14 +55,14 @@ export function Timeline(props: TimelineProps) {
       const element = item;
 
       if (leftHeight > rightHeight) {
-        leftHeight += getMarkerCompensationOffset(leftHeight, rightHeight);
+        leftHeight += getMinMarkerGapCompensation(leftHeight, rightHeight);
 
         element.style.top = `${rightHeight}px`;
         element.classList.add('timeline-item--right');
         element.classList.remove('timeline-item--left');
         rightHeight += element.offsetHeight + (gap ?? 0);
       } else {
-        rightHeight += getMarkerCompensationOffset(leftHeight, rightHeight);
+        rightHeight += getMinMarkerGapCompensation(leftHeight, rightHeight);
 
         element.style.top = `${leftHeight}px`;
         element.classList.add('timeline-item--left');

src/models/offset.ts

@@ -0,0 +1,6 @@
+export type Offset = { left?: number; right?: number };
+
+export type OffsetConfig = number | Offset;
+
+export const resolveOffsets = (offset: OffsetConfig) =>
+  typeof offset === 'number' ? { right: offset, left: 0 } : { right: offset.right ?? 0, left: offset.left ?? 0 };