59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import steps from "../../constants/steps";
|
|
import {
|
|
Card,
|
|
Grid,
|
|
Stepper,
|
|
Step,
|
|
StepButton,
|
|
StepLabel,
|
|
makeStyles
|
|
} from "@material-ui/core";
|
|
import { useLocation, useHistory } from "react-router-dom";
|
|
|
|
const styles = () => ({
|
|
stepperCard: {
|
|
padding: "2px",
|
|
margin: "15px"
|
|
}
|
|
});
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const ApplicationStepper = () => {
|
|
const [activeStep, setActiveStep] = useState(0);
|
|
const classes = useStyles();
|
|
const location = useLocation();
|
|
const history = useHistory();
|
|
|
|
const handleStepClick = (step) => {
|
|
if (!step) return;
|
|
if (location.pathname === step.route) return;
|
|
history.push(step.route);
|
|
};
|
|
|
|
return (
|
|
<Card className={classes.stepperCard}>
|
|
<Grid container alignItems="center" spacing={3}>
|
|
<Grid item xs={12}>
|
|
<Stepper activeStep={activeStep} orientation="horizontal">
|
|
{steps.map((step) => (
|
|
<Step key={step.id}>
|
|
<StepButton
|
|
id={"offerStepper_" + step.title}
|
|
disabled={step.disabled}
|
|
onClick={() => handleStepClick(step)}
|
|
>
|
|
<StepLabel>{step.title}</StepLabel>
|
|
</StepButton>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Grid>
|
|
</Grid>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ApplicationStepper;
|