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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | 1x 58x 58x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {naturalNumber} from '../prop-types.js'
import {ALIGNMENT, DESIGN} from '../settings.js'
import {BASE_CLASS_STEP_ICON, BASE_CLASS_STEP_LABEL, getIcon, getLabel} from './settings.js'
const DefaultStep = ({
alignment,
design,
label,
step,
steps,
current,
visited,
icon,
visitedIcon,
showLabel,
currentIcon
}) => {
const resultingIcon = getIcon({
design,
visited,
current,
step,
icon,
visitedIcon,
currentIcon
})
return (
<>
<div className={cx(BASE_CLASS_STEP_ICON)}>{resultingIcon}</div>
{
<div
className={cx([BASE_CLASS_STEP_LABEL, `${BASE_CLASS_STEP_LABEL}--step-current-${current}`], {
[`${BASE_CLASS_STEP_LABEL}--visible`]: showLabel
})}
{...(design === DESIGN.COMPRESSED &&
current &&
alignment === ALIGNMENT.HORIZONTAL && {
style: {
marginLeft: `calc(-${(step - 1) * 100}% - ${(step - 1) * 8}px)`
}
})}
{...(design === DESIGN.COMPRESSED &&
current &&
alignment === ALIGNMENT.VERTICAL && {
style: {
marginTop: `calc(-${(step - 1) * 100}% - ${(step - 1) * 8}px)`
}
})}
>
{getLabel({steps, step, design, label, current})}
</div>
}
</>
)
}
DefaultStep.displayName = 'DefaultStep'
DefaultStep.propTypes = {
/** inner content **/
children: PropTypes.node,
/** element orientation **/
alignment: PropTypes.oneOf(Object.values(ALIGNMENT)),
/** different look and feels **/
design: PropTypes.oneOf(Object.values(DESIGN)),
/** show label or not */
showLabel: PropTypes.bool,
/** the number of the step in the list **/
step: naturalNumber,
/** number of steps needed to be inner created **/
steps: naturalNumber,
/** the text label of the step **/
label: PropTypes.string,
/** stepper points to that step or not **/
current: PropTypes.bool,
/** stepper step is higher to that step or not **/
visited: PropTypes.bool,
/** react-node icon passed to all inner steps **/
icon: PropTypes.node,
/** react-node icon passed to all inner visited steps **/
visitedIcon: PropTypes.node,
/** react-node icon passed to inner current steps **/
currentIcon: PropTypes.node,
/** change handler to get the step fired **/
onClick: PropTypes.func
}
export default DefaultStep
|