feat: make marker and pointer replaceable

Author: stampaaaron

src/components/Timeline.css

@@ -44,11 +44,14 @@
 }
 
 .timeline-item__marker {
+  margin-top: var(--marker-offset);
+}
+
+.timeline-item__marker:not(.timeline-item__marker--custom) {
   border-radius: var(--marker-radius);
   width: var(--marker-size);
   height: var(--marker-size);
   background-color: var(--marker-color);
-  margin-top: var(--marker-offset);
 }
 
 .timeline-item--left .timeline-item__marker {
@@ -83,13 +86,16 @@
 }
 
 .timeline-card__pointer {
+  top: var(--marker-offset);
+  transform: translate(100%, -50%);
+  position: absolute;
+}
+
+.timeline-card__pointer:not(.timeline-card__pointer--custom) {
   clip-path: polygon(0% 0%, 0% 100%, 100% 50%);
   background-color: var(--card-background);
-  top: var(--marker-offset);
   width: var(--pointer-width);
   height: var(--pointer-height);
-  transform: translate(100%, -50%);
-  position: absolute;
 }
 
 .timeline-item--left .timeline-card__pointer {

src/components/Timeline.tsx

@@ -1,5 +1,5 @@
 import './Timeline.css';
-import { Key, useEffect, useRef } from 'react';
+import { Key, ReactElement, useEffect, useRef } from 'react';
 import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
 import { OffsetConfig, resolveOffsets } from '../models/offset';
 import { Positioning } from '../models/positioning';
@@ -12,19 +12,24 @@ export type TimelineProps = {
   minMarkerGap?: number;
   dateFormat?: string;
   dateLocale?: Locale;
+  customMarker?: ReactElement;
+  customPointer?: ReactElement;
   className?: string;
 };
 
 const defaultTimelineConfig: Partial<TimelineProps> = {
   positioning: 'alternating',
   gap: 50,
   offset: 50,
-  minMarkerGap: 50,
+  minMarkerGap: 100,
   dateFormat: 'P',
 };
 
 export function Timeline(props: TimelineProps) {
-  const { items, positioning, gap, offset, minMarkerGap, className, dateFormat, dateLocale } = { ...defaultTimelineConfig, ...props };
+  const { items, positioning, gap, offset, minMarkerGap, className, dateFormat, dateLocale, customMarker, customPointer } = {
+    ...defaultTimelineConfig,
+    ...props,
+  };
 
   const timelineRef = useRef<HTMLDivElement>(null);
   const itemsRef = useRef<Map<Key, HTMLElement>>();
@@ -93,6 +98,8 @@ export function Timeline(props: TimelineProps) {
         <TimelineItem
           dateFormat={dateFormat}
           dateLocale={dateLocale}
+          customMarker={customMarker}
+          customPointer={customPointer}
           {...item}
           ref={(node) => {
             const map = getRefMap();

src/components/TimelineItem.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Key, PropsWithChildren } from 'react';
+import { forwardRef, Key, PropsWithChildren, ReactElement } from 'react';
 import { format } from 'date-fns';
 
 export type PropsWithKey<T> = T & {
@@ -11,15 +11,17 @@ export type TimelineItemProps = PropsWithChildren<{
   dateFormat?: string;
   dateLocale?: Locale;
   title: string;
+  customMarker?: ReactElement;
+  customPointer?: ReactElement;
 }>;
 
 export const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(
-  ({ className, title, date, children, dateFormat, dateLocale }, ref) => {
+  ({ className, title, date, children, dateFormat, dateLocale, customMarker, customPointer }, ref) => {
     return (
       <div ref={ref} className={['timeline-item', className].join(' ')}>
-        <div className="timeline-item__marker" />
+        <div className={['timeline-item__marker', customMarker && 'timeline-item__marker--custom'].join(' ')}>{customMarker}</div>
         <div className="timeline-card">
-          <div className="timeline-card__pointer" />
+          <div className={['timeline-card__pointer', customPointer && 'timeline-card__pointer--custom'].join(' ')}>{customPointer}</div>
           <p className="timeline-card__date">{date instanceof Date ? format(date, dateFormat ?? 'P', { locale: dateLocale }) : date}</p>
           <p className="timeline-card__title">{title}</p>
           {children}