Merge branch '0.7.0' into upload

PROGRESS.md

@@ -41,9 +41,9 @@
 | timepicker | x | x | x | trotyl | - |
 | calendar | x | x | x | trotyl | - |
 | affix | x | x | x | cipchk | - |
-| transfer | x | x | x | cipchk | - |
+| transfer | √ | 100% | 100% | cipchk | x |
 | avatar | √ | 100% | 100% | cipchk | x |
-| list | x | x | x | cipchk | - |
+| list | √ | 100% | 100% | cipchk | x |
 | upload | √ | 95% | 100% | cipchk | x |
 | anchor | x | x | x | cipchk | - |
 | backtop | x | x | x | cipchk | - |

components/index.ts

@@ -51,6 +51,7 @@ export * from './layout';
 export * from './dropdown';
 export * from './menu';
 export * from './upload';
+export * from './transfer';
 export * from './i18n';
 export * from './locale/index';
 export * from './list/index';

components/list/demo/grid.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 import { Component } from '@angular/core';
 
 @Component({
@@ -8,9 +7,8 @@ import { Component } from '@angular/core';
     <ng-template #item let-item>
       <nz-list-item [nzContent]="nzContent">
         <ng-template #nzContent>
-          <nz-card>
-            <ng-template #title>{{item.title}}</ng-template>
-            <ng-template #body>Card content</ng-template>
+          <nz-card [nzTitle]="item.title">
+            Card content
           </nz-card>
         </ng-template>
       </nz-list-item>

components/list/demo/infinite-load.md

@@ -0,0 +1,14 @@
+---
+order: 6
+title:
+  zh-CN: 滚动加载
+  en-US: Scrolling loaded
+---
+
+## zh-CN
+
+结合 [ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll) 实现滚动自动加载列表。
+
+## en-US
+
+The example of infinite load with [ngx-infinite-scroll](https://github.com/orizens/ngx-infinite-scroll).

components/list/demo/infinite-load.ts

@@ -0,0 +1,78 @@
+// tslint:disable:no-any
+import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+
+const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
+
+@Component({
+  selector: 'nz-demo-list-infinite-load',
+  template: `
+  <div class="demo-infinite-container"
+    infiniteScroll
+    [infiniteScrollDistance]="2"
+    [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()"
+    [scrollWindow]="false">
+    <nz-list [nzDataSource]="data">
+      <ng-template #item let-item>
+        <nz-list-item>
+          <nz-list-item-meta
+              [nzTitle]="nzTitle"
+              nzAvatar="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+              [nzDescription]="item.email">
+              <ng-template #nzTitle>
+                  <a href="https://ng.ant.design">{{item.name.last}}</a>
+              </ng-template>
+          </nz-list-item-meta>
+        </nz-list-item>
+      </ng-template>
+      <nz-spin *ngIf="loading && hasMore" class="demo-loading"></nz-spin>
+    </nz-list>
+  </div>
+  `,
+  styles: [ `
+  :host ::ng-deep .demo-infinite-container {
+    border: 1px solid #e8e8e8;
+    border-radius: 4px;
+    overflow: auto;
+    padding: 8px 24px;
+    height: 300px;
+  }
+  :host ::ng-deep .demo-loading {
+    position: absolute;
+    bottom: -40px;
+    left: 50%;
+  }
+  ` ]
+})
+export class NzDemoListInfiniteLoadComponent implements OnInit {
+  data: any[] = [];
+  loading = false;
+  hasMore = true;
+
+  constructor(private http: HttpClient, private msg: NzMessageService) {}
+
+  ngOnInit(): void {
+    this.getData((res: any) => this.data = res.results);
+  }
+
+  getData(callback: (res: any) => void): void {
+    this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
+  }
+
+  onScroll(): void {
+    if (this.loading) return;
+    this.loading = true;
+    if (this.data.length > 14) {
+      this.msg.warning('Infinite List loaded all');
+      this.hasMore = false;
+      this.loading = false;
+      return;
+    }
+    this.getData((res: any) => {
+      this.data = this.data.concat(res.results);
+      this.loading = false;
+    });
+  }
+}

components/list/demo/loadmore.ts

@@ -1,6 +1,6 @@
-// tslint:disable
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+// tslint:disable:no-any
 import { HttpClient } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
 import { NzMessageService } from 'ng-zorro-antd';
 
 const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
@@ -55,26 +55,26 @@ export class NzDemoListLoadmoreComponent implements OnInit {
 
   constructor(private http: HttpClient, private msg: NzMessageService) {}
 
-  ngOnInit() {
+  ngOnInit(): void {
       this.getData((res: any) => {
         this.data = res.results;
         this.loading = false;
       });
   }
 
-  getData(callback: (res: any) => void) {
+  getData(callback: (res: any) => void): void {
       this.http.get(fakeDataUrl).subscribe((res: any) => callback(res));
   }
 
-  onLoadMore() {
+  onLoadMore(): void {
     this.loadingMore = true;
     this.http.get(fakeDataUrl).subscribe((res: any) => {
       this.data = this.data.concat(res.results);
       this.loadingMore = false;
     });
   }
 
-  edit(item: any) {
+  edit(item: any): void {
       this.msg.success(item.email);
   }
 }

components/list/demo/resposive.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 import { Component } from '@angular/core';
 
 @Component({
@@ -8,9 +7,8 @@ import { Component } from '@angular/core';
     <ng-template #item let-item>
       <nz-list-item [nzContent]="nzContent">
         <ng-template #nzContent>
-          <nz-card>
-            <ng-template #title>{{item.title}}</ng-template>
-            <ng-template #body>Card content</ng-template>
+          <nz-card [nzTitle]="item.title">
+            Card content
           </nz-card>
         </ng-template>
       </nz-list-item>
@@ -21,22 +19,22 @@ import { Component } from '@angular/core';
 export class NzDemoListResposiveComponent {
   data = [
     {
-      title: 'Title 1',
+      title: 'Title 1'
     },
     {
-      title: 'Title 2',
+      title: 'Title 2'
     },
     {
-      title: 'Title 3',
+      title: 'Title 3'
     },
     {
-      title: 'Title 4',
+      title: 'Title 4'
     },
     {
-      title: 'Title 5',
+      title: 'Title 5'
     },
     {
-      title: 'Title 6',
-    },
+      title: 'Title 6'
+    }
   ];
 }

components/list/demo/vertical.ts

@@ -1,4 +1,3 @@
-// tslint:disable
 import { Component } from '@angular/core';
 
 @Component({
@@ -29,12 +28,12 @@ import { Component } from '@angular/core';
 })
 export class NzDemoListVerticalComponent {
   data = new Array(5).fill({}).map((i, index) => {
-      return {
-          href: 'http://ant.design',
-          title: `ant design part ${index}`,
-          avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
-          description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
-          content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
-      };
+    return {
+      href: 'http://ant.design',
+      title: `ant design part ${index}`,
+      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+      description: 'Ant Design, a design language for background applications, is refined by Ant UED Team.',
+      content: 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'
+    };
   });
 }

components/list/doc/index.en-US.md

@@ -4,3 +4,57 @@ type: Data Display
 title: List
 cols: 1
 ---
+
+Simple List.
+
+## When To Use
+
+A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.
+
+## API
+
+### List
+
+| Property | Description | Type | Default
+| --- | --- | --- | --- |
+| nzDataSource | Data source for list | `any[]` | - |
+| item | Custom item renderer | `TemplateRef` | - |
+| nzBordered | Toggles rendering of the border around the list | boolean | false |
+| nzFooter | List footer renderer | `string,TemplateRef` | - |
+| nzGrid | The grid type of list. You can set grid to something like `{gutter: 16, column: 4}` | object | - |
+| nzHeader | List header renderer | `string,TemplateRef` | - |
+| nzItemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
+| nzLoading | Shows a loading indicator while the contents of the list are being fetched | boolean | false |
+| loadMore | Shows a load more content | `TemplateRef` | - |
+| pagination | Shows a pagination content | `TemplateRef` | - |
+| nzSize | Size of list | `default,small,large` | `default` |
+| nzSplit | Toggles rendering of the split under the list item | boolean | true |
+
+### List grid props
+
+| Property | Description | Type | Default
+| --- | --- | --- | --- |
+| column | column of grid | number | - |
+| gutter | spacing between grid | number | 0 |
+| xs | `<576px` column of grid | number | - |
+| sm | `≥576px` column of grid | number | - |
+| md | `≥768px` column of grid | number | - |
+| lg | `≥992px` column of grid | number | - |
+| xl | `≥1200px` column of grid | number | - |
+| xxl | `≥1600px` column of grid | number | - |
+
+### nz-list-item
+
+| Property | Description | Type | Default
+| --- | --- | --- | --- |
+| nzContent | content renderer | `string,TemplateRef` | - |
+| action | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | `TemplateRef` | - |
+| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | `TemplateRef` | - |
+
+### nz-list-item-meta
+
+| Property | Description | Type | Default
+| --- | --- | --- | --- |
+| nzAvatar | The avatar of list item | `string,TemplateRef` | - |
+| nzDescription | The description of list item | `string,TemplateRef` | - |
+| nzTitle | The title of list item | `string,TemplateRef` | - |

components/list/doc/index.zh-CN.md

@@ -24,11 +24,11 @@ cols: 1
 | nzFooter | 列表底部 | `string,TemplateRef` | - |
 | nzGrid | 列表栅格配置 | object | - |
 | nzHeader | 列表头部 | `string,TemplateRef` | - |
-| nzItemLayout | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | horizontal |
+| nzItemLayout | 设置 `nz-list-item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
 | nzLoading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean | false |
 | loadMore | 加载更多 | `TemplateRef` | - |
 | pagination | 对应的 `pagination` 配置 | `TemplateRef` | - |
-| nzSize | list 的尺寸 | `default,middle,small` | `default` |
+| nzSize | list 的尺寸 | `default,small,large` | `default` |
 | nzSplit | 是否展示分割线 | boolean | true |
 
 ### List grid props

components/list/index.ts

@@ -1,5 +1 @@
-export { NzListItemMetaComponent } from './nz-list-item-meta.component';
-export { NzListItemComponent } from './nz-list-item.component';
-export { NzListComponent } from './nz-list.component';
-export * from './interface';
-export { NzListModule } from './nz-list.module';
+export * from './public-api';