react-tooltip - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

dist/react-tooltip.js

@@ -50,37 +50,39 @@ 'use strict';
   updateTooltip: function updateTooltip(e) {
-    if (this.state.effect === 'float') {
-      this.setState({
-        show: true,
-        x: e.clientX,
-        y: e.clientY
-      });
-    } else if (this.state.effect === 'solid') {
-      var targetTop = e.target.getBoundingClientRect().top;
-      var targetLeft = e.target.getBoundingClientRect().left;
-      var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0;
-      var tipHeight = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientHeight : 0;
-      var targetWidth = e.target.clientWidth;
-      var targetHeight = e.target.clientHeight;
-      var place = this.state.place;
+    if (this.trim(this.state.placeholder).length > 0) {
+      if (this.state.effect === 'float') {
+        this.setState({
+          show: true,
+          x: e.clientX,
+          y: e.clientY
+        });
+      } else if (this.state.effect === 'solid') {
+        var targetTop = e.target.getBoundingClientRect().top;
+        var targetLeft = e.target.getBoundingClientRect().left;
+        var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0;
+        var tipHeight = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientHeight : 0;
+        var targetWidth = e.target.clientWidth;
+        var targetHeight = e.target.clientHeight;
+        var place = this.state.place;
 
-      var x = undefined,
-          y = undefined;
-      if (place === 'top') {
-        x = targetLeft - tipWidth / 2 + targetWidth / 2;
-        y = targetTop - tipHeight - 8;
-      } else if (place === 'bottom') {
-        x = targetLeft - tipWidth / 2 + targetWidth / 2;
-        y = targetTop + targetHeight + 8;
-      } else if (place === 'left') {
-        x = targetLeft - tipWidth - 6;
-        y = targetTop + targetHeight / 2 - tipHeight / 2;
-      } else if (place === 'right') {
-        x = targetLeft + targetWidth + 6;
-        y = targetTop + targetHeight / 2 - tipHeight / 2;
+        var x = undefined,
+            y = undefined;
+        if (place === 'top') {
+          x = targetLeft - tipWidth / 2 + targetWidth / 2;
+          y = targetTop - tipHeight - 8;
+        } else if (place === 'bottom') {
+          x = targetLeft - tipWidth / 2 + targetWidth / 2;
+          y = targetTop + targetHeight + 8;
+        } else if (place === 'left') {
+          x = targetLeft - tipWidth - 6;
+          y = targetTop + targetHeight / 2 - tipHeight / 2;
+        } else if (place === 'right') {
+          x = targetLeft + targetWidth + 6;
+          y = targetTop + targetHeight / 2 - tipHeight / 2;
+        }
+        this.setState({
+          show: true,
+          x: this.state.x === 'NONE' ? x : this.state.x,
+          y: this.state.y === 'NONE' ? y : this.state.y
+        });
       }
-      this.setState({
-        show: true,
-        x: this.state.x === 'NONE' ? x : this.state.x,
-        y: this.state.y === 'NONE' ? y : this.state.y
-      });
     }
@@ -97,6 +99,25 @@ },
 
+  trim: function trim(string) {
+    var newString = string.split('');
+    var firstCount = 0,
+        lastCount = 0;
+    for (var i = 0; i < string.length; i++) {
+      if (string[i] !== ' ') {
+        break;
+      }
+      firstCount++;
+    }
+    for (var i = string.length - 1; i >= 0; i--) {
+      if (string[i] !== ' ') {
+        break;
+      }
+      lastCount++;
+    }
+    newString.splice(0, firstCount);
+    newString.splice(-lastCount, lastCount);
+    return newString.join('');
+  },
+
   componentDidMount: function componentDidMount() {
-    var targetArray = Array.prototype.slice.apply(document.querySelectorAll('[data-tip]')).filter(function (target, index) {
-      return target.getAttribute('data-tip').length > 0;
-    });
+    var targetArray = document.querySelectorAll('[data-tip]');
     for (var i = 0; i < targetArray.length; i++) {
@@ -110,5 +131,3 @@ targetArray[i].addEventListener('mouseenter', this.showTooltip, false);
   componentWillUnmount: function componentWillUnmount() {
-    var targetArray = Array.prototype.slice.apply(document.querySelectorAll('[data-tip]')).filter(function (target, index) {
-      return target.getAttribute('data-tip').length > 0;
-    });
+    var targetArray = document.querySelectorAll('[data-tip]');
     for (var i = 0; i < targetArray.length; i++) {
@@ -115,0 +134,0 @@ targetArray[i].removeEventListener('mouseenter', this.showTooltip);

package.json

 {
   "name": "react-tooltip",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "main": "dist/react-tooltip.js",

src/js/index.jsx

@@ -39,39 +39,41 @@ 'use strict';
   updateTooltip(e) {
-    if(this.state.effect === "float") {
-      this.setState({
-        show: true,
-        x: e.clientX,
-        y: e.clientY
-      })
-    }
-    else if(this.state.effect === "solid"){
-      let targetTop = e.target.getBoundingClientRect().top;
-      let targetLeft = e.target.getBoundingClientRect().left;
-      let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
-      let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0;
-      let targetWidth = e.target.clientWidth;
-      let targetHeight = e.target.clientHeight;
-      let { place } = this.state;
-      let x, y ;
-      if(place === "top") {
-        x = targetLeft - (tipWidth/2) + (targetWidth/2);
-        y = targetTop - tipHeight - 8;
+    if(this.trim(this.state.placeholder).length > 0) {
+      if(this.state.effect === "float") {
+        this.setState({
+          show: true,
+          x: e.clientX,
+          y: e.clientY
+        })
       }
-      else if(place === "bottom") {
-        x = targetLeft - (tipWidth/2) + (targetWidth/2);
-        y = targetTop + targetHeight + 8;
+      else if(this.state.effect === "solid"){
+        let targetTop = e.target.getBoundingClientRect().top;
+        let targetLeft = e.target.getBoundingClientRect().left;
+        let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
+        let tipHeight = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientHeight:0;
+        let targetWidth = e.target.clientWidth;
+        let targetHeight = e.target.clientHeight;
+        let { place } = this.state;
+        let x, y ;
+        if(place === "top") {
+          x = targetLeft - (tipWidth/2) + (targetWidth/2);
+          y = targetTop - tipHeight - 8;
+        }
+        else if(place === "bottom") {
+          x = targetLeft - (tipWidth/2) + (targetWidth/2);
+          y = targetTop + targetHeight + 8;
+        }
+        else if(place === "left") {
+          x = targetLeft - tipWidth - 6;
+          y = targetTop + (targetHeight/2) - (tipHeight/2);
+        }
+        else if(place === "right") {
+          x = targetLeft + targetWidth + 6;
+          y = targetTop + (targetHeight/2) - (tipHeight/2);
+        }
+        this.setState({
+          show: true,
+          x: this.state.x === "NONE" ? x : this.state.x,
+          y: this.state.y === "NONE" ? y : this.state.y
+        })
       }
-      else if(place === "left") {
-        x = targetLeft - tipWidth - 6;
-        y = targetTop + (targetHeight/2) - (tipHeight/2);
-      }
-      else if(place === "right") {
-        x = targetLeft + targetWidth + 6;
-        y = targetTop + (targetHeight/2) - (tipHeight/2);
-      }
-      this.setState({
-        show: true,
-        x: this.state.x === "NONE" ? x : this.state.x,
-        y: this.state.y === "NONE" ? y : this.state.y
-      })
     }
@@ -88,7 +90,24 @@ },
 
+  trim(string) {
+    let newString = string.split("");
+    let firstCount = 0, lastCount = 0;
+    for(let i = 0; i < string.length; i++) {
+      if(string[i] !== " ") {
+        break;
+      }
+      firstCount++;
+    }
+    for(let i = string.length-1; i >= 0; i--) {
+      if(string[i] !== " ") {
+        break;
+      }
+      lastCount++;
+    }
+    newString.splice(0, firstCount);
+    newString.splice(-lastCount, lastCount);
+    return newString.join("");
+  },
+
   componentDidMount() {
-    let targetArray = Array.prototype.slice.apply(document.querySelectorAll("[data-tip]"))
-      .filter((target, index) => {
-        return target.getAttribute("data-tip").length > 0;
-      });
+    let targetArray = document.querySelectorAll("[data-tip]");
     for(let i = 0; i < targetArray.length; i++) {
@@ -102,6 +121,3 @@ targetArray[i].addEventListener("mouseenter", this.showTooltip, false);
   componentWillUnmount() {
-    let targetArray = Array.prototype.slice.apply(document.querySelectorAll("[data-tip]"))
-      .filter((target, index) => {
-        return target.getAttribute("data-tip").length > 0;
-      });
+    let targetArray = document.querySelectorAll("[data-tip]");
     for(let i = 0; i < targetArray.length; i++) {
@@ -108,0 +124,0 @@ targetArray[i].removeEventListener("mouseenter", this.showTooltip);

No alert changes

Improved metrics

Total package byte prevSize

23466

increased by3.1%

Lines of code

327

increased by11.22%

No dependency changes