feat(dialog): allow for an object literal to be passed on init

Adds the ability to pass in an object literal, that matches the signature of `MdDialogConfig`, when opening a dialog.
angular · Nov 3, 2016 · e6fe109 · e6fe109
1 parent 1e86066
commit e6fe109
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 34 deletions.
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
@@ -1,5 +1,5 @@
 import {Component, ViewContainerRef} from '@angular/core';
-import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material';
+import {MdDialog, MdDialogRef} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -16,10 +16,9 @@ export class DialogDemo {
       public viewContainerRef: ViewContainerRef) { }
 
   open() {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = this.viewContainerRef;
-
-    this.dialogRef = this.dialog.open(JazzDialog, config);
+    this.dialogRef = this.dialog.open(JazzDialog, {
+      viewContainerRef: this.viewContainerRef
+    });
 
     this.dialogRef.afterClosed().subscribe(result => {
       this.lastCloseResult = result;

diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
@@ -12,7 +12,7 @@ export class MdDialogConfig {
   viewContainerRef: ViewContainerRef;
 
   /** The ARIA role of the dialog element. */
-  role: DialogRole = 'dialog';
+  role?: DialogRole;
 
   // TODO(jelbourn): add configuration for size, clickOutsideToClose, lifecycle hooks,
   // ARIA labelling.

diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
@@ -10,7 +10,6 @@ import {By} from '@angular/platform-browser';
 import {NgModule, Component, Directive, ViewChild, ViewContainerRef} from '@angular/core';
 import {MdDialog, MdDialogModule} from './dialog';
 import {OverlayContainer} from '../core';
-import {MdDialogConfig} from './dialog-config';
 import {MdDialogRef} from './dialog-ref';
 import {MdDialogContainer} from './dialog-container';
 
@@ -48,10 +47,9 @@ describe('MdDialog', () => {
   });
 
   it('should open a dialog with a component', () => {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = testViewContainerRef;
-
-    let dialogRef = dialog.open(PizzaMsg, config);
+    let dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
 
     viewContainerFixture.detectChanges();
 
@@ -65,11 +63,10 @@ describe('MdDialog', () => {
   });
 
   it('should apply the configured role to the dialog element', () => {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = testViewContainerRef;
-    config.role = 'alertdialog';
-
-    dialog.open(PizzaMsg, config);
+    dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef,
+      role: 'alertdialog'
+    });
 
     viewContainerFixture.detectChanges();
 
@@ -78,10 +75,9 @@ describe('MdDialog', () => {
   });
 
   it('should close a dialog and get back a result', () => {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = testViewContainerRef;
-
-    let dialogRef = dialog.open(PizzaMsg, config);
+    let dialogRef = dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
 
     viewContainerFixture.detectChanges();
 
@@ -98,10 +94,9 @@ describe('MdDialog', () => {
 
 
   it('should close a dialog via the escape key', () => {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = testViewContainerRef;
-
-    dialog.open(PizzaMsg, config);
+    dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
 
     viewContainerFixture.detectChanges();
 
@@ -115,10 +110,9 @@ describe('MdDialog', () => {
   });
 
   it('should close when clicking on the overlay backdrop', () => {
-    let config = new MdDialogConfig();
-    config.viewContainerRef = testViewContainerRef;
-
-    dialog.open(PizzaMsg, config);
+    dialog.open(PizzaMsg, {
+      viewContainerRef: testViewContainerRef
+    });
 
     viewContainerFixture.detectChanges();
 
@@ -140,10 +134,10 @@ describe('MdDialog', () => {
     });
 
     it('should focus the first tabbable element of the dialog on open', fakeAsync(() => {
-      let config = new MdDialogConfig();
-      config.viewContainerRef = testViewContainerRef;
+      dialog.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef
+      });
 
-      dialog.open(PizzaMsg, config);
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 
@@ -158,10 +152,10 @@ describe('MdDialog', () => {
       document.body.appendChild(button);
       button.focus();
 
-      let config = new MdDialogConfig();
-      config.viewContainerRef = testViewContainerRef;
+      let dialogRef = dialog.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef
+      });
 
-      let dialogRef = dialog.open(PizzaMsg, config);
       viewContainerFixture.detectChanges();
       flushMicrotasks();
 

diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
@@ -41,6 +41,8 @@ export class MdDialog {
    * @param config
    */
   open<T>(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T> {
+    config = this._applyConfigDefaults(config);
+
     let overlayRef = this._createOverlay(config);
     let dialogContainer = this._attachDialogContainer(overlayRef, config);
 
@@ -122,6 +124,20 @@ export class MdDialog {
 
     return state;
   }
+
+  /**
+   * Applies default options to the dialog config.
+   * @param {MdDialogConfig} config Config to be modified.
+   * @returns The new configuration object.
+   */
+  private _applyConfigDefaults(config: MdDialogConfig): MdDialogConfig {
+    let defaults: MdDialogConfig = {
+      role: 'dialog',
+      viewContainerRef: null
+    };
+
+    return Object.assign(defaults, config);
+  }
 }