112 lines
3.3 KiB
JavaScript
112 lines
3.3 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import classnames from 'classnames'
|
|
import * as R from 'ramda'
|
|
import React, { memo } from 'react'
|
|
|
|
import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
|
|
import { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'
|
|
import { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'
|
|
import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
|
|
import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
|
|
import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
|
|
import {
|
|
primaryColor,
|
|
secondaryColor,
|
|
offColor,
|
|
disabledColor
|
|
} from 'src/styling/variables'
|
|
|
|
const styles = {
|
|
stages: {
|
|
display: 'flex',
|
|
alignItems: 'center'
|
|
},
|
|
wrapper: {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
margin: 0
|
|
},
|
|
stage: {
|
|
display: 'flex',
|
|
height: 28,
|
|
width: 28,
|
|
zIndex: 2,
|
|
'& > svg': {
|
|
height: '100%',
|
|
width: '100%',
|
|
overflow: 'visible'
|
|
}
|
|
},
|
|
separator: {
|
|
width: 28,
|
|
height: 2,
|
|
border: [[2, 'solid']],
|
|
zIndex: 1
|
|
},
|
|
separatorSpring: {
|
|
borderColor: secondaryColor
|
|
},
|
|
separatorZodiac: {
|
|
borderColor: primaryColor
|
|
},
|
|
separatorSpringEmpty: {
|
|
borderColor: disabledColor
|
|
},
|
|
separatorZodiacEmpty: {
|
|
borderColor: offColor
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Stepper = memo(({ steps, currentStep, color = 'spring', className }) => {
|
|
if (currentStep < 1 || currentStep > steps)
|
|
throw Error('Value of currentStage is invalid')
|
|
if (steps < 1) throw Error('Value of stages is invalid')
|
|
|
|
const classes = useStyles()
|
|
|
|
const separatorClasses = {
|
|
[classes.separator]: true,
|
|
[classes.separatorSpring]: color === 'spring',
|
|
[classes.separatorZodiac]: color === 'zodiac'
|
|
}
|
|
|
|
const separatorEmptyClasses = {
|
|
[classes.separator]: true,
|
|
[classes.separatorSpringEmpty]: color === 'spring',
|
|
[classes.separatorZodiacEmpty]: color === 'zodiac'
|
|
}
|
|
|
|
return (
|
|
<div className={classnames(className, classes.stages)}>
|
|
{R.range(1, currentStep).map(idx => (
|
|
<div key={idx} className={classes.wrapper}>
|
|
{idx > 1 && <div className={classnames(separatorClasses)} />}
|
|
<div className={classes.stage}>
|
|
{color === 'spring' && <CompleteStageIconSpring />}
|
|
{color === 'zodiac' && <CompleteStageIconZodiac />}
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className={classes.wrapper}>
|
|
{currentStep > 1 && <div className={classnames(separatorClasses)} />}
|
|
<div className={classes.stage}>
|
|
{color === 'spring' && <CurrentStageIconSpring />}
|
|
{color === 'zodiac' && <CurrentStageIconZodiac />}
|
|
</div>
|
|
</div>
|
|
{R.range(currentStep + 1, steps + 1).map(idx => (
|
|
<div key={idx} className={classes.wrapper}>
|
|
<div className={classnames(separatorEmptyClasses)} />
|
|
<div className={classes.stage}>
|
|
{color === 'spring' && <EmptyStageIconSpring />}
|
|
{color === 'zodiac' && <EmptyStageIconZodiac />}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
})
|
|
|
|
export default Stepper
|