fix(module:tree): fix icon to svg & draggable event listener (#2338)

close #2332 close #2205 close #2336
NG-ZORRO · Oct 26, 2018 · 8bc488e · 8bc488e
1 parent e06b9a7
commit 8bc488e
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 79 deletions.
diff --git a/components/tree/demo/basic.ts b/components/tree/demo/basic.ts
@@ -13,6 +13,7 @@ import { NzFormatEmitEvent, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd'
       [nzExpandedKeys]="defaultExpandedKeys"
       [nzSelectedKeys]="defaultSelectedKeys"
       (nzClick)="nzClick($event)"
+      (nzSelectedKeysChange)="nzSelect($event)"
       (nzCheckBoxChange)="nzCheck($event)">
     </nz-tree>
   `
@@ -45,17 +46,21 @@ export class NzDemoTreeBasicComponent implements OnInit {
   } ];
 
   nzClick(event: NzFormatEmitEvent): void {
-    console.log(event, event.selectedKeys, event.keys, event.nodes);
+    console.log(event, event.selectedKeys, event.keys, event.nodes, this.treeCom.getSelectedNodeList());
   }
 
   nzCheck(event: NzFormatEmitEvent): void {
     console.log(event, event.checkedKeys, event.keys, event.nodes);
   }
 
+  // nzSelectedKeys change
+  nzSelect(keys: string[]): void {
+    console.log(keys, this.treeCom.getSelectedNodeList());
+  }
+
   ngOnInit(): void {
     setTimeout(() => {
-      console.log(this.treeCom.getTreeNodes(), this.treeCom.getCheckedNodeList());
+      console.log(this.treeCom.getTreeNodes(), this.treeCom.getCheckedNodeList(), this.treeCom.getSelectedNodeList());
     }, 500);
-
   }
 }
diff --git a/components/tree/demo/directory.ts b/components/tree/demo/directory.ts
@@ -25,7 +25,7 @@ import {
       <ng-template #nzTreeTemplate let-node>
         <span class="custom-node" [class.active]="activedNode?.key===node.key">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event,contextTemplate)">
-            <i class="anticon" [ngClass]="node.isExpanded ? 'anticon-folder-open' : 'anticon-folder'" (click)="openFolder(node)"></i>
+            <i nz-icon [type]="node.isExpanded ? 'folder-open' : 'folder'" (click)="openFolder(node)"></i>
             <span class="folder-name">{{node.title}}</span>
             <span class="folder-desc">created by {{node?.origin?.author | lowercase}}</span>
           </span>

diff --git a/components/tree/nz-tree-node.component.html b/components/tree/nz-tree-node.component.html
@@ -1,6 +1,7 @@
 <li
   #dragElement
   role="treeitem"
+  [style.display]="displayStyle"
   [ngClass]="nzNodeClass"
   [class.ant-tree-treenode-switcher-open]="isSwitcherOpen"
   [class.ant-tree-treenode-switcher-close]="isSwitcherClose"
@@ -14,10 +15,14 @@
       [class.ant-tree-switcher_open]="isSwitcherOpen"
       [class.ant-tree-switcher_close]="isSwitcherClose"
       (click)="_clickExpand($event)">
-      <i *ngIf="!nzTreeNode.isLeaf && !nzShowLine" nz-icon type="caret-down" class="ant-tree-switcher-icon"></i>
-      <i *ngIf="nzShowLine && !nzTreeNode.isExpanded && !nzTreeNode.isLeaf" nz-icon type="plus-square" class="ant-tree-switcher-line-icon"></i>
-      <i *ngIf="nzShowLine && nzTreeNode.isExpanded && !nzTreeNode.isLeaf" nz-icon type="minus-square" class="ant-tree-switcher-line-icon"></i>
-      <i *ngIf="nzShowLine && nzTreeNode.isLeaf" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
+      <ng-container *ngIf="isShowSwitchIcon">
+        <i *ngIf="!nzTreeNode.isLoading" nz-icon type="caret-down" class="ant-tree-switcher-icon"></i>
+        <i *ngIf="nzTreeNode.isLoading" nz-icon type="loading" [spin]="true" class="ant-tree-switcher-loading-icon"></i>
+      </ng-container>
+      <ng-container *ngIf="nzShowLine">
+        <i *ngIf="isShowLineIcon" nz-icon [type]="isSwitcherOpen ? 'minus-square' : 'plus-square'" class="ant-tree-switcher-line-icon"></i>
+        <i *ngIf="!isShowLineIcon" nz-icon type="file" class="ant-tree-switcher-line-icon"></i>
+      </ng-container>
     </span>
   </ng-container>
   <ng-container *ngIf="nzCheckable">
@@ -48,7 +53,7 @@
         [ngClass]="nzNodeContentLoadingClass">
         <span
           [ngClass]="nzNodeContentIconClass">
-          <i nz-icon class="anticon" [ngClass]="nzTreeNode.origin.icon"></i>
+          <i nz-icon *ngIf="nzIcon" [type]="!oldAPIIcon && nzIcon" [ngClass]="oldAPIIcon && nzIcon"></i>
         </span>
       </span>
       <span class="ant-tree-title">
@@ -85,6 +90,7 @@
       [nzExpandAll]="nzExpandAll"
       [nzDefaultExpandAll]="nzDefaultExpandAll"
       [nzSearchValue]="nzSearchValue"
+      [nzHideUnMatched]="nzHideUnMatched"
       [nzBeforeDrop]="nzBeforeDrop"
       [nzCheckStrictly]="nzCheckStrictly"
       [nzTreeTemplate]="nzTreeTemplate"

diff --git a/components/tree/nz-tree-node.component.ts b/components/tree/nz-tree-node.component.ts
@@ -1,13 +1,22 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
-  Component, ElementRef, EventEmitter, HostListener,
-  Input, NgZone,
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  NgZone,
   OnChanges,
-  OnInit, Output, Renderer2,
-  SimpleChanges,
-  TemplateRef, ViewChild
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
+  SimpleChange,
+  TemplateRef,
+  ViewChild
 } from '@angular/core';
-import { fromEvent, Observable } from 'rxjs';
+import { fromEvent, Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import { InputBoolean } from '../core/util/convert';
 import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from '../tree/interface';
 import { NzTreeNode } from './nz-tree-node';
@@ -35,16 +44,16 @@ import { NzTreeService } from './nz-tree.service';
   ]
 })
 
-export class NzTreeNodeComponent implements OnInit, OnChanges {
+export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild('dragElement') dragElement: ElementRef;
 
   @Input() @InputBoolean() nzShowLine: boolean;
   @Input() @InputBoolean() nzShowExpand: boolean;
-  @Input() @InputBoolean() nzDraggable: boolean;
   @Input() @InputBoolean() nzMultiple: boolean;
   @Input() @InputBoolean() nzCheckable: boolean;
   @Input() @InputBoolean() nzAsyncData: boolean;
   @Input() @InputBoolean() nzCheckStrictly: boolean;
+  @Input() @InputBoolean() nzHideUnMatched = false;
   @Input() nzTreeTemplate: TemplateRef<void>;
   @Input() nzBeforeDrop: (confirm: NzFormatBeforeDropEvent) => Observable<boolean>;
 
@@ -68,6 +77,16 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
     return this._nzTreeNode;
   }
 
+  @Input()
+  set nzDraggable(value: boolean) {
+    this._nzDraggable = value;
+    this.handDragEvent();
+  }
+
+  get nzDraggable(): boolean {
+    return this._nzDraggable;
+  }
+
   /**
    * @deprecated use
    * nzExpandAll instead
@@ -103,14 +122,10 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   set nzSearchValue(value: string) {
     this.highlightKeys = [];
     if (value && this.nzTreeNode.title.includes(value)) {
-      this.nzTreeNode.isMatched = true;
       // match the search value
       const index = this.nzTreeNode.title.indexOf(value);
       this.highlightKeys.push(this.nzTreeNode.title.slice(0, index));
       this.highlightKeys.push(this.nzTreeNode.title.slice(index + value.length, this.nzTreeNode.title.length));
-    } else {
-      // close the node if title does't contain search value
-      this.nzTreeNode.isMatched = false;
     }
     this._searchValue = value;
   }
@@ -145,6 +160,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   /**
    * drag var
    */
+  destory$ = new Subject();
   dragPos = 2;
   dragPosClass: object = {
     '0' : 'drag-over',
@@ -158,11 +174,28 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   _nzTreeNode: NzTreeNode;
   _searchValue = '';
   _nzExpandAll = false;
+  _nzDraggable = false;
+  oldAPIIcon = true;
+
+  get nzIcon(): string {
+    if (this.nzTreeNode && this.nzTreeNode.origin.icon) {
+      this.oldAPIIcon = this.nzTreeNode.origin.icon.indexOf('anticon') > -1;
+    }
+    return this.nzTreeNode && this.nzTreeNode.origin.icon;
+  }
 
   get canDraggable(): boolean | null {
     return (this.nzDraggable && this.nzTreeNode && !this.nzTreeNode.isDisabled) ? true : null;
   }
 
+  get isShowLineIcon(): boolean {
+    return !this.nzTreeNode.isLeaf && this.nzShowLine;
+  }
+
+  get isShowSwitchIcon(): boolean {
+    return !this.nzTreeNode.isLeaf && !this.nzShowLine;
+  }
+
   get isSwitcherOpen(): boolean {
     return (this.nzTreeNode.isExpanded && !this.nzTreeNode.isLeaf);
   }
@@ -171,6 +204,11 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
     return (!this.nzTreeNode.isExpanded && !this.nzTreeNode.isLeaf);
   }
 
+  get displayStyle(): string {
+    // TODO
+    return (this.nzSearchValue && this.nzHideUnMatched && !this.nzTreeNode.isMatched && !this.nzTreeNode.isExpanded) ? 'none' : '';
+  }
+
   /**
    * reset node class
    */
@@ -367,22 +405,39 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
     });
   }
 
-  constructor(private nzTreeService: NzTreeService, private ngZone: NgZone, private renderer: Renderer2, private elRef: ElementRef) {
-    ngZone.runOutsideAngular(() => {
-      fromEvent(this.elRef.nativeElement, 'dragstart').subscribe((e: DragEvent) => this.handleDragStart(e));
-      fromEvent(this.elRef.nativeElement, 'dragenter').subscribe((e: DragEvent) => this.handleDragEnter(e));
-      fromEvent(this.elRef.nativeElement, 'dragover').subscribe((e: DragEvent) => this.handleDragOver(e));
-      fromEvent(this.elRef.nativeElement, 'dragleave').subscribe((e: DragEvent) => this.handleDragLeave(e));
-      fromEvent(this.elRef.nativeElement, 'drop').subscribe((e: DragEvent) => this.handleDragDrop(e));
-      fromEvent(this.elRef.nativeElement, 'dragend').subscribe((e: DragEvent) => this.handleDragEnd(e));
+  /**
+   * 监听拖拽事件
+   */
+  handDragEvent(): void {
+    this.ngZone.runOutsideAngular(() => {
+      if (this.nzDraggable) {
+        this.destory$ = new Subject();
+        fromEvent(this.elRef.nativeElement, 'dragstart').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragStart(e));
+        fromEvent(this.elRef.nativeElement, 'dragenter').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnter(e));
+        fromEvent(this.elRef.nativeElement, 'dragover').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragOver(e));
+        fromEvent(this.elRef.nativeElement, 'dragleave').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragLeave(e));
+        fromEvent(this.elRef.nativeElement, 'drop').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragDrop(e));
+        fromEvent(this.elRef.nativeElement, 'dragend').pipe(takeUntil(this.destory$)).subscribe((e: DragEvent) => this.handleDragEnd(e));
+      } else {
+        this.destory$.next();
+        this.destory$.complete();
+      }
     });
   }
 
+  constructor(private nzTreeService: NzTreeService, private ngZone: NgZone, private renderer: Renderer2, private elRef: ElementRef) {
+  }
+
   ngOnInit(): void {
     this.setClassMap();
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
+  ngOnChanges(changes: { [ propertyName: string ]: SimpleChange }): void {
     this.setClassMap();
   }
+
+  ngOnDestroy(): void {
+    this.destory$.next();
+    this.destory$.complete();
+  }
 }
diff --git a/components/tree/nz-tree.component.html b/components/tree/nz-tree.component.html
@@ -12,6 +12,7 @@
     [nzAsyncData]="nzAsyncData"
     [nzMultiple]="nzMultiple"
     [nzSearchValue]="nzSearchValue"
+    [nzHideUnMatched]="nzHideUnMatched"
     [nzBeforeDrop]="nzBeforeDrop"
     [nzCheckStrictly]="nzCheckStrictly"
     [nzExpandAll]="nzExpandAll"