148 lines
4.2 KiB
JavaScript
148 lines
4.2 KiB
JavaScript
import React from 'react';
|
|
import { makeStyles } from '@material-ui/core/styles';
|
|
import Stepper from '@material-ui/core/Stepper';
|
|
import Step from '@material-ui/core/Step';
|
|
import StepButton from '@material-ui/core/StepButton';
|
|
import Button from '@material-ui/core/Button';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import AccountEtape1 from '../organisms/AccountEtape1';
|
|
import AccountEtape2 from '../organisms/AccountEtape2';
|
|
import AccountEtape3 from '../organisms/AccountEtape3';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
width: '100%',
|
|
},
|
|
button: {
|
|
marginRight: theme.spacing(1),
|
|
},
|
|
completed: {
|
|
display: 'inline-block',
|
|
},
|
|
instructions: {
|
|
marginTop: theme.spacing(1),
|
|
marginBottom: theme.spacing(1),
|
|
},
|
|
}));
|
|
|
|
function getSteps() {
|
|
return ['Informations personnelles', 'Vidéo de présentation', 'Expériences professionnelles'];
|
|
}
|
|
|
|
function getStepContent(step) {
|
|
switch (step) {
|
|
case 0:
|
|
return <AccountEtape1 ></AccountEtape1>;
|
|
case 1:
|
|
return <AccountEtape2></AccountEtape2>;
|
|
case 2:
|
|
return <AccountEtape3></AccountEtape3>;
|
|
default:
|
|
return 'Unknown step';
|
|
}
|
|
}
|
|
|
|
export default function HorizontalNonLinearStepper() {
|
|
const classes = useStyles();
|
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
const [completed, setCompleted] = React.useState({});
|
|
const steps = getSteps();
|
|
|
|
const totalSteps = () => {
|
|
return steps.length;
|
|
};
|
|
|
|
const completedSteps = () => {
|
|
return Object.keys(completed).length;
|
|
};
|
|
|
|
const isLastStep = () => {
|
|
return activeStep === totalSteps() - 1;
|
|
};
|
|
|
|
const allStepsCompleted = () => {
|
|
return completedSteps() === totalSteps();
|
|
};
|
|
|
|
const handleNext = () => {
|
|
const newActiveStep =
|
|
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 = () => {
|
|
setActiveStep((prevActiveStep) => prevActiveStep - 1);
|
|
};
|
|
|
|
const handleStep = (step) => () => {
|
|
setActiveStep(step);
|
|
};
|
|
|
|
const handleComplete = () => {
|
|
const newCompleted = completed;
|
|
newCompleted[activeStep] = true;
|
|
setCompleted(newCompleted);
|
|
handleNext();
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setActiveStep(0);
|
|
setCompleted({});
|
|
};
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Stepper alternativeLabel nonLinear activeStep={activeStep}>
|
|
{steps.map((label, index) => (
|
|
<Step key={label}>
|
|
<StepButton onClick={handleStep(index)} completed={completed[index]}>
|
|
{label}
|
|
</StepButton>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
<div>
|
|
{allStepsCompleted() ? (
|
|
<div>
|
|
{/* <Typography className={classes.instructions}>
|
|
Toutes les étapes sont terminées -
|
|
</Typography>
|
|
<Button onClick={handleReset}>Annuler</Button> */}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<Typography className={classes.instructions}>{getStepContent(activeStep)}</Typography>
|
|
<div>
|
|
{/* <Button disabled={activeStep === 0} onClick={handleBack} className={classes.button}>
|
|
Précédent
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={handleNext}
|
|
className={classes.button}
|
|
>
|
|
Suivant
|
|
</Button> */}
|
|
{/* {activeStep !== steps.length &&
|
|
(completed[activeStep] ? (
|
|
<Typography variant="caption" className={classes.completed}>
|
|
Step {activeStep + 1} already completed
|
|
</Typography>
|
|
) : (
|
|
<Button variant="contained" color="primary" onClick={handleComplete}>
|
|
{completedSteps() === totalSteps() - 1 ? 'Etape valide' : 'Processus terminé'}
|
|
</Button>
|
|
))} */}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|