Merge pull request #74 from cwbutler/master

Added ability to stop event propagation from onOpen and onClose props.

src/index.js

@@ -128,27 +128,29 @@ export default class Popup extends React.PureComponent {
       document.getElementsByTagName('body')[0].style.overflow = 'auto';
   };
 
-  togglePopup = () => {
-    if (this.state.isOpen) this.closePopup();
-    else this.openPopup();
+  togglePopup = e => {
+    // https://reactjs.org/docs/events.html#event-pooling
+    e.persist();
+    if (this.state.isOpen) this.closePopup(e);
+    else this.openPopup(e);
   };
 
-  openPopup = () => {
+  openPopup = e => {
     const {disabled, onOpen} = this.props;
     const {isOpen} = this.state;
     if (isOpen || disabled) return;
+    onOpen(e);
     this.setState({isOpen: true}, () => {
       this.setPosition();
-      onOpen();
       this.lockScroll();
     });
   };
 
-  closePopup = () => {
+  closePopup = e => {
     const {onClose} = this.props;
     const {isOpen} = this.state;
     if (!isOpen) return;
-    onClose();
+    onClose(e);
     this.setState({isOpen: false}, () => {
       this.resetScroll();
     });

stories/src/PopupHandleEvent.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {Centred} from 'story-router';
+
+import Popup from '../../src';
+
+const PopupHandleEventProps = {};
+
+const PopupHandleEvent = props => (
+  <div onClick={() => console.log("I don't want to be called")}>
+    <Popup
+      {...props}
+      trigger={<button>Button Trigger</button>}
+      onOpen={e => e.stopPropagation()}
+      onClose={e => e.stopPropagation()}>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo
+        voluptas s lore Lorem ipsum dolor sit amet consectetur adipisicing
+        elit. Nemo voluptas s loreLorem ipsum dolor sit amet consectetur
+        adipisicing elit. Nemo voluptas s loreLorem ipsum dolor sit amet
+        consectetur adipisicing elit. Nemo voluptas s lore
+      </p>
+    </Popup>
+  </div>
+);
+
+const PopupFuncStory = {
+  name: 'Popup Event Handling w/ onOpen & onClose',
+  component: Centred(PopupHandleEvent),
+  props: PopupHandleEventProps,
+};
+
+export default PopupFuncStory;

stories/src/index.js

@@ -14,8 +14,12 @@ import ControlledTooltip from './ControlledTooltip';
 import BoundedTooltip from './BoundedTooltip';
 
 import CellTablePopupStory from './CellTablePopup';
+
+import PopupHandleEventStory from './PopupHandleEvent';
+
 import NestedLockScrollStory from './NestedLockScroll';
 
+
 const storyProps = {text: 'Parcel Storybook'};
 const buttonProps = {
   name: 'My Button',
@@ -79,5 +83,6 @@ export default [
   PopupInputFocusStory,
   PopupElementStory,
   CellTablePopupStory,
+  PopupHandleEventStory,
   NestedLockScrollStory,
 ];