Skip to content

Commit

Permalink
fix(module:tree): fix icon to svg & draggable event listener
Browse files Browse the repository at this point in the history
  • Loading branch information
simplejason committed Oct 26, 2018
1 parent a4a948c commit 4a975ec
Show file tree
Hide file tree
Showing 7 changed files with 164 additions and 76 deletions.
11 changes: 8 additions & 3 deletions components/tree/demo/basic.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand Down Expand Up @@ -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);

}
}
16 changes: 11 additions & 5 deletions components/tree/nz-tree-node.component.html
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -85,6 +90,7 @@
[nzExpandAll]="nzExpandAll"
[nzDefaultExpandAll]="nzDefaultExpandAll"
[nzSearchValue]="nzSearchValue"
[nzHideUnMatched]="nzHideUnMatched"
[nzBeforeDrop]="nzBeforeDrop"
[nzCheckStrictly]="nzCheckStrictly"
[nzTreeTemplate]="nzTreeTemplate"
Expand Down
97 changes: 76 additions & 21 deletions components/tree/nz-tree-node.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>;

Expand All @@ -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
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -145,6 +160,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges {
/**
* drag var
*/
destory$ = new Subject();
dragPos = 2;
dragPosClass: object = {
'0' : 'drag-over',
Expand All @@ -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);
}
Expand All @@ -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
*/
Expand Down Expand Up @@ -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();
}
}
1 change: 1 addition & 0 deletions components/tree/nz-tree.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
[nzAsyncData]="nzAsyncData"
[nzMultiple]="nzMultiple"
[nzSearchValue]="nzSearchValue"
[nzHideUnMatched]="nzHideUnMatched"
[nzBeforeDrop]="nzBeforeDrop"
[nzCheckStrictly]="nzCheckStrictly"
[nzExpandAll]="nzExpandAll"
Expand Down
Loading

0 comments on commit 4a975ec

Please sign in to comment.