Skip to content

Commit

Permalink
Fix based on review
Browse files Browse the repository at this point in the history
  • Loading branch information
@jwshinjwshin
jwshinjwshin committed Sep 1, 2017
1 parent 9a6c5c3 commit 5d2ecf6
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 33 deletions.
40 changes: 21 additions & 19 deletions src/cdk/stepper/stepper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,6 @@ export class CdkStep {
selector: '[cdkStepper]',
})
export class CdkStepper {
private _stepsArray: CdkStep[];

/** The list of step components that the stepper is holding. */
@ContentChildren(CdkStep) _steps: QueryList<CdkStep>;

Expand All @@ -139,7 +137,7 @@ export class CdkStepper {
get selectedIndex() { return this._selectedIndex; }
set selectedIndex(index: number) {
if (this._anyControlsInvalid(index)
|| index < this._selectedIndex && !this._stepsArray[index].editable) {
|| index < this._selectedIndex && !this._steps.toArray()[index].editable) {
// remove focus from clicked step header if the step is not able to be selected
this._stepHeader.toArray()[index].nativeElement.blur();
} else if (this._selectedIndex != index) {
Expand All @@ -153,8 +151,7 @@ export class CdkStepper {
@Input()
get selected() { return this._steps[this.selectedIndex]; }
set selected(step: CdkStep) {
let index = this._stepsArray.indexOf(step);
this.selectedIndex = index;
this.selectedIndex = this._steps.toArray().indexOf(step);
}

/** Event emitted when the selected step has changed. */
Expand All @@ -170,10 +167,6 @@ export class CdkStepper {
this._groupId = nextId++;
}

ngAfterContentInit() {
this._stepsArray = this._steps.toArray();
}

/** Selects and focuses the next step in list. */
next(): void {
this.selectedIndex = Math.min(this._selectedIndex + 1, this._steps.length - 1);
Expand Down Expand Up @@ -207,7 +200,7 @@ export class CdkStepper {

/** Returns the type of icon to be displayed. */
_getIndicatorType(index: number): 'number' | 'edit' | 'done' {
const step = this._stepsArray[index];
const step = this._steps.toArray()[index];
if (!step.completed || this._selectedIndex == index) {
return 'number';
} else {
Expand All @@ -216,11 +209,12 @@ export class CdkStepper {
}

private _emitStepperSelectionEvent(newIndex: number): void {
const stepsArray = this._steps.toArray();
this.selectionChange.emit({
selectedIndex: newIndex,
previouslySelectedIndex: this._selectedIndex,
selectedStep: this._stepsArray[newIndex],
previouslySelectedStep: this._stepsArray[this._selectedIndex],
selectedStep: stepsArray[newIndex],
previouslySelectedStep: stepsArray[this._selectedIndex],
});
this._selectedIndex = newIndex;
}
Expand All @@ -229,16 +223,16 @@ export class CdkStepper {
switch (event.keyCode) {
case RIGHT_ARROW:
if (this._layoutDirection() === 'rtl') {
this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
this._focusPreviousStep();
} else {
this._focusStep((this._focusIndex + 1) % this._steps.length);
this._focusNextStep();
}
break;
case LEFT_ARROW:
if (this._layoutDirection() === 'rtl') {
this._focusStep((this._focusIndex + 1) % this._steps.length);
this._focusNextStep();
} else {
this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
this._focusPreviousStep();
}
break;
case SPACE:
Expand All @@ -252,15 +246,23 @@ export class CdkStepper {
event.preventDefault();
}

private _focusNextStep() {
this._focusStep((this._focusIndex + 1) % this._steps.length);
}

private _focusPreviousStep() {
this._focusStep((this._focusIndex + this._steps.length - 1) % this._steps.length);
}

private _focusStep(index: number) {
this._focusIndex = index;
this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
}

private _anyControlsInvalid(index: number): boolean {
this._stepsArray[this._selectedIndex].interacted = true;
if (this._linear) {
return this._stepsArray.slice(0, index).some(step => step.stepControl.invalid);
this._steps.toArray()[this._selectedIndex].interacted = true;
if (this._linear && index >= 0) {
return this._steps.toArray().slice(0, index).some(step => step.stepControl.invalid);
}
return false;
}
Expand Down
9 changes: 4 additions & 5 deletions src/lib/stepper/_stepper-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,6 @@
background-color: mat-color($background, hover);
}

.mat-step-label.mat-step-label-active {
color: mat-color($foreground, text);
}


.mat-step-label,
.mat-step-optional {
color: mat-color($foreground, disabled-text);
Expand All @@ -32,6 +27,10 @@
background-color: mat-color($foreground, disabled-text);
color: mat-color($primary, default-contrast);
}

.mat-step-label.mat-step-label-active {
color: mat-color($foreground, text);
}
}

.mat-stepper-horizontal, .mat-stepper-vertical {
Expand Down
18 changes: 9 additions & 9 deletions src/lib/stepper/stepper.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ describe('MdHorizontalStepper', () => {
});

it('should set the correct step position for animation', () => {
assertCorrectStepPosition(stepperComponent, fixture, dir === 'rtl');
assertCorrectStepAnimationDirection(stepperComponent, fixture);
});

it('should support keyboard events to move and select focus', () => {
Expand Down Expand Up @@ -118,7 +118,7 @@ describe('MdHorizontalStepper', () => {
});

it('should reverse animation in RTL mode', () => {
assertCorrectStepPosition(stepperComponent, fixture, dir === 'rtl');
assertCorrectStepAnimationDirection(stepperComponent, fixture, 'rtl');
});
});

Expand Down Expand Up @@ -224,7 +224,7 @@ describe('MdVerticalStepper', () => {
});

it('should set the correct step position for animation', () => {
assertCorrectStepPosition(stepperComponent, fixture, dir === 'rtl');
assertCorrectStepAnimationDirection(stepperComponent, fixture);
});

it('should support keyboard events to move and select focus', () => {
Expand Down Expand Up @@ -268,7 +268,7 @@ describe('MdVerticalStepper', () => {
});

it('should reverse animation in RTL mode', () => {
assertCorrectStepPosition(stepperComponent, fixture, dir === 'rtl');
assertCorrectStepAnimationDirection(stepperComponent, fixture, 'rtl');
});
});

Expand Down Expand Up @@ -421,11 +421,11 @@ function assertPreviousStepperButtonClick(stepperComponent: MdStepper,
}

/** Asserts that step position is correct for animation. */
function assertCorrectStepPosition(stepperComponent: MdStepper,
function assertCorrectStepAnimationDirection(stepperComponent: MdStepper,
fixture: ComponentFixture<any>,
rtl: boolean) {
rtl?: 'rtl') {
expect(stepperComponent._getAnimationDirection(0)).toBe('current');
if (rtl) {
if (rtl === 'rtl') {
expect(stepperComponent._getAnimationDirection(1)).toBe('previous');
expect(stepperComponent._getAnimationDirection(2)).toBe('previous');
} else {
Expand All @@ -436,7 +436,7 @@ function assertCorrectStepPosition(stepperComponent: MdStepper,
stepperComponent.selectedIndex = 1;
fixture.detectChanges();

if (rtl) {
if (rtl === 'rtl') {
expect(stepperComponent._getAnimationDirection(0)).toBe('next');
expect(stepperComponent._getAnimationDirection(2)).toBe('previous');
} else {
Expand All @@ -448,7 +448,7 @@ function assertCorrectStepPosition(stepperComponent: MdStepper,
stepperComponent.selectedIndex = 2;
fixture.detectChanges();

if (rtl) {
if (rtl === 'rtl') {
expect(stepperComponent._getAnimationDirection(0)).toBe('next');
expect(stepperComponent._getAnimationDirection(1)).toBe('next');
} else {
Expand Down

0 comments on commit 5d2ecf6

Please sign in to comment.