allows to close dialog (and all overlays) when pressing esc

Author: felipeleusin

components/dialog/Dialog.jsx

@@ -21,6 +21,7 @@ const Dialog = (props) => {
       onMouseDown={props.onOverlayMouseDown}
       onMouseUp={props.onOverlayMouseUp}
       onMouseMove={props.onOverlayMouseMove}
+      onEscKeyDown={props.onOverlayEscKeyDown}
     >
       <div data-react-toolbox='dialog' className={className}>
         <section role='body' className={style.body}>
@@ -41,6 +42,7 @@ Dialog.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   onOverlayClick: React.PropTypes.func,
+  onOverlayEscKeyDown: React.PropTypes.func,
   onOverlayMouseDown: React.PropTypes.func,
   onOverlayMouseMove: React.PropTypes.func,
   onOverlayMouseUp: React.PropTypes.func,

components/dialog/readme.md

@@ -44,5 +44,6 @@ class DialogTest extends React.Component {
 | `onOverlayMouseDown` | `Function` |             | Callback called when the mouse button is pressed on the overlay. |
 | `onOverlayMouseUp` | `Function` |               | Callback called when the mouse button is released over the overlay. |
 | `onOverlayMouseMove` | `Function` |             | Callback called when the mouse is moving over the overlay. |
+| `onOverlayEscKeyDown` | `Function` |             | Callback called when the ESC is pressed with the overlay active. |
 | `title`         | `String`        |                 | The text string to use as standar title of the dialog.|
 | `type`          | `String`        |  `normal`       | Used to determine the size of the dialog. It can be `small`, `normal` or `large`. |

components/overlay/Overlay.jsx

@@ -9,7 +9,8 @@ class Overlay extends React.Component {
     children: React.PropTypes.node,
     className: React.PropTypes.string,
     invisible: React.PropTypes.bool,
-    onClick: React.PropTypes.func
+    onClick: React.PropTypes.func,
+    onEscKeyDown: React.PropTypes.func
   };
 
   static defaultProps = {
@@ -22,15 +23,31 @@ class Overlay extends React.Component {
     this.node.setAttribute('data-react-toolbox', 'overlay');
     this.app.appendChild(this.node);
     this.handleRender();
+    if (this.props.active) {
+      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    }
   }
 
   componentDidUpdate () {
     this.handleRender();
+    if (this.props.active && !this.escKeyListener) {
+      this.escKeyListener = document.body.addEventListener('keydown', this.handleEscKey.bind(this));
+    }
   }
 
   componentWillUnmount () {
     ReactDOM.unmountComponentAtNode(this.node);
     this.app.removeChild(this.node);
+    if (this.escKeyListener) {
+      document.body.removeEventListener('keydown', this.handleEscKey)
+      this.escKeyListener = null;
+    }
+  }
+
+  handleEscKey (e) {
+    if (this.props.active && this.props.onEscKeyDown && e.which == 27) {
+      this.props.onEscKeyDown(e);
+    }
   }
 
   handleRender () {

spec/components/dialog.jsx

@@ -30,6 +30,7 @@ class DialogTest extends React.Component {
             active={this.state.active}
             title="Use Google's location service?"
             onOverlayClick={this.handleToggle}
+            onOverlayEscKeyDown={this.handleToggle}
           >
             <p>Let Google help apps <strong>determine location</strong>. This means sending anonymous location data to Google, even when no apps are running.</p>
             <DialogChild />