Skip to content

Commit

Permalink
fix(module: steps): add current support
Browse files Browse the repository at this point in the history
  • Loading branch information
@nuonuoge
nuonuoge committed Nov 19, 2020
1 parent c184b27 commit 5c4a833
Show file tree
Hide file tree
Showing 4 changed files with 136 additions and 50 deletions.
77 changes: 76 additions & 1 deletion components/steps/demo/basic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,28 @@ import { Component, OnInit } from '@angular/core';
<Step [title]="'Step 3'" [icon]="customIcon"></Step>
</Steps>
</div>
<div>
<div class="sub-title">Switch Step</div>
</div>
<div>
<Steps [direction]="'horizontal'" [current]="current">
<Step [title]="'Finished'"></Step>
<Step [title]="'In Progress'"></Step>
<Step [title]="'Waiting'"></Step>
</Steps>
</div>
<div class="steps-content">{{ index }}</div>
<div class="steps-action">
<button nz-button nzType="default" (click)="pre()" *ngIf="current > 0">
<span>Previous</span>
</button>
<button nz-button nzType="default" (click)="next()" *ngIf="current < 2">
<span>Next</span>
</button>
<button nz-button nzType="primary" (click)="done()" *ngIf="current === 2">
<span>Done</span>
</button>
</div>
</div>
</div>
Expand Down Expand Up @@ -153,13 +175,32 @@ import { Component, OnInit } from '@angular/core';
border-radius: 5px;
margin: 0 15px 15px 15px;
}
.steps-content {
margin-top: 16px;
border: 1px dashed #e9e9e9;
border-radius: 6px;
background-color: #fafafa;
min-height: 200px;
text-align: center;
padding-top: 80px;
}
.steps-action {
margin-top: 24px;
}
button {
margin-right: 8px;
}
`
]
})
export class DemoStepsBasicComponent implements OnInit {
steps = [];
current = 0;
index = 'First-content';

constructor() {}
constructor() { }

ngOnInit() {
this.steps = [
Expand All @@ -177,4 +218,38 @@ export class DemoStepsBasicComponent implements OnInit {
}
];
}

pre(): void {
this.current -= 1;
this.changeContent();
}

next(): void {
this.current += 1;
this.changeContent();
}

done(): void {
console.log('done');
}

changeContent(): void {
switch (this.current) {
case 0: {
this.index = 'First-content';
break;
}
case 1: {
this.index = 'Second-content';
break;
}
case 2: {
this.index = 'third-content';
break;
}
default: {
this.index = 'error';
}
}
}
}
53 changes: 44 additions & 9 deletions components/steps/step/step.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,14 +25,19 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
export class StepComponent implements OnInit {
prefixCls = 'am-steps';
stepItemCls = {};
iconCls: object;
iconCls: object = {
[`${this.prefixCls}-icon`]: true
};
tailContent: string;
stepNumber: number;
isIconString: boolean = true;
iconSize: string;
outStatus = 'process';

private _status: StepStatusEnum;
private _icon: string | TemplateRef<any>;
private isCustomStatus = false;
private isCustomIcon = false;

@Input()
get status(): StepStatusEnum {
Expand All @@ -41,6 +46,8 @@ export class StepComponent implements OnInit {
set status(value: StepStatusEnum) {
if (value) {
this._status = value;
this.isCustomStatus = true;
this.setIcon();
this.setClass();
}
}
Expand All @@ -55,30 +62,58 @@ export class StepComponent implements OnInit {
set icon(value: string | TemplateRef<any>) {
if (value) {
this._icon = value;
this.isCustomIcon = true;
this.setClass();
}
}

set currentIndex(current: number) {
this._currentIndex = current;
if (!this.isCustomStatus) {
this._status = current > this.stepNumber ? StepStatusEnum.FINISH : current === this.stepNumber ?
this.outStatus || ('' as any) : StepStatusEnum.WAIT;
this.setIcon();
this.setClass();
}
}

private _currentIndex = 0;

@HostBinding('class.am-steps-item')
clsStepItem: boolean = true;

constructor(private _el: ElementRef) {}
constructor(private _el: ElementRef) { }

isTemplateRef(value) {
return value instanceof TemplateRef;
}

setClass() {
this.iconCls = {
[`${this.prefixCls}-icon`]: true
};
this.stepItemCls = Object.assign(this.stepItemCls, {
this.stepItemCls = {
[`${this.prefixCls}-item-${this.status}`]: true,
[`${this.prefixCls}-item-custom`]: this.icon
});
[`${this.prefixCls}-item-custom`]: this.isCustomIcon || (this.icon && this._currentIndex !== this.stepNumber)
};
}

setIcon() {
if (!this.isCustomIcon) {
switch (this._status) {
case StepStatusEnum.FINISH:
this._icon = 'check-circle-o';
break;
case StepStatusEnum.ERROR:
this._icon = 'cross-circle-o';
break;
case StepStatusEnum.WAIT:
this._icon = 'ellipsis';
break;
default:
break;
}
}
}

ngOnInit() {}
ngOnInit() { }
}

export enum StepStatusEnum {
Expand Down
9 changes: 9 additions & 0 deletions components/steps/steps.component.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,15 @@ describe('StepsComponent', () => {
);
});

it('should current work', () => {
component.current = 0;
fixture.detectChanges();
expect(stepList[0].querySelector('.am-steps-icon').innerText).toBe('1', 'current 1');
component.current = 1;
fixture.detectChanges();
expect(stepList[1].querySelector('.am-steps-icon').innerText).toBe('2', 'current 2');
});

it('should step change work', fakeAsync(() => {
component.isChange = true;
fixture.detectChanges();
Expand Down
47 changes: 7 additions & 40 deletions components/steps/steps.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export class StepsComponent implements OnInit, AfterContentInit {
private _size: string;
private _status: StepStatusEnum = StepStatusEnum.PROCESS;
private _direction: StepDirectionEnum = StepDirectionEnum.VERTICAL;
private _stepsCls: object;

@ContentChildren(StepComponent)
stepItems: QueryList<StepComponent>;
Expand All @@ -32,6 +31,9 @@ export class StepsComponent implements OnInit, AfterContentInit {
set current(value) {
if (value >= 0) {
this._current = value;
if (this.stepItems) {
this.setStepStyle();
}
}
}
@Input()
Expand Down Expand Up @@ -63,57 +65,22 @@ export class StepsComponent implements OnInit, AfterContentInit {
@HostBinding('class.am-steps-horizontal')
clsStepsHztl: boolean;

constructor(private _elf: ElementRef, private _render: Renderer2) {}
constructor(private _elf: ElementRef, private _render: Renderer2) { }

setStepStyle() {
const itemCount = this.stepItems.length;
const itemArr = this.stepItems['_results'];
for (let index = 0; index < itemCount; index++) {
const step = itemArr[index];
step.stepNumber = index + 1;
step.outStatus = this._status;
step.currentIndex = this._current + 1;
step.iconSize = this._size === 'small' ? (this._status === StepStatusEnum.WAIT ? 'xxs' : 'xs') : 'md';
if (index < itemCount - 1 && itemArr[index + 1].status === StepStatusEnum.ERROR) {
step.stepItemCls = step.stepItemCls
? Object.assign(step.stepItemCls, { 'error-tail': true })
: { 'error-tail': true };
}
let icon = step.icon;
if (!step.status) {
if (index === this._current) {
step.status = this._status;
} else if (index < this._current) {
step.status = StepStatusEnum.FINISH;
} else {
step.status = StepStatusEnum.WAIT;
}
} else if (step.status && !icon) {
switch (step.status) {
case StepStatusEnum.FINISH:
icon = 'check-circle-o';
break;
case StepStatusEnum.ERROR:
icon = 'cross-circle-o';
break;
}
}
if (!icon && step.status !== StepStatusEnum.PROCESS) {
if (index < this._current) {
icon = 'check-circle-o';
} else if (index > this._current) {
icon = 'ellipsis';
step.stepItemCls = step.stepItemCls
? Object.assign(step.stepItemCls, { 'ellipsis-item': true })
: { 'ellipsis-item': true };
}
if (
(this._status === StepStatusEnum.ERROR && index === this._current) ||
step.status === StepStatusEnum.ERROR
) {
icon = 'cross-circle-o';
}
}
step.icon = icon;
step.iconSize = this._size === 'small' ? (this._status === StepStatusEnum.WAIT ? 'xxs' : 'xs') : 'md';
step.setClass();
}
}

Expand Down

0 comments on commit 5c4a833

Please sign in to comment.