Refactor removal tracker

Author: huumanoid

src/decorators/trackRemoval.js

@@ -1,66 +1,44 @@
+/**
+ * Tracking target removing from DOM.
+ * It's nessesary to hide tooltip when it's target disappears.
+ * Otherwise, the tooltip would be shown forever until another target
+ * is triggered.
+ *
+ * If MutationObserver is not available, this feature just doesn't work.
+ */
+
 // https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
 const getMutationObserverClass = () => {
   return window.MutationObserver ||
     window.WebKitMutationObserver ||
     window.MozMutationObserver
 }
 
-const isMutationObserverAvailable = () => {
-  return getMutationObserverClass() != null
-}
-
-class ObserverBasedRemovalTracker {
-  constructor (tooltip) {
-    this.tooltip = tooltip
-
-    this.observer = null
-    this.inited = false
-  }
-
-  init () {
-    if (this.inited) {
-      this.unbind()
-    }
-    this.inited = true
-
+export default function (target) {
+  target.prototype.bindRemovalTracker = function () {
     const MutationObserver = getMutationObserverClass()
-    if (!MutationObserver) {
-      return
-    }
+    if (MutationObserver == null) return
 
-    this.observer = new MutationObserver((mutations) => {
+    const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         for (const element of mutation.removedNodes) {
-          if (element === this.tooltip.state.currentTarget) {
-            this.tooltip.hideTooltip()
+          if (element === this.state.currentTarget) {
+            this.hideTooltip()
             return
           }
         }
       }
     })
 
-    this.observer.observe(window.document, { childList: true, subtree: true })
-  }
-
-  unbind () {
-    if (this.observer) {
-      this.observer.disconnect()
-      this.observer = null
-    }
-    this.inited = false
-  }
-}
+    observer.observe(window.document, { childList: true, subtree: true })
 
-export default function (target) {
-  target.prototype.bindRemovalTracker = function () {
-    if (isMutationObserverAvailable()) {
-      this.removalTracker = new ObserverBasedRemovalTracker(this)
-      this.removalTracker.init()
-    }
+    this.removalTracker = observer
   }
 
   target.prototype.unbindRemovalTracker = function () {
-    this.removalTracker.unbind()
-    this.removalTracker = null
+    if (this.removalTracker) {
+      this.removalTracker.disconnect()
+      this.removalTracker = null
+    }
   }
 }

src/index.js

@@ -92,7 +92,6 @@ class ReactTooltip extends Component {
     this.bind([
       'showTooltip',
       'updateTooltip',
-      'checkSameTarget',
       'hideTooltip',
       'globalRebuild',
       'globalShow',
@@ -169,8 +168,6 @@ class ReactTooltip extends Component {
     const {id, globalEventOff} = this.props
     let targetArray = this.getTargetArray(id)
 
-    this.bindRemovalTracker()
-
     targetArray.forEach(target => {
       const isCaptureMode = this.isCapture(target)
       const effect = this.getEffect(target)
@@ -196,6 +193,9 @@ class ReactTooltip extends Component {
       window.removeEventListener(globalEventOff, this.hideTooltip)
       window.addEventListener(globalEventOff, this.hideTooltip, false)
     }
+
+    // Track removal of targetArray elements from DOM
+    this.bindRemovalTracker()
   }
 
   /**
@@ -339,12 +339,6 @@ class ReactTooltip extends Component {
     }
   }
 
-  checkSameTarget (e) {
-    if (this.state.currentTarget === e.currentTarget) {
-      this.hideTooltip(e)
-    }
-  }
-
   /**
    * When mouse leave, hide tooltip
    */