Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 1x 15x 15x 15x 10x 58x 1x 1x | import PropTypes from 'prop-types'
import Injector from '@s-ui/react-primitive-injector'
import {useStepsContext} from '../context/index.js'
import {naturalNumber} from '../prop-types.js'
import Step from '../Step/Step.js'
const Stepper = ({children, steps: stepsNumber, step: currentStep, showLabel, labels = []}) => {
const {design, alignment, icon, visitedIcon, currentIcon, onChange, hasConnector} = useStepsContext()
Iif (children)
return (
<Injector
steps={stepsNumber}
step={currentStep}
labels={labels}
design={design}
alignment={alignment}
icon={icon}
visitedIcon={visitedIcon}
currentIcon={currentIcon}
hasConnector={hasConnector}
onChange={onChange}
showLabel={showLabel}
>
{children}
</Injector>
)
else if (stepsNumber === undefined) return null
return Array(Math.max(stepsNumber, labels.length))
.fill()
.map((u, index) => (
<Step
key={index}
steps={stepsNumber}
showLabel={showLabel}
step={index + 1}
visited={index + 1 < currentStep}
current={currentStep === index + 1}
label={labels[index]}
{...{
...(onChange && {
onClick: (event, {step}) => onChange(event, {step})
})
}}
/>
))
}
Stepper.displayName = 'Stepper'
Stepper.propTypes = {
children: PropTypes.node,
labels: PropTypes.arrayOf(PropTypes.string),
showLabel: PropTypes.bool,
steps: naturalNumber,
step: naturalNumber
}
export default Stepper
|