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

fix(module:tree): fix icon
NG-ZORRO · Oct 25, 2018 · 3ffb9b0 · 3ffb9b0
1 parent a4a948c
commit 3ffb9b0
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 54 deletions.
diff --git a/components/tree/demo/customized-icon.ts b/components/tree/demo/customized-icon.ts
@@ -17,10 +17,10 @@ export class NzDemoTreeCustomizedIconComponent implements OnInit {
       title   : 'parent 1',
       key     : '100',
       expanded: true,
-      icon    : 'anticon anticon-smile-o',
+      icon    : 'smile-o',
       children: [
-        { title: 'leaf', key: '1001', icon: 'anticon anticon-meh-o', isLeaf: true },
-        { title: 'leaf', key: '1002', icon: 'anticon anticon-frown-o', isLeaf: true }
+        { title: 'leaf', key: '1001', icon: 'meh-o', isLeaf: true },
+        { title: 'leaf', key: '1002', icon: 'frown-o', isLeaf: true }
       ]
     }
   ];

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,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2,
   SimpleChanges,
-  TemplateRef, ViewChild
+  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,7 +44,7 @@ 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;
@@ -45,6 +54,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   @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>;
 
@@ -103,14 +113,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 +151,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   /**
    * drag var
    */
+  destory$ = new Subject();
   dragPos = 2;
   dragPosClass: object = {
     '0' : 'drag-over',
@@ -158,11 +165,27 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
   _nzTreeNode: NzTreeNode;
   _searchValue = '';
   _nzExpandAll = 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 +194,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 +395,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) {
+        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();
+    this.handDragEvent();
   }
 
   ngOnChanges(changes: SimpleChanges): 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"

diff --git a/components/tree/nz-tree.component.ts b/components/tree/nz-tree.component.ts
@@ -4,11 +4,15 @@ import {
   ContentChild,
   EventEmitter,
   Input,
+  OnChanges,
   OnDestroy,
-  OnInit, Output, TemplateRef
+  OnInit,
+  Output,
+  SimpleChange,
+  TemplateRef
 } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Observable, Subject, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { isNotNil } from '../core/util/check';
 import { InputBoolean } from '../core/util/convert';
 import { NzFormatBeforeDropEvent, NzFormatEmitEvent } from '../tree/interface';
@@ -28,7 +32,7 @@ import { NzTreeService } from './nz-tree.service';
   ]
 })
 
-export class NzTreeComponent implements OnInit, OnDestroy {
+export class NzTreeComponent implements OnInit, OnChanges, OnDestroy {
   @Input() @InputBoolean() nzShowIcon = false;
   @Input() @InputBoolean() nzShowLine = false;
   @Input() @InputBoolean() nzCheckStrictly = false;
@@ -38,6 +42,7 @@ export class NzTreeComponent implements OnInit, OnDestroy {
   @Input() @InputBoolean() nzDraggable = false;
   @Input() @InputBoolean() nzMultiple = false;
   @Input() @InputBoolean() nzExpandAll: boolean = false;
+  @Input() @InputBoolean() nzHideUnMatched = false;
   /**
    * @deprecated use
    * nzExpandAll instead
@@ -48,7 +53,7 @@ export class NzTreeComponent implements OnInit, OnDestroy {
   @Input()
   // tslint:disable-next-line:no-any
   set nzData(value: any[]) {
-    if (Array.isArray(value) && value.length > 0) {
+    if (Array.isArray(value)) {
       if (!this.nzTreeService.isArrayOfNzTreeNode(value)) {
         // has not been new NzTreeNode
         this.nzNodes = value.map(item => (new NzTreeNode(item)));
@@ -59,7 +64,7 @@ export class NzTreeComponent implements OnInit, OnDestroy {
       this.nzTreeService.initTree(this.nzNodes);
     } else {
       if (value !== null) {
-        console.warn('ngModel only accepts an array and should be not empty');
+        console.warn('ngModel only accepts an array and must be not empty');
       }
     }
   }
@@ -159,9 +164,9 @@ export class NzTreeComponent implements OnInit, OnDestroy {
 
   // tslint:disable-next-line:no-any
   @ContentChild('nzTreeTemplate') nzTreeTemplate: TemplateRef<any>;
-  _searchValue = '';
+  _searchValue = null;
   // tslint:disable-next-line:no-any
-  nzDefaultSubject = new Subject();
+  nzDefaultSubject = new BehaviorSubject(null);
   nzDefaultSubscription: Subscription;
   nzNodes: NzTreeNode[] = [];
   prefixCls = 'ant-tree';
@@ -207,7 +212,7 @@ export class NzTreeComponent implements OnInit, OnDestroy {
   }
 
   writeValue(value: NzTreeNode[]): void {
-    if (Array.isArray(value) && value.length > 0) {
+    if (Array.isArray(value)) {
       this.nzNodes = value;
       this.nzTreeService.conductOption.isCheckStrictly = this.nzCheckStrictly;
       this.nzTreeService.initTree(this.nzNodes);
@@ -232,7 +237,7 @@ export class NzTreeComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.setClassMap();
     this.nzDefaultSubscription = this.nzDefaultSubject.subscribe((data: { type: string, keys: string[] }) => {
-      if (data.keys.length === 0) {
+      if (!data || data.keys.length === 0) {
         return;
       }
       switch (data.type) {
@@ -252,6 +257,12 @@ export class NzTreeComponent implements OnInit, OnDestroy {
     });
   }
 
+  ngOnChanges(changes: { [ propertyName: string ]: SimpleChange }): void {
+    if (changes.nzCheckStrictly) {
+      this.nzTreeService.conductOption.isCheckStrictly = changes.nzCheckStrictly.currentValue;
+    }
+  }
+
   ngOnDestroy(): void {
     if (this.nzDefaultSubscription) {
       this.nzDefaultSubscription.unsubscribe();