fix(tree): fix tree lint error, and remove circular dependencies (#9877)

tinayuangao · tinayuangao · commit c7a010625280 · 2018-02-13T13:30:23.000-08:00
diff --git a/src/cdk/tree/nested-node.ts b/src/cdk/tree/nested-node.ts
@@ -15,26 +15,29 @@ import {
 } from '@angular/core';
 import {takeUntil} from 'rxjs/operators/takeUntil';
 
-import {CdkTree} from './tree';
+import {CdkTree, CdkTreeNode} from './tree';
 import {CdkTreeNodeOutlet} from './outlet';
-import {CdkTreeNode} from './node';
 
 /**
  * Nested node is a child of `<cdk-tree>`. It works with nested tree.
  * By using `cdk-nested-tree-node` component in tree node template, children of the parent node will
  * be added in the `cdkTreeNodeOutlet` in tree node template.
  * For example:
+ *   ```html
  *   <cdk-mested-tree-node>
  *     {{node.name}}
  *     <ng-template cdkTreeNodeOutlet></ng-template>
  *   </cdk-tree-node>
+ *   ```
  * The children of node will be automatically added to `cdkTreeNodeOutlet`, the result dom will be
  * like this:
+ *   ```html
  *   <cdk-nested-tree-node>
  *     {{node.name}}
-*      <cdk-nested-tree-node>{{child1.name}}</cdk-tree-node>
-*      <cdk-nested-tree-node>{{child2.name}}</cdk-tree-node>
+ *      <cdk-nested-tree-node>{{child1.name}}</cdk-tree-node>
+ *      <cdk-nested-tree-node>{{child2.name}}</cdk-tree-node>
  *   </cdk-tree-node>
+ *   ```
  */
 @Directive({
   selector: 'cdk-nested-tree-node',
diff --git a/src/cdk/tree/node.ts b/src/cdk/tree/node.ts
@@ -5,18 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {FocusableOption} from '@angular/cdk/a11y';
-import {
-  Directive,
-  ElementRef,
-  Input,
-  OnDestroy,
-  TemplateRef
-} from '@angular/core';
-import {takeUntil} from 'rxjs/operators/takeUntil';
-import {Subject} from 'rxjs/Subject';
-import {CdkTree} from './tree';
-import {getTreeControlFunctionsMissingError} from './tree-errors';
+
+import {Directive, TemplateRef} from '@angular/core';
 
 
 /** Context provided to the tree node component. */
@@ -58,79 +48,3 @@ export class CdkTreeNodeDef<T> {
   /** @docs-private */
   constructor(public template: TemplateRef<any>) {}
 }
-
-
-/**
- * Tree node for CdkTree. It contains the data in the tree node.
- */
-@Directive({
-  selector: 'cdk-tree-node',
-  exportAs: 'cdkTreeNode',
-  host: {
-    '[attr.aria-expanded]': 'isExpanded',
-    '[attr.aria-level]': 'level',
-    '[attr.role]': 'role',
-    'class': 'cdk-tree-node',
-  },
-})
-export class CdkTreeNode<T>  implements FocusableOption, OnDestroy {
-  /**
-   * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
-   * in `CdkTree` and set the data to it.
-   */
-  static mostRecentTreeNode: CdkTreeNode<any> | null = null;
-
-  /** Subject that emits when the component has been destroyed. */
-  protected _destroyed = new Subject<void>();
-
-  /** The tree node's data. */
-  get data(): T { return this._data; }
-  set data(value: T) {
-    this._data = value;
-    this._setRoleFromData();
-  }
-  protected _data: T;
-
-  get isExpanded(): boolean {
-    return this._tree.treeControl.isExpanded(this._data);
-  }
-
-  get level(): number {
-    return this._tree.treeControl.getLevel ? this._tree.treeControl.getLevel(this._data) : 0;
-  }
-
-  /**
-   * The role of the node should be 'group' if it's an internal node,
-   * and 'treeitem' if it's a leaf node.
-   */
-  @Input() role: 'treeitem' | 'group' = 'treeitem';
-
-  constructor(protected _elementRef: ElementRef,
-              protected _tree: CdkTree<T>) {
-    CdkTreeNode.mostRecentTreeNode = this;
-  }
-
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-  }
-
-  /** Focuses the menu item. Implements for FocusableOption. */
-  focus(): void {
-    this._elementRef.nativeElement.focus();
-  }
-
-  private _setRoleFromData(): void {
-    if (this._tree.treeControl.isExpandable) {
-      this.role = this._tree.treeControl.isExpandable(this._data) ? 'group' : 'treeitem';
-    } else {
-      if (!this._tree.treeControl.getChildren) {
-        throw getTreeControlFunctionsMissingError();
-      }
-      this._tree.treeControl.getChildren(this._data).pipe(takeUntil(this._destroyed))
-        .subscribe(children => {
-          this.role = children && children.length ? 'group' : 'treeitem';
-        });
-    }
-  }
-}
diff --git a/src/cdk/tree/padding.ts b/src/cdk/tree/padding.ts
@@ -11,8 +11,7 @@ import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {Directive, ElementRef, Input, OnDestroy, Optional, Renderer2} from '@angular/core';
 import {takeUntil} from 'rxjs/operators/takeUntil';
 import {Subject} from 'rxjs/Subject';
-import {CdkTreeNode} from './node';
-import {CdkTree} from './tree';
+import {CdkTree, CdkTreeNode} from './tree';
 
 /**
  * Indent for the children tree dataNodes.
diff --git a/src/cdk/tree/toggle.ts b/src/cdk/tree/toggle.ts
@@ -11,8 +11,7 @@ import {
   Directive,
   Input,
 } from '@angular/core';
-import {CdkTree} from './tree';
-import {CdkTreeNode} from './node';
+import {CdkTree, CdkTreeNode} from './tree';
 
 /**
  * Node toggle to expand/collapse the node.
diff --git a/src/cdk/tree/tree-module.ts b/src/cdk/tree/tree-module.ts
@@ -12,8 +12,8 @@ import {NgModule} from '@angular/core';
 import {CdkTreeNodeOutlet} from './outlet';
 import {CdkTreeNodePadding} from './padding';
 import {CdkTreeNodeToggle} from './toggle';
-import {CdkTree} from './tree';
-import {CdkTreeNodeDef, CdkTreeNode} from './node';
+import {CdkTree, CdkTreeNode} from './tree';
+import {CdkTreeNodeDef} from './node';
 import {CdkNestedTreeNode} from './nested-node';
 
 const EXPORTED_DECLARATIONS = [
diff --git a/src/cdk/tree/tree.ts b/src/cdk/tree/tree.ts
@@ -5,12 +5,15 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import {FocusableOption} from '@angular/cdk/a11y';
 import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChildren,
+  Directive,
+  ElementRef,
   Input,
   IterableDiffers,
   IterableDiffer,
@@ -26,15 +29,91 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {takeUntil} from 'rxjs/operators/takeUntil';
 import {Subject} from 'rxjs/Subject';
 import {Subscription} from 'rxjs/Subscription';
-import {CdkTreeNodeDef, CdkTreeNode, CdkTreeNodeOutletContext} from './node';
+import {CdkTreeNodeDef, CdkTreeNodeOutletContext} from './node';
 import {CdkTreeNodeOutlet} from './outlet';
 import {TreeControl} from './control/tree-control';
 import {
   getTreeControlMissingError,
   getTreeMissingMatchingNodeDefError,
-  getTreeMultipleDefaultNodeDefsError
+  getTreeMultipleDefaultNodeDefsError,
+  getTreeControlFunctionsMissingError
 } from './tree-errors';
 
+/**
+ * Tree node for CdkTree. It contains the data in the tree node.
+ */
+@Directive({
+  selector: 'cdk-tree-node',
+  exportAs: 'cdkTreeNode',
+  host: {
+    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.aria-level]': 'level',
+    '[attr.role]': 'role',
+    'class': 'cdk-tree-node',
+  },
+})
+export class CdkTreeNode<T>  implements FocusableOption, OnDestroy {
+  /**
+   * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
+   * in `CdkTree` and set the data to it.
+   */
+  static mostRecentTreeNode: CdkTreeNode<any> | null = null;
+
+  /** Subject that emits when the component has been destroyed. */
+  protected _destroyed = new Subject<void>();
+
+  /** The tree node's data. */
+  get data(): T { return this._data; }
+  set data(value: T) {
+    this._data = value;
+    this._setRoleFromData();
+  }
+  protected _data: T;
+
+  get isExpanded(): boolean {
+    return this._tree.treeControl.isExpanded(this._data);
+  }
+
+  get level(): number {
+    return this._tree.treeControl.getLevel ? this._tree.treeControl.getLevel(this._data) : 0;
+  }
+
+  /**
+   * The role of the node should be 'group' if it's an internal node,
+   * and 'treeitem' if it's a leaf node.
+   */
+  @Input() role: 'treeitem' | 'group' = 'treeitem';
+
+  constructor(protected _elementRef: ElementRef,
+              protected _tree: CdkTree<T>) {
+    CdkTreeNode.mostRecentTreeNode = this;
+  }
+
+  ngOnDestroy() {
+    this._destroyed.next();
+    this._destroyed.complete();
+  }
+
+  /** Focuses the menu item. Implements for FocusableOption. */
+  focus(): void {
+    this._elementRef.nativeElement.focus();
+  }
+
+  private _setRoleFromData(): void {
+    if (this._tree.treeControl.isExpandable) {
+      this.role = this._tree.treeControl.isExpandable(this._data) ? 'group' : 'treeitem';
+    } else {
+      if (!this._tree.treeControl.getChildren) {
+        throw getTreeControlFunctionsMissingError();
+      }
+      this._tree.treeControl.getChildren(this._data).pipe(takeUntil(this._destroyed))
+        .subscribe(children => {
+          this.role = children && children.length ? 'group' : 'treeitem';
+        });
+    }
+  }
+}
+
 
 /**
  * CDK tree component that connects with a data source to retrieve data of type `T` and renders
@@ -67,7 +146,7 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
   private _defaultNodeDef: CdkTreeNodeDef<T> | null;
 
   /** Data subscription */
-  private _dataSubscription : Subscription | null;
+  private _dataSubscription: Subscription | null;
 
   /**
    * Provides a stream containing the latest data array to render. Influenced by the tree's
@@ -91,9 +170,6 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
   /** The tree node template for the tree */
   @ContentChildren(CdkTreeNodeDef) _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
 
-  /** The tree node inside the tree */
-  @ContentChildren(CdkTreeNode, {descendants: true}) items: QueryList<CdkTreeNode<T>>;
-
   // TODO(tinayuangao): Setup a listener for scrolling, emit the calculated view to viewChange.
   //     Remove the MAX_VALUE in viewChange
   /**
diff --git a/src/demo-app/tree/tree-demo.ts b/src/demo-app/tree/tree-demo.ts
@@ -8,7 +8,11 @@
 
 import {Component} from '@angular/core';
 import {FlatTreeControl, NestedTreeControl} from '@angular/cdk/tree';
-import {MatTreeFlattener, MatTreeFlatDataSource, MatTreeNestedDataSource} from '@angular/material/tree';
+import {
+  MatTreeFlattener,
+  MatTreeFlatDataSource,
+  MatTreeNestedDataSource
+} from '@angular/material/tree';
 import {of as ofObservable} from 'rxjs/observable/of';
 
 import {JsonNode, JsonDatabase} from './json-database';
@@ -48,10 +52,9 @@ export class TreeDemo {
     this.nestedDataSource = new MatTreeNestedDataSource();
 
     database.dataChange.subscribe(data => {
-      console.log(`datachanges in demo`)
       this.dataSource.data = data;
       this.nestedDataSource.data = data;
-    })
+    });
   }
 
   transformer = (node: JsonNode, level: number) => {
@@ -61,7 +64,7 @@ export class TreeDemo {
     flatNode.level = level;
     flatNode.expandable = !!node.children;
     return flatNode;
-  };
+  }
 
   getLevel = (node: JsonFlatNode) => { return node.level; };
 
diff --git a/src/lib/tree/data-source/flat-data-source.ts b/src/lib/tree/data-source/flat-data-source.ts
@@ -42,10 +42,10 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
  *    level: 2
  *  },
  *  NodeTwo: {
-  *   key: 'Pear',
-  *   expandable: false,
-  *   level: 2
-  * }
+ *   key: 'Pear',
+ *   expandable: false,
+ *   level: 2
+ * }
  * and the output flattened type is `F` with additional information.
  */
 export class MatTreeFlattener<T, F> {
diff --git a/src/lib/tree/tree.spec.ts b/src/lib/tree/tree.spec.ts
