({
children,
initialStep = 1,
onStepChange = () => {},
onFinalStepCompleted = () => {},
stepCircleContainerClassName = '',
stepContainerClassName = '',
contentClassName = '',
footerClassName = '',
backButtonProps = {},
nextButtonProps = {},
backButtonText = 'Back',
nextButtonText = 'Continue',
disableStepIndicators = false,
renderStepIndicator,
...rest
})
| 4 | import './Stepper.css'; |
| 5 | |
| 6 | export default function Stepper({ |
| 7 | children, |
| 8 | initialStep = 1, |
| 9 | onStepChange = () => {}, |
| 10 | onFinalStepCompleted = () => {}, |
| 11 | stepCircleContainerClassName = '', |
| 12 | stepContainerClassName = '', |
| 13 | contentClassName = '', |
| 14 | footerClassName = '', |
| 15 | backButtonProps = {}, |
| 16 | nextButtonProps = {}, |
| 17 | backButtonText = 'Back', |
| 18 | nextButtonText = 'Continue', |
| 19 | disableStepIndicators = false, |
| 20 | renderStepIndicator, |
| 21 | ...rest |
| 22 | }) { |
| 23 | const [currentStep, setCurrentStep] = useState(initialStep); |
| 24 | const [direction, setDirection] = useState(0); |
| 25 | const stepsArray = Children.toArray(children); |
| 26 | const totalSteps = stepsArray.length; |
| 27 | const isCompleted = currentStep > totalSteps; |
| 28 | const isLastStep = currentStep === totalSteps; |
| 29 | |
| 30 | const updateStep = newStep => { |
| 31 | setCurrentStep(newStep); |
| 32 | if (newStep > totalSteps) { |
| 33 | onFinalStepCompleted(); |
| 34 | } else { |
| 35 | onStepChange(newStep); |
| 36 | } |
| 37 | }; |
| 38 | |
| 39 | const handleBack = () => { |
| 40 | if (currentStep > 1) { |
| 41 | setDirection(-1); |
| 42 | updateStep(currentStep - 1); |
| 43 | } |
| 44 | }; |
| 45 | |
| 46 | const handleNext = () => { |
| 47 | if (!isLastStep) { |
| 48 | setDirection(1); |
| 49 | updateStep(currentStep + 1); |
| 50 | } |
| 51 | }; |
| 52 | |
| 53 | const handleComplete = () => { |
| 54 | setDirection(1); |
| 55 | updateStep(totalSteps + 1); |
| 56 | }; |
| 57 | |
| 58 | return ( |
| 59 | <div className="outer-container" {...rest}> |
| 60 | <div className={`step-circle-container ${stepCircleContainerClassName}`} style={{ border: '1px solid #222' }}> |
| 61 | <div className={`step-indicator-row ${stepContainerClassName}`}> |
| 62 | {stepsArray.map((_, index) => { |
| 63 | const stepNumber = index + 1; |
nothing calls this directly
no test coverage detected