feat: add onClick to <Overlay> and <Modal>

src/Modal/__story__/story.tsx

@@ -34,3 +34,21 @@ storiesOf('UI/Modal', module)
       </Modal>
     </div>
   )
+  .add('Modal UI', () =>
+    <div>
+      <Modal color='tomato' onClick={action('onClick')} onEsc={action('onEsc')}>
+        <div
+          style={{
+            width: 300,
+            height: 200,
+            background: '#fff',
+            borderRadius: 4,
+            boxShadow: '0 2px 4px rgba(0,0,0,.3)',
+            padding: 30,
+          }}
+        >
+          foobar
+        </div>
+      </Modal>
+    </div>
+  )

src/Modal/index.ts

@@ -2,15 +2,14 @@ import {Component} from 'react';
 import {render} from 'react-universal-interface';
 import FocusLock from 'react-focus-lock';
 import {h, isClient, on, off, noop} from '../util';
-import {Overlay} from '../Overlay';
+import {Overlay, IOverlayProps} from '../Overlay';
 
 let id = 0;
 
 const ESC = 27;
 
-export interface IModalProps {
-  onElement?: (el: HTMLDivElement) => void;
-  onEsc?: (event) => void;
+export interface IModalProps extends IOverlayProps {
+  onEsc?: (event: KeyboardEvent) => void;
 }
 
 export interface IModalState {
@@ -108,8 +107,13 @@ export class Modal extends Component<IModalProps, IModalState> {
   };
 
   render () {
+    const {color, time, onClick} = this.props;
+
     return h(Overlay, {
-      onElement: this.onElement
+      color,
+      time,
+      onClick,
+      onElement: this.onElement,
     },
       h(FocusLock, null,
         render(this.props, this.state)

src/Overlay/__story__/story.tsx

@@ -16,7 +16,7 @@ storiesOf('UI/Overlay', module)
   )
   .add('Sample modal', () =>
     <div>
-      <Overlay color='tomato'>
+      <Overlay color='tomato' onClick={action('onClick')}>
         <div
           style={{
             width: 300,

src/Overlay/index.ts

@@ -1,25 +1,34 @@
 import {Component} from 'react';
 import {Portal} from '../Portal';
-import {h, noop} from '../util';
+import {h, noop, on, off} from '../util';
 
 export interface IOverlayProps {
   color?: string;
   time?: number;
+  onClick?: (event: MouseEvent) => void;
   onElement?: (div: HTMLElement) => void;
 }
 
 export interface IOverlayState {
 }
 
 export class Overlay extends Component<IOverlayProps, IOverlayState> {
+  el: HTMLElement = null;
+
   static defaultProps = {
     color: 'rgba(0,0,0,0.5)',
     time: 300,
   };
 
+  componentWillUnmount () {
+    off(this.el, 'click', this.onClick);
+  }
+
   onElement = (el) => {
     const {style} = el;
 
+    this.el = el;
+
     style.zIndex = 2147483647; // Max z-index.
     style.position = 'fixed';
     style.width = '100%';
@@ -41,9 +50,17 @@ export class Overlay extends Component<IOverlayProps, IOverlayState> {
       style.opacity = 1;
     }, 35);
 
+    on(el, 'click', this.onClick);
+
     (this.props.onElement || noop)(el);
   };
 
+  onClick = (event) => {
+    if (event.target === this.el) {
+      (this.props.onClick || noop)(event);
+    }
+  };
+
   render () {
     return h(Portal, {onElement: this.onElement}, this.props.children);
   }