refactor(module: tree): refactor (#4869)

* feat(module: tree): refactor style and expand event

* fix(module: tree): refactor expand event

* fix(module: tree): refactor select event

* fix(module: tree): add dbl and contextmenu event

* fix(module: tree): remove nz-node useless initial codes

* fix(module: tree): support search value

* fix(module: tree): support check event

* fix(module: tree): add drag listener

* fix(module: tree): hotfix nzSearchValue initial changing

* fix(module: tree): add inner function to expand

* fix(module: tree): remove html file

* fix(module: tree): clear default node list while data changed

* fix(module: tree): deal with nzExpandAll

* fix(module: tree): add tests for testing event and Input

* fix(module: tree): add tests for testing dragging

* fix(module: tree): fix util and tree select tests

* fix(module: tree): fix dragover

* fix(module: tree): export origin to use in template

* fix(module: tree): fix loading for line tree

* fix(module: tree): support custom function to match nodes
close #4693 close #4528 close #4513 close #4449 close #3609 close #2503

components/core/tree/nz-tree-base-node.ts

@@ -10,6 +10,17 @@ import { warnDeprecation } from '../logger/logger';
 import { NzTreeNodeBaseComponent } from './nz-tree-base.definitions';
 import { NzTreeBaseService } from './nz-tree-base.service';
 
+export type NzTreeNodeKey = string | number;
+
+export interface FlattenNode {
+  parent: FlattenNode | null;
+  children: FlattenNode[];
+  pos: string;
+  data: NzTreeNode;
+  isStart: boolean[];
+  isEnd: boolean[];
+}
+
 export interface NzTreeNodeOptions {
   title: string;
   key: string;
@@ -55,10 +66,20 @@ export class NzTreeNode {
   service: NzTreeBaseService | null;
   component: NzTreeNodeBaseComponent;
 
+  /** New added in Tree for easy data access */
+  isStart?: boolean[];
+  isEnd?: boolean[];
+
   get treeService(): NzTreeBaseService | null {
     return this.service || (this.parentNode && this.parentNode.treeService);
   }
 
+  /**
+   * Init nzTreeNode
+   * @param option: user's input
+   * @param parent
+   * @param service: base nzTreeService
+   */
   constructor(option: NzTreeNodeOptions | NzTreeNode, parent: NzTreeNode | null = null, service: NzTreeBaseService | null = null) {
     if (option instanceof NzTreeNode) {
       return option;
@@ -209,6 +230,7 @@ export class NzTreeNode {
     this._isExpanded = value;
     this.origin.expanded = value;
     this.afterValueChange('isExpanded');
+    this.afterValueChange('reRender');
   }
 
   get isSelected(): boolean {
@@ -249,11 +271,13 @@ export class NzTreeNode {
   }
 
   /**
-   * @deprecated Maybe removed in next major version, use `isExpanded` instead.
+   * @not-deprecated Maybe removed in next major version, use `isExpanded` instead.
+   * We need it until tree refactoring is finished
    */
   public setExpanded(value: boolean): void {
-    warnDeprecation(`'setExpanded' is going to be removed in 9.0.0. Please use 'isExpanded' instead.`);
-    this.isExpanded = value;
+    this._isExpanded = value;
+    this.origin.expanded = value;
+    this.afterValueChange('isExpanded');
   }
 
   /**
@@ -308,13 +332,16 @@ export class NzTreeNode {
       // remove loading state
       this.isLoading = false;
     }
+    this.afterValueChange('addChildren');
+    this.afterValueChange('reRender');
   }
 
   public clearChildren(): void {
     // refresh checked state
     this.afterValueChange('clearChildren');
     this.children = [];
     this.origin.children = [];
+    this.afterValueChange('reRender');
   }
 
   public remove(): void {
@@ -323,6 +350,7 @@ export class NzTreeNode {
       parentNode.children = parentNode.getChildren().filter(v => v.key !== this.key);
       parentNode.origin.children = parentNode.origin.children!.filter(v => v.key !== this.key);
       this.afterValueChange('remove');
+      this.afterValueChange('reRender');
     }
   }
 
@@ -347,6 +375,12 @@ export class NzTreeNode {
         case 'remove':
           this.treeService.afterRemove([this]);
           break;
+        case 'reRender':
+          this.treeService.flattenTreeData(
+            this.treeService.rootNodes,
+            this.treeService.getExpandedNodeList().map(v => v.key)
+          );
+          break;
       }
     }
     this.update();

components/core/tree/nz-tree-base-util.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { NzTreeNode } from './nz-tree-base-node';
+import { FlattenNode, NzTreeNode, NzTreeNodeKey } from './nz-tree-base-node';
 
 export function isCheckDisabled(node: NzTreeNode): boolean {
   const { isDisabled, isDisableCheckbox } = node;
@@ -17,3 +17,57 @@ export function isCheckDisabled(node: NzTreeNode): boolean {
 export function isInArray(needle: any, haystack: any[]): boolean {
   return haystack.length > 0 && haystack.indexOf(needle) > -1;
 }
+
+export function getPosition(level: string | number, index: number): string {
+  return `${level}-${index}`;
+}
+
+export function getKey(key: NzTreeNodeKey, pos: string): NzTreeNodeKey {
+  if (key !== null && key !== undefined) {
+    return key;
+  }
+  return pos;
+}
+
+/**
+ * Flat nest tree data into flatten list. This is used for virtual list render.
+ * @param treeNodeList Origin data node list
+ * @param expandedKeys
+ * need expanded keys, provides `true` means all expanded (used in `rc-tree-select`).
+ */
+export function flattenTreeData(treeNodeList: NzTreeNode[] = [], expandedKeys: NzTreeNodeKey[] | true = []): FlattenNode[] {
+  const expandedKeySet = new Set(expandedKeys === true ? [] : expandedKeys);
+  const flattenList: FlattenNode[] = [];
+
+  function dig(list: NzTreeNode[], parent: FlattenNode | null = null): FlattenNode[] {
+    return list.map((treeNode, index) => {
+      const pos: string = getPosition(parent ? parent.pos : '0', index);
+      const mergedKey = getKey(treeNode.key, pos);
+      treeNode.isStart = [...(parent ? parent.isStart : []), index === 0];
+      treeNode.isEnd = [...(parent ? parent.isEnd : []), index === list.length - 1];
+      // Add FlattenDataNode into list
+      const flattenNode: FlattenNode = {
+        parent,
+        pos,
+        children: [],
+        data: treeNode,
+        isStart: [...(parent ? parent.isStart : []), index === 0],
+        isEnd: [...(parent ? parent.isEnd : []), index === list.length - 1]
+      };
+
+      flattenList.push(flattenNode);
+
+      // Loop treeNode children
+      if (expandedKeys === true || expandedKeySet.has(mergedKey) || treeNode.isExpanded) {
+        flattenNode.children = dig(treeNode.children || [], flattenNode);
+      } else {
+        flattenNode.children = [];
+      }
+
+      return flattenNode;
+    });
+  }
+
+  dig(treeNodeList);
+  return flattenList;
+}