From 5afe15dca4d2e9bac022b4b93e737e511ce91829 Mon Sep 17 00:00:00 2001 From: Wendell Date: Tue, 21 Aug 2018 17:43:39 +0800 Subject: [PATCH] feat(module:steps): support customized starting index close #1994 --- components/steps/demo/start-index.md | 14 ++++++++++++++ components/steps/demo/start-index.ts | 15 +++++++++++++++ components/steps/doc/index.en-US.md | 1 + components/steps/doc/index.zh-CN.md | 1 + components/steps/nz-steps.component.ts | 13 ++++++++++++- components/steps/nz-steps.spec.ts | 19 +++++++++++++++++-- 6 files changed, 60 insertions(+), 3 deletions(-) create mode 100644 components/steps/demo/start-index.md create mode 100644 components/steps/demo/start-index.ts diff --git a/components/steps/demo/start-index.md b/components/steps/demo/start-index.md new file mode 100644 index 0000000000..79d804cefc --- /dev/null +++ b/components/steps/demo/start-index.md @@ -0,0 +1,14 @@ +--- +order: 1 +title: + zh-CN: 起始序号 + en-US: Starting Index +--- + +## zh-CN + +通过 `nzStartIndex` 来设置步骤条的起始序号. 请注意 `nzCurrent` 也应该有对应的偏移. + +## en-US + +By setting `nzStartIndex` to change starting index of a step component. Be sure to add an offset to `nzCurrent` as well. diff --git a/components/steps/demo/start-index.ts b/components/steps/demo/start-index.ts new file mode 100644 index 0000000000..a1c4111abd --- /dev/null +++ b/components/steps/demo/start-index.ts @@ -0,0 +1,15 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'nz-demo-steps-start-index', + template: ` + + + + + + ` +}) +export class NzDemoStepsStartIndexComponent { + current = 3; +} diff --git a/components/steps/doc/index.en-US.md b/components/steps/doc/index.en-US.md index dccaa69269..f2055d79e9 100755 --- a/components/steps/doc/index.en-US.md +++ b/components/steps/doc/index.en-US.md @@ -32,6 +32,7 @@ The whole of the step bar. | `[nzProgressDot]` | Steps with progress dot style, customize the progress dot by setting it with TemplateRef | Boolean 丨 `TemplateRef<{ $implicit: TemplateRef, status: string, index: number }>` | false | | `[nzSize]` | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | `[nzStatus]` | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | +| `[nzStartIndex]` | to specify the starting number | number | 0 | ### nz-step diff --git a/components/steps/doc/index.zh-CN.md b/components/steps/doc/index.zh-CN.md index 51474416c2..52247958a1 100755 --- a/components/steps/doc/index.zh-CN.md +++ b/components/steps/doc/index.zh-CN.md @@ -33,6 +33,7 @@ title: Steps | `[nzProgressDot]` | 点状步骤条，可以设置为一个 TemplateRef | Boolean 丨 `TemplateRef<{ $implicit: TemplateRef, status: string, index: number }>` | false | | `[nzSize]` | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | | `[nzStatus]` | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | +| `[nzStartIndex]` | 指定起始位置的序号 | number | 0 | ### nz-step diff --git a/components/steps/nz-steps.component.ts b/components/steps/nz-steps.component.ts index 88ce3873b1..badfaa083a 100644 --- a/components/steps/nz-steps.component.ts +++ b/components/steps/nz-steps.component.ts @@ -30,6 +30,7 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { private _current = 0; private _size: NzSizeType = 'default'; private _direction: NzDirectionType = 'horizontal'; + private _startIndex = 0; private unsubscribe$ = new Subject(); stepsClassMap: object; @@ -46,6 +47,16 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { return this._size; } + @Input() + set nzStartIndex(value: number) { + this._startIndex = value; + this.updateChildrenSteps(); + } + + get nzStartIndex(): number { + return this._startIndex; + } + @Input() set nzDirection(value: NzDirectionType) { this._direction = value; @@ -108,7 +119,7 @@ export class NzStepsComponent implements OnInit, OnDestroy, AfterContentInit { step.customProcessTemplate = this.customProcessDotTemplate; } step.direction = this.nzDirection; - step.index = index; + step.index = index + this.nzStartIndex; step.currentIndex = this.nzCurrent; step.last = arr.length === index + 1; step.updateClassMap(); diff --git a/components/steps/nz-steps.spec.ts b/components/steps/nz-steps.spec.ts index 5a5a14c86e..51b0c37602 100644 --- a/components/steps/nz-steps.spec.ts +++ b/components/steps/nz-steps.spec.ts @@ -115,6 +115,19 @@ describe('steps', () => { expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').lastElementChild.classList.contains('ant-steps-icon-dot')).toBe(true); }); + it('should support custom starting index', fakeAsync(() => { + fixture.detectChanges(); + testComponent.startIndex = 3; + testComponent.current = 3; + tick(); + fixture.detectChanges(); + expect(innerSteps[ 0 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-process'); + expect(innerSteps[ 1 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); + expect(innerSteps[ 2 ].nativeElement.className).toBe('ant-steps-item ant-steps-item-wait'); + expect(innerSteps[ 0 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('4'); + expect(innerSteps[ 1 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('5'); + expect(innerSteps[ 2 ].nativeElement.querySelector('.ant-steps-icon').innerText).toBe('6'); + })); }); describe('inner step string', () => { let fixture; @@ -197,7 +210,7 @@ describe('steps', () => { @Component({ selector: 'nz-test-outer-steps', template: ` - + @@ -215,12 +228,13 @@ export class NzTestOuterStepsComponent { size = 'default'; status = 'process'; progressDot = false; + startIndex = 0; } @Component({ selector: 'nz-test-inner-step-string', template: ` - + @@ -235,6 +249,7 @@ export class NzTestInnerStepStringComponent { @ViewChild('descriptionTemplate') descriptionTemplate: TemplateRef; @ViewChild('iconTemplate') iconTemplate: TemplateRef; status = 'process'; + current = 1; icon = 'anticon anticon-user'; title = 'title'; description = 'description';