feat: make css properties configurable with props

Author: stampaaaron

src/components/Timeline.tsx

@@ -3,6 +3,7 @@ import { Key, ReactElement, useEffect, useRef } from 'react';
 import { PropsWithKey, TimelineItem, TimelineItemProps } from './TimelineItem';
 import { OffsetConfig, resolveOffsets } from '../models/offset';
 import { Positioning } from '../models/positioning';
+import { convertToCssVariable, StyleConfig } from '../models/style';
 
 export type TimelineProps = {
   items: PropsWithKey<TimelineItemProps>[];
@@ -14,6 +15,7 @@ export type TimelineProps = {
   dateLocale?: Locale;
   customMarker?: ReactElement;
   customPointer?: ReactElement;
+  styleConfig?: StyleConfig;
   className?: string;
 };
 
@@ -26,7 +28,7 @@ const defaultTimelineConfig: Partial<TimelineProps> = {
 };
 
 export function Timeline(props: TimelineProps) {
-  const { items, positioning, gap, offset, minMarkerGap, className, dateFormat, dateLocale, customMarker, customPointer } = {
+  const { items, positioning, gap, offset, minMarkerGap, className, dateFormat, dateLocale, customMarker, customPointer, styleConfig } = {
     ...defaultTimelineConfig,
     ...props,
   };
@@ -85,6 +87,11 @@ export function Timeline(props: TimelineProps) {
     }
   }
 
+  useEffect(() => {
+    if (!styleConfig) return;
+    Object.entries(convertToCssVariable(styleConfig)).forEach((prop) => timelineRef.current?.style.setProperty(...prop));
+  }, [styleConfig]);
+
   useEffect(() => {
     window.addEventListener('resize', positionTimelineItems);
     return () => window.removeEventListener('resize', positionTimelineItems);

src/helper/object.ts

@@ -0,0 +1,17 @@
+export const flattenObject = <O extends Record<string, T>, T extends O | string | undefined>(ob: Record<string, T>, delimiter?: string) => {
+  const result: Record<string, string> = {};
+
+  Object.keys(ob).forEach((i) => {
+    const value = ob[i];
+    if (typeof value === 'object') {
+      const temp = flattenObject(value, delimiter);
+      Object.keys(temp).forEach((j) => {
+        result[`${i}${delimiter ?? '.'}${j}`] = temp[j];
+      });
+    } else if (value) {
+      result[i] = value;
+    }
+  });
+
+  return result;
+};

src/models/style.ts

@@ -0,0 +1,31 @@
+import { flattenObject } from '../helper/object';
+
+export type StyleConfig = {
+  line?: {
+    width?: string;
+    color?: string;
+  };
+  marker?: {
+    size?: string;
+    color?: string;
+    radius?: string;
+    offset?: string;
+  };
+  pointer?: {
+    height?: string;
+    width?: string;
+  };
+  card?: {
+    background?: string;
+    radius?: string;
+    offset?: string;
+    shadow?: string;
+    padding?: string;
+  };
+};
+
+export const convertToCssVariable = (styleConfig: StyleConfig) =>
+  Object.entries(flattenObject(styleConfig, '-')).reduce(
+    (prev: Record<string, string>, [key, value]) => ({ ...prev, [`--${key}`]: value }),
+    {},
+  );