refactor(stepper): modify the linear disabled steps calculation and add comments

Author: teodosiah

projects/igniteui-angular/src/lib/stepper/step/step.component.ts

@@ -19,6 +19,8 @@ let NEXT_ID = 0;
  * The IgxStepComponent is used within the `igx-stepper` element and it holds the content of each step.
  * It also supports custom indicators, title and subtitle.
  *
+ * @igxModule IgxStepperModule
+ *
  * @igxKeywords step
  *
  * @example

projects/igniteui-angular/src/lib/stepper/stepper.component.ts

@@ -166,13 +166,9 @@ export class IgxStepperComponent extends IgxCarouselComponentBase implements Igx
     public set linear(value: boolean) {
         this._linear = value;
         if (this._linear) {
-            this.steps.forEach(step => {
-                if (step.index <= this.stepperService.activeStep.index) {
-                    this.stepperService.visitedSteps.add(step);
-                } else {
-                    this.stepperService.visitedSteps.delete(step);
-                }
-            });
+            // when the stepper is in linear mode we should calculate which steps should be disabled
+            // and which are visited i.e. their validity should be correctly displayed.
+            this.stepperService.calculateVisitedSteps();
             this.stepperService.calculateLinearDisabledSteps();
         } else {
             this.stepperService.linearDisabledSteps.clear();

projects/igniteui-angular/src/lib/stepper/stepper.service.ts

@@ -5,7 +5,6 @@ import { IgxStepComponent } from './step/step.component';
 /** @hidden @internal */
 @Injectable()
 export class IgxStepperService {
-
     public activeStep: IgxStepComponent;
     public previousActiveStep: IgxStepComponent;
     public focusedStep: IgxStepComponent;
@@ -20,46 +19,45 @@ export class IgxStepperService {
     }
 
     /**
-     * Adds the step to the `expandedSteps` set and fires the steps change event
-     *
-     * @param step target step
-     * @param uiTrigger is the event triggered by a ui interraction (so we know if we should animate)
-     * @returns void
+     * Activates the step, fires the steps change event and plays animations.
      */
     public expand(step: IgxStepComponent): void {
         if (this.activeStep === step) {
             return;
         }
 
-        const argsCanceled = this.emitActivatingEvent(step);
-
-        if (!argsCanceled) {
-            this.collapsingSteps.delete(step);
+        const cancel = this.emitActivatingEvent(step);
+        if (cancel) {
+            return;
+        }
 
-            this.previousActiveStep = this.activeStep;
-            this.activeStep = step;
-            this.activeStep.activeChange.emit(true);
+        this.collapsingSteps.delete(step);
 
-            this.collapsingSteps.add(this.previousActiveStep);
-            this.visitedSteps.add(this.activeStep);
+        this.previousActiveStep = this.activeStep;
+        this.activeStep = step;
+        this.activeStep.activeChange.emit(true);
 
-            if (this.stepper.orientation === IgxStepperOrienatation.Vertical) {
-                this.previousActiveStep.playCloseAnimation(
-                    this.previousActiveStep.contentContainer
-                );
-                this.activeStep.cdr.detectChanges();
+        this.collapsingSteps.add(this.previousActiveStep);
+        this.visitedSteps.add(this.activeStep);
 
-                this.activeStep.playOpenAnimation(
-                    this.activeStep.contentContainer
-                );
-            } else {
-                this.activeStep.cdr.detectChanges();
-                this.stepper.playHorizontalAnimations();
-            }
+        if (this.stepper.orientation === IgxStepperOrienatation.Vertical) {
+            this.previousActiveStep.playCloseAnimation(
+                this.previousActiveStep.contentContainer
+            );
+            this.activeStep.cdr.detectChanges();
 
+            this.activeStep.playOpenAnimation(
+                this.activeStep.contentContainer
+            );
+        } else {
+            this.activeStep.cdr.detectChanges();
+            this.stepper.playHorizontalAnimations();
         }
     }
 
+    /**
+     * Activates the step and fires the steps change event without playing animations.
+     */
     public expandThroughApi(step: IgxStepComponent): void {
         if (this.activeStep === step) {
             return;
@@ -83,6 +81,9 @@ export class IgxStepperService {
         this.previousActiveStep?.activeChange.emit(false);
     }
 
+    /**
+     * Collapses the currently active step and fires the change event.
+     */
     public collapse(step: IgxStepComponent): void {
         if (this.activeStep === step) {
             return;
@@ -91,19 +92,27 @@ export class IgxStepperService {
         this.collapsingSteps.delete(step);
     }
 
+    /**
+     * Determines the steps that should be marked as visited based on the active step.
+     */
+    public calculateVisitedSteps(): void {
+        this.stepper.steps.forEach(step => {
+            if (step.index <= this.activeStep.index) {
+                this.visitedSteps.add(step);
+            } else {
+                this.visitedSteps.delete(step);
+            }
+        });
+    }
+
+    /**
+     * Determines the steps that should be disabled in linear mode based on the validity of the active step.
+     */
     public calculateLinearDisabledSteps(): void {
         if (this.activeStep.isValid) {
             const firstRequiredIndex = this.getNextRequiredStep();
             if (firstRequiredIndex !== -1) {
-                this.stepper.steps.forEach(s => {
-                    if (s.index > this.activeStep.index) {
-                        if (s.index <= firstRequiredIndex) {
-                            this.linearDisabledSteps.delete(s);
-                        } else {
-                            this.linearDisabledSteps.add(s);
-                        }
-                    }
-                });
+                this.updateLinearDisabledSteps(firstRequiredIndex);
             } else {
                 this.linearDisabledSteps.clear();
             }
@@ -128,6 +137,23 @@ export class IgxStepperService {
         return args.cancel;
     }
 
+    /**
+     * Updates the linearDisabled steps from the current active step to the next required invalid step.
+     *
+     * @param toIndex the index of the last step that should be enabled.
+     */
+    private updateLinearDisabledSteps(toIndex: number): void {
+        this.stepper.steps.forEach(s => {
+            if (s.index > this.activeStep.index) {
+                if (s.index <= toIndex) {
+                    this.linearDisabledSteps.delete(s);
+                } else {
+                    this.linearDisabledSteps.add(s);
+                }
+            }
+        });
+    }
+
     private getNextRequiredStep(): number {
         return this.stepper.steps.findIndex(s => s.index > this.activeStep.index && !s.optional && !s.disabled && !s.isValid);
     }