Skip to content

Commit 7b8fbdb

Browse files
silviuaavramsilviuaavram
committed
fix the dependencies and add one UX fix
1 parent 2d480b7 commit 7b8fbdb

10 files changed

Lines changed: 79 additions & 94 deletions

‎docs/data/material/components/steppers/DotsMobileStepper.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,17 @@ export default function DotsMobileStepper() {
2424
// Manage focus when the active step changes.
2525
React.useEffect(() => {
2626
const previousActiveStep = previousActiveStepRef.current;
27+
previousActiveStepRef.current = activeStep;
2728

2829
if (activeStep === 0 && previousActiveStep === 1) {
2930
// If the user is going back to the first step, focus the Next button.
3031
nextButtonRef.current?.focus();
31-
} else if (activeStep === 5 && previousActiveStep === 4) {
32+
return;
33+
}
34+
if (activeStep === 5 && previousActiveStep === 4) {
3235
// If the user is going to the last step, focus the Back button.
3336
backButtonRef.current?.focus();
3437
}
35-
36-
previousActiveStepRef.current = activeStep;
3738
}, [activeStep]);
3839

3940
return (

‎docs/data/material/components/steppers/DotsMobileStepper.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,17 @@ export default function DotsMobileStepper() {
2424
// Manage focus when the active step changes.
2525
React.useEffect(() => {
2626
const previousActiveStep = previousActiveStepRef.current;
27+
previousActiveStepRef.current = activeStep;
2728

2829
if (activeStep === 0 && previousActiveStep === 1) {
2930
// If the user is going back to the first step, focus the Next button.
3031
nextButtonRef.current?.focus();
31-
} else if (activeStep === 5 && previousActiveStep === 4) {
32+
return;
33+
}
34+
if (activeStep === 5 && previousActiveStep === 4) {
3235
// If the user is going to the last step, focus the Back button.
3336
backButtonRef.current?.focus();
3437
}
35-
36-
previousActiveStepRef.current = activeStep;
3738
}, [activeStep]);
3839

3940
return (

‎docs/data/material/components/steppers/HorizontalLinearStepper.js‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,22 @@ export default function HorizontalLinearStepper() {
6161
// Manage focus when the active step changes.
6262
React.useEffect(() => {
6363
const previousActiveStep = previousActiveStepRef.current;
64+
previousActiveStepRef.current = activeStep;
6465

6566
if (activeStep === steps.length) {
6667
// If the user has completed all steps and hits Finish, focus the Reset button.
6768
resetButtonRef.current?.focus();
68-
} else if (activeStep === 0 && previousActiveStep === steps.length) {
69+
return;
70+
}
71+
if (activeStep === 0 && previousActiveStep === steps.length) {
6972
// If the user has completed all steps and hits Reset, focus the Next button.
7073
nextButtonRef.current?.focus();
71-
} else if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
74+
return;
75+
}
76+
if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
7277
// If the user hits Skip and the next step is not optional, focus the Next button.
7378
nextButtonRef.current?.focus();
7479
}
75-
76-
previousActiveStepRef.current = activeStep;
7780
}, [activeStep]);
7881

7982
return (

‎docs/data/material/components/steppers/HorizontalLinearStepper.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,19 +61,22 @@ export default function HorizontalLinearStepper() {
6161
// Manage focus when the active step changes.
6262
React.useEffect(() => {
6363
const previousActiveStep = previousActiveStepRef.current;
64+
previousActiveStepRef.current = activeStep;
6465

6566
if (activeStep === steps.length) {
6667
// If the user has completed all steps and hits Finish, focus the Reset button.
6768
resetButtonRef.current?.focus();
68-
} else if (activeStep === 0 && previousActiveStep === steps.length) {
69+
return;
70+
}
71+
if (activeStep === 0 && previousActiveStep === steps.length) {
6972
// If the user has completed all steps and hits Reset, focus the Next button.
7073
nextButtonRef.current?.focus();
71-
} else if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
74+
return;
75+
}
76+
if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) {
7277
// If the user hits Skip and the next step is not optional, focus the Next button.
7378
nextButtonRef.current?.focus();
7479
}
75-
76-
previousActiveStepRef.current = activeStep;
7780
}, [activeStep]);
7881

7982
return (

‎docs/data/material/components/steppers/HorizontalNonLinearStepper.js‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,17 @@ export default function HorizontalNonLinearStepper() {
1212
const [activeStep, setActiveStep] = React.useState(0);
1313
const [completed, setCompleted] = React.useState({});
1414

15-
const totalSteps = () => {
16-
return steps.length;
17-
};
18-
19-
const completedSteps = () => {
20-
return Object.keys(completed).length;
21-
};
22-
23-
const isLastStep = () => {
24-
return activeStep === totalSteps() - 1;
25-
};
26-
27-
const allStepsCompleted = () => {
28-
return completedSteps() === totalSteps();
29-
};
15+
const totalSteps = steps.length;
16+
const completedSteps = Object.keys(completed).length;
17+
const isLastStep = activeStep === totalSteps - 1;
18+
const allStepsCompleted = completedSteps === totalSteps;
3019

3120
const handleNext = () => {
3221
const newActiveStep =
33-
isLastStep() && !allStepsCompleted()
22+
isLastStep && !allStepsCompleted
3423
? // It's the last step, but not all steps have been completed,
3524
// find the first step that has been completed
36-
steps.findIndex((step, i) => !(i in completed))
25+
steps.findIndex((_step, i) => !(i in completed))
3726
: activeStep + 1;
3827
setActiveStep(newActiveStep);
3928
};
@@ -65,14 +54,14 @@ export default function HorizontalNonLinearStepper() {
6554

6655
// Manage focus when the completed steps change.
6756
React.useEffect(() => {
68-
if (allStepsCompleted()) {
57+
if (allStepsCompleted) {
6958
// If the user has completed all steps and hits Finish, focus the Reset button.
7059
resetButtonRef.current?.focus();
7160
} else if (Object.keys(completed).length === 0) {
7261
// If the user has completed all steps and hits Reset, focus the Next button.
7362
nextButtonRef.current?.focus();
7463
}
75-
}, [completed]);
64+
}, [completed, allStepsCompleted]);
7665

7766
// Manage focus when the active step changes.
7867
React.useEffect(() => {
@@ -100,7 +89,7 @@ export default function HorizontalNonLinearStepper() {
10089
))}
10190
</Stepper>
10291
<div id="stepper-content">
103-
{allStepsCompleted() ? (
92+
{allStepsCompleted ? (
10493
<React.Fragment>
10594
<Typography sx={{ mt: 2, mb: 1 }}>
10695
All steps completed - you&apos;re finished
@@ -137,9 +126,7 @@ export default function HorizontalNonLinearStepper() {
137126
</Typography>
138127
) : (
139128
<Button onClick={handleComplete}>
140-
{completedSteps() === totalSteps() - 1
141-
? 'Finish'
142-
: 'Complete Step'}
129+
{completedSteps === totalSteps - 1 ? 'Finish' : 'Complete Step'}
143130
</Button>
144131
))}
145132
</Box>

‎docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx‎

Lines changed: 10 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -14,28 +14,17 @@ export default function HorizontalNonLinearStepper() {
1414
[k: number]: boolean;
1515
}>({});
1616

17-
const totalSteps = () => {
18-
return steps.length;
19-
};
20-
21-
const completedSteps = () => {
22-
return Object.keys(completed).length;
23-
};
24-
25-
const isLastStep = () => {
26-
return activeStep === totalSteps() - 1;
27-
};
28-
29-
const allStepsCompleted = () => {
30-
return completedSteps() === totalSteps();
31-
};
17+
const totalSteps = steps.length;
18+
const completedSteps = Object.keys(completed).length;
19+
const isLastStep = activeStep === totalSteps - 1;
20+
const allStepsCompleted = completedSteps === totalSteps;
3221

3322
const handleNext = () => {
3423
const newActiveStep =
35-
isLastStep() && !allStepsCompleted()
24+
isLastStep && !allStepsCompleted
3625
? // It's the last step, but not all steps have been completed,
3726
// find the first step that has been completed
38-
steps.findIndex((step, i) => !(i in completed))
27+
steps.findIndex((_step, i) => !(i in completed))
3928
: activeStep + 1;
4029
setActiveStep(newActiveStep);
4130
};
@@ -67,14 +56,14 @@ export default function HorizontalNonLinearStepper() {
6756

6857
// Manage focus when the completed steps change.
6958
React.useEffect(() => {
70-
if (allStepsCompleted()) {
59+
if (allStepsCompleted) {
7160
// If the user has completed all steps and hits Finish, focus the Reset button.
7261
resetButtonRef.current?.focus();
7362
} else if (Object.keys(completed).length === 0) {
7463
// If the user has completed all steps and hits Reset, focus the Next button.
7564
nextButtonRef.current?.focus();
7665
}
77-
}, [completed]);
66+
}, [completed, allStepsCompleted]);
7867

7968
// Manage focus when the active step changes.
8069
React.useEffect(() => {
@@ -102,7 +91,7 @@ export default function HorizontalNonLinearStepper() {
10291
))}
10392
</Stepper>
10493
<div id="stepper-content">
105-
{allStepsCompleted() ? (
94+
{allStepsCompleted ? (
10695
<React.Fragment>
10796
<Typography sx={{ mt: 2, mb: 1 }}>
10897
All steps completed - you&apos;re finished
@@ -139,9 +128,7 @@ export default function HorizontalNonLinearStepper() {
139128
</Typography>
140129
) : (
141130
<Button onClick={handleComplete}>
142-
{completedSteps() === totalSteps() - 1
143-
? 'Finish'
144-
: 'Complete Step'}
131+
{completedSteps === totalSteps - 1 ? 'Finish' : 'Complete Step'}
145132
</Button>
146133
))}
147134
</Box>

‎docs/data/material/components/steppers/TextMobileStepper.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,19 @@ export default function TextMobileStepper() {
4949
// Manage focus when the active step changes.
5050
React.useEffect(() => {
5151
const previousActiveStep = previousActiveStepRef.current;
52+
previousActiveStepRef.current = activeStep;
5253

5354
if (activeStep === 0 && previousActiveStep === 1) {
5455
// If the user is going back to the first step, focus the Next button.
5556
nextButtonRef.current?.focus();
56-
} else if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) {
57+
return;
58+
}
59+
60+
if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) {
5761
// If the user is going to the last step, focus the Back button.
5862
backButtonRef.current?.focus();
5963
}
60-
61-
previousActiveStepRef.current = activeStep;
62-
}, [activeStep]);
64+
}, [activeStep, maxSteps]);
6365

6466
return (
6567
<Box sx={{ maxWidth: 400, flexGrow: 1 }}>

‎docs/data/material/components/steppers/TextMobileStepper.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,19 @@ export default function TextMobileStepper() {
4949
// Manage focus when the active step changes.
5050
React.useEffect(() => {
5151
const previousActiveStep = previousActiveStepRef.current;
52+
previousActiveStepRef.current = activeStep;
5253

5354
if (activeStep === 0 && previousActiveStep === 1) {
5455
// If the user is going back to the first step, focus the Next button.
5556
nextButtonRef.current?.focus();
56-
} else if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) {
57+
return;
58+
}
59+
60+
if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) {
5761
// If the user is going to the last step, focus the Back button.
5862
backButtonRef.current?.focus();
5963
}
60-
61-
previousActiveStepRef.current = activeStep;
62-
}, [activeStep]);
64+
}, [activeStep, maxSteps]);
6365

6466
return (
6567
<Box sx={{ maxWidth: 400, flexGrow: 1 }}>

‎docs/data/material/components/steppers/VerticalLinearStepper.js‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default function VerticalLinearStepper() {
5252
// Manage focus when the active step changes.
5353
React.useEffect(() => {
5454
const previousActiveStep = previousActiveStepRef.current;
55+
previousActiveStepRef.current = activeStep;
5556

5657
if (previousActiveStep < activeStep) {
5758
if (activeStep === steps.length) {
@@ -61,17 +62,15 @@ export default function VerticalLinearStepper() {
6162
// Focus the "Continue" button if the user is going forward.
6263
continueButtonRef.current?.focus();
6364
}
65+
return;
66+
}
67+
if (activeStep === 0) {
68+
// If the user has completed all steps and hits Reset, focus the Next button.
69+
continueButtonRef.current?.focus();
6470
} else {
65-
if (activeStep === 0) {
66-
// If the user has completed all steps and hits Reset, focus the Next button.
67-
continueButtonRef.current?.focus();
68-
} else {
69-
// Focus the "Back" button if the user is going backward.
70-
backButtonRef.current?.focus();
71-
}
71+
// Focus the "Back" button if the user is going backward.
72+
backButtonRef.current?.focus();
7273
}
73-
74-
previousActiveStepRef.current = activeStep;
7574
}, [activeStep]);
7675

7776
return (

‎docs/data/material/components/steppers/VerticalLinearStepper.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export default function VerticalLinearStepper() {
5252
// Manage focus when the active step changes.
5353
React.useEffect(() => {
5454
const previousActiveStep = previousActiveStepRef.current;
55+
previousActiveStepRef.current = activeStep;
5556

5657
if (previousActiveStep < activeStep) {
5758
if (activeStep === steps.length) {
@@ -61,17 +62,15 @@ export default function VerticalLinearStepper() {
6162
// Focus the "Continue" button if the user is going forward.
6263
continueButtonRef.current?.focus();
6364
}
65+
return;
66+
}
67+
if (activeStep === 0) {
68+
// If the user has completed all steps and hits Reset, focus the Next button.
69+
continueButtonRef.current?.focus();
6470
} else {
65-
if (activeStep === 0) {
66-
// If the user has completed all steps and hits Reset, focus the Next button.
67-
continueButtonRef.current?.focus();
68-
} else {
69-
// Focus the "Back" button if the user is going backward.
70-
backButtonRef.current?.focus();
71-
}
71+
// Focus the "Back" button if the user is going backward.
72+
backButtonRef.current?.focus();
7273
}
73-
74-
previousActiveStepRef.current = activeStep;
7574
}, [activeStep]);
7675

7776
return (
@@ -99,14 +98,15 @@ export default function VerticalLinearStepper() {
9998
>
10099
{index === steps.length - 1 ? 'Finish' : 'Continue'}
101100
</Button>
102-
<Button
103-
disabled={index === 0}
104-
onClick={handleBack}
105-
sx={{ mt: 1, mr: 1 }}
106-
ref={backButtonRef}
107-
>
108-
Back
109-
</Button>
101+
{index !== 0 && (
102+
<Button
103+
onClick={handleBack}
104+
sx={{ mt: 1, mr: 1 }}
105+
ref={backButtonRef}
106+
>
107+
Back
108+
</Button>
109+
)}
110110
</Box>
111111
</StepContent>
112112
</Step>

0 commit comments

Comments
 (0)