79 lines
2.1 KiB
JavaScript
79 lines
2.1 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import classnames from 'classnames'
|
|
import React from 'react'
|
|
import { P } from 'src/components/typography'
|
|
import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
|
|
import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
|
|
import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
|
|
|
|
import styles from './Sidebar.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Sidebar = ({
|
|
data,
|
|
displayName,
|
|
isSelected,
|
|
onClick,
|
|
children,
|
|
itemRender,
|
|
loading = false
|
|
}) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<div className={classes.sidebar}>
|
|
{loading && <P>Loading...</P>}
|
|
{!loading &&
|
|
data?.map((it, idx) => (
|
|
<div className={classes.linkWrapper} onClick={() => onClick(it)}>
|
|
<div
|
|
key={idx}
|
|
className={classnames({
|
|
[classes.activeLink]: isSelected(it),
|
|
[classes.customRenderActiveLink]: itemRender && isSelected(it),
|
|
[classes.customRenderLink]: itemRender,
|
|
[classes.link]: true
|
|
})}>
|
|
{itemRender ? itemRender(it, isSelected(it)) : displayName(it)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
{!loading && children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|
|
|
|
const Stepper = ({ step, it, idx, steps }) => {
|
|
const classes = useStyles()
|
|
const active = step === idx
|
|
const past = idx < step
|
|
const future = idx > step
|
|
|
|
return (
|
|
<div className={classes.item}>
|
|
<span
|
|
className={classnames({
|
|
[classes.itemText]: true,
|
|
[classes.itemTextActive]: active,
|
|
[classes.itemTextPast]: past
|
|
})}>
|
|
{it.label}
|
|
</span>
|
|
{active && <CurrentStageIconZodiac />}
|
|
{past && <CompleteStageIconZodiac />}
|
|
{future && <EmptyStageIconZodiac />}
|
|
{idx < steps.length - 1 && (
|
|
<div
|
|
className={classnames({
|
|
[classes.stepperPath]: true,
|
|
[classes.stepperPast]: past
|
|
})}></div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { Stepper }
|