Open capi1O opened 5 years ago
Describe the bug
Steps are layed out evenly, regardless of position prop value (position = width / number of steps).
position
To Reproduce render steps by mapping over an array, ex :
const steps = [ { id: 1, percentage: 10, src: 'image1.svg', scale: 2 }, { id: 2, percentage: 25, src: 'image2.svg', scale: 0.5 }, { id: 3, percentage: 26, src: 'image3.svg', scale: 0.3 }, { id: 4, percentage: 61, src: 'image4.svg', scale: 1 }, { id: 5, percentage: 62, src: 'image5.svg', scale: 1 }, { id: 6, percentage: 63, src: 'image6.svg', scale: 2 }, { id: 7, percentage: 80, src: 'image7.svg', scale: 0.5 }, { id: 8, percentage: 81, src: 'image8.svg', scale: 1 }, { id: 9, percentage: 82, src: 'image9.svg', scale: 2 }, { id: 10, percentage: 90, src: 'image10.svg', scale: 1 } ];
<ProgressBar percent={percentage} > {steps.map(step => ( <Step key={step.id} position={step.percentage} transition="scale" > {({ accomplished }) => ( <img style={{ transform: `scale(${step.scale})` }} width="30" src={step.src} /> )} </Step>)) } </ProgressBar>
Expected behavior
<Steps /> items are positioned along the progressbar according to number provided by position prop value.
<Steps />
edit : providing stepsPositions on parent <ProgressBar /> does work
stepsPositions
<ProgressBar />
Use stepPositions prop on ProgressBar component
https://pierreericgarcia.github.io/react-step-progress-bar/docs/progress-bar-api
Describe the bug
Steps are layed out evenly, regardless of
position
prop value (position = width / number of steps).To Reproduce render steps by mapping over an array, ex :
Expected behavior
<Steps />
items are positioned along the progressbar according to number provided byposition
prop value.edit : providing
stepsPositions
on parent<ProgressBar />
does work