Skip to content

Commit 752d977

Browse files
Implement min, max and index into Custom Component value
1 parent 123d731 commit 752d977

File tree

2 files changed

+22
-4
lines changed

2 files changed

+22
-4
lines changed

package/src/components/StepsIndicator.tsx

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export const StepsIndicator = ({
1818
}: {
1919
options: number[];
2020
sliderWidth: number;
21-
currentValue?: number;
21+
currentValue: number;
2222
StepMarker?: FC<MarkerProps>;
2323
renderStepNumber?: boolean;
2424
thumbImage?: ImageSource;
@@ -41,13 +41,16 @@ export const StepsIndicator = ({
4141
{values.map((i, index) => {
4242
return (
4343
<Fragment key={index}>
44-
<View style={styles.stepIndicatorElement}>
44+
<View style={styles.stepIndicatorElement} key={`${index}-View`}>
4545
<SliderTrackMark
4646
key={`${index}-SliderTrackMark`}
4747
isTrue={currentValue === i}
48+
index={i}
4849
thumbImage={thumbImage}
4950
StepMarker={StepMarker}
5051
currentValue={currentValue}
52+
min={options[0]}
53+
max={options[options.length - 1]}
5154
/>
5255
{renderStepNumber ? (
5356
<StepNumber

package/src/components/TrackMark.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,40 @@ import {styles} from '../utils/styles';
55
export type MarkerProps = {
66
stepMarked: boolean;
77
currentValue?: number;
8+
index?: number;
9+
min?: number;
10+
max?: number;
811
};
912

1013
export type TrackMarksProps = {
1114
isTrue: boolean;
15+
index: number;
1216
thumbImage?: ImageURISource;
1317
StepMarker?: FC<MarkerProps>;
14-
currentValue?: number;
18+
currentValue: number;
19+
min: number;
20+
max: number;
1521
};
1622

1723
export const SliderTrackMark = ({
1824
isTrue,
25+
index,
1926
thumbImage,
2027
StepMarker,
2128
currentValue,
29+
min,
30+
max,
2231
}: TrackMarksProps) => {
2332
return (
2433
<View style={styles.trackMarkContainer}>
2534
{StepMarker ? (
26-
<StepMarker stepMarked={isTrue} currentValue={currentValue} />
35+
<StepMarker
36+
stepMarked={isTrue}
37+
index={index}
38+
currentValue={currentValue}
39+
min={min}
40+
max={max}
41+
/>
2742
) : null}
2843
{thumbImage && isTrue ? (
2944
<View style={styles.thumbImageContainer}>

0 commit comments

Comments
 (0)