-
Notifications
You must be signed in to change notification settings - Fork 29
Open
Description
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 :
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.
- OS: Ubuntu 18.04
- Chrome
- react-step-progress-bar 1.0.3
edit : providing stepsPositions
on parent <ProgressBar />
does work
Metadata
Metadata
Assignees
Labels
No labels