feat:(module:tree-select): add tree-select component (#1477)

close #1391
NG-ZORRO · May 31, 2018 · 7c6fd1e · 7c6fd1e
1 parent a12bf25
commit 7c6fd1e
Show file tree

Hide file tree

Showing 24 changed files with 1,786 additions and 6 deletions.
diff --git a/components/components.less b/components/components.less
@@ -48,4 +48,5 @@
 @import "./upload/style/index.less";
 @import "./auto-complete/style/index.less";
 @import "./cascader/style/index.less";
-@import "./tree/style/index.less";
+@import "./tree/style/index.less";
+@import "./tree-select/style/index.less";
diff --git a/components/core/animation/select-dropdown-animations.ts b/components/core/animation/select-dropdown-animations.ts
@@ -0,0 +1,55 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+  AnimationTriggerMetadata
+} from '@angular/animations';
+
+export const selectDropDownAnimation: AnimationTriggerMetadata = trigger('selectDropDownAnimation', [
+  state('hidden', style({
+    opacity: 0,
+    display: 'none'
+  })),
+  state('bottom', style({
+    opacity        : 1,
+    transform      : 'scaleY(1)',
+    transformOrigin: '0% 0%'
+  })),
+  state('top', style({
+    opacity        : 1,
+    transform      : 'scaleY(1)',
+    transformOrigin: '0% 100%'
+  })),
+  transition('hidden => bottom', [
+    style({
+      opacity        : 0,
+      transform      : 'scaleY(0.8)',
+      transformOrigin: '0% 0%'
+    }),
+    animate('100ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')
+  ]),
+  transition('bottom => hidden', [
+    animate('100ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({
+      opacity        : 0,
+      transform      : 'scaleY(0.8)',
+      transformOrigin: '0% 0%'
+    }))
+  ]),
+  transition('hidden => top', [
+    style({
+      opacity        : 0,
+      transform      : 'scaleY(0.8)',
+      transformOrigin: '0% 100%'
+    }),
+    animate('100ms cubic-bezier(0.755, 0.05, 0.855, 0.06)')
+  ]),
+  transition('top => hidden', [
+    animate('100ms cubic-bezier(0.755, 0.05, 0.855, 0.06)', style({
+      opacity        : 0,
+      transform      : 'scaleY(0.8)',
+      transformOrigin: '0% 100%'
+    }))
+  ])
+]);
diff --git a/components/core/animation/select-tag-animations.ts b/components/core/animation/select-tag-animations.ts
@@ -0,0 +1,21 @@
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+  AnimationTriggerMetadata
+} from '@angular/animations';
+
+export const selectTagAnimation: AnimationTriggerMetadata = trigger('selectTagAnimation', [
+  state('*', style({ opacity: 1, transform: 'scale(1)' })),
+  transition('void => *', [
+    style({ opacity: 0, transform: 'scale(0)' }),
+    animate('150ms linear')
+  ]),
+  state('void', style({ opacity: 0, transform: 'scale(0)' })),
+  transition('* => void', [
+    style({ opacity: 1, transform: 'scale(1)' }),
+    animate('150ms linear')
+  ])
+]);
diff --git a/components/ng-zorro-antd.module.ts b/components/ng-zorro-antd.module.ts
@@ -52,6 +52,7 @@ import { NzTimelineModule } from './timeline/nz-timeline.module';
 import { NzToolTipModule } from './tooltip/nz-tooltip.module';
 import { NzTransferModule } from './transfer/nz-transfer.module';
 import { NzTreeModule } from './tree/nz-tree.module';
+import { NzTreeSelectModule } from './tree-select/nz-tree-select.module';
 import { NzUploadModule } from './upload/nz-upload.module';
 
 export * from './affix';
@@ -104,6 +105,7 @@ export * from './popconfirm';
 export * from './modal';
 export * from './cascader';
 export * from './tree';
+export * from './tree-select';
 export * from './time-picker';
 
 @NgModule({
@@ -158,6 +160,7 @@ export * from './time-picker';
     NzBackTopModule,
     NzCascaderModule,
     NzTreeModule,
+    NzTreeSelectModule,
     NzTimePickerModule
   ]
 })

diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md
@@ -0,0 +1,15 @@
+---
+order: 2
+title:
+  zh-CN: 异步数据加载
+  en-US: Load data asynchronously
+---
+
+## zh-CN
+
+点击展开节点，动态加载数据，直到执行 addChildren() 方法取消加载状态。
+
+## en-US
+
+To load data asynchronously when click to expand a treeNode, loading state keeps until excute addChildren().
+
diff --git a/components/tree-select/demo/async.ts b/components/tree-select/demo/async.ts
@@ -0,0 +1,133 @@
+import { Component, OnInit } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-tree-select-async',
+  template: `
+    <nz-tree-select style="width: 250px"
+                    nzPlaceHolder="Please select"
+                    [nzDefaultExpandedKeys]="expandKeys"
+                    [nzDropdownMatchSelectWidth]="true"
+                    [nzDropdownStyle]="{ 'max-height': '300px' }"
+                    [(ngModel)]="value"
+                    [nzNodes]="nodes"
+                    [nzAsyncData]="true"
+                    (nzExpandChange)="onExpandChange($event)">
+    </nz-tree-select>
+  `
+})
+
+export class NzDemoTreeSelectAsyncComponent implements OnInit {
+  expandKeys = [ '1001', '10001' ];
+  value: string;
+  nodes = [
+    new NzTreeNode({
+      title: 'root1',
+      key: '1001',
+      children: [
+        {
+          title: 'child1',
+          key: '10001',
+          children: [
+            {
+              title: 'child1.1',
+              key: '100011',
+              children: []
+            },
+            {
+              title: 'child1.2',
+              key: '100012',
+              children: [
+                {
+                  title: 'grandchild1.2.1',
+                  key: '1000121',
+                  isLeaf: true,
+                  disabled: true
+                },
+                {
+                  title: 'grandchild1.2.2',
+                  key: '1000122',
+                  isLeaf: true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }),
+    new NzTreeNode({
+      title: 'root2',
+      key: '1002',
+      children: [
+        {
+          title: 'child2.1',
+          key: '10021',
+          children: [],
+          disabled: true
+        },
+        {
+          title: 'child2.2',
+          key: '10022',
+          children: [
+            {
+              title: 'grandchild2.2.1',
+              key: '100221',
+              isLeaf: true
+            }
+          ]
+        }
+      ]
+    })
+  ];
+
+  onExpandChange(e: NzFormatEmitEvent): void {
+    if (e.node.getChildren().length === 0 && e.node.isExpanded) {
+      this.loadNode().then(data => {
+        e.node.addChildren(data);
+      });
+    }
+  }
+
+  loadNode(): Promise<any[]> {
+    return new Promise(resolve => {
+      setTimeout(() => resolve([
+          new NzTreeNode({
+            title: 'root2',
+            key: '10030-' + (new Date()).getTime(),
+            children: [
+              {
+                title: 'child2.1',
+                key: '10021',
+                children: [],
+                checked: true,
+                disabled: true
+              },
+              {
+                title: 'child2.2',
+                key: '10022',
+                children: [
+                  {
+                    title: 'grandchild2.2.1',
+                    key: '100221',
+                    isLeaf: true
+                  }
+                ]
+              }
+            ]
+          }),
+          {
+            title: 'childAdd-1',
+            key: '10031-' + (new Date()).getTime()
+          },
+          {
+            title: 'childAdd-2',
+            key: '10032-' + (new Date()).getTime(),
+            isLeaf: true
+          }]),
+        1000);
+    });
+  }
+
+  ngOnInit(): void {
+  }
+}
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+The most basic usage.
diff --git a/components/tree-select/demo/basic.ts b/components/tree-select/demo/basic.ts
@@ -0,0 +1,90 @@
+import { Component, OnInit } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-tree-select-basic',
+  template: `
+    <nz-tree-select
+      style="width: 250px"
+      [nzDefaultExpandedKeys]="expandKeys"
+      [nzNodes]="nodes"
+      nzPlaceHolder="Please select"
+      [(ngModel)]="value"
+      (ngModelChange)="onChange($event)">
+    </nz-tree-select>`
+})
+
+export class NzDemoTreeSelectBasicComponent implements OnInit {
+  expandKeys = [ '1001', '10001' ];
+  value: string;
+  nodes = [
+    new NzTreeNode({
+      title: 'root1',
+      key: '1001',
+      children: [
+        {
+          title: 'child1',
+          key: '10001',
+          children: [
+            {
+              title: 'child1.1',
+              key: '100011',
+              children: []
+            },
+            {
+              title: 'child1.2',
+              key: '100012',
+              children: [
+                {
+                  title: 'grandchild1.2.1',
+                  key: '1000121',
+                  isLeaf: true,
+                  disabled: true
+                },
+                {
+                  title: 'grandchild1.2.2',
+                  key: '1000122',
+                  isLeaf: true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }),
+    new NzTreeNode({
+      title: 'root2',
+      key: '1002',
+      children: [
+        {
+          title: 'child2.1',
+          key: '10021',
+          children: [],
+          disableCheckbox: true
+        },
+        {
+          title: 'child2.2',
+          key: '10022',
+          children: [
+            {
+              title: 'grandchild2.2.1',
+              key: '100221',
+              isLeaf: true
+            }
+          ]
+        }
+      ]
+    })
+  ];
+
+  onChange($event: NzTreeNode): void {
+    console.log($event);
+  }
+
+  ngOnInit(): void {
+    // mock async
+    setTimeout(() => {
+      this.value = '10001';
+    }, 1000);
+  }
+}
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
@@ -0,0 +1,15 @@
+---
+order: 3
+title:
+  zh-CN: 可勾选
+  en-US: Checkable
+---
+
+## zh-CN
+
+使用勾选框实现多选功能。
+
+## en-US
+
+Multiple and checkable.
+