Set next active only when location is selected

This commit is contained in:
Dana Lambert 2021-10-19 09:03:42 +13:00
parent 5bef4efe36
commit ef3d0e4d7e
3 changed files with 10 additions and 5 deletions

View file

@ -20,17 +20,21 @@ const steps = [
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);
};
let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component;
@ -56,7 +60,7 @@ export default function StepperWizard(props) {
</React.Fragment>
) : (
<React.Fragment>
<CurrentStep {...props} />
<CurrentStep {...props} setNextDisabled={setNextDisabled} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Button
color="inherit"
@ -67,7 +71,7 @@ export default function StepperWizard(props) {
Back
</Button>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleNext}>
<Button onClick={handleNext} disabled={nextDisabled}>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</Box>

View file

@ -13,7 +13,7 @@ export default function LocationStep(props) {
)
const locationSelectionPanel = (
<LocationSelectorMap updateFilterState={props.updateFilterState} />
<LocationSelectorMap {...props} />
)
return (

View file

@ -13,7 +13,8 @@ function LocationMarker(props) {
click(e) {
const newPosition = e.latlng;
setPosition(newPosition);
props.updateCoordinateFilter({"latitude": newPosition.lat, "longitude": newPosition.lng});
props.updateFilterState({"latitude": newPosition.lat, "longitude": newPosition.lng});
props.setNextDisabled(false);
},
})
@ -41,7 +42,7 @@ export default function Map(props) {
attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<LocationMarker updateCoordinateFilter={props.updateFilterState} />
<LocationMarker {...props} />
<FitNewZealandBounds />
</MapContainer>
</div>