lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Modify stepper to be linear

Browse source
This commit is contained in:
Dana Lambert 2021-10-13 07:34:38 +13:00
parent 0104af35f7
commit 68b1d80ffa
1 changed files with 42 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
frontend/src/components/Stepper.js
View file

@ -2,88 +2,51 @@ import * as React from 'react';
import Box from '@mui/material/Box'; import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper'; import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step'; import Step from '@mui/material/Step';
import StepButton from '@mui/material/StepButton'; import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import LocationStep from './steps/Location' import LocationStep from './steps/Location'
import SoilStep from './steps/Soil' import SoilStep from './steps/Soil'
import ResultsStep from './steps/Results' import ResultsStep from './steps/Results'
export default function StepperWizard(props) { const steps = [
const [activeStep, setActiveStep] = React.useState(0);
const [completed, setCompleted] = React.useState({});
const steps = [
{'label': 'Select location', 'component': LocationStep }, {'label': 'Select location', 'component': LocationStep },
{'label': 'Choose soil', 'component': SoilStep }, {'label': 'Choose soil', 'component': SoilStep },
{'label': 'Choose habitat', 'component': SoilStep }, {'label': 'Choose habitat', 'component': SoilStep },
{'label': 'Select zone', 'component': SoilStep }, {'label': 'Select zone', 'component': SoilStep },
{'label': 'Project specifics', 'component': SoilStep }, {'label': 'Project specifics', 'component': SoilStep },
{'label': 'Summary', 'component': SoilStep } {'label': 'Summary', 'component': SoilStep }
]; ];
const totalSteps = () => { export default function StepperWizard(props) {
return steps.length; const [activeStep, setActiveStep] = React.useState(0);
};
const completedSteps = () => {
return Object.keys(completed).length;
};
const isLastStep = () => {
return activeStep === totalSteps() - 1;
};
const allStepsCompleted = () => {
return completedSteps() === totalSteps();
};
const handleNext = () => { const handleNext = () => {
const newActiveStep = setActiveStep((prevActiveStep) => prevActiveStep + 1);
isLastStep() && !allStepsCompleted()
? // It's the last step, but not all steps have been completed,
// find the first step that has been completed
steps.findIndex((step, i) => !(i in completed))
: activeStep + 1;
setActiveStep(newActiveStep);
}; };
const handleBack = () => { const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1); setActiveStep((prevActiveStep) => prevActiveStep - 1);
}; };
const handleStep = (step) => () => {
setActiveStep(step);
};
const handleComplete = () => {
const newCompleted = completed;
newCompleted[activeStep] = true;
setCompleted(newCompleted);
handleNext();
};
const handleReset = () => { const handleReset = () => {
setActiveStep(0); setActiveStep(0);
setCompleted({});
}; };
let CurrentStep = activeStep > totalSteps() ? steps[activeStep].component : steps[totalSteps()-1].component; let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component;
return ( return (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<Stepper nonLinear activeStep={activeStep}> <Stepper activeStep={activeStep}>
{steps.map((step, index) => ( {steps.map((step, index) => {
<Step key={step.label} completed={completed[index]}> return (
<StepButton color="inherit" onClick={handleStep(index)}> <Step key={step.label}>
{step.label} <StepLabel>{step.label}</StepLabel>
</StepButton>
</Step> </Step>
))} );
})}
</Stepper> </Stepper>
<div> {activeStep === steps.length ? (
{allStepsCompleted() ? (
<React.Fragment> <React.Fragment>
<ResultsStep {...props} /> <ResultsStep {...props} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
@ -104,25 +67,12 @@ export default function StepperWizard(props) {
Back Back
</Button> </Button>
<Box sx={{ flex: '1 1 auto' }} /> <Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleNext} sx={{ mr: 1 }}> <Button onClick={handleNext}>
Next {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button> </Button>
{activeStep !== steps.length &&
(completed[activeStep] ? (
<Typography variant="caption" sx={{ display: 'inline-block' }}>
Step {activeStep + 1} already completed
</Typography>
) : (
<Button onClick={handleComplete}>
{completedSteps() === totalSteps() - 1
? 'Finish'
: 'Complete Step'}
</Button>
))}
</Box> </Box>
</React.Fragment> </React.Fragment>
)} )}
</div>
</Box> </Box>
); );
} }