import React from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames';

const propTypes = {
    className: PropTypes.string,
    onCancel: PropTypes.func,
    open: PropTypes.bool
};

const defaultProps = {
    onCancel: e => e.preventDefault()
};

class Dialog extends React.Component {
    componentDidMount() {
        this.dialogRef.addEventListener('cancel', this.props.onCancel);
        if (this.props.open) {
            findDOMNode(this).showModal();
        }
    }

    componentDidUpdate(prevProps) {
        if (this.props.open !== prevProps.open) {
            if (this.props.open) {
                findDOMNode(this).showModal();

                // display the dialog at the right location
                // needed for the polyfill, otherwise it's not at the right position
                const windowHeight = window.innerHeight;
                if (this.dialogRef) {
                    const dialogHeight = this.dialogRef.clientHeight;
                    this.dialogRef.style.position = 'fixed';
                    this.dialogRef.style.top = `${(windowHeight - dialogHeight) / 2}px`;
                }
            } else {
                findDOMNode(this).close();
            }
        }
    }

    componentWillUnmount() {
        this.dialogRef.removeEventListener('cancel', this.props.onCancel);
    }

    render() {
        // We cannot set the `open` prop on the Dialog if we manage its state manually with `showModal`,
        // thus the disabled eslint rule
        // eslint-disable-next-line no-unused-vars
        const { className, open, onCancel, children, ...otherProps } = this.props;

        const classes = classNames('mdl-dialog', className);

        return (
            <dialog ref={(c) => (this.dialogRef = c)} className={classes} {...otherProps}>
                {children}
            </dialog>
        );
    }
}

Dialog.propTypes = propTypes;
Dialog.defaultProps = defaultProps;

export default Dialog;

@@ -218,16 +218,53 @@
 s.func,%0A
+    onBackdropClick: PropTypes.func,%0A
     open
@@ -280,16 +280,16 @@
 es.bool%0A
-
 %7D;%0A%0Acons
@@ -406,32 +406,178 @@
 entDidMount() %7B%0A
+        this.backdropClickCallback = this.onDialogClick.bind(this);%0A        this.dialogRef.addEventListener('click', this.backdropClickCallback);%0A
         this.dia
@@ -1565,24 +1565,688 @@
 .onCancel);%0A
+        this.dialogRef.removeEventListener('click', this.backdropClickCallback);%0A    %7D%0A%0A    onDialogClick(event) %7B%0A        // http://stackoverflow.com/a/26984690%0A        if (this.props.onBackdropClick && event.target === this.dialogRef) %7B%0A            const rect = this.dialogRef.getBoundingClientRect();%0A            const insideDialog = (%0A                rect.top %3C= event.clientY &&%0A                event.clientY %3C= rect.top + rect.height &&%0A                rect.left %3C= event.clientX &&%0A                event.clientX %3C= rect.left + rect.width%0A            );%0A%0A            if (!insideDialog) %7B%0A                this.props.onBackdropClick();%0A            %7D%0A        %7D%0A
     %7D%0A%0A    r
@@ -2452,16 +2452,16 @@
 ed-vars%0A
-
         
@@ -2504,16 +2504,33 @@
 hildren,
+ onBackdropClick,
  ...othe

Add `onBackdropClick` on `Dialog` (#475)