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);
 }

src/lib/core/typography/_all-typography.scss

@@ -26,6 +26,7 @@
 @import '../../tabs/tabs-theme';
 @import '../../toolbar/toolbar-theme';
 @import '../../tooltip/tooltip-theme';
+@import '../../tree/tree-theme';
 @import '../../snack-bar/snack-bar-theme';
 @import '../option/option-theme';
 @import '../option/optgroup-theme';
@@ -66,6 +67,7 @@
   @include mat-tabs-typography($config);
   @include mat-toolbar-typography($config);
   @include mat-tooltip-typography($config);
+  @include mat-tree-typography($config);
   @include mat-list-typography($config);
   @include mat-option-typography($config);
   @include mat-optgroup-typography($config);

src/lib/public-api.ts

@@ -39,3 +39,4 @@ export * from '@angular/material/table';
 export * from '@angular/material/tabs';
 export * from '@angular/material/toolbar';
 export * from '@angular/material/tooltip';
+export * from '@angular/material/tree';

src/lib/tree/_tree-theme.scss

@@ -0,0 +1,27 @@
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+@mixin mat-tree-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-tree {
+    background: mat-color($background, 'card');
+  }
+
+  .mat-tree-node {
+    color: mat-color($foreground, text);
+  }
+}
+
+@mixin mat-tree-typography($config) {
+  .mat-tree {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-tree-node {
+    font-weight: mat-font-weight($config, body-1);
+    font-size: mat-font-size($config, body-1);
+  }
+}

src/lib/tree/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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
+ */
+
+export * from './public-api';

src/lib/tree/node.ts

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 {
+  ContentChildren,
+  Directive,
+  Input,
+  QueryList
+} from '@angular/core';
+import {
+  CdkNestedTreeNode,
+  CdkTreeNodeDef,
+  CdkTreeNode,
+} from '@angular/cdk/tree';
+import {MatTreeNodeOutlet} from './outlet';
+
+/**
+ * Wrapper for the CdkTree node with Material design styles.
+ */
+// TODO(tinayuangao): use mixinTabIndex
+@Directive({
+  selector: 'mat-tree-node',
+  exportAs: 'matTreeNode',
+  host: {
+    '[attr.role]': 'role',
+    'class': 'mat-tree-node',
+    'tabindex': '0',
+  },
+  providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
+})
+export class MatTreeNode<T> extends CdkTreeNode<T> {
+  @Input() role: 'treeitem' | 'group' = 'treeitem';
+}
+
+/**
+ * Wrapper for the CdkTree node definition with Material design styles.
+ */
+@Directive({
+  selector: '[matTreeNodeDef]',
+  inputs: [
+    'when: matTreeNodeDefWhen'
+  ],
+  providers: [{provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef}]
+})
+export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
+  @Input('matTreeNode') data: T;
+}
+
+/**
+ * Wrapper for the CdkTree nested node with Material design styles.
+ */
+@Directive({
+  selector: 'mat-nested-tree-node',
+  exportAs: 'matNestedTreeNode',
+  host: {
+    '[attr.role]': 'role',
+    'class': 'mat-nested-tree-node',
+  },
+  providers: [
+    {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
+    {provide: CdkTreeNode, useExisting: MatNestedTreeNode}
+  ]
+})
+export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> {
+  @Input('matNestedTreeNode') node: T;
+
+  @ContentChildren(MatTreeNodeOutlet) nodeOutlet: QueryList<MatTreeNodeOutlet>;
+}

src/lib/tree/outlet.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * 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 {CdkTreeNodeOutlet} from '@angular/cdk/tree';
+import {
+  Directive,
+  ViewContainerRef,
+} from '@angular/core';
+
+/**
+ * Outlet for nested CdkNode. Put `[matTreeNodeOutlet]` on a tag to place children dataNodes
+ * inside the outlet.
+ */
+@Directive({
+  selector: '[matTreeNodeOutlet]'
+})
+export class MatTreeNodeOutlet implements CdkTreeNodeOutlet {
+  constructor(public viewContainer: ViewContainerRef) {}
+}