refactor(module: tree): fix tree bugs and add some fucntions for tree…

…Node (#2976) refactor(module: tree): fix bugs and add extra functions refactor(module: tree): fix spec refactor(module: tree): add doc refactor(module: tree): fix doc refactor(module: tree): support getTreeNodeByKey close #1998 close #2370 close #2655 close #2724 close #2273 close #1399 close #2208 close #2384 #2375
NG-ZORRO · Feb 27, 2019 · 36c91ac · 36c91ac
1 parent fcaa6d1
commit 36c91ac
Show file tree

Hide file tree

Showing 17 changed files with 477 additions and 352 deletions.
diff --git a/components/tree-select/nz-tree-select.component.ts b/components/tree-select/nz-tree-select.component.ts
@@ -340,12 +340,12 @@ export class NzTreeSelectComponent implements ControlValueAccessor, OnInit, OnDe
 
   updateSelectedNodes(init: boolean = false): void {
     if (init) {
-      const nodes = this.nzNodes.map(item => new NzTreeNode(item));
+      const nodes = this.nzNodes.map(item => new NzTreeNode(item, null, this.nzTreeService));
       this.nzTreeService.initTree(nodes);
       if (this.nzCheckable) {
         this.nzTreeService.calcCheckedKeys(this.value, nodes);
       } else {
-        this.nzTreeService.calcSelectedKeys(this.value, nodes);
+        this.nzTreeService.calcSelectedKeys(this.value, nodes, this.isMultiple);
       }
     }
     this.selectedNodes = [ ...(this.nzCheckable ? this.nzTreeService.getCheckedNodeList() : this.nzTreeService.getSelectedNodeList()) ];

diff --git a/components/tree-select/nz-tree-select.spec.ts b/components/tree-select/nz-tree-select.spec.ts
@@ -5,14 +5,7 @@ import { async, fakeAsync, flush, inject, tick, TestBed } from '@angular/core/te
 import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  createKeyboardEvent,
-  dispatchFakeEvent,
-  dispatchMouseEvent,
-  typeInElement
-} from '../core/testing';
-
-import { NzTreeNode } from '../tree/nz-tree-node';
+import { createKeyboardEvent, dispatchFakeEvent, dispatchMouseEvent, typeInElement } from '../core/testing';
 import { NzTreeSelectComponent } from './nz-tree-select.component';
 import { NzTreeSelectModule } from './nz-tree-select.module';
 
@@ -335,7 +328,7 @@ describe('tree-select component', () => {
     }));
 
     it('should prevent open the dropdown when click remove', fakeAsync(() => {
-      testComponent.value = ['1000122'];
+      testComponent.value = [ '1000122' ];
       fixture.detectChanges();
       tick(200);
       fixture.detectChanges();
@@ -438,7 +431,7 @@ describe('tree-select component', () => {
       dispatchMouseEvent(targetSwitcher, 'click');
       fixture.detectChanges();
       expect(targetSwitcher.classList.contains('ant-select-tree-switcher_open')).toBe(true);
-      expect(treeSelectComponent.nzDefaultExpandedKeys[0] === '1001').toBe(true);
+      expect(treeSelectComponent.nzDefaultExpandedKeys[ 0 ] === '1001').toBe(true);
       treeSelect.nativeElement.click();
       fixture.detectChanges();
       expect(treeSelectComponent.nzOpen).toBe(false);
@@ -447,7 +440,7 @@ describe('tree-select component', () => {
       targetSwitcher = overlayContainerElement.querySelector('.ant-select-tree-switcher');
       expect(treeSelectComponent.nzOpen).toBe(true);
       expect(targetSwitcher.classList.contains('ant-select-tree-switcher_open')).toBe(true);
-      expect(treeSelectComponent.nzDefaultExpandedKeys[0] === '1001').toBe(true);
+      expect(treeSelectComponent.nzDefaultExpandedKeys[ 0 ] === '1001').toBe(true);
     }));
   });
 
@@ -485,7 +478,7 @@ export class NzTestTreeSelectBasicComponent {
   multiple = false;
   maxTagCount = Infinity;
   nodes = [
-    new NzTreeNode({
+    {
       title   : 'root1',
       key     : '1001',
       children: [
@@ -518,8 +511,8 @@ export class NzTestTreeSelectBasicComponent {
           ]
         }
       ]
-    }),
-    new NzTreeNode({
+    },
+    {
       title   : 'root2',
       key     : '1002',
       children: [
@@ -541,7 +534,7 @@ export class NzTestTreeSelectBasicComponent {
           ]
         }
       ]
-    })
+    }
   ];
 
   setNull(): void {
@@ -569,7 +562,7 @@ export class NzTestTreeSelectCheckableComponent {
   value = [ '1000122' ];
   showSearch = false;
   nodes = [
-    new NzTreeNode({
+    {
       title   : 'root1',
       key     : '1001',
       children: [
@@ -602,8 +595,8 @@ export class NzTestTreeSelectCheckableComponent {
           ]
         }
       ]
-    }),
-    new NzTreeNode({
+    },
+    {
       title   : 'root2',
       key     : '1002',
       children: [
@@ -625,7 +618,7 @@ export class NzTestTreeSelectCheckableComponent {
           ]
         }
       ]
-    })
+    }
   ];
 
   setNull(): void {
@@ -648,7 +641,7 @@ export class NzTestTreeSelectCheckableComponent {
 export class NzTestTreeSelectFormComponent {
   formGroup: FormGroup;
   nodes = [
-    new NzTreeNode({
+    {
       title   : 'root2',
       key     : '1002',
       children: [
@@ -661,7 +654,7 @@ export class NzTestTreeSelectFormComponent {
           key  : '10022'
         }
       ]
-    })
+    }
   ];
 
   constructor(private fb: FormBuilder) {

diff --git a/components/tree/demo/basic-controlled.ts b/components/tree/demo/basic-controlled.ts
@@ -6,8 +6,8 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
   template: `
     <nz-tree
       [nzData]="nodes"
-      nzCheckable="true"
-      nzMultiple="true"
+      nzCheckable
+      nzMultiple
       [nzCheckedKeys]="defaultCheckedKeys"
       [nzExpandedKeys]="defaultExpandedKeys"
       [nzSelectedKeys]="defaultSelectedKeys"
@@ -20,7 +20,7 @@ import { NzFormatEmitEvent } from 'ng-zorro-antd';
 
 export class NzDemoTreeBasicControlledComponent implements OnInit {
   defaultCheckedKeys = [ '0-0-0' ];
-  defaultSelectedKeys = [];
+  defaultSelectedKeys = [ '0-0-0' ];
   defaultExpandedKeys = [ '0-0', '0-0-0', '0-0-1' ];
 
   nodes = [ {

diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -7,13 +7,12 @@ import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd';
     <nz-tree
       #treeCom
       [nzData]="nodes"
-      nzCheckable="true"
-      nzMultiple="true"
+      [nzDraggable]="true"
+      nzCheckable
       [nzCheckedKeys]="defaultCheckedKeys"
       [nzExpandedKeys]="defaultExpandedKeys"
       [nzSelectedKeys]="defaultSelectedKeys"
       (nzClick)="nzClick($event)"
-      (nzSelectedKeysChange)="nzSelect($event)"
       (nzCheckBoxChange)="nzCheck($event)">
     </nz-tree>
   `
@@ -22,7 +21,7 @@ import { NzFormatEmitEvent, NzTreeNodeOptions } from 'ng-zorro-antd';
 export class NzDemoTreeBasicComponent implements OnInit {
   @ViewChild('treeCom') treeCom;
   defaultCheckedKeys = [ '1001', '1002' ];
-  defaultSelectedKeys = [ '10011' ];
+  defaultSelectedKeys = [ '10010', '10020' ];
   defaultExpandedKeys = [ '100', '1001' ];
 
   nodes: NzTreeNodeOptions[] = [ {
@@ -40,13 +39,14 @@ export class NzDemoTreeBasicComponent implements OnInit {
       title   : 'parent 1-1',
       key     : '1002',
       children: [
-        { title: 'leaf 1-1-0', key: '10020', isLeaf: true }
+        { title: 'leaf 1-1-0', key: '10020', isLeaf: true },
+        { title: 'leaf 1-1-1', key: '10021', isLeaf: true }
       ]
     } ]
   } ];
 
   nzClick(event: NzFormatEmitEvent): void {
-    console.log(event, event.selectedKeys, event.keys, event.nodes, this.treeCom.getSelectedNodeList());
+    console.log(event);
   }
 
   nzCheck(event: NzFormatEmitEvent): void {
@@ -60,7 +60,8 @@ export class NzDemoTreeBasicComponent implements OnInit {
 
   ngOnInit(): void {
     setTimeout(() => {
-      console.log(this.treeCom.getTreeNodes(), this.treeCom.getCheckedNodeList(), this.treeCom.getSelectedNodeList());
-    }, 500);
+      console.log(this.treeCom.getTreeNodeByKey('10011'), 'get nzTreeNode with key');
+      console.log(this.treeCom.getTreeNodes(), this.treeCom.getCheckedNodeList(), this.treeCom.getSelectedNodeList(), this.treeCom.getExpandedNodeList());
+    }, 1500);
   }
 }
diff --git a/components/tree/demo/directory.ts b/components/tree/demo/directory.ts
@@ -13,9 +13,7 @@ import {
     <nz-tree
       #treeCom
       [nzData]="nodes"
-      nzMultiple="true"
-      (nzClick)="activeNode($event)"
-      (nzDblClick)="openFolder($event)">
+      (nzClick)="activeNode($event)">
       <ng-template #contextTemplate>
         <ul nz-menu nzInDropDown>
           <li nz-menu-item (click)="selectDropdown('file')">新建文件</li>
@@ -37,7 +35,7 @@ import {
         </span>
       </ng-template>
     </nz-tree>`,
-  styles  : [ `
+  styles: [`
     :host ::ng-deep .ant-tree {
       overflow: hidden;
       margin: 0 -24px;
@@ -74,51 +72,45 @@ import {
       position: relative;
       left: 12px;
     }
-  ` ]
+  `]
 })
 
 export class NzDemoTreeDirectoryComponent {
   @ViewChild('treeCom') treeCom: NzTreeComponent;
   dropdown: NzDropdownContextComponent;
   // actived node
   activedNode: NzTreeNode;
-  nodes = [ {
-    title   : 'parent 0',
-    key     : '100',
-    author  : 'NG ZORRO',
+  nodes = [{
+    title: 'parent 0',
+    key: '100',
+    author: 'NG ZORRO',
     expanded: true,
     children: [
-      { title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true },
-      { title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true }
+      {title: 'leaf 0-0', key: '1000', author: 'NG ZORRO', isLeaf: true},
+      {title: 'leaf 0-1', key: '1001', author: 'NG ZORRO', isLeaf: true}
     ]
   }, {
-    title   : 'parent 1',
-    key     : '101',
-    author  : 'NG ZORRO',
+    title: 'parent 1',
+    key: '101',
+    author: 'NG ZORRO',
     children: [
-      { title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true },
-      { title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true }
+      {title: 'leaf 1-0', key: '1010', author: 'NG ZORRO', isLeaf: true},
+      {title: 'leaf 1-1', key: '1011', author: 'NG ZORRO', isLeaf: true}
     ]
-  } ];
+  }];
 
   openFolder(data: NzTreeNode | NzFormatEmitEvent): void {
     // do something if u want
     if (data instanceof NzTreeNode) {
-      data.isExpanded = !data.isExpanded;
+      data.setExpanded(!data.isExpanded);
     } else {
-      data.node.isExpanded = !data.node.isExpanded;
+      data.node.setExpanded(!data.node.isExpanded);
     }
   }
 
   activeNode(data: NzFormatEmitEvent): void {
-    if (this.activedNode) {
-      // delete selectedNodeList(u can do anything u want)
-      this.treeCom.nzTreeService.setSelectedNodeList(this.activedNode);
-    }
-    data.node.isSelected = true;
+    data.node.setExpanded(true);
     this.activedNode = data.node;
-    // add selectedNodeList
-    this.treeCom.nzTreeService.setSelectedNodeList(this.activedNode);
   }
 
   contextMenu($event: MouseEvent, template: TemplateRef<void>): void {

diff --git a/components/tree/demo/draggable-confirm.ts b/components/tree/demo/draggable-confirm.ts
@@ -8,7 +8,7 @@ import { delay } from 'rxjs/operators';
   template: `
     <nz-tree
       [nzData]="nodes"
-      nzDraggable="true"
+      nzDraggable
       (nzExpandChange)="nzAction($event)"
       [nzBeforeDrop]="beforeDrop"
       (nzOnDragStart)="nzAction($event)"

diff --git a/components/tree/demo/search.ts b/components/tree/demo/search.ts
@@ -69,7 +69,7 @@ export class NzDemoTreeSearchComponent implements OnInit {
   } ];
 
   nzEvent(event: NzFormatEmitEvent): void {
-    console.log(event, this.treeCom.getMatchedNodeList().map(v => v.title));
+    console.log(event, this.treeCom.getMatchedNodeList().map(v => v.title), this.treeCom.getExpandedNodeList());
   }
 
   ngOnInit(): void {

diff --git a/components/tree/doc/index.en-US.md b/components/tree/doc/index.en-US.md
@@ -14,11 +14,6 @@ Almost anything can be represented in a tree structure. Examples include directo
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| `[ngModel]` | Tree data(nzData instead) | `NzTreeNode[]` | `[]` |
-| `[nzDefaultExpandAll]` | Whether to expand all treeNodes <font color=red>`Deprecated`</font> | `boolean` | `false` |
-| `[nzDefaultExpandedKeys]` | Specify the keys of the default expanded treeNodes <font color=red>`Deprecated`</font> | `string[]` | `[]` |
-| `[nzDefaultCheckedKeys]` | Specifies the keys of the default checked treeNodes <font color=red>`Deprecated`</font> | `string[]` | `[]` |
-| `[nzDefaultSelectedKeys]` | Specifies the keys of the default selected treeNodes <font color=red>`Deprecated`</font> | `string[]` | `[]` |
 | `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[]｜NzTreeNode[]` | `[]` |
 | `[nzCheckable]` | Adds a Checkbox before the treeNodes| `boolean` | `false` |
 | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` |
@@ -27,11 +22,12 @@ Almost anything can be represented in a tree structure. Examples include directo
 | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` |
 | `[nzDraggable]` | Specifies whether this Tree is draggable (IE > 8) | `boolean` | `false` |
 | `[nzMultiple]` | Allows selecting multiple treeNodes | `boolean` | `false` |
+| `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` |
 | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` |
 | `[nzExpandAll]` | Whether to expand all treeNodes | `boolean` | `false` |
-| `[nzExpandedKeys]` | Specify the keys of the default expanded treeNodes, two-way binding | `string[]` | `[]` |
-| `[nzCheckedKeys]` | Specifies the keys of the default checked treeNodes, two-way binding | `string[]` | `[]` |
-| `[nzSelectedKeys]` | Specifies the keys of the default selected treeNodes, two-way binding | `string[]` | `[]` |
+| `[nzExpandedKeys]` | Specify the keys of the default expanded treeNodes | `string[]` | `[]` |
+| `[nzCheckedKeys]` | Specifies the keys of the default checked treeNodes | `string[]` | `[]` |
+| `[nzSelectedKeys]` | Specifies the keys of the default selected treeNodes | `string[]` | `[]` |
 | `[nzSearchValue]` | Filter (highlight) treeNodes (see demo `Searchable`), two-way binding | `string` | `null` |
 | `[nzBeforeDrop]` | Drop before the second check, allowing the user to decide whether to allow placement | `(confirm: NzFormatBeforeDropEvent) => Observable<boolean>` | - |
 | `(nzClick)` | Callback function for when the user clicks a treeNode | `EventEmitter<NzFormatEmitEvent>` | - |
@@ -53,6 +49,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | getTreeNodes | get all nodes(NzTreeNode) | `NzTreeNode[]` | `[]` |
+| getTreeNodeByKey | get NzTreeNode with key | `NzTreeNode` | `null` |
 | getCheckedNodeList | get checked nodes(merged) | `NzTreeNode[]` | `[]` |
 | getSelectedNodeList | get selected nodes | `NzTreeNode[]` | `[]` |
 | getHalfCheckedNodeList | get half checked nodes | `NzTreeNode[]` | `[]` |
@@ -65,6 +62,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | --- | --- | --- | --- |
 | title | Title | `string` | `'---'` |
 | key | Must be unique！| `string` | `null` |
+| icon | icon before the treeNode，used with `nzShowIcon` | `string` | `null` |
 | children | TreeNode's children | `NzTreeNodeOptions[]` | `[]` |
 | isLeaf | Determines if this is a leaf node(can not be dropped to) | `boolean` | `false` |
 | checked | Set the treeNode be checked | `boolean` | `false` |
@@ -119,7 +117,9 @@ Almost anything can be represented in a tree structure. Examples include directo
 | isMatched | Whether treeNode's title contains nzSearchValue | `boolean` | `true` / `false` |
 | getChildren | Get all children | function | NzTreeNode[] |
 | 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 |
+| 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 |