71 lines
1.7 KiB
JavaScript
71 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 ColorlibStepIcon from "./ColorlibStepIcon";
|
|
|
|
const styles = () => ({
|
|
stepperCard: {
|
|
padding: "0px",
|
|
margin: "15px"
|
|
}
|
|
});
|
|
|
|
const useStyles = makeStyles(styles);
|
|
|
|
const ApplicationStepper = () => {
|
|
const firstStep = steps.find((z) => z.id === 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
|
|
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={ColorlibStepIcon}>
|
|
{step.title}
|
|
</StepLabel>
|
|
</StepButton>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ApplicationStepper;
|