feat(module:carousel): support autoplay speed (NG-ZORRO#1741)

close NG-ZORRO#1711
wenqi73 · Aug 27, 2018 · be272e7 · be272e7
1 parent 9f3f174
commit be272e7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
@@ -19,6 +19,7 @@ A carousel component. Scales with its container.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzAutoPlay]` | Whether to scroll automatically | boolean | `false` |
+| `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | number | 3000 |
 | `[nzDots]` | Whether to show the dots at the bottom of the gallery | boolean | `true` |
 | `[nzEffect]` | Transition effect | `scrollx` ｜ `fade` | `scrollx` |
 | `[nzVertical]` | Whether to use a vertical display | boolean | `false` |

diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
@@ -20,6 +20,7 @@ subtitle: 走马灯
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzAutoPlay]` | 是否自动切换 | boolean | false |
+| `[nzAutoPlaySpeed]` | 切换时间(毫秒)，当设置为0时不切换 | number | 3000 |
 | `[nzDots]` | 是否显示面板指示点 | boolean | true |
 | `[nzEffect]` | 动画效果函数，可取 scrollx, fade | string | scrollx |
 | `[nzVertical]` | 垂直显示 | boolean | false |

diff --git a/components/carousel/nz-carousel.component.ts b/components/carousel/nz-carousel.component.ts
@@ -17,7 +17,7 @@ import {
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { toBoolean } from '../core/util/convert';
+import { toBoolean, toNumber } from '../core/util/convert';
 
 import { NzCarouselContentDirective } from './nz-carousel-content.directive';
 
@@ -56,6 +56,7 @@ import { NzCarouselContentDirective } from './nz-carousel-content.directive';
 })
 export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterContentInit {
   private _autoPlay = false;
+  private _autoPlaySpeed = 3000;
   private _dots = true;
   private _vertical = false;
   private _effect = 'scrollx';
@@ -108,6 +109,16 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
     return this._autoPlay;
   }
 
+  @Input()
+  set nzAutoPlaySpeed(value: number) {
+    this._autoPlaySpeed = toNumber(value, null);
+    this.setUpAutoPlay();
+  }
+
+  get nzAutoPlaySpeed(): number {
+    return this._autoPlaySpeed;
+  }
+
   @Input()
   @HostBinding('class.ant-carousel-vertical')
   set nzVertical(value: boolean) {
@@ -175,10 +186,10 @@ export class NzCarouselComponent implements AfterViewInit, OnDestroy, AfterConte
 
   setUpAutoPlay(): void {
     this.clearTimeout();
-    if (this.nzAutoPlay) {
+    if (this.nzAutoPlay && this.nzAutoPlaySpeed > 0) {
       this.timeout = setTimeout(_ => {
         this.setActive(this.slideContents.toArray()[ this.nextIndex ], this.nextIndex);
-      }, 3000);
+      }, this.nzAutoPlaySpeed);
     }
   }
 

diff --git a/components/carousel/nz-carousel.spec.ts b/components/carousel/nz-carousel.spec.ts
@@ -124,6 +124,21 @@ describe('carousel', () => {
       testComponent.nzCarouselComponent.clearTimeout();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
     }));
+    it('should autoplay speed work', fakeAsync(() => {
+      testComponent.autoPlay = true;
+      testComponent.autoPlaySpeed = 1000;
+      fixture.detectChanges();
+      expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
+      fixture.detectChanges();
+      tick(1000 + 10);
+      fixture.detectChanges();
+      expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+      testComponent.autoPlaySpeed = 0;
+      fixture.detectChanges();
+      tick(2000 + 10);
+      fixture.detectChanges();
+      expect(carouselContents[ 1 ].nativeElement.classList).toContain('slick-active');
+    }));
     it('should func work', () => {
       fixture.detectChanges();
       expect(carouselContents[ 0 ].nativeElement.classList).toContain('slick-active');
@@ -148,6 +163,7 @@ describe('carousel', () => {
       [nzVertical]="vertical"
       [nzDots]="dots"
       [nzAutoPlay]="autoPlay"
+      [nzAutoPlaySpeed]="autoPlaySpeed"
       (nzAfterChange)="afterChange($event)"
       (nzBeforeChange)="beforeChange($event)">
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
@@ -160,6 +176,7 @@ export class NzTestCarouselBasicComponent {
   effect = 'scrollx';
   array = [ 1, 2, 3, 4 ];
   autoPlay = false;
+  autoPlaySpeed = 3000;
   afterChange = jasmine.createSpy('afterChange callback');
   beforeChange = jasmine.createSpy('beforeChange callback');