feat(tree): Add mat tree (#8458)

Author: tinayuangao

src/cdk/tree/control/flat-tree-control.spec.ts

@@ -39,7 +39,7 @@ describe('CdkFlatTreeControl', () => {
       expect(treeControl.expansionModel.selected.length)
           .toBe(2, 'Expect two dataNodes in expansionModel');
 
-      treeControl.collapse(seconNode);
+      treeControl.collapse(secondNode);
 
       expect(treeControl.isExpanded(secondNode))
           .toBeFalsy('Expect second node to be collapsed');

src/cdk/tree/control/nested-tree-control.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 import {Observable} from 'rxjs/Observable';
-import {first} from 'rxjs/operators';
+import {take} from 'rxjs/operators/take';
 import {BaseTreeControl} from './base-tree-control';
 
 /** Nested tree control. Able to expand/collapse a subtree recursively for NestedNode type. */
@@ -40,7 +40,7 @@ export class NestedTreeControl<T> extends BaseTreeControl<T> {
   /** A helper function to get descendants recursively. */
   protected _getDescendants(descendants: T[], dataNode: T): void {
     descendants.push(dataNode);
-    first.call(this.getChildren(dataNode)).subscribe(children => {
+    this.getChildren(dataNode).pipe(take(1)).subscribe(children => {
       if (children && children.length > 0) {
         children.forEach((child: T) => this._getDescendants(descendants, child));
       }

src/cdk/tree/nested-node.ts

@@ -13,7 +13,7 @@ import {
   OnDestroy,
   QueryList,
 } from '@angular/core';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {CdkTree} from './tree';
 import {CdkTreeNodeOutlet} from './outlet';
 import {CdkTreeNode} from './node';
@@ -58,14 +58,14 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
   }
 
   ngAfterContentInit() {
-    takeUntil.call(this._tree.treeControl.getChildren(this.data), this._destroyed)
+    this._tree.treeControl.getChildren(this.data).pipe(takeUntil(this._destroyed))
       .subscribe(result => {
         // In case when nodeOutlet is not in the DOM when children changes, save it in the node
         // and add to nodeOutlet when it's available.
         this._children = result as T[];
         this._addChildrenNodes();
       });
-    takeUntil.call(this.nodeOutlet.changes, this._destroyed)
+    this.nodeOutlet.changes.pipe(takeUntil(this._destroyed))
       .subscribe((_) => this._addChildrenNodes());
   }
 

src/cdk/tree/node.ts

@@ -13,7 +13,7 @@ import {
   OnDestroy,
   TemplateRef
 } from '@angular/core';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {Subject} from 'rxjs/Subject';
 import {CdkTree} from './tree';
 import {getTreeControlFunctionsMissingError} from './tree-errors';
@@ -69,15 +69,14 @@ export class CdkTreeNodeDef<T> {
   host: {
     '[attr.role]': 'role',
     'class': 'cdk-tree-node',
-    'tabindex': '0',
   },
 })
 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>;
+  static mostRecentTreeNode: CdkTreeNode<any> | null = null;
 
   /** Subject that emits when the component has been destroyed. */
   protected _destroyed = new Subject<void>();
@@ -118,7 +117,7 @@ export class CdkTreeNode<T>  implements FocusableOption, OnDestroy {
       if (!this._tree.treeControl.getChildren) {
         throw getTreeControlFunctionsMissingError();
       }
-      takeUntil.call(this._tree.treeControl.getChildren(this._data), this._destroyed)
+      this._tree.treeControl.getChildren(this._data).pipe(takeUntil(this._destroyed))
         .subscribe(children => {
           this.role = children ? 'group' : 'treeitem';
         });

src/cdk/tree/padding.ts

@@ -9,7 +9,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {coerceNumberProperty} from '@angular/cdk/coercion';
 import {Directive, ElementRef, Input, OnDestroy, Optional, Renderer2} from '@angular/core';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {Subject} from 'rxjs/Subject';
 import {CdkTreeNode} from './node';
 import {CdkTree} from './tree';
@@ -49,7 +49,7 @@ export class CdkTreeNodePadding<T> implements OnDestroy {
               @Optional() private _dir: Directionality) {
     this._setPadding();
     if (this._dir) {
-      takeUntil.call(this._dir.change, this._destroyed).subscribe(() => this._setPadding());
+      this._dir.change.pipe(takeUntil(this._destroyed)).subscribe(() => this._setPadding());
     }
   }
 

src/cdk/tree/tree.spec.ts

@@ -5,7 +5,7 @@ import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {Observable} from 'rxjs/Observable';
 import {combineLatest} from 'rxjs/observable/combineLatest';
-import {map} from 'rxjs/operators';
+import {map} from 'rxjs/operators/map';
 
 import {TreeControl} from './control/tree-control';
 import {FlatTreeControl} from './control/flat-tree-control';
@@ -54,7 +54,7 @@ describe('CdkTree', () => {
     it('with rendered dataNodes', () => {
       const nodes = getNodes(treeElement);
 
-      expect(nodes).not.toBe(undefined);
+      expect(nodes).toBeDefined('Expect nodes to be defined');
       expect(nodes[0].classList).toContain('customNodeClass');
     });
 

src/cdk/tree/tree.ts

@@ -23,7 +23,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil} from 'rxjs/operators/takeUntil';
 import {Subject} from 'rxjs/Subject';
 import {CdkTreeNodeDef, CdkTreeNode, CdkTreeNodeOutletContext} from './node';
 import {CdkTreeNodeOutlet} from './outlet';
@@ -155,7 +155,7 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
 
   /** Set up a subscription for the data provided by the data source. */
   private _observeRenderChanges() {
-    takeUntil.call(this.dataSource.connect(this), this._destroyed)
+    this.dataSource.connect(this).pipe(takeUntil(this._destroyed))
       .subscribe(data => {
         this._data = data;
         this._renderNodeChanges(data);
@@ -191,7 +191,7 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
     if (this._nodeDefs.length == 1) { return this._nodeDefs.first; }
 
     const nodeDef =
-      this._nodeDefs.find(def => def.when && def.when(data, i)) || this._defaultNodeDef;
+      this._nodeDefs.find(def => def.when && def.when(i, data)) || this._defaultNodeDef;
     if (!nodeDef) { throw getTreeMissingMatchingNodeDefError(); }
 
     return nodeDef;
@@ -214,7 +214,9 @@ export class CdkTree<T> implements CollectionViewer, OnInit, OnDestroy {
     // Set the data to just created `CdkTreeNode`.
     // The `CdkTreeNode` created from `createEmbeddedView` will be saved in static variable
     //     `mostRecentTreeNode`. We get it from static variable and pass the node data to it.
-    CdkTreeNode.mostRecentTreeNode.data = nodeData;
+    if (CdkTreeNode.mostRecentTreeNode) {
+      CdkTreeNode.mostRecentTreeNode.data = nodeData;
+    }
 
     this._changeDetectorRef.detectChanges();
   }

src/demo-app/demo-material-module.ts

@@ -38,6 +38,7 @@ import {
   MatTabsModule,
   MatToolbarModule,
   MatTooltipModule,
+  MatTreeModule,
   MatStepperModule,
 } from '@angular/material';
 import {MatNativeDateModule, MatRippleModule} from '@angular/material';
@@ -49,6 +50,7 @@ import {PlatformModule} from '@angular/cdk/platform';
 import {ObserversModule} from '@angular/cdk/observers';
 import {PortalModule} from '@angular/cdk/portal';
 import {CdkTableModule} from '@angular/cdk/table';
+import {CdkTreeModule} from '@angular/cdk/tree';
 
 /**
  * NgModule that includes all Material modules that are required to serve the demo-app.
@@ -87,8 +89,10 @@ import {CdkTableModule} from '@angular/cdk/table';
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
+    MatTreeModule,
     MatNativeDateModule,
     CdkTableModule,
+    CdkTreeModule,
     A11yModule,
     BidiModule,
     CdkAccordionModule,

src/demo-app/system-config.ts

@@ -57,6 +57,7 @@ System.config({
     '@angular/cdk/scrolling': 'dist/packages/cdk/scrolling/index.js',
     '@angular/cdk/stepper': 'dist/packages/cdk/stepper/index.js',
     '@angular/cdk/table': 'dist/packages/cdk/table/index.js',
+    '@angular/cdk/tree': 'dist/packages/cdk/tree/index.js',
 
     '@angular/material/autocomplete': 'dist/packages/material/autocomplete/index.js',
     '@angular/material/button': 'dist/packages/material/button/index.js',
@@ -90,6 +91,7 @@ System.config({
     '@angular/material/tabs': 'dist/packages/material/tabs/index.js',
     '@angular/material/toolbar': 'dist/packages/material/toolbar/index.js',
     '@angular/material/tooltip': 'dist/packages/material/tooltip/index.js',
+    '@angular/material/tree': 'dist/packages/material/tree/index.js',
   },
   packages: {
     // Thirdparty barrels.

src/lib/core/theming/_all-theme.scss

@@ -28,6 +28,7 @@
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../tree/tree-theme';
 @import '../../snack-bar/snack-bar-theme';
 @import '../../form-field/form-field-theme';
 
@@ -64,5 +65,6 @@
   @include mat-tabs-theme($theme);
   @include mat-toolbar-theme($theme);
   @include mat-tooltip-theme($theme);
+  @include mat-tree-theme($theme);
   @include mat-snack-bar-theme($theme);
 }