feat(module: tree): sync ant style & add dir demo

components/core/style/index.less

@@ -107,3 +107,36 @@
     .border-right;
   }
 }
+
+// hack tree css
+.ant-tree {
+  &.ant-tree-show-line {
+    > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
+      > li:before {
+        content: ' ';
+        width: 1px;
+        border-left: 1px solid @border-color-base;
+        height: 100%;
+        position: absolute;
+        left: 12px;
+        margin: 22px 0;
+      }
+    }
+    .ant-tree-child-tree > nz-tree-node:last-child {
+      > li:before {
+        content: ' ';
+        width: 1px;
+        border-left: 0px solid @border-color-base;
+        height: 100%;
+        position: absolute;
+        left: 12px;
+        margin: 22px 0;
+      }
+    }
+  }
+  .font-highlight {
+    color: @highlight-color;
+  }
+}
+
+

components/tree/demo/basic.ts

@@ -33,48 +33,30 @@ export class NzDemoTreeBasicComponent implements OnInit {
           key     : '10001',
           children: [
             {
-              title   : 'child1.1',
-              key     : '100011',
-              children: []
+              title : 'child1.1',
+              key   : '100011',
+              isLeaf: true
             },
             {
-              title   : 'child1.2',
-              key     : '100012',
-              children: [
-                {
-                  title   : 'grandchild1.2.1',
-                  key     : '1000121',
-                  isLeaf  : true,
-                  disabled: true
-                },
-                {
-                  title : 'grandchild1.2.2',
-                  key   : '1000122',
-                  isLeaf: true
-                }
-              ]
+              title : 'child1.2',
+              key   : '100012',
+              isLeaf: true
             }
           ]
-        }
-      ]
-    }),
-    new NzTreeNode({
-      title   : 'root2',
-      key     : '1002',
-      children: [
-        {
-          title          : 'child2.1',
-          key            : '10021',
-          children       : [],
-          disableCheckbox: true
         },
         {
-          title   : 'child2.2',
-          key     : '10022',
+          title   : 'child2',
+          key     : '10002',
           children: [
             {
-              title : 'grandchild2.2.1',
-              key   : '100221',
+              title   : 'grandchild1.2.1',
+              key     : '1000121',
+              isLeaf  : true,
+              disabled: true
+            },
+            {
+              title : 'grandchild1.2.2',
+              key   : '1000122',
               isLeaf: true
             }
           ]

components/tree/demo/customized-icon.ts

@@ -6,12 +6,11 @@ import { NzTreeNode } from 'ng-zorro-antd';
   template: `
     <nz-tree [(ngModel)]="nodes"
              [nzShowExpand]="false"
-             [nzDraggable]="true"
              (nzClick)="mouseAction('click', $event)"
              (nzDblClick)="mouseAction('dblclick',$event)"
     >
       <ng-template #nzTreeTemplate let-node>
-        <span class="custom-node" draggable="true" aria-grabbed="true" [class.active]="node.isSelected">
+        <span class="custom-node" [class.active]="node.isSelected">
           <span>
             <i class="anticon anticon-smile-o" *ngIf="node.isExpanded"></i>
             <i class="anticon anticon-frown-o" *ngIf="!node.isExpanded"></i> {{node.title}}
@@ -20,25 +19,27 @@ import { NzTreeNode } from 'ng-zorro-antd';
       </ng-template>
     </nz-tree>`,
   styles  : [ `
+    :host ::ng-deep .ant-tree {
+      overflow: hidden;
+      margin: 0 -24px;
+      padding: 0 24px;
+    }
+
     .custom-node {
-      padding: 2px 8px;
+      cursor: pointer;
+      line-height: 30px;
+      display: inline-block;
+      margin: 0 -1000px;
+      padding: 0 1000px;
     }
 
     .active {
-      background-color: #bae7ff;
+      background: #1890ff;
+      color: #fff;
     }
 
     .anticon {
-      padding-left: 4px;
-      padding-right: 4px;
-    }
-
-    :host ::ng-deep .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
-      width: calc(100% - 8px);
-    }
-
-    :host ::ng-deep .ant-tree li span[draggable], :host ::ng-deep .ant-tree li span[draggable="true"] {
-      width: calc(100% - 8px);
+      padding: 0 4px;
     }
   ` ]
 })

components/tree/demo/dir-tree.md

@@ -0,0 +1,14 @@
+---
+order: 5
+title:
+  zh-CN: 文件树
+  en-US: directory tree
+---
+
+## zh-CN
+
+自定义Tree组件实现文件树，点击图标展开文件夹，鼠标拖拽.
+
+## en-US
+
+Built-in directory tree with tree component, click icon to open the folder and dnd.

components/tree/demo/dir-tree.ts

@@ -0,0 +1,202 @@
+import { Component, HostListener, OnInit } from '@angular/core';
+import { NzFormatEmitEvent, NzTreeNode } 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)">
+      <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">
+            <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>
+          <span *ngIf="node.isLeaf">
+            <i class="anticon anticon-file"></i>
+            <span class="file-name">{{node.title}}</span>
+          </span>
+        </span>
+      </ng-template>
+    </nz-tree>`,
+  styles  : [ `
+    :host ::ng-deep .ant-tree {
+      overflow: hidden;
+      margin: 0 -24px;
+      padding: 0 24px;
+    }
+
+    :host ::ng-deep .ant-tree li {
+      padding: 4px 0 0 0;
+    }
+
+    @keyframes shine {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+
+    .shine-animate {
+      animation: shine 2s ease infinite;
+    }
+
+    .custom-node {
+      cursor: pointer;
+      line-height: 30px;
+      margin-left: 4px;
+      display: inline-block;
+      margin: 0 -1000px;
+      padding: 0 1000px;
+    }
+
+    .active {
+      background: #1890ff;
+      color: #fff;
+    }
+
+    .is-dragging {
+      background-color: transparent !important;
+      color: #000;
+      opacity: 0.7;
+    }
+
+    .file-name, .folder-name {
+      margin-left: 4px;
+    }
+
+  ` ]
+})
+export class NzDemoTreeDirTreeComponent implements OnInit {
+  // can active only one node
+  activedNode: NzTreeNode;
+  dragNodeElement;
+  nodes = [
+    new NzTreeNode({
+      title   : 'root1',
+      key     : '1001',
+      expanded: true,
+      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,
+                  checked : true,
+                  disabled: true
+                },
+                {
+                  title : 'grandchild1.2.2',
+                  key   : '1000122',
+                  isLeaf: true
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }),
+    new NzTreeNode({
+      title   : 'root2',
+      key     : '1002',
+      children: [
+        {
+          title : 'child2.1',
+          key   : '10021',
+          isLeaf: true
+        },
+        {
+          title   : 'child2.2',
+          key     : '10022',
+          children: [
+            {
+              title : 'grandchild2.2.1',
+              key   : '100221',
+              isLeaf: true
+            }
+          ]
+        }
+      ]
+    })
+  ];
+
+  @HostListener('mouseleave', [ '$event' ])
+  mouseLeave(event: MouseEvent): void {
+    event.preventDefault();
+    if (this.dragNodeElement && this.dragNodeElement.className.indexOf('is-dragging') > -1) {
+      this.dragNodeElement.className = this.dragNodeElement.className.replace(' is-dragging', '');
+    }
+  }
+
+  @HostListener('mousedown', [ '$event' ])
+  mouseDown(): void {
+    // do not prevent
+    if (this.dragNodeElement && this.dragNodeElement.className.indexOf('is-dragging') > -1) {
+      this.dragNodeElement.className = this.dragNodeElement.className.replace(' is-dragging', '');
+    }
+  }
+
+  /**
+   * important:
+   * if u want to custom event/node properties, u need to maintain the selectedNodesList/checkedNodesList yourself
+   * @param {} data
+   */
+
+  openFolder(data: NzTreeNode): void {
+    // do something if u want
+    // change node's expand status
+    if (!data.isExpanded) {
+      // close to open
+      data.origin.isLoading = true;
+      setTimeout(() => {
+        data.isExpanded = !data.isExpanded;
+        data.origin.isLoading = false;
+      }, 500);
+    } else {
+      data.isExpanded = !data.isExpanded;
+    }
+  }
+
+  // 选中节点
+  activeNode(data: NzFormatEmitEvent): void {
+    if (this.activedNode) {
+      this.activedNode = null;
+    }
+    data.node.isSelected = true;
+    this.activedNode = data.node;
+  }
+
+  dragStart(event: NzFormatEmitEvent): void {
+    // disallow drag if root or search
+    this.activedNode = null;
+    this.dragNodeElement = event.event.srcElement;
+    if (this.dragNodeElement.className.indexOf('is-dragging') === -1) {
+      this.dragNodeElement.className = event.event.srcElement.className + ' is-dragging';
+    }
+  }
+
+  ngOnInit(): void {
+
+  }
+}