From e1de05583f771cc601ae0007549c97e40bc872c2 Mon Sep 17 00:00:00 2001
From: mayTree <nallwhy@gmail.com>
Date: Sun, 30 Apr 2017 14:49:04 +0900
Subject: [PATCH] feat(dialog): add `result` to MdDialogClose directive

MdDialog has MdDialogClose to make it easier to structure a dialog.
But as MdDialogClose doesn't return any value, it's imposibble to use MdDialogClose if you want to get any return value when MdDialog is close.
So `@Input('md-dialog-close')result` is added to MdDialogClose to solve it.

no breaking changes
---
 src/lib/dialog/dialog-content-directives.ts   |  8 ++++++-
 src/lib/dialog/dialog.md                      | 23 ++++++++++++++-----
 src/lib/dialog/dialog.spec.ts                 | 13 +++++++++++
 .../dialog-result-example-dialog.html         |  4 ++--
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/src/lib/dialog/dialog-content-directives.ts b/src/lib/dialog/dialog-content-directives.ts
index aa3575197f0e..bfeaf596f6f7 100644
--- a/src/lib/dialog/dialog-content-directives.ts
+++ b/src/lib/dialog/dialog-content-directives.ts
@@ -8,7 +8,7 @@ import {MdDialogRef} from './dialog-ref';
 @Directive({
   selector: 'button[md-dialog-close], button[mat-dialog-close]',
   host: {
-    '(click)': 'dialogRef.close()',
+    '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
     'type': 'button', // Prevents accidental form submits.
   }
@@ -17,6 +17,12 @@ export class MdDialogClose {
   /** Screenreader label for the button. */
   @Input('aria-label') ariaLabel: string = 'Close dialog';
 
+  /** Dialog close input. */
+  @Input('md-dialog-close') dialogResult: any;
+
+  /** Dialog close input for compatibility mode. */
+  @Input('mat-dialog-close') set _matDialogClose(value: any) { this.dialogResult = value; }
+
   constructor(public dialogRef: MdDialogRef<any>) { }
 }
 
diff --git a/src/lib/dialog/dialog.md b/src/lib/dialog/dialog.md
index 70272dd6aae0..288f6d00a2b2 100644
--- a/src/lib/dialog/dialog.md
+++ b/src/lib/dialog/dialog.md
@@ -56,12 +56,23 @@ export class YourDialog {
 ### Dialog content
 Several directives are available to make it easier to structure your dialog content:
 
-| Name                  | Description                                                              |
-|-----------------------|--------------------------------------------------------------------------|
-| `md-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)|
-| `<md-dialog-content>` | Primary scrollable content of the dialog                                 |
-| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog                 |
-| `md-dialog-close`     | \[Attr] Added to a `<button>`, makes the button close the dialog on click|
+| Name                  | Description                                                                                                   |
+|-----------------------|---------------------------------------------------------------------------------------------------------------|
+| `md-dialog-title`     | \[Attr] Dialog title, applied to a heading element (e.g., `<h1>`, `<h2>`)                                     |
+| `<md-dialog-content>` | Primary scrollable content of the dialog                                                                      |
+| `<md-dialog-actions>` | Container for action buttons at the bottom of the dialog                                                      |
+| `md-dialog-close`     | \[Attr] Added to a `<button>`, makes the button close the dialog with an optional result from the bound value.|
+
+For example:
+```html
+<h2 md-dialog-title>Delete all</h2>
+<md-dialog-content>Are you sure?</md-dialog-content>
+<md-dialog-actions>
+  <button md-button md-dialog-close>No</button>
+  <!-- Can optionally provide a result for the closing dialog. -->
+  <button md-button [md-dialog-close]="true">Yes</button>
+</md-dialog-actions>
+```
 
 Once a dialog opens, the dialog will automatically focus the first tabbable element.
 
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index a880bcb1344b..d4bbc64cf0a0 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/src/lib/dialog/dialog.spec.ts
@@ -600,6 +600,18 @@ describe('MdDialog', () => {
       expect(button.getAttribute('type')).toBe('button');
     });
 
+    it('should return the [md-dialog-close] result when clicking on the close button', async(() => {
+      let afterCloseCallback = jasmine.createSpy('afterClose callback');
+      dialogRef.afterClosed().subscribe(afterCloseCallback);
+
+      (overlayContainerElement.querySelector('button.close-with-true') as HTMLElement).click();
+      viewContainerFixture.detectChanges();
+
+      viewContainerFixture.whenStable().then(() => {
+        expect(afterCloseCallback).toHaveBeenCalledWith(true);
+      });
+    }));
+
   });
 });
 
@@ -714,6 +726,7 @@ class PizzaMsg {
     <md-dialog-content>Lorem ipsum dolor sit amet.</md-dialog-content>
     <md-dialog-actions>
       <button md-dialog-close [aria-label]="closeButtonAriaLabel">Close</button>
+      <button class="close-with-true" [md-dialog-close]="true">Close and return true</button>
       <div md-dialog-close>Should not close</div>
     </md-dialog-actions>
   `
diff --git a/src/material-examples/dialog-result/dialog-result-example-dialog.html b/src/material-examples/dialog-result/dialog-result-example-dialog.html
index 0e4dd6339a94..50d5982b8398 100644
--- a/src/material-examples/dialog-result/dialog-result-example-dialog.html
+++ b/src/material-examples/dialog-result/dialog-result-example-dialog.html
@@ -1,6 +1,6 @@
 <h1 md-dialog-title>Dialog</h1>
 <div md-dialog-content>What would you like to do?</div>
 <div md-dialog-actions>
-  <button md-button (click)="dialogRef.close('Option 1')">Option 1</button>
-  <button md-button (click)="dialogRef.close('Option 2')">Option 2</button>
+  <button md-button md-dialog-close="Option 1">Option 1</button>
+  <button md-button md-dialog-close="Option 2">Option 2</button>
 </div>