feat(eventStack): support for different targets

src/addons/Portal/Portal.js

@@ -349,8 +349,8 @@ class Portal extends Component {
 
     // when re-rendering, first remove listeners before re-adding them to the new node
     if (this.portalNode) {
-      this.portalNode.removeEventListener('mouseleave', this.handlePortalMouseLeave)
-      this.portalNode.removeEventListener('mouseenter', this.handlePortalMouseEnter)
+      eventStack.unsub('mouseleave', this.handlePortalMouseLeave, { target: this.portalNode })
+      eventStack.unsub('mouseenter', this.handlePortalMouseEnter, { target: this.portalNode })
     }
 
     ReactDOM.unstable_renderSubtreeIntoContainer(
@@ -360,8 +360,8 @@ class Portal extends Component {
       () => {
         this.portalNode = this.rootNode.firstElementChild
 
-        this.portalNode.addEventListener('mouseleave', this.handlePortalMouseLeave)
-        this.portalNode.addEventListener('mouseenter', this.handlePortalMouseEnter)
+        eventStack.sub('mouseleave', this.handlePortalMouseLeave, { target: this.portalNode })
+        eventStack.sub('mouseenter', this.handlePortalMouseEnter, { target: this.portalNode })
       },
     )
   }
@@ -397,8 +397,8 @@ class Portal extends Component {
     ReactDOM.unmountComponentAtNode(this.rootNode)
     this.rootNode.parentNode.removeChild(this.rootNode)
 
-    this.portalNode.removeEventListener('mouseleave', this.handlePortalMouseLeave)
-    this.portalNode.removeEventListener('mouseenter', this.handlePortalMouseEnter)
+    eventStack.unsub('mouseleave', this.handlePortalMouseLeave, { target: this.portalNode })
+    eventStack.unsub('mouseenter', this.handlePortalMouseEnter, { target: this.portalNode })
 
     this.rootNode = null
     this.portalNode = null

src/addons/Responsive/Responsive.js

@@ -59,11 +59,11 @@ export default class Responsive extends Component {
   }
 
   componentDidMount() {
-    eventStack.sub('resize', this.handleResize)
+    eventStack.sub('resize', this.handleResize, { target: 'window' })
   }
 
   componentWillUnmount() {
-    eventStack.unsub('resize', this.handleResize)
+    eventStack.unsub('resize', this.handleResize, { target: 'window' })
   }
 
   // ----------------------------------------

src/behaviors/Visibility/Visibility.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import {
+  eventStack,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -196,20 +197,18 @@ export default class Visibility extends Component {
 
   componentDidMount() {
     if (!isBrowser) return
-
     const { context, fireOnMount } = this.props
 
     this.pageYOffset = window.pageYOffset
-    context.addEventListener('scroll', this.handleScroll)
+    eventStack.sub('scroll', this.handleScroll, { target: context })
 
     if (fireOnMount) this.update()
   }
 
   componentWillUnmount() {
-    if (!isBrowser) return
-
     const { context } = this.props
-    context.removeEventListener('scroll', this.handleScroll)
+
+    eventStack.unsub('scroll', this.handleScroll, { target: context })
   }
 
   // ----------------------------------------

src/lib/eventStack.js → src/lib/eventStack/EventTarget.js

@@ -1,12 +1,13 @@
 import _ from 'lodash'
-import isBrowser from './isBrowser'
 
-const windowEvents = ['resize']
-
-class EventStack {
+export default class EventTarget {
   _handlers = {}
   _pools = {}
 
+  constructor(target) {
+    this.target = target
+  }
+
   // ------------------------------------
   // Utils
   // ------------------------------------
@@ -33,28 +34,26 @@ class EventStack {
   _listen = (name) => {
     if (_.has(this._handlers, name)) return
     const handler = this._emit(name)
-    const target = _.includes(windowEvents, name) ? window : document
 
-    target.addEventListener(name, handler)
+    this.target.addEventListener(name, handler)
     this._handlers[name] = handler
   }
 
   _unlisten = (name) => {
     if (_.some(this._pools, name)) return
     const { [name]: handler } = this._handlers
-    const target = _.includes(windowEvents, name) ? window : document
 
-    target.removeEventListener(name, handler)
+    this.target.removeEventListener(name, handler)
     delete this._handlers[name]
   }
 
   // ------------------------------------
   // Pub/sub
   // ------------------------------------
 
-  sub = (name, handlers, pool = 'default') => {
-    if (!isBrowser) return
+  empty = () => _.isEmpty(this._handlers)
 
+  sub = (name, handlers, pool = 'default') => {
     const events = _.uniq([
       ..._.get(this._pools, `${pool}.${name}`, []),
       ...this._normalize(handlers),
@@ -65,8 +64,6 @@ class EventStack {
   }
 
   unsub = (name, handlers, pool = 'default') => {
-    if (!isBrowser) return
-
     const events = _.without(
       _.get(this._pools, `${pool}.${name}`, []),
       ...this._normalize(handlers),
@@ -81,7 +78,3 @@ class EventStack {
     this._unlisten(name)
   }
 }
-
-const instance = new EventStack()
-
-export default instance

src/lib/eventStack/eventStack.js

@@ -0,0 +1,61 @@
+import _ from 'lodash'
+
+import isBrowser from '../isBrowser'
+import EventTarget from './EventTarget'
+import normalizeTarget from './normalizeTarget'
+
+class EventStack {
+  _eventTargets = {}
+  _targets = []
+
+  // ------------------------------------
+  // Target utils
+  // ------------------------------------
+
+  _find = (target) => {
+    const normalized = normalizeTarget(target)
+    let index = this._targets.indexOf(normalized)
+
+    if (index !== -1) return this._eventTargets[index]
+
+    index = this._targets.push(normalized) - 1
+    this._eventTargets[index] = new EventTarget(normalized)
+
+    return this._eventTargets[index]
+  }
+
+  _remove = (target) => {
+    const normalized = normalizeTarget(target)
+    const index = this._targets.indexOf(normalized)
+
+    this._targets = _.without(this._targets, normalized)
+    delete this._eventTargets[index]
+  }
+
+  // ------------------------------------
+  // Pub/sub
+  // ------------------------------------
+
+  sub = (name, handlers, options = {}) => {
+    if (!isBrowser) return
+
+    const { target = document, pool = 'default' } = options
+    const eventTarget = this._find(target)
+
+    eventTarget.sub(name, handlers, pool)
+  }
+
+  unsub = (name, handlers, options = {}) => {
+    if (!isBrowser) return
+
+    const { target = document, pool = 'default' } = options
+    const eventTarget = this._find(target)
+
+    eventTarget.unsub(name, handlers, pool)
+    if (eventTarget.empty()) this._remove(target)
+  }
+}
+
+const instance = new EventStack()
+
+export default instance

src/lib/eventStack/index.js

@@ -0,0 +1 @@
+export default from './eventStack'

src/lib/eventStack/normalizeTarget.js

@@ -0,0 +1,13 @@
+/**
+ * Normalizes `target` for EventStack, because `target` can be passed as `boolean` or `string`.
+ *
+ * @param {boolean|string|HTMLElement|Window} target Value for normalization.
+ * @return {HTMLElement|Window} A DOM node.
+ */
+const normalizeTarget = (target) => {
+  if (target === 'document') return document
+  if (target === 'window') return window
+  return target || document
+}
+
+export default normalizeTarget

src/modules/Popup/Popup.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import {
+  eventStack,
   childrenUtils,
   customPropTypes,
   getElementType,
@@ -276,7 +277,8 @@ export default class Popup extends Component {
 
   hideOnScroll = () => {
     this.setState({ closed: true })
-    window.removeEventListener('scroll', this.hideOnScroll)
+
+    eventStack.unsub('scroll', this.hideOnScroll, { target: window })
     setTimeout(() => this.setState({ closed: false }), 50)
   }
 
@@ -296,19 +298,18 @@ export default class Popup extends Component {
 
   handlePortalMount = (e) => {
     debug('handlePortalMount()')
-    if (this.props.hideOnScroll) {
-      window.addEventListener('scroll', this.hideOnScroll)
-    }
+    const { hideOnScroll } = this.props
 
-    const { onMount } = this.props
-    if (onMount) onMount(e, this.props)
+    if (hideOnScroll) eventStack.sub('scroll', this.hideOnScroll, { target: window })
+    _.invoke(this.props, 'onMount', e, this.props)
   }
 
   handlePortalUnmount = (e) => {
     debug('handlePortalUnmount()')
-    window.removeEventListener('scroll', this.hideOnScroll)
-    const { onUnmount } = this.props
-    if (onUnmount) onUnmount(e, this.props)
+    const { hideOnScroll } = this.props
+
+    if (hideOnScroll) eventStack.unsub('scroll', this.hideOnScroll, { target: window })
+    _.invoke(this.props, 'onUnmount', e, this.props)
   }
 
   handlePopupRef = (popupRef) => {

src/modules/Sticky/Sticky.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
 import {
+  eventStack,
   customPropTypes,
   getElementType,
   getUnhandledProps,
@@ -128,13 +129,13 @@ export default class Sticky extends Component {
   addListener = () => {
     const { scrollContext } = this.props
 
-    scrollContext.addEventListener('scroll', this.handleUpdate)
+    eventStack.sub('scroll', this.handleUpdate, { target: scrollContext })
   }
 
   removeListener = () => {
     const { scrollContext } = this.props
 
-    scrollContext.removeEventListener('scroll', this.handleUpdate)
+    eventStack.unsub('scroll', this.handleUpdate, { target: scrollContext })
   }
 
   // ----------------------------------------