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 | 1x 8x 8x 8x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {
CLASS_BAR,
CLASS_STEP,
CLASS_STEP_DESCRIPTION,
CLASS_STEP_ICON,
CLASS_STEP_NUMBER,
getStatusClass,
STATUSES
} from './config.js'
const MoleculeProgressStep = ({status, icon, label, numStep, lastStep, compressed, onClick}) => {
const [CLASS_STEP_STATUS, CLASS_BAR_STATUS] = getStatusClass(status)
const bar = <hr onClick={onClick} className={cx(CLASS_BAR, CLASS_BAR_STATUS)} />
return (
<>
{!compressed && (
<div className={cx(CLASS_STEP, CLASS_STEP_STATUS)} onClick={onClick}>
{icon ? <div className={CLASS_STEP_ICON}>{icon}</div> : <p className={CLASS_STEP_NUMBER}>{numStep}</p>}
<p className={CLASS_STEP_DESCRIPTION}>{label}</p>
</div>
)}
{!lastStep ? bar : compressed && bar}
</>
)
}
MoleculeProgressStep.propTypes = {
/** status of the step */
status: PropTypes.oneOf(Object.values(STATUSES)),
/** icon (React component) */
icon: PropTypes.node,
/** text to display */
label: PropTypes.string,
/** Vertical mode */
numStep: PropTypes.number,
/** Vertical mode */
lastStep: PropTypes.bool,
/** Compressed */
compressed: PropTypes.bool,
/** onClick handler **/
onClick: PropTypes.func
}
export default MoleculeProgressStep
export {STATUSES}
|