Add globalEventOff attribute

w

Author: wwayne

example/src/index.js

@@ -152,8 +152,8 @@ const Test = React.createClass({
 
             <div className="example-jsx">
               <div className="side">
-                <a data-for='customer-event' data-tip='customer show' data-event='click'>( •̀д•́)</a>
-                <ReactTooltip id='customer-event' />
+                <a data-for='customer-event' data-tip='customer show' data-event='click focus'>( •̀д•́)</a>
+                <ReactTooltip id='customer-event' globalEventOff='click'/>
               </div>
 
               <div className="side">
@@ -164,8 +164,8 @@ const Test = React.createClass({
             <br />
             <pre className='example-pre'>
               <div>
-                <p>{"<a data-tip='customer show' data-event='click'>( •̀д•́)</a>\n" +
-                "<ReactTooltip />"}</p>
+                <p>{"<a data-tip='customer show' data-event='click focus'>( •̀д•́)</a>\n" +
+                "<ReactTooltip globalEventOff='click' />"}</p>
               </div>
               <div>
                 <p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +

src/decorators/customEvent.js

@@ -9,7 +9,7 @@
 const checkStatus = function (dataEventOff, e) {
   const {show} = this.state
   const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
-  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.state.isCapture
+  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.props.isCapture
   const currentItem = e.currentTarget.getAttribute('currentItem')
 
   if (!isCapture) e.stopPropagation()
@@ -41,14 +41,18 @@ export default function (target) {
   /* Bind listener for custom event */
   target.prototype.customBindListener = function (ele) {
     const {event, eventOff} = this.state
-    const dataEvent = event || ele.getAttribute('data-event')
-    const dataEventOff = eventOff || ele.getAttribute('data-event-off')
+    const dataEvent = ele.getAttribute('data-event') || event
+    const dataEventOff = ele.getAttribute('data-event-off') || eventOff
 
-    ele.removeEventListener(dataEvent, checkStatus)
-    ele.addEventListener(dataEvent, checkStatus.bind(this, dataEventOff), false)
+    dataEvent.split(' ').forEach(event => {
+      ele.removeEventListener(event, checkStatus)
+      ele.addEventListener(event, checkStatus.bind(this, dataEventOff), false)
+    })
     if (dataEventOff) {
-      ele.removeEventListener(dataEventOff, this.hideTooltip)
-      ele.addEventListener(dataEventOff, ::this.hideTooltip, false)
+      dataEventOff.split(' ').forEach(event => {
+        ele.removeEventListener(event, this.hideTooltip)
+        ele.addEventListener(event, ::this.hideTooltip, false)
+      })
     }
   }
 

src/decorators/isCapture.js

@@ -0,0 +1,10 @@
+/**
+ * Util method to judge if it should follow capture model
+ */
+
+export default function (target) {
+  target.prototype.isCapture = function (currentTarget) {
+    const dataIsCapture = currentTarget.getAttribute('data-iscapture')
+    return dataIsCapture && dataIsCapture === 'true' || this.props.isCapture || false
+  }
+}

src/decorators/staticMethods.js

@@ -41,17 +41,4 @@ export default function (target) {
       this.bindListener()
     }
   }
-
-  /**
-   * show a specific tooltip
-   * @trigger ReactTooltip.show()
-   */
-  target.show = (id) => {
-    dispatchGlobalEvent(CONSTANT.GLOBAL.SHOW)
-  }
-
-  target.prototype.globalShow = function () {
-    // id comes from I don't know
-    this.getTargetArray(id)
-  }
 }

src/decorators/windowListener.js

@@ -13,10 +13,6 @@ export default function (target) {
     window.removeEventListener(CONSTANT.GLOBAL.REBUILD, this.globalRebuild)
     window.addEventListener(CONSTANT.GLOBAL.REBUILD, ::this.globalRebuild, false)
 
-    // ReactTooltip.show
-    window.removeEventListener(CONSTANT.GLOBAL.SHOW, this.globalShow)
-    window.addEventListener(CONSTANT.GLOBAL.SHOW, ::this.globalShow, false)
-
     // Resize
     window.removeEventListener('resize', this.onWindowResize)
     window.addEventListener('resize', ::this.onWindowResize, false)

src/index.js

@@ -8,6 +8,7 @@ import classname from 'classnames'
 import staticMethods from './decorators/staticMethods'
 import windowListener from './decorators/windowListener'
 import customEvent from './decorators/customEvent'
+import isCapture from './decorators/isCapture'
 
 /* Utils */
 import getPosition from './utils/getPosition'
@@ -16,8 +17,7 @@ import getTipContent from './utils/getTipContent'
 /* CSS */
 import cssStyle from './style'
 
-/* TODO: attribute to enable global click to hide the tooltip */
-@staticMethods @windowListener @customEvent
+@staticMethods @windowListener @customEvent @isCapture
 class ReactTooltip extends Component {
 
   static propTypes = {
@@ -33,10 +33,11 @@ class ReactTooltip extends Component {
     html: PropTypes.bool,
     delayHide: PropTypes.number,
     delayShow: PropTypes.number,
-    event: PropTypes.any,
-    eventOff: PropTypes.any,
+    event: PropTypes.string,
+    eventOff: PropTypes.string,
     watchWindow: PropTypes.bool,
-    isCapture: PropTypes.bool
+    isCapture: PropTypes.bool,
+    globalEventOff: PropTypes.string
   }
 
   constructor (props) {
@@ -55,7 +56,6 @@ class ReactTooltip extends Component {
       delayShow: 0,
       event: props.event || null,
       eventOff: props.eventOff || null,
-      isCapture: props.isCapture || false,
       currentEvent: null, // Current mouse event
       currentTarget: null // Current target of mouse event
     }
@@ -106,10 +106,11 @@ class ReactTooltip extends Component {
    * These listeners used to trigger showing or hiding the tooltip
    */
   bindListener () {
-    const {id} = this.props
+    const {id, globalEventOff} = this.props
     let targetArray = this.getTargetArray(id)
 
     targetArray.forEach(target => {
+      const isCaptureMode = this.isCapture(target)
       if (target.getAttribute('currentItem') === null) {
         target.setAttribute('currentItem', 'false')
       }
@@ -120,22 +121,28 @@ class ReactTooltip extends Component {
       }
 
       target.removeEventListener('mouseenter', this.showTooltip)
-      target.addEventListener('mouseenter', ::this.showTooltip, false)
+      target.addEventListener('mouseenter', ::this.showTooltip, isCaptureMode)
       if (this.state.effect === 'float') {
         target.removeEventListener('mousemove', this.updateTooltip)
-        target.addEventListener('mousemove', ::this.updateTooltip, false)
+        target.addEventListener('mousemove', ::this.updateTooltip, isCaptureMode)
       }
 
       target.removeEventListener('mouseleave', this.hideTooltip)
-      target.addEventListener('mouseleave', ::this.hideTooltip, false)
+      target.addEventListener('mouseleave', ::this.hideTooltip, isCaptureMode)
     })
+
+    // Global event to hide tooltip
+    if (globalEventOff) {
+      window.removeEventListener(globalEventOff, this.hideTooltip)
+      window.addEventListener(globalEventOff, ::this.hideTooltip, false)
+    }
   }
 
   /**
    * Unbind listeners on target elements
    */
   unbindListener () {
-    const {id} = this.props
+    const {id, globalEventOff} = this.props
     const targetArray = this.getTargetArray(id)
 
     targetArray.forEach(target => {
@@ -148,6 +155,8 @@ class ReactTooltip extends Component {
       target.removeEventListener('mousemove', this.updateTooltip)
       target.removeEventListener('mouseleave', this.hideTooltip)
     })
+
+    if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip)
   }
 
   /**
@@ -173,7 +182,7 @@ class ReactTooltip extends Component {
       border: e.currentTarget.getAttribute('data-border') === 'true' || this.props.border || false,
       extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || ''
     }, () => {
-      this.addScrollListener()
+      this.addScrollListener(e)
       this.updateTooltip(e)
     })
   }
@@ -224,8 +233,9 @@ class ReactTooltip extends Component {
    * Add scroll eventlistener when tooltip show
    * automatically hide the tooltip when scrolling
    */
-  addScrollListener () {
-    window.addEventListener('scroll', ::this.hideTooltip)
+  addScrollListener (e) {
+    const isCaptureMode = this.isCapture(e.currentTarget)
+    window.addEventListener('scroll', ::this.hideTooltip, isCaptureMode)
   }
 
   removeScrollListener () {