Fix #67, improve customer event

ReactTooltip · Jan 11, 2016 · b4c38df · b4c38df
1 parent 61aec1f
commit b4c38df
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/dist/react-tooltip.js b/dist/react-tooltip.js
@@ -87,7 +87,7 @@ var ReactTooltip = (function (_Component) {
     _classCallCheck(this, ReactTooltip);
 
     _Component.call(this, props);
-    this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize');
+    this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize', 'bindClickListener');
     this.mount = true;
     this.state = {
       show: false,
@@ -156,12 +156,16 @@ var ReactTooltip = (function (_Component) {
     window.removeEventListener('resize', this.onWindowResize);
   };
 
+  /* TODO: optimize, bind has been trigger too maany times */
+
   ReactTooltip.prototype.bindListener = function bindListener() {
     var targetArray = this.getTargetArray();
 
     var dataEvent = undefined;
     for (var i = 0; i < targetArray.length; i++) {
-      targetArray[i].setAttribute('currentItem', 'false');
+      if (targetArray[i].getAttribute('currentItem') === null) {
+        targetArray[i].setAttribute('currentItem', 'false');
+      }
       dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
       if (dataEvent) {
         targetArray[i].removeEventListener(dataEvent, this.checkStatus);
@@ -247,18 +251,22 @@ var ReactTooltip = (function (_Component) {
    */
 
   ReactTooltip.prototype.checkStatus = function checkStatus(e) {
+    e.stopPropagation();
     if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
       this.hideTooltip(e);
     } else {
       e.currentTarget.setAttribute('currentItem', 'true');
+      /* when click other place, the tooltip should be removed */
+      window.removeEventListener('click', this.bindClickListener);
+      window.addEventListener('click', this.bindClickListener, false);
+
       this.showTooltip(e);
       this.setUntargetItems(e.currentTarget);
     }
   };
 
   ReactTooltip.prototype.setUntargetItems = function setUntargetItems(currentTarget) {
     var targetArray = this.getTargetArray();
-
     for (var i = 0; i < targetArray.length; i++) {
       if (currentTarget !== targetArray[i]) {
         targetArray[i].setAttribute('currentItem', 'false');
@@ -268,6 +276,11 @@ var ReactTooltip = (function (_Component) {
     }
   };
 
+  ReactTooltip.prototype.bindClickListener = function bindClickListener() {
+    this.globalHide();
+    window.removeEventListener('click', this.bindClickListener);
+  };
+
   /**
    * When mouse enter, show update
    */
@@ -379,8 +392,6 @@ var ReactTooltip = (function (_Component) {
     window.addEventListener('scroll', this.hideTooltip);
   };
 
-  /* Remove listener when tooltip hide */
-
   ReactTooltip.prototype.removeScrollListener = function removeScrollListener() {
     window.removeEventListener('scroll', this.hideTooltip);
   };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "react tooltip component",
   "main": "dist/react-tooltip.js",
   "scripts": {

diff --git a/src/index.js b/src/index.js
@@ -55,7 +55,7 @@ export default class ReactTooltip extends Component {
 
   constructor (props) {
     super(props)
-    this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize')
+    this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize', 'bindClickListener')
     this.mount = true
     this.state = {
       show: false,
@@ -115,12 +115,15 @@ export default class ReactTooltip extends Component {
     window.removeEventListener('resize', this.onWindowResize)
   }
 
+ /* TODO: optimize, bind has been trigger too maany times */
   bindListener () {
     let targetArray = this.getTargetArray()
 
     let dataEvent
     for (let i = 0; i < targetArray.length; i++) {
-      targetArray[i].setAttribute('currentItem', 'false')
+      if (targetArray[i].getAttribute('currentItem') === null) {
+        targetArray[i].setAttribute('currentItem', 'false')
+      }
       dataEvent = this.state.event || targetArray[i].getAttribute('data-event')
       if (dataEvent) {
         targetArray[i].removeEventListener(dataEvent, this.checkStatus)
@@ -197,18 +200,22 @@ export default class ReactTooltip extends Component {
    * Used in customer event
    */
   checkStatus (e) {
+    e.stopPropagation()
     if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
       this.hideTooltip(e)
     } else {
       e.currentTarget.setAttribute('currentItem', 'true')
+      /* when click other place, the tooltip should be removed */
+      window.removeEventListener('click', this.bindClickListener)
+      window.addEventListener('click', this.bindClickListener, false)
+
       this.showTooltip(e)
       this.setUntargetItems(e.currentTarget)
     }
   }
 
   setUntargetItems (currentTarget) {
     let targetArray = this.getTargetArray()
-
     for (let i = 0; i < targetArray.length; i++) {
       if (currentTarget !== targetArray[i]) {
         targetArray[i].setAttribute('currentItem', 'false')
@@ -218,6 +225,11 @@ export default class ReactTooltip extends Component {
     }
   }
 
+  bindClickListener () {
+    this.globalHide()
+    window.removeEventListener('click', this.bindClickListener)
+  }
+
   /**
    * When mouse enter, show update
    */
@@ -311,7 +323,6 @@ export default class ReactTooltip extends Component {
     window.addEventListener('scroll', this.hideTooltip)
   }
 
-  /* Remove listener when tooltip hide */
   removeScrollListener () {
     window.removeEventListener('scroll', this.hideTooltip)
   }