Skip to content

Commit

Permalink
disable steps when form is invalid
Browse files Browse the repository at this point in the history
  • Loading branch information
alisonelizabeth committed Sep 2, 2020
1 parent d932830 commit d318c56
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@ interface Props {
currentStep: number;
maxCompletedStep: number;
updateCurrentStep: (step: number) => void;
isFormValid: boolean;
}

export const PolicyNavigation: React.FunctionComponent<Props> = ({
currentStep,
maxCompletedStep,
updateCurrentStep,
isFormValid,
}) => {
const { i18n } = useServices();

Expand All @@ -27,6 +29,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
}),
isComplete: maxCompletedStep >= 1,
isSelected: currentStep === 1,
disabled: !isFormValid && currentStep !== 1,
onClick: () => updateCurrentStep(1),
},
{
Expand All @@ -35,7 +38,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
}),
isComplete: maxCompletedStep >= 2,
isSelected: currentStep === 2,
disabled: maxCompletedStep < 1,
disabled: maxCompletedStep < 1 || (!isFormValid && currentStep !== 2),
onClick: () => updateCurrentStep(2),
},
{
Expand All @@ -44,7 +47,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
}),
isComplete: maxCompletedStep >= 3,
isSelected: currentStep === 3,
disabled: maxCompletedStep < 2,
disabled: maxCompletedStep < 2 || (!isFormValid && currentStep !== 3),
onClick: () => updateCurrentStep(3),
},
{
Expand All @@ -53,7 +56,7 @@ export const PolicyNavigation: React.FunctionComponent<Props> = ({
}),
isComplete: maxCompletedStep >= 3,
isSelected: currentStep === 4,
disabled: maxCompletedStep < 3,
disabled: maxCompletedStep < 3 || (!isFormValid && currentStep !== 4),
onClick: () => updateCurrentStep(4),
},
];
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export const PolicyForm: React.FunctionComponent<Props> = ({
currentStep={currentStep}
maxCompletedStep={maxCompletedStep}
updateCurrentStep={updateCurrentStep}
isFormValid={validation.isValid}
/>
<EuiSpacer size="l" />
<EuiForm>
Expand Down

0 comments on commit d318c56

Please sign in to comment.