Skip to content

Commit

Permalink
feat(dialog): add result to MdDialogClose directive (#4332)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
nallwhy authored and tinayuangao committed May 22, 2017
1 parent d1b5e86 commit c45dee2
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 9 deletions.
8 changes: 7 additions & 1 deletion src/lib/dialog/dialog-content-directives.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
}
Expand All @@ -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>) { }
}

Expand Down
23 changes: 17 additions & 6 deletions src/lib/dialog/dialog.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
13 changes: 13 additions & 0 deletions src/lib/dialog/dialog.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
}));

});
});

Expand Down Expand Up @@ -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>
`
Expand Down
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit c45dee2

Please sign in to comment.