pierreericgarcia / react-step-progress-bar

A library to create stunning progress bars with steps in React 🌡
https://pierreericgarcia.github.io/react-step-progress-bar/
MIT License
198 stars 27 forks source link

<Step /> position is not respected #12

Open capi1O opened 5 years ago

capi1O commented 5 years ago

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.

edit : providing stepsPositions on parent <ProgressBar /> does work

lako90 commented 4 years ago

Use stepPositions prop on ProgressBar component

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