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

Adds the ability to pass in an object literal, that matches the signature of `MdDialogConfig`, when opening a dialog.

Author: crisbeto

src/lib/dialog/dialog-config.ts

@@ -15,7 +15,7 @@ export class MdDialogConfig {
   role?: DialogRole = 'dialog';
 
   /** Whether the user can use escape or clicking outside to close a modal. */
-  disableClose = false;
+  disableClose?: boolean = false;
 
   // TODO(jelbourn): add configuration for size, lifecycle hooks, ARIA labelling.
 }

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();
 
@@ -79,11 +77,7 @@ 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, { role: 'alertdialog' });
 
     viewContainerFixture.detectChanges();
 
@@ -92,10 +86,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();
 
@@ -112,10 +105,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();
 
@@ -129,10 +121,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();
 
@@ -144,11 +135,10 @@ describe('MdDialog', () => {
 
   describe('disableClose option', () => {
     it('should prevent closing via clicks on the backdrop', () => {
-      let config = new MdDialogConfig();
-      config.viewContainerRef = testViewContainerRef;
-      config.disableClose = true;
-
-      dialog.open(PizzaMsg, config);
+      dialog.open(PizzaMsg, {
+        disableClose: true,
+        viewContainerRef: testViewContainerRef
+      });
 
       viewContainerFixture.detectChanges();
 
@@ -159,11 +149,10 @@ describe('MdDialog', () => {
     });
 
     it('should prevent closing via the escape key', () => {
-      let config = new MdDialogConfig();
-      config.viewContainerRef = testViewContainerRef;
-      config.disableClose = true;
-
-      dialog.open(PizzaMsg, config);
+      dialog.open(PizzaMsg, {
+        disableClose: true,
+        viewContainerRef: testViewContainerRef
+      });
 
       viewContainerFixture.detectChanges();
 
@@ -189,10 +178,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();
 
@@ -207,10 +196,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();
 

src/lib/dialog/dialog.ts

@@ -40,7 +40,9 @@ export class MdDialog {
    * @param component Type of the component to load into the load.
    * @param config
    */
-  open<T>(component: ComponentType<T>, config = new MdDialogConfig()): MdDialogRef<T> {
+  open<T>(component: ComponentType<T>, config?: MdDialogConfig): MdDialogRef<T> {
+    config = this._applyConfigDefaults(config);
+
     let overlayRef = this._createOverlay(config);
     let dialogContainer = this._attachDialogContainer(overlayRef, config);
 
@@ -125,6 +127,15 @@ export class MdDialog {
 
     return state;
   }
+
+  /**
+   * Applies default options to the dialog config.
+   * @param dialogConfig Config to be modified.
+   * @returns The new configuration object.
+   */
+  private _applyConfigDefaults(dialogConfig: MdDialogConfig): MdDialogConfig {
+    return Object.assign(new MdDialogConfig(), dialogConfig);
+  }
 }