Merge pull request #237 from Permagate/feature/update_dialog_20160225

fix dialog cancel handler, update tests, and update documentation

docs/pages/dialogs.md

@@ -92,6 +92,51 @@ class Demo extends React.Component {
 }
 ```
 
+### Dialog with Cancel Event Handler
+
+```jsx_demo_class
+{/* Cancel event is emitted when the user clicks "Escape" key while the modal is open.
+    It doesn't do anything by default.*/}
+class Demo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+    this.handleOpenDialog = this.handleOpenDialog.bind(this);
+    this.handleCloseDialog = this.handleCloseDialog.bind(this);
+  }
+
+  handleOpenDialog() {
+    this.setState({
+      openDialog: true
+    });
+  }
+
+  handleCloseDialog() {
+    this.setState({
+      openDialog: false
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <Button colored onClick={this.handleOpenDialog} onCancel={this.handleCloseDialog} raised ripple>Show Dialog</Button>
+        <Dialog open={this.state.openDialog} onCancel={this.handleCloseDialog}>
+          <DialogTitle>Allow data collection?</DialogTitle>
+          <DialogContent>
+            <p>Allowing us to collect data will let us get you the information you want faster.</p>
+          </DialogContent>
+          <DialogActions>
+            <Button type='button'>Agree</Button>
+            <Button type='button' onClick={this.handleCloseDialog}>Disagree</Button>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+```
+
 ## Configuration
 
 | Element   | Prop         | Type      | Effect       | Remarks      |

src/Dialog/Dialog.js

@@ -16,7 +16,7 @@ class Dialog extends React.Component {
     };
 
     componentDidMount() {
-        this.refs.dialog.addEventListener('cancel', prevent);
+        this.refs.dialog.addEventListener('cancel', this.props.onCancel);
         if(this.props.open) {
             findDOMNode(this).showModal();
         }
@@ -41,11 +41,11 @@ class Dialog extends React.Component {
     }
 
     componentWillUnmount() {
-        this.refs.dialog.removeEventListener('cancel', prevent);
+        this.refs.dialog.removeEventListener('cancel', this.props.onCancel);
     }
 
     render() {
-        const { className, children, open, ...otherProps } = this.props;
+        const { className, children, open, onCancel, ...otherProps } = this.props;
 
         const classes = classNames('mdl-dialog', className);
 

src/Dialog/__tests__/Dialog-test.js

@@ -81,6 +81,34 @@ describe('Dialog', () => {
         expect.restoreSpies();
     });
 
+    it('should prevent default cancel handler', () => {
+        const spy = expect.spyOn(Event.prototype, 'preventDefault').andCallThrough();
+        const el = renderDOM(<Dialog />);
+
+        el.dispatchEvent(new Event('cancel'));
+        expect(spy).toHaveBeenCalled();
+        expect.restoreSpies();
+    });
+
+    it('should call provided cancel handler when specified on initial render', () => {
+        const spy = expect.createSpy();
+        const el = renderDOM(<Dialog onCancel={spy}/>);
+
+        el.dispatchEvent(new Event('cancel'));
+        expect(spy).toHaveBeenCalled();
+        expect.restoreSpies();
+    });
+
+    it('should remove any cancel handler when unmounted', () => {
+        const cancelHandler = expect.createSpy();
+        const el = renderDOM(<Dialog onCancel={cancelHandler} />);
+        const spy = expect.spyOn(el, 'removeEventListener');
+        ReactDOM.unmountComponentAtNode(el.parentNode);
+
+        expect(spy).toHaveBeenCalledWith('cancel', cancelHandler);
+        expect.restoreSpies();
+    });
+
     it('should render with the children', () => {
         const element = (
             <Dialog>