tudor.stanciu
/
network-resurrector-frontend
mirror of https://dev.azure.com/tstanciu94/NetworkResurrector/_git/NetworkResurrector_Frontend
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

stepper fix

master
Tudor Stanciu 2020-12-19 00:46:02 +02:00
parent 3d7998dd8c
commit bbdd246d31
1 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/layout/Stepper.js
View File

@ -1,4 +1,4 @@
import React, { useState } from "react"; import React, { useState, useEffect } from "react";
import steps from "../../constants/steps"; import steps from "../../constants/steps";
import { import {
Card, Card,
@ -21,13 +21,22 @@ const styles = () => ({
const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);
const ApplicationStepper = () => { const ApplicationStepper = () => {
const [activeStep, setActiveStep] = useState(0); const firstStep = steps.find((z) => z.id === 0);
const [activeStep, setActiveStep] = useState(firstStep);
const classes = useStyles(); const classes = useStyles();
const location = useLocation(); const location = useLocation();
const history = useHistory(); const history = useHistory();
useEffect(() => {
const step = steps.find((z) => z.route === location.pathname);
if (step) {
setActiveStep(step);
}
}, [location.pathname]);
const handleStepClick = (step) => { const handleStepClick = (step) => {
if (!step) return; if (!step) return;
setActiveStep(step);
if (location.pathname === step.route) return; if (location.pathname === step.route) return;
history.push(step.route); history.push(step.route);
}; };
@ -36,11 +45,11 @@ const ApplicationStepper = () => {
<Card className={classes.stepperCard}> <Card className={classes.stepperCard}>
<Grid container alignItems="center" spacing={3}> <Grid container alignItems="center" spacing={3}>
<Grid item xs={12}> <Grid item xs={12}>
<Stepper activeStep={activeStep} orientation="horizontal"> <Stepper activeStep={activeStep.id} orientation="horizontal">
{steps.map((step) => ( {steps.map((step) => (
<Step key={step.id}> <Step key={step.id}>
<StepButton <StepButton
id={"offerStepper_" + step.title} id={"appStepper_" + step.title}
disabled={step.disabled} disabled={step.disabled}
onClick={() => handleStepClick(step)} onClick={() => handleStepClick(step)}
> >