From a0819e9159dd11c7984936172ec2d2ece432c97f Mon Sep 17 00:00:00 2001
From: Francois Pasquier <git@pasquierfrancois.com>
Date: Mon, 7 Oct 2024 22:44:49 +0200
Subject: [PATCH] feat: improve StepMarker

---
 example-web/src/Examples.tsx              | 35 ++++++++++++++++++++++-
 package/src/components/StepsIndicator.tsx |  1 +
 package/src/components/TrackMark.tsx      |  9 +++++-
 3 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx
index 69909624..a4c27219 100644
--- a/example-web/src/Examples.tsx
+++ b/example-web/src/Examples.tsx
@@ -10,6 +10,26 @@ export interface Props {
   platform?: string;
 }
 
+const StepMarker = ({
+  stepMarked,
+  currentValue,
+  index,
+}: {
+  stepMarked: boolean;
+  currentValue: number;
+  index: number;
+}) => (
+  <View
+    style={{
+      marginTop: '24px',
+      height: '16px',
+      width: '3px',
+      backgroundColor:
+        currentValue < index ? 'rgb(147, 147, 147)' : 'rgb(0, 150, 136)',
+    }}
+  />
+)
+
 const SliderExample = (props: SliderProps) => {
   const [value, setValue] = useState(0);
   return (
@@ -232,4 +252,17 @@ export const examples: Props[] = [
       );
     },
   },
-];
+  {
+    title: 'Slider with StepMarker',
+    render() {
+      return (
+        <SliderExample
+          StepMarker={StepMarker}
+          step={1}
+          minimumValue={0}
+          maximumValue={10}
+        />
+      );
+    },
+  }
+];
\ No newline at end of file
diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index a28b12c6..2ab41937 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -44,6 +44,7 @@ export const StepsIndicator = ({
             <View style={styles.stepIndicatorElement}>
               <SliderTrackMark
                 key={`${index}-SliderTrackMark`}
+                index={index}
                 isTrue={currentValue === i}
                 thumbImage={thumbImage}
                 StepMarker={StepMarker}
diff --git a/package/src/components/TrackMark.tsx b/package/src/components/TrackMark.tsx
index bd87b237..c9d3a052 100644
--- a/package/src/components/TrackMark.tsx
+++ b/package/src/components/TrackMark.tsx
@@ -5,6 +5,7 @@ import {styles} from '../utils/styles';
 export type MarkerProps = {
   stepMarked: boolean;
   currentValue?: number;
+  index: number;
 };
 
 export type TrackMarksProps = {
@@ -12,6 +13,7 @@ export type TrackMarksProps = {
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps>;
   currentValue?: number;
+  index: number;
 };
 
 export const SliderTrackMark = ({
@@ -19,11 +21,16 @@ export const SliderTrackMark = ({
   thumbImage,
   StepMarker,
   currentValue,
+  index,
 }: TrackMarksProps) => {
   return (
     <View style={styles.trackMarkContainer}>
       {StepMarker ? (
-        <StepMarker stepMarked={isTrue} currentValue={currentValue} />
+        <StepMarker
+          index={index}
+          stepMarked={isTrue}
+          currentValue={currentValue}
+        />
       ) : null}
       {thumbImage && isTrue ? (
         <View style={styles.thumbImageContainer}>