feature(module: tree): add getHalfCheckedNodeList & change dir tree demo

components/tree/demo/dir-tree.md

@@ -7,8 +7,8 @@ title:
 
 ## zh-CN
 
-自定义Tree组件实现文件树，点击图标展开文件夹，鼠标拖拽.
+自定义Tree组件实现文件树，点击图标展开文件夹，鼠标拖拽。右键自定义菜单。
 
 ## en-US
 
-Built-in directory tree with tree component, click icon to open the folder and dnd.
+Built-in directory tree with tree component, click icon to open the folder and dnd.Trigger dropdown with contextmenu.

components/tree/demo/dir-tree.ts

@@ -1,25 +1,31 @@
-import { Component, HostListener, OnInit } from '@angular/core';
-import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
+import { Component, HostListener, OnInit, TemplateRef } from '@angular/core';
+import { NzDropdownService, NzFormatEmitEvent, NzTreeNode, NzDropdownContextComponent } from 'ng-zorro-antd';
 
 @Component({
   selector: 'nz-demo-tree-dir-tree',
   template: `
-    <nz-tree [(ngModel)]="nodes"
-             [nzShowExpand]="true"
-             [nzDraggable]="true"
-             (nzOnDragStart)="dragStart($event)"
-             (nzClick)="activeNode($event)"
-             (nzDblClick)="openFolder($event)"
-             >
+    <nz-tree
+      [(ngModel)]="nodes"
+      [nzShowExpand]="true"
+      [nzDraggable]="true"
+      (nzOnDragStart)="dragStart($event)"
+      (nzClick)="activeNode($event)"
+      (nzDblClick)="openFolder($event)">
+      <ng-template #contextTemplate>
+        <ul nz-menu nzInDropDown>
+          <li nz-menu-item (click)="selectDropdown()">新建文件</li>
+          <li nz-menu-item (click)="selectDropdown()">新建文件夹</li>
+        </ul>
+      </ng-template>
       <ng-template #nzTreeTemplate let-node>
         <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="activedNode?.key===node.key">
-          <span *ngIf="!node.isLeaf" [class.shine-animate]="node.origin.isLoading">
+          <span *ngIf="!node.isLeaf" [class.shine-animate]="node.origin.isLoading" (contextmenu)="contextMenu($event,contextTemplate, node)">
             <i class="anticon anticon-folder" *ngIf="!node.isExpanded" (click)="openFolder(node)"></i>
             <i class="anticon anticon-folder-open" *ngIf="node.isExpanded" (click)="openFolder(node)"></i>
             <span class="folder-name">{{node.title}}</span>
             <span class="folder-desc">{{node?.origin?.author | lowercase}} created at 2018-04-01</span>
           </span>
-          <span *ngIf="node.isLeaf">
+          <span *ngIf="node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate, node)">
             <i class="anticon anticon-file"></i>
             <span class="file-name">{{node.title}}</span>
             <span class="file-desc">{{node?.origin?.author | lowercase}} modified at 2018-05-01</span>
@@ -86,6 +92,7 @@ import { NzFormatEmitEvent, NzTreeNode } from 'ng-zorro-antd';
   ` ]
 })
 export class NzDemoTreeDirTreeComponent implements OnInit {
+  dropdown: NzDropdownContextComponent;
   // can active only one node
   activedNode: NzTreeNode;
   dragNodeElement;
@@ -131,32 +138,6 @@ export class NzDemoTreeDirTreeComponent implements OnInit {
           ]
         }
       ]
-    }),
-    new NzTreeNode({
-      title   : 'root2',
-      key     : '1002',
-      author  : 'ANGULAR',
-      children: [
-        {
-          title : 'child2.1',
-          key   : '10021',
-          author: 'ZORRO-FANS',
-          isLeaf: true
-        },
-        {
-          title   : 'child2.2',
-          key     : '10022',
-          author  : 'ZORRO',
-          children: [
-            {
-              title : 'grandchild2.2.1',
-              key   : '100221',
-              author: 'ZORRO-FANS',
-              isLeaf: true
-            }
-          ]
-        }
-      ]
     })
   ];
 
@@ -181,7 +162,6 @@ export class NzDemoTreeDirTreeComponent implements OnInit {
    * if u want to custom event/node properties, u need to maintain the selectedNodesList/checkedNodesList yourself
    * @param {} data
    */
-
   openFolder(data: NzTreeNode | NzFormatEmitEvent): void {
     // do something if u want
     if (data instanceof NzTreeNode) {
@@ -229,6 +209,19 @@ export class NzDemoTreeDirTreeComponent implements OnInit {
     }
   }
 
+  contextMenu($event: MouseEvent, template: TemplateRef<void>, node: NzTreeNode): void {
+    this.dropdown = this.nzDropdownService.create($event, template);
+  }
+
+  selectDropdown(): void {
+    this.dropdown.close();
+    // do something
+    console.log('dropdown clicked');
+  }
+
+  constructor(private nzDropdownService: NzDropdownService) {
+  }
+
   ngOnInit(): void {
 
   }

components/tree/demo/method.ts

@@ -16,8 +16,7 @@ import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';
       [nzDefaultExpandAll]="expandDefault"
       (nzClick)="mouseAction('click',$event)"
       (nzCheckBoxChange)="mouseAction('check',$event)"
-      (nzDblClick)="mouseAction('dblclick', $event)"
-    >
+      (nzDblClick)="mouseAction('dblclick', $event)">
     </nz-tree>`
 })
 
@@ -49,7 +48,6 @@ export class NzDemoTreeMethodComponent implements OnInit {
                   title   : 'grandchild1.2.1',
                   key     : '1000121',
                   isLeaf  : true,
-                  disabled: true
                 },
                 {
                   title : 'grandchild1.2.2',
@@ -69,6 +67,7 @@ export class NzDemoTreeMethodComponent implements OnInit {
     // just for demo, should get in ngAfterViewInit
     console.log('checkedNodes: %o', this.nzTree.getCheckedNodeList());
     console.log('selectedNodes: %o', this.nzTree.getSelectedNodeList());
+    console.log('halfCheckedNodes: %o', this.nzTree.getHalfCheckedNodeList());
     console.log(this.nzTree.nzTreeService.getCheckedNodeList());
   }
 

components/tree/nz-tree.component.ts

@@ -107,6 +107,10 @@ export class NzTreeComponent implements OnInit {
     return this.nzTreeService.getSelectedNodeList();
   }
 
+  getHalfCheckedNodeList(): NzTreeNode[] {
+    return this.nzTreeService.getHalfCheckedNodeList();
+  }
+
   // ngModel
   writeValue(value: NzTreeNode[]): void {
     if (value) {

components/tree/nz-tree.service.ts

@@ -13,6 +13,7 @@ export class NzTreeService {
   rootNodes: NzTreeNode[] = [];
   selectedNodeList: NzTreeNode[] = [];
   checkedNodeList: NzTreeNode[] = [];
+  halfCheckedNodeList: NzTreeNode[] = [];
   matchedNodeList: NzTreeNode[] = [];
 
   /**
@@ -179,6 +180,30 @@ export class NzTreeService {
     return this.checkedNodeList;
   }
 
+  /**
+   * return half checked nodes
+   * @returns {NzTreeNode[]}
+   */
+  getHalfCheckedNodeList(): NzTreeNode[] {
+    this.halfCheckedNodeList = [];
+    this.rootNodes.forEach((rNode: NzTreeNode) => {
+      const loopNode = (lNode: NzTreeNode) => {
+        const cIndex = this.halfCheckedNodeList.findIndex(cNode => (lNode.key === cNode.key));
+        if (lNode.isHalfChecked) {
+          if (cIndex === -1) {
+            this.halfCheckedNodeList.push(lNode);
+          }
+          // reset child state
+          lNode.children.forEach((child) => {
+            loopNode(child);
+          });
+        }
+      };
+      loopNode(rNode);
+    });
+    return this.halfCheckedNodeList;
+  }
+
   /**
    * return search matched nodes
    */

components/tree/nz-tree.spec.ts

@@ -124,9 +124,11 @@ describe('tree component test', () => {
       fixture.detectChanges();
       expect(treeElement.querySelectorAll('.ant-tree-checkbox-checked').length).toEqual(0);
       expect(treeInstance.treeComponent.getCheckedNodeList().length).toEqual(0);
-      // click toggle checked
-      dispatchMouseEvent(targetNode, 'click');
+      // test half checked nodes, click child1.1
+      targetNode = treeElement.querySelectorAll('.ant-tree-checkbox')[ 2 ];
       dispatchMouseEvent(targetNode, 'click');
+      fixture.detectChanges();
+      expect(treeInstance.treeComponent.getHalfCheckedNodeList().length).toEqual(2);
       // click disabled node
       targetNode = treeElement.querySelector('.ant-tree-checkbox-disabled');
       dispatchMouseEvent(targetNode, 'click');