fix(Modal|Popup|Portal): fix usage of eventStack sub/unsub (#2099)

* Fix for Portal usage of EventStack sub/unsub

* Responding to PR comments

* Fixing lint errors

* Addressing PR style comments

src/addons/Portal/Portal.d.ts

@@ -42,6 +42,9 @@ export interface PortalProps {
   /** Initial value of open. */
   defaultOpen?: boolean;
 
+  /** Event pool namespace that is used to handle component events. */
+  eventPool?: string;
+
   /** The node where the portal should mount. */
   mountNode?: any;
 

src/addons/Portal/Portal.js

@@ -62,6 +62,9 @@ class Portal extends Component {
     /** Initial value of open. */
     defaultOpen: PropTypes.bool,
 
+    /** Event pool namespace that is used to handle component events */
+    eventPool: PropTypes.string,
+
     /** The node where the portal should mount. */
     mountNode: PropTypes.any,
 
@@ -125,6 +128,7 @@ class Portal extends Component {
   static defaultProps = {
     closeOnDocumentClick: true,
     closeOnEscape: true,
+    eventPool: 'default',
     openOnTriggerClick: true,
   }
 
@@ -372,6 +376,7 @@ class Portal extends Component {
     debug('mountPortal()')
 
     const {
+      eventPool,
       mountNode = isBrowser ? document.body : null,
       prepend,
     } = this.props
@@ -384,15 +389,16 @@ class Portal extends Component {
       mountNode.appendChild(this.rootNode)
     }
 
-    eventStack.sub('click', this.handleDocumentClick, 'Portal')
-    eventStack.sub('keydown', this.handleEscape, 'Portal')
+    eventStack.sub('click', this.handleDocumentClick, eventPool)
+    eventStack.sub('keydown', this.handleEscape, eventPool)
     _.invoke(this.props, 'onMount', null, this.props)
   }
 
   unmountPortal = () => {
     if (!isBrowser || !this.rootNode) return
 
     debug('unmountPortal()')
+    const { eventPool } = this.props
 
     ReactDOM.unmountComponentAtNode(this.rootNode)
     this.rootNode.parentNode.removeChild(this.rootNode)
@@ -403,8 +409,8 @@ class Portal extends Component {
     this.rootNode = null
     this.portalNode = null
 
-    eventStack.unsub('click', this.handleDocumentClick, 'Portal')
-    eventStack.unsub('keydown', this.handleEscape, 'Portal')
+    eventStack.unsub('click', this.handleDocumentClick, eventPool)
+    eventStack.unsub('keydown', this.handleEscape, eventPool)
     _.invoke(this.props, 'onUnmount', null, this.props)
   }
 

src/modules/Modal/Modal.d.ts

@@ -43,6 +43,9 @@ export interface ModalProps extends PortalProps {
   /** A modal can appear in a dimmer. */
   dimmer?: boolean | 'blurring' | 'inverted';
 
+  /** Event pool namespace that is used to handle component events */
+  eventPool?: string;
+
   /** A Modal can be passed header via shorthand. */
   header?: SemanticShorthandItem<ModalHeaderProps>;
 

src/modules/Modal/Modal.js

@@ -70,6 +70,9 @@ class Modal extends Component {
       PropTypes.oneOf(['inverted', 'blurring']),
     ]),
 
+    /** Event pool namespace that is used to handle component events */
+    eventPool: PropTypes.string,
+
     /** Modal displayed above the content in bold. */
     header: customPropTypes.itemShorthand,
 
@@ -135,6 +138,7 @@ class Modal extends Component {
     dimmer: true,
     closeOnDimmerClick: true,
     closeOnDocumentClick: false,
+    eventPool: 'Modal',
   }
 
   static autoControlledProps = [
@@ -315,7 +319,7 @@ class Modal extends Component {
 
   render() {
     const { open } = this.state
-    const { closeOnDimmerClick, closeOnDocumentClick, dimmer } = this.props
+    const { closeOnDimmerClick, closeOnDocumentClick, dimmer, eventPool } = this.props
     const mountNode = this.getMountNode()
 
     // Short circuit when server side rendering
@@ -353,6 +357,7 @@ class Modal extends Component {
         closeOnRootNodeClick={closeOnDimmerClick}
         {...portalProps}
         className={dimmerClasses}
+        eventPool={eventPool}
         mountNode={mountNode}
         open={open}
         onClose={this.handleClose}