feat: implement alternative positioning

Author: stampaaaron

src/components/Timeline.css

@@ -13,10 +13,12 @@
 }
 
 .timeline__line {
+  position: absolute;
   background-color: var(--timeline-line-color);
   width: var(--timeline-line-width);
   height: 100%;
-  margin-inline: auto;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .timeline-item {
@@ -99,3 +101,25 @@
 .timeline-item--left .timeline-item__marker {
   order: 1;
 }
+
+/* left positioning */
+.timeline--left .timeline__line {
+  left: 0;
+}
+
+.timeline--left .timeline-item--right {
+  left: 0;
+  width: 100%;
+}
+
+/* right positioning */
+.timeline--right .timeline__line {
+  right: 0;
+  left: unset;
+  transform: translateX(50%);
+}
+
+.timeline--right .timeline-item--left {
+  right: 0;
+  width: 100%;
+}

src/components/Timeline.tsx

@@ -2,9 +2,11 @@ import './Timeline.css';
 import { Key, useEffect, useRef } from 'react';
 import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
 import { OffsetConfig, resolveOffsets } from '../models/offset';
+import { Positioning } from '../models/positioning';
 
 export type TimelineProps = {
   items: PropsWithKey<TimelineItemProps>[];
+  positioning: Positioning;
   gap?: number;
   offset?: OffsetConfig;
   minMarkerGap?: number;
@@ -14,14 +16,15 @@ export type TimelineProps = {
 };
 
 const defaultTimelineConfig: Partial<TimelineProps> = {
+  positioning: 'alternating',
   gap: 50,
   offset: 50,
   minMarkerGap: 50,
   dateFormat: 'P',
 };
 
 export function Timeline(props: TimelineProps) {
-  const { items, gap, offset, minMarkerGap, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
+  const { items, positioning, gap, offset, minMarkerGap, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
 
   const timelineRef = useRef<HTMLDivElement>(null);
   const itemsRef = useRef<Map<Key, HTMLElement>>();
@@ -54,7 +57,7 @@ export function Timeline(props: TimelineProps) {
     elements.forEach((item) => {
       const element = item;
 
-      if (leftHeight > rightHeight) {
+      if ((positioning !== 'right' && leftHeight > rightHeight) || positioning === 'left') {
         leftHeight += getMinMarkerGapCompensation(leftHeight, rightHeight);
 
         element.style.top = `${rightHeight}px`;
@@ -84,7 +87,7 @@ export function Timeline(props: TimelineProps) {
   useEffect(positionTimelineItems, [itemsRef]);
 
   return (
-    <div className={['timeline', className].join(' ')} ref={timelineRef}>
+    <div className={['timeline', `timeline--${positioning}`, className].join(' ')} ref={timelineRef}>
       <div className="timeline__line" />
       {items.map((item) => (
         <TimelineItem

src/models/positioning.ts

@@ -0,0 +1 @@
+export type Positioning = 'left' | 'right' | 'alternating';