Skip to content

<Step /> position is not respected #12

@capi1O

Description

@capi1O

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

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions