75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
import * as React from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import Stepper from '@mui/material/Stepper';
|
|
import Step from '@mui/material/Step';
|
|
import StepLabel from '@mui/material/StepLabel';
|
|
import Button from '@mui/material/Button';
|
|
|
|
import LocationStep from './steps/location/LocationStep'
|
|
import SoilStep from './steps/soilvariant/SoilStep'
|
|
import HabitatStep from './steps/habitat/HabitatStep';
|
|
import ZoneStep from './steps/zone/ZoneStep';
|
|
import SummaryStep from './steps/summary/SummaryStep';
|
|
import ResultsStep from './steps/results/ResultsStep'
|
|
|
|
const steps = [
|
|
{ 'label': 'Select location', 'component': LocationStep },
|
|
{ 'label': 'Choose soil', 'component': SoilStep },
|
|
{ 'label': 'Choose habitat', 'component': HabitatStep },
|
|
{ 'label': 'Select zone', 'component': ZoneStep },
|
|
{ 'label': 'Summary', 'component': SummaryStep },
|
|
{ 'label': 'Results', 'component': ResultsStep }
|
|
];
|
|
|
|
export default function StepperWizard(props) {
|
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
const [nextDisabled, setNextDisabled] = React.useState(true);
|
|
|
|
const handleNext = () => {
|
|
setActiveStep((prevActiveStep) => prevActiveStep + 1);
|
|
setNextDisabled(true);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
setNextDisabled(true);
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setActiveStep(0);
|
|
setNextDisabled(true);
|
|
props.resetFilterState()
|
|
};
|
|
|
|
let CurrentStep = activeStep >= steps.length ? steps[steps.length - 1].component : steps[activeStep].component;
|
|
|
|
return (
|
|
<Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column", overflow: "hidden" }}>
|
|
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom: '2vw' }}>
|
|
{steps.map((step) => {
|
|
return (
|
|
<Step key={step.label}>
|
|
<StepLabel>{step.label}</StepLabel>
|
|
</Step>
|
|
);
|
|
})}
|
|
</Stepper>
|
|
<React.Fragment>
|
|
<CurrentStep {...props} setNextDisabled={setNextDisabled} />
|
|
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
|
|
<Button
|
|
color="inherit"
|
|
disabled={activeStep === 0}
|
|
onClick={handleBack}
|
|
sx={{ mr: 1 }}
|
|
>
|
|
Back
|
|
</Button>
|
|
<Box sx={{ flex: '1 1 auto' }} />
|
|
{activeStep === steps.length - 1 ?
|
|
<Button onClick={handleReset}>Reset</Button> : <Button onClick={handleNext} disabled={nextDisabled}>Next</Button>}
|
|
</Box>
|
|
</React.Fragment>
|
|
</Box>
|
|
);
|
|
}
|