72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import steps from "../../../constants/steps";
|
|
import {
|
|
Card,
|
|
Stepper,
|
|
Step,
|
|
StepButton,
|
|
StepLabel,
|
|
makeStyles
|
|
} from "@material-ui/core";
|
|
import { useLocation, useHistory } from "react-router-dom";
|
|
import CustomStepConnector from "./CustomStepConnector";
|
|
import StepIcon from "./StepIcon";
|
|
|
|
const styles = () => ({
|
|
stepperCard: {
|
|
margin: "15px"
|
|
},
|
|
stepper: {
|
|
padding: "10px"
|
|
}
|
|
});
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const ApplicationStepper = () => {
|
|
const firstStep = steps[0];
|
|
const [activeStep, setActiveStep] = useState(firstStep);
|
|
const classes = useStyles();
|
|
const location = useLocation();
|
|
const history = useHistory();
|
|
|
|
useEffect(() => {
|
|
const step = steps.find(z => z.route === location.pathname);
|
|
if (step) {
|
|
setActiveStep(step);
|
|
}
|
|
}, [location.pathname]);
|
|
|
|
const handleStepClick = step => {
|
|
if (!step) return;
|
|
setActiveStep(step);
|
|
if (location.pathname === step.route) return;
|
|
history.push(step.route);
|
|
};
|
|
|
|
return (
|
|
<Card className={classes.stepperCard}>
|
|
<Stepper
|
|
className={classes.stepper}
|
|
activeStep={activeStep.id}
|
|
orientation="horizontal"
|
|
connector={<CustomStepConnector />}
|
|
>
|
|
{steps.map(step => (
|
|
<Step key={step.id}>
|
|
<StepButton
|
|
id={"appStepper_" + step.title}
|
|
disabled={step.disabled}
|
|
onClick={() => handleStepClick(step)}
|
|
>
|
|
<StepLabel StepIconComponent={StepIcon}>{step.title}</StepLabel>
|
|
</StepButton>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ApplicationStepper;
|