Skip to content

Commit

Permalink
fix(module:tree): fix tree animation (#4973)
Browse files Browse the repository at this point in the history 
* fix(module:tree): fix tree animation

* test(module:tree): remove failed test temporarily
  • Loading branch information
Yadong Xie committed Apr 2, 2020
1 parent 3aebe7c commit 70b2fc3
Show file tree
Hide file tree
Showing 9 changed files with 170 additions and 143 deletions.
24 changes: 19 additions & 5 deletions components/core/animation/collapse.ts
View file
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations';
import { animate, AnimationTriggerMetadata, query, stagger, state, style, transition, trigger } from '@angular/animations';
import { AnimationCurves } from './animation-consts';

export const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion', [
Expand All @@ -20,9 +20,23 @@ export const collapseMotion: AnimationTriggerMetadata = trigger('collapseMotion'
]);

export const treeCollapseMotion: AnimationTriggerMetadata = trigger('treeCollapseMotion', [
transition(':leave', [style({ overflow: 'hidden' }), animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ height: 0 }))]),
transition(':enter', [
style({ overflow: 'hidden', height: 0 }),
animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ overflow: 'hidden', height: '*' }))
transition('* => *', [
query(
'nz-tree-node:leave',
[style({ overflow: 'hidden' }), stagger(0, [animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ height: 0 }))])],
{
optional: true
}
),
query(
'nz-tree-node:enter',
[
style({ overflow: 'hidden', height: 0 }),
stagger(0, [animate(`150ms ${AnimationCurves.EASE_IN_OUT}`, style({ overflow: 'hidden', height: '*' }))])
],
{
optional: true
}
)
])
]);
1 change: 1 addition & 0 deletions components/package.json
View file
Expand Up @@ -35,6 +35,7 @@
"peerDependencies": {
"@angular/animations": "^9.0.0",
"@angular/common": "^9.0.0",
"@angular/forms": "^9.0.0",
"@angular/core": "^9.0.0",
"@angular/platform-browser": "^9.0.0",
"@angular/router": "^9.0.0",
Expand Down
12 changes: 6 additions & 6 deletions components/tree/nz-tree-indent.component.ts
View file
Expand Up @@ -11,13 +11,13 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleCha
@Component({
selector: 'nz-tree-indent',
exportAs: 'nzTreeIndent',
template: `
<span aria-hidden="true" class="{{ nzPrefixCls }}-indent">
<span *ngFor="let i of listOfUnit; let index = index" [ngClass]="unitMapOfClass(index)"></span>
</span>
`,
template: ` <span *ngFor="let i of listOfUnit; let index = index" [class]="unitMapOfClass(index)"></span> `,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false
preserveWhitespaces: false,
host: {
'[attr.aria-hidden]': 'true',
'[class]': `nzPrefixCls + '-indent'`
}
})
export class NzTreeIndentComponent implements OnInit, OnChanges {
@Input() nzPrefixCls: string;
Expand Down
169 changes: 83 additions & 86 deletions components/tree/nz-tree-node.component.ts
View file
Expand Up @@ -23,10 +23,8 @@ import {
Output,
Renderer2,
SimpleChange,
TemplateRef,
ViewChild
TemplateRef
} from '@angular/core';
import { treeCollapseMotion } from 'ng-zorro-antd/core/animation';
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';

import { NzFormatBeforeDropEvent, NzFormatEmitEvent, NzTreeBaseService, NzTreeNode, NzTreeNodeOptions } from 'ng-zorro-antd/core/tree';
Expand All @@ -38,98 +36,97 @@ import { takeUntil } from 'rxjs/operators';
selector: 'nz-tree-node',
exportAs: 'nzTreeNode',
template: `
<div #dragElement role="treeitem" [ngClass]="nzNodeClass" [style.display]="displayStyle">
<nz-tree-indent
[nzTreeLevel]="nzTreeNode.level"
[nzPrefixCls]="prefixCls"
[nzIsStart]="nzTreeNode.isStart"
[nzIsEnd]="nzTreeNode.isEnd"
></nz-tree-indent>
<ng-container *ngIf="nzShowExpand">
<!-- render switcher -->
<span [ngClass]="nzNodeSwitcherClass" (click)="clickExpand($event)">
<ng-container *ngIf="isShowSwitchIcon">
<ng-container *ngIf="!nzTreeNode.isLoading">
<ng-template
*ngIf="isTemplateRef(nzExpandedIcon)"
[ngTemplateOutlet]="nzExpandedIcon"
[ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }"
>
</ng-template>
<nz-tree-indent
[nzTreeLevel]="nzTreeNode.level"
[nzPrefixCls]="prefixCls"
[nzIsStart]="nzTreeNode.isStart"
[nzIsEnd]="nzTreeNode.isEnd"
></nz-tree-indent>
<ng-container *ngIf="nzShowExpand">
<!-- render switcher -->
<span [ngClass]="nzNodeSwitcherClass" (click)="clickExpand($event)">
<ng-container *ngIf="isShowSwitchIcon">
<ng-container *ngIf="!nzTreeNode.isLoading">
<ng-template
*ngIf="isTemplateRef(nzExpandedIcon)"
[ngTemplateOutlet]="nzExpandedIcon"
[ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }"
>
</ng-template>
<i
*ngIf="!isTemplateRef(nzExpandedIcon)"
nz-icon
nzType="caret-down"
[class.ant-select-tree-switcher-icon]="nzSelectMode"
[class.ant-tree-switcher-icon]="!nzSelectMode"
>
</i>
</ng-container>
<i *ngIf="nzTreeNode.isLoading" nz-icon nzType="loading" [nzSpin]="true" class="ant-tree-switcher-loading-icon"></i>
</ng-container>
<ng-container *ngIf="nzShowLine">
<ng-container *ngIf="!nzTreeNode.isLoading">
<ng-template
*ngIf="isTemplateRef(nzExpandedIcon)"
[ngTemplateOutlet]="nzExpandedIcon"
[ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }"
>
</ng-template>
<ng-container *ngIf="!isTemplateRef(nzExpandedIcon)">
<i
*ngIf="!isTemplateRef(nzExpandedIcon)"
*ngIf="isShowLineIcon"
nz-icon
nzType="caret-down"
[class.ant-select-tree-switcher-icon]="nzSelectMode"
[class.ant-tree-switcher-icon]="!nzSelectMode"
>
</i>
</ng-container>
<i *ngIf="nzTreeNode.isLoading" nz-icon nzType="loading" [nzSpin]="true" class="ant-tree-switcher-loading-icon"></i>
</ng-container>
<ng-container *ngIf="nzShowLine">
<ng-container *ngIf="!nzTreeNode.isLoading">
<ng-template
*ngIf="isTemplateRef(nzExpandedIcon)"
[ngTemplateOutlet]="nzExpandedIcon"
[ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }"
>
</ng-template>
<ng-container *ngIf="!isTemplateRef(nzExpandedIcon)">
<i
*ngIf="isShowLineIcon"
nz-icon
[nzType]="isSwitcherOpen ? 'minus-square' : 'plus-square'"
class="ant-tree-switcher-line-icon"
></i>
<i *ngIf="!isShowLineIcon" nz-icon nzType="file" class="ant-tree-switcher-line-icon"></i>
</ng-container>
[nzType]="isSwitcherOpen ? 'minus-square' : 'plus-square'"
class="ant-tree-switcher-line-icon"
></i>
<i *ngIf="!isShowLineIcon" nz-icon nzType="file" class="ant-tree-switcher-line-icon"></i>
</ng-container>
<i *ngIf="nzTreeNode.isLoading" nz-icon nzType="loading" [nzSpin]="true" class="ant-tree-switcher-loading-icon"></i>
</ng-container>
</span>
</ng-container>
<ng-container *ngIf="nzCheckable">
<span [ngClass]="nzNodeCheckboxClass" (click)="clickCheckBox($event)">
<span [class.ant-tree-checkbox-inner]="!nzSelectMode" [class.ant-select-tree-checkbox-inner]="nzSelectMode"></span>
</span>
</ng-container>
<span
title="{{ nzTreeNode.title }}"
[attr.draggable]="canDraggable"
[attr.aria-grabbed]="canDraggable"
[ngClass]="nzNodeContentClass"
[class.draggable]="canDraggable"
(dblclick)="dblClick($event)"
(click)="clickSelect($event)"
(contextmenu)="contextMenu($event)"
>
<ng-template [ngTemplateOutlet]="nzTreeTemplate" [ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }">
</ng-template>
<ng-container *ngIf="!nzTreeTemplate">
<span
*ngIf="nzTreeNode.icon && nzShowIcon"
[class.ant-tree-icon__open]="isSwitcherOpen"
[class.ant-tree-icon__close]="isSwitcherClose"
[class.ant-tree-icon_loading]="nzTreeNode.isLoading"
[ngClass]="nzNodeContentLoadingClass"
>
<span [ngClass]="nzNodeContentIconClass">
<i nz-icon *ngIf="nzIcon" [nzType]="nzIcon"></i>
</span>
</span>
<span class="ant-tree-title" [innerHTML]="nzTreeNode.title | nzHighlight: matchedValue:'i':'font-highlight'"> </span>
<i *ngIf="nzTreeNode.isLoading" nz-icon nzType="loading" [nzSpin]="true" class="ant-tree-switcher-loading-icon"></i>
</ng-container>
</span>
</div>
</ng-container>
<ng-container *ngIf="nzCheckable">
<span [ngClass]="nzNodeCheckboxClass" (click)="clickCheckBox($event)">
<span [class.ant-tree-checkbox-inner]="!nzSelectMode" [class.ant-select-tree-checkbox-inner]="nzSelectMode"></span>
</span>
</ng-container>
<span
[attr.title]="nzTreeNode.title"
[attr.draggable]="canDraggable"
[attr.aria-grabbed]="canDraggable"
[ngClass]="nzNodeContentClass"
[class.draggable]="canDraggable"
(dblclick)="dblClick($event)"
(click)="clickSelect($event)"
(contextmenu)="contextMenu($event)"
>
<ng-template [ngTemplateOutlet]="nzTreeTemplate" [ngTemplateOutletContext]="{ $implicit: nzTreeNode, origin: nzTreeNode.origin }">
</ng-template>
<ng-container *ngIf="!nzTreeTemplate">
<span
*ngIf="nzTreeNode.icon && nzShowIcon"
[class.ant-tree-icon__open]="isSwitcherOpen"
[class.ant-tree-icon__close]="isSwitcherClose"
[class.ant-tree-icon_loading]="nzTreeNode.isLoading"
[ngClass]="nzNodeContentLoadingClass"
>
<span [ngClass]="nzNodeContentIconClass">
<i nz-icon *ngIf="nzIcon" [nzType]="nzIcon"></i>
</span>
</span>
<span class="ant-tree-title" [innerHTML]="nzTreeNode.title | nzHighlight: matchedValue:'i':'font-highlight'"> </span>
</ng-container>
</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
animations: [treeCollapseMotion]
host: {
'[class]': 'nzNodeClass',
'[style]': 'displayStyle'
}
})
export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
@ViewChild('dragElement', { static: false }) dragElement: ElementRef;

/**
* for global property
*/
Expand Down Expand Up @@ -338,7 +335,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
clearDragClass(): void {
const dragClass = ['drag-over-gap-top', 'drag-over-gap-bottom', 'drag-over'];
dragClass.forEach(e => {
this.renderer.removeClass(this.dragElement.nativeElement, e);
this.renderer.removeClass(this.elRef.nativeElement, e);
});
}

Expand Down Expand Up @@ -373,7 +370,7 @@ export class NzTreeNodeComponent implements OnInit, OnChanges, OnDestroy {
this.dragPos = dropPosition;
// leaf node will pass
if (!(this.dragPos === 0 && this.nzTreeNode.isLeaf)) {
this.renderer.addClass(this.dragElement.nativeElement, this.dragPosClass[this.dragPos]);
this.renderer.addClass(this.elRef.nativeElement, this.dragPosClass[this.dragPos]);
}
}
const eventNext = this.nzTreeService.formatEvent('dragover', this.nzTreeNode, e);
Expand Down
86 changes: 46 additions & 40 deletions components/tree/nz-tree.component.ts
View file
Expand Up @@ -25,6 +25,7 @@ import {
TemplateRef
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { treeCollapseMotion } from 'ng-zorro-antd/core/animation';
import { NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
import {
Expand Down Expand Up @@ -53,46 +54,45 @@ const NZ_CONFIG_COMPONENT_NAME = 'tree';
@Component({
selector: 'nz-tree',
exportAs: 'nzTree',
animations: [treeCollapseMotion],
template: `
<div [ngClass]="classMap">
<div role="tree">
<input [ngStyle]="HIDDEN_STYLE" />
</div>
<div [ngClass]="classMapOfNodeList">
<div>
<div [ngClass]="classMapOfListContainer">
<ng-container *ngFor="let node of nzFlattenNodes">
<nz-tree-node
[nzTreeNode]="node.data"
[nzSelectMode]="nzSelectMode"
[nzShowLine]="nzShowLine"
[nzExpandedIcon]="nzExpandedIcon"
[nzDraggable]="nzDraggable"
[nzCheckable]="nzCheckable"
[nzShowExpand]="nzShowExpand"
[nzAsyncData]="nzAsyncData"
[nzSearchValue]="nzSearchValue"
[nzHideUnMatched]="nzHideUnMatched"
[nzBeforeDrop]="nzBeforeDrop"
[nzShowIcon]="nzShowIcon"
[nzTreeTemplate]="treeTemplate"
[@.disabled]="noAnimation?.nzNoAnimation"
[nzNoAnimation]="noAnimation?.nzNoAnimation"
(nzExpandChange)="eventTriggerChanged($event)"
(nzClick)="eventTriggerChanged($event)"
(nzDblClick)="eventTriggerChanged($event)"
(nzContextMenu)="eventTriggerChanged($event)"
(nzCheckBoxChange)="eventTriggerChanged($event)"
(nzOnDragStart)="eventTriggerChanged($event)"
(nzOnDragEnter)="eventTriggerChanged($event)"
(nzOnDragOver)="eventTriggerChanged($event)"
(nzOnDragLeave)="eventTriggerChanged($event)"
(nzOnDragEnd)="eventTriggerChanged($event)"
(nzOnDrop)="eventTriggerChanged($event)"
>
</nz-tree-node>
</ng-container>
</div>
<div role="tree">
<input [ngStyle]="HIDDEN_STYLE" />
</div>
<div [ngClass]="classMapOfNodeList">
<div>
<div [ngClass]="classMapOfListContainer" [@treeCollapseMotion]="nzFlattenNodes.length">
<ng-container *ngFor="let node of nzFlattenNodes; trackBy: trackByFlattenNode">
<nz-tree-node
[nzTreeNode]="node.data"
[nzSelectMode]="nzSelectMode"
[nzShowLine]="nzShowLine"
[nzExpandedIcon]="nzExpandedIcon"
[nzDraggable]="nzDraggable"
[nzCheckable]="nzCheckable"
[nzShowExpand]="nzShowExpand"
[nzAsyncData]="nzAsyncData"
[nzSearchValue]="nzSearchValue"
[nzHideUnMatched]="nzHideUnMatched"
[nzBeforeDrop]="nzBeforeDrop"
[nzShowIcon]="nzShowIcon"
[nzTreeTemplate]="treeTemplate"
[@.disabled]="noAnimation?.nzNoAnimation"
[nzNoAnimation]="noAnimation?.nzNoAnimation"
(nzExpandChange)="eventTriggerChanged($event)"
(nzClick)="eventTriggerChanged($event)"
(nzDblClick)="eventTriggerChanged($event)"
(nzContextMenu)="eventTriggerChanged($event)"
(nzCheckBoxChange)="eventTriggerChanged($event)"
(nzOnDragStart)="eventTriggerChanged($event)"
(nzOnDragEnter)="eventTriggerChanged($event)"
(nzOnDragOver)="eventTriggerChanged($event)"
(nzOnDragLeave)="eventTriggerChanged($event)"
(nzOnDragEnd)="eventTriggerChanged($event)"
(nzOnDrop)="eventTriggerChanged($event)"
>
</nz-tree-node>
</ng-container>
</div>
</div>
</div>
Expand All @@ -110,7 +110,10 @@ const NZ_CONFIG_COMPONENT_NAME = 'tree';
useExisting: forwardRef(() => NzTreeComponent),
multi: true
}
]
],
host: {
'[class]': 'classMap'
}
})
export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, ControlValueAccessor, OnChanges {
@Input() @InputBoolean() @WithConfig(NZ_CONFIG_COMPONENT_NAME, false) nzShowIcon: boolean;
Expand Down Expand Up @@ -282,6 +285,9 @@ export class NzTreeComponent extends NzTreeBase implements OnInit, OnDestroy, Co
this.handleFlattenNodes(this.nzNodes, newExpandedKeys);
}

trackByFlattenNode(_: number, node: FlattenNode): string {
return node.data.key;
}
// Deal with properties
/**
* nzData
Expand Down

0 comments on commit 70b2fc3

Please sign in to comment.