react-step-progress-bar

react-step-progress-bar copied to clipboard

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

Use stepPositions prop on ProgressBar component

https://pierreericgarcia.github.io/react-step-progress-bar/docs/progress-bar-api