Enhance custom event focus and fix repeat bind caused by bind(this)

Author: wwayne

src/decorators/customEvent.js

@@ -33,10 +33,12 @@ const setUntargetItems = function (currentTarget, targetArray) {
   }
 }
 
+let customListener
+
 export default function (target) {
   target.prototype.isCustomEvent = function (ele) {
     const {event} = this.state
-    return event || ele.getAttribute('data-event')
+    return event || !!ele.getAttribute('data-event')
   }
 
   /* Bind listener for custom event */
@@ -46,13 +48,14 @@ export default function (target) {
     const dataEventOff = ele.getAttribute('data-event-off') || eventOff
 
     dataEvent.split(' ').forEach(event => {
-      ele.removeEventListener(event, checkStatus)
-      ele.addEventListener(event, checkStatus.bind(this, dataEventOff), false)
+      ele.removeEventListener(event, customListener)
+      customListener = checkStatus.bind(this, dataEventOff)
+      ele.addEventListener(event, customListener, false)
     })
     if (dataEventOff) {
       dataEventOff.split(' ').forEach(event => {
         ele.removeEventListener(event, this.hideTooltip)
-        ele.addEventListener(event, ::this.hideTooltip, false)
+        ele.addEventListener(event, this.hideTooltip, false)
       })
     }
   }
@@ -63,7 +66,7 @@ export default function (target) {
     const dataEvent = event || ele.getAttribute('data-event')
     const dataEventOff = eventOff || ele.getAttribute('data-event-off')
 
-    ele.removeEventListener(dataEvent, checkStatus)
+    ele.removeEventListener(dataEvent, customListener)
     if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip)
   }
 }

src/decorators/windowListener.js

@@ -7,21 +7,20 @@ export default function (target) {
   target.prototype.bindWindowEvents = function () {
     // ReactTooltip.hide
     window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
-    window.addEventListener(CONSTANT.GLOBAL.HIDE, ::this.hideTooltip, false)
+    window.addEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip, false)
 
     // ReactTooltip.rebuild
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
-    window.addEventListener(CONSTANT.GLOBAL.REBUILD, ::this.globalRebuild, false)
+    window.addEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild, false)
 
     // Resize
     window.removeEventListener('resize', this.onWindowResize)
-    window.addEventListener('resize', ::this.onWindowResize, false)
+    window.addEventListener('resize', this.onWindowResize, false)
   }
 
   target.prototype.unbindWindowEvents = function () {
     window.removeEventListener(CONSTANT.GLOBAL.HIDE, this.hideTooltip)
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
-    window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalShow)
     window.removeEventListener('resize', this.onWindowResize)
   }
 

src/index.js

@@ -61,12 +61,29 @@ class ReactTooltip extends Component {
       currentTarget: null // Current target of mouse event
     }
 
+    this.bind([
+      'showTooltip',
+      'updateTooltip',
+      'hideTooltip',
+      'globalRebuild',
+      'onWindowResize'
+    ])
+
     this.mount = true
     this.delayShowLoop = null
     this.delayHideLoop = null
     this.intervalUpdateContent = null
   }
 
+  /**
+   * For unify the bind and unbind listener
+   */
+  bind (methodArray) {
+    methodArray.forEach(method => {
+      this[method] = this[method].bind(this)
+    })
+  }
+
   componentDidMount () {
     this.setStyleHeader() // Set the style to the <link>
     this.bindListener() // Bind listener for tooltip
@@ -115,27 +132,24 @@ class ReactTooltip extends Component {
       if (target.getAttribute('currentItem') === null) {
         target.setAttribute('currentItem', 'false')
       }
+      this.unbindBasicListener(target)
 
       if (this.isCustomEvent(target)) {
         this.customBindListener(target)
         return
       }
 
-      target.removeEventListener('mouseenter', this.showTooltip)
-      target.addEventListener('mouseenter', ::this.showTooltip, isCaptureMode)
+      target.addEventListener('mouseenter', this.showTooltip, isCaptureMode)
       if (this.state.effect === 'float') {
-        target.removeEventListener('mousemove', this.updateTooltip)
-        target.addEventListener('mousemove', ::this.updateTooltip, isCaptureMode)
+        target.addEventListener('mousemove', this.updateTooltip, isCaptureMode)
       }
-
-      target.removeEventListener('mouseleave', this.hideTooltip)
-      target.addEventListener('mouseleave', ::this.hideTooltip, isCaptureMode)
+      target.addEventListener('mouseleave', this.hideTooltip, isCaptureMode)
     })
 
     // Global event to hide tooltip
     if (globalEventOff) {
       window.removeEventListener(globalEventOff, this.hideTooltip)
-      window.addEventListener(globalEventOff, ::this.hideTooltip, false)
+      window.addEventListener(globalEventOff, this.hideTooltip, false)
     }
   }
 
@@ -145,21 +159,25 @@ class ReactTooltip extends Component {
   unbindListener () {
     const {id, globalEventOff} = this.props
     const targetArray = this.getTargetArray(id)
-
     targetArray.forEach(target => {
-      if (this.isCustomEvent(target)) {
-        this.customUnbindListener(target)
-        return
-      }
-
-      target.removeEventListener('mouseenter', this.showTooltip)
-      target.removeEventListener('mousemove', this.updateTooltip)
-      target.removeEventListener('mouseleave', this.hideTooltip)
+      this.unbindBasicListener(target)
+      if (this.isCustomEvent(target)) this.customUnbindListener(target)
     })
 
     if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip)
   }
 
+  /**
+   * Invoke this before bind listener and ummount the compont
+   * it is necessary to invloke this even when binding custom event
+   * so that the tooltip can switch between custom and default listener
+   */
+  unbindBasicListener (target) {
+    target.removeEventListener('mouseenter', this.showTooltip)
+    target.removeEventListener('mousemove', this.updateTooltip)
+    target.removeEventListener('mouseleave', this.hideTooltip)
+  }
+
   /**
    * When mouse enter, show the tooltip
    */
@@ -170,6 +188,7 @@ class ReactTooltip extends Component {
     const originTooltip = e.currentTarget.getAttribute('data-tip')
     const isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false
 
+    // Generate tootlip content
     let content = children
     if (getContent) {
       if (Array.isArray(getContent)) {
@@ -178,14 +197,16 @@ class ReactTooltip extends Component {
         content = getContent()
       }
     }
-
     const placeholder = getTipContent(originTooltip, content, isMultiline)
 
+    // If e is instance of FocusEvent, switch to `solid` effect
+    const isFocus = e instanceof FocusEvent
+
     this.setState({
       placeholder,
       place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top',
       type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark',
-      effect: e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float',
+      effect: isFocus && 'solid' || e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float',
       offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {},
       html: e.currentTarget.getAttribute('data-html') === 'true' || this.props.html || false,
       delayShow: e.currentTarget.getAttribute('data-delay-show') || this.props.delayShow || 0,
@@ -255,7 +276,7 @@ class ReactTooltip extends Component {
    */
   addScrollListener (e) {
     const isCaptureMode = this.isCapture(e.currentTarget)
-    window.addEventListener('scroll', ::this.hideTooltip, isCaptureMode)
+    window.addEventListener('scroll', this.hideTooltip, isCaptureMode)
   }
 
   removeScrollListener () {