refactor(module:carousel): refactor carousel (#1072)

* wip(module:carousel): refactor carousel * test(module:carousel): add test for carousel
NG-ZORRO · Feb 26, 2018 · 8aca820 · 8aca820
1 parent 6875982
commit 8aca820
Show file tree

Hide file tree

Showing 16 changed files with 393 additions and 302 deletions.
diff --git a/components/card/nz-card.spec.ts b/components/card/nz-card.spec.ts
@@ -16,7 +16,7 @@ import { NzDemoCardTabsComponent } from './demo/tabs';
 import { NzCardComponent } from './nz-card.component';
 import { NzCardModule } from './nz-card.module';
 
-describe('badge', () => {
+describe('card', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
       imports     : [ NzCardModule ],

diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
@@ -12,31 +12,3 @@ title:
 ## en-US
 
 Timing of scrolling to the next card/picture.
-
-````jsx
-import { Carousel } from 'antd';
-
-ReactDOM.render(
-  <Carousel autoplay>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
-````
-
-````css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-````
diff --git a/components/carousel/demo/autoplay.ts b/components/carousel/demo/autoplay.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-carousel-autoplay',
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
-      `:host ::ng-deep .ant-carousel .slick-slide {
+      `[nz-carousel-content] {
       text-align: center;
       height: 160px;
       line-height: 160px;
@@ -22,12 +22,6 @@ import { Component, OnInit } from '@angular/core';
     `
   ]
 })
-export class NzDemoCarouselAutoplayComponent implements OnInit {
-  array = [ 1 ];
-
-  ngOnInit() {
-    setTimeout(_ => {
-      this.array = [ 1, 2, 3, 4 ];
-    }, 500);
-  }
+export class NzDemoCarouselAutoplayComponent {
+  array = [ 1, 2, 3, 4 ];
 }
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
@@ -13,34 +13,3 @@ title:
 
 Basic usage.
 
-````jsx
-import { Carousel } from 'antd';
-
-function onChange(a, b, c) {
-  console.log(a, b, c);
-}
-
-ReactDOM.render(
-  <Carousel afterChange={onChange}>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
-````
-
-````css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-````
diff --git a/components/carousel/demo/basic.ts b/components/carousel/demo/basic.ts
@@ -1,13 +1,13 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-carousel-basic',
   template: `
-    <nz-carousel>
+    <nz-carousel [nzEffect]="effect">
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
-      `:host ::ng-deep .ant-carousel .slick-slide {
+      `[nz-carousel-content] {
       text-align: center;
       height: 160px;
       line-height: 160px;
@@ -22,12 +22,13 @@ import { Component, OnInit } from '@angular/core';
     `
   ]
 })
-export class NzDemoCarouselBasicComponent implements OnInit {
-  array = [ 1, 2, 3 ];
+export class NzDemoCarouselBasicComponent {
+  array = [ 1, 2, 3, 4 ];
+  effect = 'scrollx';
 
   ngOnInit() {
-    setTimeout(_ => {
-      this.array = [ 1, 2, 3, 4 ];
-    }, 500);
+    setTimeout(() => {
+      this.effect = 'fade';
+    }, 3000);
   }
 }
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
@@ -12,31 +12,3 @@ title:
 ## en-US
 
 Slides use fade for transition.
-
-````jsx
-import { Carousel } from 'antd';
-
-ReactDOM.render(
-  <Carousel effect="fade">
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
-````
-
-````css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-````
diff --git a/components/carousel/demo/fade.ts b/components/carousel/demo/fade.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-carousel-fade',
@@ -7,26 +7,21 @@ import { Component, OnInit } from '@angular/core';
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
-      `:host ::ng-deep .ant-carousel .slick-slide {
+      `[nz-carousel-content] {
       text-align: center;
       height: 160px;
       line-height: 160px;
       background: #364d79;
       color: #fff;
       overflow: hidden;
     }
+
     h3 {
       color: #fff;
     }
     `
   ]
 })
-export class NzDemoCarouselFadeComponent implements OnInit {
-  array = [];
-
-  ngOnInit() {
-    setTimeout(_ => {
-      this.array = [ 1, 2, 3, 4 ];
-    }, 500);
-  }
+export class NzDemoCarouselFadeComponent {
+  array = [ 1, 2, 3, 4 ];
 }
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
@@ -13,30 +13,4 @@ title:
 
 Vertical pagination.
 
-````jsx
-import { Carousel } from 'antd';
 
-ReactDOM.render(
-  <Carousel vertical>
-    <div><h3>1</h3></div>
-    <div><h3>2</h3></div>
-    <div><h3>3</h3></div>
-    <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
-````
-
-````css
-/* For demo */
-.ant-carousel .slick-slide {
-  text-align: center;
-  height: 160px;
-  line-height: 160px;
-  background: #364d79;
-  overflow: hidden;
-}
-
-.ant-carousel .slick-slide h3 {
-  color: #fff;
-}
-````
diff --git a/components/carousel/demo/vertical.ts b/components/carousel/demo/vertical.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'nz-demo-carousel-vertical',
@@ -7,7 +7,7 @@ import { Component, OnInit } from '@angular/core';
       <div nz-carousel-content *ngFor="let index of array"><h3>{{index}}</h3></div>
     </nz-carousel>`,
   styles  : [
-      `:host ::ng-deep .ant-carousel .slick-slide {
+      `[nz-carousel-content] {
       text-align: center;
       height: 160px;
       line-height: 160px;
@@ -22,12 +22,6 @@ import { Component, OnInit } from '@angular/core';
     `
   ]
 })
-export class NzDemoCarouselVerticalComponent implements OnInit {
-  array = [ 1, 2, 3 ]; // try dynamic change the array
-
-  ngOnInit() {
-    setTimeout(() => {
-      this.array = [ 1, 2, 3, 4 ];
-    }, 500);
-  }
+export class NzDemoCarouselVerticalComponent {
+  array = [ 1, 2, 3 ];
 }
diff --git a/components/carousel/doc/index.en-US.md b/components/carousel/doc/index.en-US.md
@@ -16,13 +16,12 @@ A carousel component. Scales with its container.
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| afterChange | Callback function called after the current index changes | function(current) | - |
-| autoplay | Whether to scroll automatically | boolean | `false` |
-| beforeChange | Callback function called before the current index changes | function(from, to) | - |
-| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
-| easing | Transition interpolation function name | string | `linear` |
-| effect | Transition effect | `scrollx` ｜ `fade` | `scrollx` |
-| vertical | Whether to use a vertical display | boolean | `false` |
+| nzAutoPlay | Whether to scroll automatically | boolean | `false` |
+| nzAfterChange | Callback function called after the current index changes | function(current) | - |
+| nzBeforeChange | Callback function called before the current index changes | function(from, to) | - |
+| 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` |
 
 ## Methods
 
@@ -32,4 +31,3 @@ A carousel component. Scales with its container.
 | next() | Change current slide to next slide |
 | prev() | Change current slide to previous slide |
 
-For more info on the parameters, refer to the <https://github.com/akiran/react-slick>
diff --git a/components/carousel/doc/index.zh-CN.md b/components/carousel/doc/index.zh-CN.md
@@ -17,13 +17,12 @@ subtitle: 走马灯
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| afterChange | 切换面板的回调 | function(current) | 无 |
-| autoplay | 是否自动切换 | boolean | false |
-| beforeChange | 切换面板的回调 | function(from, to) | 无 |
-| dots | 是否显示面板指示点 | boolean | true |
-| easing | 动画效果 | string | linear |
-| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
-| vertical | 垂直显示 | boolean | false |
+| nzAutoPlay | 是否自动切换 | boolean | false |
+| nzAfterChange | 切换面板的回调 | (current)=>{} | 无 |
+| nzBeforeChange | 切换面板的回调 | (from, to)=>{} | 无 |
+| nzDots | 是否显示面板指示点 | boolean | true |
+| nzEffect | 动画效果函数，可取 scrollx, fade | string | scrollx |
+| nzVertical | 垂直显示 | boolean | false |
 
 ## 方法
 
@@ -33,4 +32,3 @@ subtitle: 走马灯
 | next() | 切换到下一面板 |
 | prev() | 切换到上一面板 |
 
-更多参数可参考：<https://github.com/akiran/react-slick>
diff --git a/components/carousel/index.ts b/components/carousel/index.ts
@@ -0,0 +1 @@
+export * from './public-api';