fix(module: tree): fix default keys bug with setTimeOut

close #3001 fix(module: tree): remove unused code fix(module: tree): fix tree spec test fix(module: tree): fix tree demo fix(module: tree): fix tree drag event and remove unsave code fix(module: tree-select): remove code comments fix(module: tree): fix demo
NG-ZORRO · Mar 4, 2019 · f302057 · f302057
1 parent 42ed317
commit f302057
Show file tree

Hide file tree

Showing 18 changed files with 431 additions and 303 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -250,7 +250,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
       if (this.selectedNodes.length) {
         const removeNode = this.selectedNodes[ this.selectedNodes.length - 1 ];
         this.removeSelected(removeNode);
-        this.nzTreeService.$statusChange.next({
+        this.nzTreeService.triggerEventChange$.next({
           'eventName': 'removeSelect',
           'node'     : removeNode
         });
@@ -274,7 +274,6 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
     node.isChecked = false;
     if (this.nzCheckable) {
       this.nzTreeService.conduct(node);
-      this.nzTreeService.setCheckedNodeList(node);
     } else {
       this.nzTreeService.setSelectedNodeList(node, this.nzMultiple);
     }
@@ -305,7 +304,6 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
           if (this.nzCheckable && !node.isDisabled && !node.isDisableCheckbox) {
             node.isChecked = !node.isChecked;
             this.nzTreeService.conduct(node);
-            this.nzTreeService.setCheckedNodeList(node);
           }
           if (this.nzCheckable) {
             node.isSelected = false;
@@ -341,6 +339,7 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
   updateSelectedNodes(init: boolean = false): void {
     if (init) {
       let nodes;
+      this.nzTreeService.isMultiple = this.isMultiple;
       if (!this.nzTreeService.isArrayOfNzTreeNode(this.nzNodes)) {
         // has not been new NzTreeNode
         nodes = this.nzNodes.map(item => (new NzTreeNode(item, null, this.nzTreeService)));

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -212,7 +212,9 @@ describe('tree-select component', () => {
       expect(selectedValueEl.style.opacity).toBe('1');
     }));
     it('should max tag count work', fakeAsync(() => {
+      fixture.detectChanges();
       testComponent.multiple = true;
+      fixture.detectChanges();
       testComponent.value = [ '1001', '10001', '100011', '100012' ];
       fixture.detectChanges();
       tick(200);

diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -1,27 +1,27 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd';
+import { NzFormatEmitEvent, NzTreeNodeOptions, NzTreeComponent } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-basic',
   template: `
     <nz-tree
       #treeCom
       [nzData]="nodes"
-      [nzDraggable]="true"
       nzCheckable
       [nzCheckedKeys]="defaultCheckedKeys"
       [nzExpandedKeys]="defaultExpandedKeys"
       [nzSelectedKeys]="defaultSelectedKeys"
       (nzClick)="nzClick($event)"
-      (nzCheckBoxChange)="nzCheck($event)">
+      (nzCheckBoxChange)="nzCheck($event)"
+      (nzExpandChange)="nzCheck($event)">
     </nz-tree>
   `
 })
 
 export class NzDemoTreeBasicComponent implements OnInit {
-  @ViewChild('treeCom') treeCom;
-  defaultCheckedKeys = [ '1001', '1002' ];
-  defaultSelectedKeys = [ '10010', '10020' ];
+  @ViewChild('treeCom') treeCom: NzTreeComponent;
+  defaultCheckedKeys = [ '10020' ];
+  defaultSelectedKeys = [ '10010' ];
   defaultExpandedKeys = [ '100', '1001' ];
 
   nodes: NzTreeNodeOptions[] = [ {
@@ -33,7 +33,7 @@ export class NzDemoTreeBasicComponent implements OnInit {
       disabled: true,
       children: [
         { title: 'leaf 1-0-0', key: '10010', disableCheckbox: true, isLeaf: true },
-        { title: 'leaf 1-0-1', key: '10011', isLeaf: true, checked: true }
+        { title: 'leaf 1-0-1', key: '10011', isLeaf: true }
       ]
     }, {
       title   : 'parent 1-1',
@@ -50,7 +50,7 @@ export class NzDemoTreeBasicComponent implements OnInit {
   }
 
   nzCheck(event: NzFormatEmitEvent): void {
-    console.log(event, event.checkedKeys, event.keys, event.nodes);
+    console.log(event);
   }
 
   // nzSelectedKeys change

diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts
@@ -5,7 +5,7 @@ import { Component, OnInit } from '@angular/core';
   template: `
     <nz-tree
       [nzData]="nodes"
-      nzShowIcon="true">
+      nzShowIcon>
     </nz-tree>
   `
 })

diff --git a/components/tree/demo/directory.ts b/components/tree/demo/directory.ts
@@ -13,11 +13,12 @@ import {
     <nz-tree
       #treeCom
       [nzData]="nodes"
-      (nzClick)="activeNode($event)">
+      (nzClick)="activeNode($event)"
+      (nzDblClick)="openFolder($event)">
       <ng-template #contextTemplate>
         <ul nz-menu nzInDropDown>
-          <li nz-menu-item (click)="selectDropdown('file')">新建文件</li>
-          <li nz-menu-item (click)="selectDropdown('folder')">新建文件夹</li>
+          <li nz-menu-item (click)="selectDropdown()">Action 1</li>
+          <li nz-menu-item (click)="selectDropdown()">Action 2</li>
         </ul>
       </ng-template>
       <ng-template #nzTreeTemplate let-node>
@@ -27,7 +28,7 @@ import {
             <span class="folder-name">{{node.title}}</span>
             <span class="folder-desc">created by {{node?.origin?.author | lowercase}}</span>
           </span>
-          <span *ngIf="node.isLeaf">
+          <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
             <i nz-icon type="file"></i>
             <span class="file-name">{{node.title}}</span>
             <span class="file-desc">modified by {{node?.origin?.author | lowercase}}</span>
@@ -102,22 +103,21 @@ export class NzDemoTreeDirectoryComponent {
   openFolder(data: NzTreeNode | NzFormatEmitEvent): void {
     // do something if u want
     if (data instanceof NzTreeNode) {
-      data.setExpanded(!data.isExpanded);
+      data.isExpanded = !data.isExpanded;
     } else {
-      data.node.setExpanded(!data.node.isExpanded);
+      data.node.isExpanded = !data.node.isExpanded;
     }
   }
 
   activeNode(data: NzFormatEmitEvent): void {
-    data.node.setExpanded(true);
     this.activedNode = data.node;
   }
 
   contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
     this.dropdown = this.nzDropdownService.create($event, template);
   }
 
-  selectDropdown(_type: string): void {
+  selectDropdown(): void {
     this.dropdown.close();
     // do something
   }

diff --git a/components/tree/demo/draggable.ts b/components/tree/demo/draggable.ts
@@ -1,11 +1,14 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeComponent } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-draggable',
   template: `
     <nz-tree
+      #treeCom
       [nzData]="nodes"
-      nzDraggable="true">
+      nzDraggable
+      (nzOnDrop)="nzEvent($event)">
     </nz-tree>
   `,
   styles  : [ `
@@ -16,6 +19,7 @@ import { Component, OnInit } from '@angular/core';
 })
 
 export class NzDemoTreeDraggableComponent implements OnInit {
+  @ViewChild('treeCom') treeCom: NzTreeComponent;
   nodes = [ {
     title   : '0-0',
     key     : '00',
@@ -67,6 +71,10 @@ export class NzDemoTreeDraggableComponent implements OnInit {
     isLeaf: true
   } ];
 
+  nzEvent(event: NzFormatEmitEvent): void {
+    console.log(event);
+  }
+
   ngOnInit(): void {
   }
 }
diff --git a/components/tree/demo/dynamic.ts b/components/tree/demo/dynamic.ts
@@ -6,7 +6,7 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
   template: `
     <nz-tree
       [nzData]="nodes"
-      nzAsyncData="true"
+      nzAsyncData
       (nzClick)="nzEvent($event)"
       (nzExpandChange)="nzEvent($event)">
     </nz-tree>

diff --git a/components/tree/demo/line.ts b/components/tree/demo/line.ts
@@ -6,7 +6,7 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
   template: `
     <nz-tree
       [nzData]="nodes"
-      nzShowLine="true"
+      nzShowLine
       (nzClick)="nzEvent($event)">
     </nz-tree>
   `

diff --git a/components/tree/demo/search.ts b/components/tree/demo/search.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { NzFormatEmitEvent } from 'ng-zorro-antd';
+import { NzFormatEmitEvent, NzTreeComponent } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-search',
@@ -27,7 +27,7 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
 })
 
 export class NzDemoTreeSearchComponent implements OnInit {
-  @ViewChild('treeCom') treeCom;
+  @ViewChild('treeCom') treeCom: NzTreeComponent;
   searchValue;
 
   nodes = [ {

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -110,7 +110,6 @@ Almost anything can be represented in a tree structure. Examples include directo
 | isDisableCheckbox | Whether treeNode's checkbox can not be clicked | `boolean` | `true` / `false` |
 | isSelectable | Set whether the treeNode can be selected | `boolean` | `true` 或 `false` |
 | isChecked | Whether treeNode is checked | `boolean` | `true` / `false` |
-| isAllChecked | Whether all treeNode's children are checked | `boolean` | `true` / `false` |
 | isHalfChecked | Part of treeNode's children are checked  | `boolean` | `true` / `false` |
 | isSelected | Whether treeNode is selected | `boolean` | `true` / `false` |
 | isLoading | Whether treeNode is loading(when nzAsyncData is true) | `boolean` | `true` / `false` |
@@ -119,10 +118,6 @@ Almost anything can be represented in a tree structure. Examples include directo
 | addChildren | Add child nodes, receive NzTreeNode or NzTreeNodeOptions array, the second parameter is the inserted index position | (children: array, index?: number )=>{} | void |
 | clearChildren | Clear the treeNode's children | function | void |
 | remove | Clear current node(not root node) | function | void |
-| setSyncChecked | set isChecked & isHalfChecked state，params: checked , halfChecked.(will affect other nodes checked state) | (checked: boolean, halfChecked: boolean=false)=>{} | void |
-| setChecked | set isChecked & isHalfChecked state，params: checked , halfChecked | (checked: boolean, halfChecked: boolean=false)=>{} | void |
-| setExpanded | set isExpanded state | (value: boolean)=>{} | void |
-| setSelected | set isSelected state | (value: boolean)=>{} | void |
 
 ## Note
 `NzTreeNodeOptions` accepts your customized properties，use NzTreeNode.origin to get them.
diff --git a/components/tree/doc/index.zh-CN.md b/components/tree/doc/index.zh-CN.md
@@ -114,7 +114,6 @@ subtitle: 树形控件
 | isDisableCheckbox | 是否禁用 checkBox | `boolean` | `true` 或 `false` |
 | isSelectable | 是否可选中 | `boolean` | `true` 或 `false` |
 | isChecked | 是否选中 checkBox | `boolean` | `true` 或 `false` |
-| isAllChecked | 子节点是否全选 | `boolean` | `true` 或 `false` |
 | isHalfChecked | 子节点有选中但未全选 | `boolean` | `true` 或 `false` |
 | isSelected | 是否已选中 | `boolean` | `true` 或 `false` |
 | isLoading | 是否异步加载状态(影响展开图标展示) | `boolean` | `true` 或 `false` |
@@ -123,10 +122,6 @@ subtitle: 树形控件
 | addChildren | 添加子节点,接收NzTreeNode或NzTreeNodeOptions数组,第二个参数为插入的索引位置,默认插入末尾 | (children: array, index?: number )=>{} | void |
 | clearChildren | 清除子节点 | function | void |
 | remove | 清除当前节点(非根节点) | function | void |
-| setSyncChecked | 设置checked状态(同步树组件节点 checked 状态) | (checked: boolean, halfChecked: boolean=false)=>{} | void |
-| setChecked | 设置checked状态，参数为checked和halfChecked | (checked: boolean, halfChecked: boolean=false)=>{} | void |
-| setExpanded | 设置expanded状态 | (value: boolean)=>{} | void |
-| setSelected | 设置selected状态 | (value: boolean)=>{} | void |
 
 
 ## 注意