fix(module: tree): fix tree styles (#6198)

NG-ZORRO · Dec 15, 2020 · a481a15 · a481a15
1 parent 99e3117
commit a481a15
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 11 deletions.
diff --git a/components/tree/tree-drop-indicator.component.ts b/components/tree/tree-drop-indicator.component.ts
@@ -0,0 +1,59 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { NgStyleInterface } from 'ng-zorro-antd/core/types';
+
+@Component({
+  selector: 'nz-tree-drop-indicator',
+  exportAs: 'NzTreeDropIndicator',
+  template: ``,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  preserveWhitespaces: false,
+  host: {
+    '[class.ant-tree-drop-indicator]': 'true',
+    '[style]': 'style'
+  }
+})
+export class NzTreeDropIndicatorComponent implements OnChanges {
+  @Input() dropPosition?: number;
+  @Input() level: number = 1;
+  @Input() direction: string = 'ltr';
+  style: NgStyleInterface = {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.renderIndicator(this.dropPosition!, this.direction);
+  }
+
+  renderIndicator(dropPosition: number, direction: string = 'ltr'): void {
+    const offset = 4;
+    const startPosition = direction === 'ltr' ? 'left' : 'right';
+    const endPosition = direction === 'ltr' ? 'right' : 'left';
+    const style: NgStyleInterface = {
+      [startPosition]: `${offset}px`,
+      [endPosition]: '0px'
+    };
+    switch (dropPosition) {
+      case -1:
+        style.top = `${-3}px`;
+        break;
+      case 1:
+        style.bottom = `${-3}px`;
+        break;
+      case 0:
+        // dropPosition === 0
+        style.bottom = `${-3}px`;
+        style[startPosition] = `${offset + 24}px`;
+        break;
+      default:
+        style.display = 'none';
+        break;
+    }
+    this.style = style;
+    this.cdr.markForCheck();
+  }
+}
diff --git a/components/tree/tree-node-title.component.ts b/components/tree/tree-node-title.component.ts
@@ -3,13 +3,13 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
 
 @Component({
   selector: 'nz-tree-node-title',
-  template: ` <ng-template [ngTemplateOutlet]="treeTemplate" [ngTemplateOutletContext]="{ $implicit: context, origin: context.origin }">
-    </ng-template>
+  template: `
+    <ng-template [ngTemplateOutlet]="treeTemplate" [ngTemplateOutletContext]="{ $implicit: context, origin: context.origin }"></ng-template>
     <ng-container *ngIf="!treeTemplate">
       <span
         *ngIf="icon && showIcon"
@@ -28,8 +28,10 @@ import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
           <i nz-icon *ngIf="icon" [nzType]="icon"></i>
         </span>
       </span>
-      <span class="ant-tree-title" [innerHTML]="title | nzHighlight: matchedValue:'i':'font-highlight'"> </span>
-    </ng-container>`,
+      <span class="ant-tree-title" [innerHTML]="title | nzHighlight: matchedValue:'i':'font-highlight'"></span>
+      <nz-tree-drop-indicator *ngIf="showIndicator" [dropPosition]="dragPosition" [level]="context.level"></nz-tree-drop-indicator>
+    </ng-container>
+  `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   preserveWhitespaces: false,
   host: {
@@ -47,7 +49,7 @@ import { NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
     '[class.ant-tree-node-selected]': `!selectMode && isSelected`
   }
 })
-export class NzTreeNodeTitleComponent {
+export class NzTreeNodeTitleComponent implements OnChanges {
   @Input() searchValue!: string;
   @Input() treeTemplate: TemplateRef<{ $implicit: NzTreeNode; origin: NzTreeNodeOptions }> | null = null;
   @Input() draggable!: boolean;
@@ -62,6 +64,9 @@ export class NzTreeNodeTitleComponent {
   @Input() isMatched!: boolean;
   @Input() isExpanded!: boolean;
   @Input() isLeaf!: boolean;
+  // Drag indicator
+  @Input() showIndicator = true;
+  @Input() dragPosition?: number;
 
   get canDraggable(): boolean | null {
     return this.draggable && !this.isDisabled ? true : null;
@@ -78,4 +83,13 @@ export class NzTreeNodeTitleComponent {
   get isSwitcherClose(): boolean {
     return !this.isExpanded && !this.isLeaf;
   }
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { showIndicator, dragPosition } = changes;
+    if (showIndicator || dragPosition) {
+      this.cdr.markForCheck();
+    }
+  }
 }
diff --git a/components/tree/tree-node.component.ts b/components/tree/tree-node.component.ts
@@ -70,6 +70,8 @@ import { takeUntil } from 'rxjs/operators';
       [showIcon]="nzShowIcon"
       [selectMode]="nzSelectMode"
       [context]="nzTreeNode"
+      [showIndicator]="showIndicator"
+      [dragPosition]="dragPos"
       (dblclick)="dblClick($event)"
       (click)="clickSelect($event)"
       (contextmenu)="contextMenu($event)"
@@ -162,7 +164,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
     '1': 'drag-over-gap-bottom',
     '-1': 'drag-over-gap-top'
   };
-
+  showIndicator = false;
   /**
    * default set
    */
@@ -243,7 +245,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   clearDragClass(): void {
-    const dragClass = ['drag-over-gap-top', 'drag-over-gap-bottom', 'drag-over'];
+    const dragClass = ['drag-over-gap-top', 'drag-over-gap-bottom', 'drag-over', 'drop-target'];
     dragClass.forEach(e => {
       this.renderer.removeClass(this.elementRef.nativeElement, e);
     });
@@ -269,7 +271,8 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
   handleDragEnter(e: DragEvent): void {
     e.preventDefault();
     // reset position
-    this.dragPos = 2;
+    this.showIndicator = this.nzTreeNode.key !== this.nzTreeService.getSelectedNode()?.key;
+    this.renderIndicator(2);
     this.ngZone.run(() => {
       const eventNext = this.nzTreeService.formatEvent('dragenter', this.nzTreeNode, e);
       this.nzOnDragEnter.emit(eventNext);
@@ -281,10 +284,11 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
     const dropPosition = this.nzTreeService.calcDropPosition(e);
     if (this.dragPos !== dropPosition) {
       this.clearDragClass();
-      this.dragPos = dropPosition;
+      this.renderIndicator(dropPosition);
       // leaf node will pass
       if (!(this.dragPos === 0 && this.isLeaf)) {
         this.renderer.addClass(this.elementRef.nativeElement, this.dragPosClass[this.dragPos]);
+        this.renderer.addClass(this.elementRef.nativeElement, 'drop-target');
       }
     }
     const eventNext = this.nzTreeService.formatEvent('dragover', this.nzTreeNode, e);
@@ -293,13 +297,15 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
 
   handleDragLeave(e: DragEvent): void {
     e.preventDefault();
+    this.renderIndicator(2);
     this.clearDragClass();
     const eventNext = this.nzTreeService.formatEvent('dragleave', this.nzTreeNode, e);
     this.nzOnDragLeave.emit(eventNext);
   }
 
   handleDragDrop(e: DragEvent): void {
     this.ngZone.run(() => {
+      this.showIndicator = false;
       this.clearDragClass();
       const node = this.nzTreeService.getSelectedNode();
       if (!node || (node && node.key === this.nzTreeNode.key) || (this.dragPos === 0 && this.isLeaf)) {
@@ -399,4 +405,15 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
     this.destroy$.next();
     this.destroy$.complete();
   }
+
+  private renderIndicator(dropPosition: number): void {
+    this.ngZone.run(() => {
+      this.showIndicator = dropPosition !== 2;
+      if (this.nzTreeNode.key === this.nzTreeService.getSelectedNode()?.key || (dropPosition === 0 && this.isLeaf)) {
+        return;
+      }
+      this.dragPos = dropPosition;
+      this.cdr.markForCheck();
+    });
+  }
 }
diff --git a/components/tree/tree.module.ts b/components/tree/tree.module.ts
@@ -10,6 +10,7 @@ import { NzHighlightModule } from 'ng-zorro-antd/core/highlight';
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzTreeDropIndicatorComponent } from './tree-drop-indicator.component';
 import { NzTreeIndentComponent } from './tree-indent.component';
 import { NzTreeNodeCheckboxComponent } from './tree-node-checkbox.component';
 import { NzTreeNodeSwitcherComponent } from './tree-node-switcher.component';
@@ -25,7 +26,8 @@ import { NzTreeComponent } from './tree.component';
     NzTreeIndentComponent,
     NzTreeNodeSwitcherComponent,
     NzTreeNodeCheckboxComponent,
-    NzTreeNodeTitleComponent
+    NzTreeNodeTitleComponent,
+    NzTreeDropIndicatorComponent
   ],
   exports: [NzTreeComponent, NzTreeNodeComponent, NzTreeIndentComponent]
 })