feat(events): add eventStack

src/addons/Portal/Portal.js

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom'
 
 import {
   AutoControlledComponent as Component,
+  eventStack,
   isBrowser,
   keyboardKey,
   makeDebugger,
@@ -383,11 +384,9 @@ class Portal extends Component {
       mountNode.appendChild(this.rootNode)
     }
 
-    document.addEventListener('click', this.handleDocumentClick)
-    document.addEventListener('keydown', this.handleEscape)
-
-    const { onMount } = this.props
-    if (onMount) onMount(null, this.props)
+    eventStack.sub('click', this.handleDocumentClick, 'Portal')
+    eventStack.sub('keydown', this.handleEscape, 'Portal')
+    _.invoke(this.props, 'onMount', null, this.props)
   }
 
   unmountPortal = () => {
@@ -404,11 +403,9 @@ class Portal extends Component {
     this.rootNode = null
     this.portalNode = null
 
-    document.removeEventListener('click', this.handleDocumentClick)
-    document.removeEventListener('keydown', this.handleEscape)
-
-    const { onUnmount } = this.props
-    if (onUnmount) onUnmount(null, this.props)
+    eventStack.unsub('click', this.handleDocumentClick, 'Portal')
+    eventStack.unsub('keydown', this.handleEscape, 'Portal')
+    _.invoke(this.props, 'onUnmount', null, this.props)
   }
 
   handleRef = (c) => {

src/lib/eventStack.js

@@ -0,0 +1,83 @@
+import _ from 'lodash'
+import isBrowser from './isBrowser'
+
+class EventStack {
+  _handlers = {}
+  _pools = {}
+
+  // ------------------------------------
+  // Utils
+  // ------------------------------------
+
+  _emit = name => (event) => {
+    _.forEach(this._pools, (pool, poolName) => {
+      const { [name]: handlers } = pool
+
+      if (!handlers) return
+      if (poolName === 'default') {
+        _.forEach(handlers, handler => handler(event))
+        return
+      }
+      _.last(handlers)(event)
+    })
+  }
+
+  _normalize = handlers => (_.isArray(handlers) ? handlers : [handlers])
+
+  // ------------------------------------
+  // Listeners handling
+  // ------------------------------------
+
+  _listen = (name) => {
+    if (_.has(this._handlers, name)) return
+    const handler = this._emit(name)
+
+    document.addEventListener(name, handler)
+    this._handlers[name] = handler
+  }
+
+  _unlisten = (name) => {
+    if (_.some(this._pools, name)) return
+    const { [name]: handler } = this._handlers
+
+    document.removeEventListener(name, handler)
+    delete this._handlers[name]
+  }
+
+  // ------------------------------------
+  // Pub/sub
+  // ------------------------------------
+
+  sub = (name, handlers, pool = 'default') => {
+    if (!isBrowser) return
+
+    const events = _.uniq([
+      ..._.get(this._pools, `${pool}.${name}`, []),
+      ...this._normalize(handlers),
+    ])
+
+    this._listen(name)
+    _.set(this._pools, `${pool}.${name}`, events)
+  }
+
+  unsub = (name, handlers, pool = 'default') => {
+    if (!isBrowser) return
+
+    const events = _.without(
+      _.get(this._pools, `${pool}.${name}`, []),
+      ...this._normalize(handlers),
+    )
+
+    if (events.length > 0) {
+      _.set(this._pools, `${pool}.${name}`, events)
+      return
+    }
+
+    _.set(this._pools, `${pool}.${name}`, undefined)
+    this._unlisten(name)
+  }
+}
+
+const instance = new EventStack()
+
+export default instance

src/lib/index.js

@@ -19,6 +19,7 @@ export {
   debug,
   makeDebugger,
 } from './debug'
+export eventStack from './eventStack'
 
 export * from './factories'
 export { default as getUnhandledProps } from './getUnhandledProps'

src/modules/Dropdown/Dropdown.js

@@ -7,9 +7,9 @@ import {
   AutoControlledComponent as Component,
   childrenUtils,
   customPropTypes,
+  eventStack,
   getElementType,
   getUnhandledProps,
-  isBrowser,
   keyboardKey,
   makeDebugger,
   META,
@@ -427,9 +427,6 @@ export default class Dropdown extends Component {
     // TODO objectDiff still runs in prod, stop it
     debug('to state:', objectDiff(prevState, this.state))
 
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-
     // focused / blurred
     if (!prevState.focus && this.state.focus) {
       debug('dropdown focused')
@@ -441,64 +438,66 @@ export default class Dropdown extends Component {
         if (openOnFocus && openable) this.open()
       }
       if (!this.state.open) {
-        document.addEventListener('keydown', this.openOnArrow)
-        document.addEventListener('keydown', this.openOnSpace)
+        eventStack.sub('keydown', [this.openOnArrow, this.openOnSpace])
       } else {
-        document.addEventListener('keydown', this.moveSelectionOnKeyDown)
-        document.addEventListener('keydown', this.selectItemOnEnter)
+        eventStack.sub('keydown', [this.moveSelectionOnKeyDown, this.selectItemOnEnter])
       }
-      document.addEventListener('keydown', this.removeItemOnBackspace)
+      eventStack.sub('keydown', this.removeItemOnBackspace)
     } else if (prevState.focus && !this.state.focus) {
       debug('dropdown blurred')
       const { closeOnBlur } = this.props
       if (!this.isMouseDown && closeOnBlur) {
         debug('mouse is not down and closeOnBlur=true, closing')
         this.close()
       }
-      document.removeEventListener('keydown', this.openOnArrow)
-      document.removeEventListener('keydown', this.openOnSpace)
-      document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.removeEventListener('keydown', this.selectItemOnEnter)
-      document.removeEventListener('keydown', this.removeItemOnBackspace)
+      eventStack.unsub('keydown', [
+        this.openOnArrow,
+        this.openOnSpace,
+        this.moveSelectionOnKeyDown,
+        this.selectItemOnEnter,
+        this.removeItemOnBackspace,
+      ])
     }
 
     // opened / closed
     if (!prevState.open && this.state.open) {
       debug('dropdown opened')
-      document.addEventListener('keydown', this.closeOnEscape)
-      document.addEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.addEventListener('keydown', this.selectItemOnEnter)
-      document.addEventListener('keydown', this.removeItemOnBackspace)
-      document.addEventListener('click', this.closeOnDocumentClick)
-      document.removeEventListener('keydown', this.openOnArrow)
-      document.removeEventListener('keydown', this.openOnSpace)
+      eventStack.sub('keydown', [
+        this.closeOnEscape,
+        this.moveSelectionOnKeyDown,
+        this.selectItemOnEnter,
+        this.removeItemOnBackspace,
+      ])
+      eventStack.sub('click', this.closeOnDocumentClick)
+      eventStack.unsub('keydown', [this.openOnArrow, this.openOnSpace])
       this.scrollSelectedItemIntoView()
     } else if (prevState.open && !this.state.open) {
       debug('dropdown closed')
       this.handleClose()
-      document.removeEventListener('keydown', this.closeOnEscape)
-      document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.removeEventListener('keydown', this.selectItemOnEnter)
-      document.removeEventListener('click', this.closeOnDocumentClick)
+      eventStack.unsub('keydown', [
+        this.closeOnEscape,
+        this.moveSelectionOnKeyDown,
+        this.selectItemOnEnter,
+      ])
+      eventStack.unsub('click', this.closeOnDocumentClick)
       if (!this.state.focus) {
-        document.removeEventListener('keydown', this.removeItemOnBackspace)
+        eventStack.unsub('keydown', this.removeItemOnBackspace)
       }
     }
   }
 
   componentWillUnmount() {
     debug('componentWillUnmount()')
 
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-
-    document.removeEventListener('keydown', this.openOnArrow)
-    document.removeEventListener('keydown', this.openOnSpace)
-    document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-    document.removeEventListener('keydown', this.selectItemOnEnter)
-    document.removeEventListener('keydown', this.removeItemOnBackspace)
-    document.removeEventListener('keydown', this.closeOnEscape)
-    document.removeEventListener('click', this.closeOnDocumentClick)
+    eventStack.unsub('keydown', [
+      this.openOnArrow,
+      this.openOnSpace,
+      this.moveSelectionOnKeyDown,
+      this.selectItemOnEnter,
+      this.removeItemOnBackspace,
+      this.closeOnEscape,
+    ])
+    eventStack.unsub('click', this.closeOnDocumentClick)
   }
 
   // ----------------------------------------
@@ -645,17 +644,15 @@ export default class Dropdown extends Component {
     debug('handleMouseDown()')
 
     this.isMouseDown = true
+    eventStack.sub('mouseup', this.handleDocumentMouseUp)
     _.invoke(this.props, 'onMouseDown', e, this.props)
-    // Do not access document when server side rendering
-    if (isBrowser) document.addEventListener('mouseup', this.handleDocumentMouseUp)
   }
 
   handleDocumentMouseUp = () => {
     debug('handleDocumentMouseUp()')
 
     this.isMouseDown = false
-    // Do not access document when server side rendering
-    if (isBrowser) document.removeEventListener('mouseup', this.handleDocumentMouseUp)
+    eventStack.unsub('mouseup', this.handleDocumentMouseUp)
   }
 
   handleClick = (e) => {

src/modules/Search/Search.js

@@ -6,6 +6,7 @@ import React from 'react'
 import {
   AutoControlledComponent as Component,
   customPropTypes,
+  eventStack,
   getElementType,
   getUnhandledProps,
   htmlInputAttrs,
@@ -198,9 +199,7 @@ export default class Search extends Component {
   }
 
   static Category = SearchCategory
-
   static Result = SearchResult
-
   static Results = SearchResults
 
   componentWillMount() {
@@ -232,9 +231,6 @@ export default class Search extends Component {
     // TODO objectDiff still runs in prod, stop it
     debug('to state:', objectDiff(prevState, this.state))
 
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-
     // focused / blurred
     if (!prevState.focus && this.state.focus) {
       debug('search focused')
@@ -243,47 +239,36 @@ export default class Search extends Component {
         this.tryOpen()
       }
       if (this.state.open) {
-        document.addEventListener('keydown', this.moveSelectionOnKeyDown)
-        document.addEventListener('keydown', this.selectItemOnEnter)
+        eventStack.sub('keydown', [this.moveSelectionOnKeyDown, this.selectItemOnEnter])
       }
     } else if (prevState.focus && !this.state.focus) {
       debug('search blurred')
       if (!this.isMouseDown) {
         debug('mouse is not down, closing')
         this.close()
       }
-      document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.removeEventListener('keydown', this.selectItemOnEnter)
+      eventStack.unsub('keydown', [this.moveSelectionOnKeyDown, this.selectItemOnEnter])
     }
 
     // opened / closed
     if (!prevState.open && this.state.open) {
       debug('search opened')
       this.open()
-      document.addEventListener('keydown', this.closeOnEscape)
-      document.addEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.addEventListener('keydown', this.selectItemOnEnter)
-      document.addEventListener('click', this.closeOnDocumentClick)
+      eventStack.sub('click', this.closeOnDocumentClick)
+      eventStack.sub('keydown', [this.closeOnEscape, this.moveSelectionOnKeyDown, this.selectItemOnEnter])
     } else if (prevState.open && !this.state.open) {
       debug('search closed')
       this.close()
-      document.removeEventListener('keydown', this.closeOnEscape)
-      document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-      document.removeEventListener('keydown', this.selectItemOnEnter)
-      document.removeEventListener('click', this.closeOnDocumentClick)
+      eventStack.unsub('click', this.closeOnDocumentClick)
+      eventStack.unsub('keydown', [this.closeOnEscape, this.moveSelectionOnKeyDown, this.selectItemOnEnter])
     }
   }
 
   componentWillUnmount() {
     debug('componentWillUnmount()')
 
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-
-    document.removeEventListener('keydown', this.moveSelectionOnKeyDown)
-    document.removeEventListener('keydown', this.selectItemOnEnter)
-    document.removeEventListener('keydown', this.closeOnEscape)
-    document.removeEventListener('click', this.closeOnDocumentClick)
+    eventStack.unsub('click', this.closeOnDocumentClick)
+    eventStack.unsub('keydown', [this.closeOnEscape, this.moveSelectionOnKeyDown, this.selectItemOnEnter])
   }
 
   // ----------------------------------------
@@ -357,20 +342,17 @@ export default class Search extends Component {
 
   handleMouseDown = (e) => {
     debug('handleMouseDown()')
-    const { onMouseDown } = this.props
-    if (onMouseDown) onMouseDown(e, this.props)
+
     this.isMouseDown = true
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-    document.addEventListener('mouseup', this.handleDocumentMouseUp)
+    _.invoke(this.props, 'onMouseDown', e, this.props)
+    eventStack.sub('mouseup', this.handleDocumentMouseUp)
   }
 
   handleDocumentMouseUp = () => {
     debug('handleDocumentMouseUp()')
+
     this.isMouseDown = false
-    // Do not access document when server side rendering
-    if (!isBrowser) return
-    document.removeEventListener('mouseup', this.handleDocumentMouseUp)
+    eventStack.unsub('mouseup', this.handleDocumentMouseUp)
   }
 
   handleInputClick = (e) => {