react-tooltip - npm Package Compare versions

Comparing version 0.3.0 to 0.3.1

package.json

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

src/js/index.jsx

@@ -16,3 +16,52 @@ 'use strict';
   },
+  
+  getInitialState() {
+    return {
+      show: false,
+      placeholder: "",
+      x: "NONE",
+      y: "NONE",
+      place: "",
+      type: "",
+      effect: "",
+      position: {},
+    }
+  },
 
+  componentDidMount() {   
+    this._updatePosition();
+    this.bindListener();
+  },
+
+  componentWillUnmount() {
+    this.unbindListener();
+  },
+
+  componentWillUpdate() {
+    this.unbindListener();
+  },
+
+  componentDidUpdate(){
+    this._updatePosition();
+    this.bindListener();
+  },
+
+  bindListener() {
+    let targetArray = document.querySelectorAll("[data-tip]");
+    for(let i = 0; i < targetArray.length; i++) {
+      targetArray[i].addEventListener("mouseenter", this.showTooltip, false);
+      targetArray[i].addEventListener("mousemove", this.updateTooltip, false);
+      targetArray[i].addEventListener("mouseleave", this.hideTooltip, false);
+    }
+  },
+
+  unbindListener() {
+    let targetArray = document.querySelectorAll("[data-tip]");
+    for(let i = 0; i < targetArray.length; i++) {
+      targetArray[i].removeEventListener("mouseenter", this.showTooltip);
+      targetArray[i].removeEventListener("mousemove", this.updateTooltip);
+      targetArray[i].removeEventListener("mouseleave", this.hideTooltip);
+    }
+  },
+
   _updatePosition: function(){
@@ -67,40 +116,2 @@ let tipWidth = document.querySelector("[data-id='tooltip']")?document.querySelector("[data-id='tooltip']").clientWidth:0;
   
-  getInitialState() {
-    return {
-      show: false,
-      placeholder: "",
-      x: "NONE",
-      y: "NONE",
-      place: "",
-      type: "",
-      effect: "",
-      position: {},
-    }
-  },
-
-  componentDidMount() {
-    
-    this._updatePosition();
-    
-    let targetArray = document.querySelectorAll("[data-tip]");
-    for(let i = 0; i < targetArray.length; i++) {
-      targetArray[i].addEventListener("mouseenter", this.showTooltip, false);
-      targetArray[i].addEventListener("mousemove", this.updateTooltip, false);
-      targetArray[i].addEventListener("mouseleave", this.hideTooltip, false);
-    }
-  },
-
-  componentWillUnmount() {
-    let targetArray = document.querySelectorAll("[data-tip]");
-    for(let i = 0; i < targetArray.length; i++) {
-      targetArray[i].removeEventListener("mouseenter", this.showTooltip);
-      targetArray[i].removeEventListener("mousemove", this.updateTooltip);
-      targetArray[i].removeEventListener("mouseleave", this.hideTooltip);
-    }
-  },
-
-  componentDidUpdate(){
-    this._updatePosition();
-  },
-  
   showTooltip(e) {
@@ -168,2 +179,23 @@ this.setState({
 
+  render() {
+    let tooltipClass = classname(
+      'reactTooltip',
+      {"show": this.state.show},
+      {"place-top": this.state.place === "top"},
+      {"place-bottom": this.state.place === "bottom"},
+      {"place-left": this.state.place === "left"},
+      {"place-right": this.state.place === "right"},
+      {"type-dark": this.state.type === "dark"},
+      {"type-success": this.state.type === "success"},
+      {"type-warning": this.state.type === "warning"},
+      {"type-error": this.state.type === "error"},
+      {"type-info": this.state.type === "info"},
+      {"type-light": this.state.type === "light"}
+    );
+
+    return (
+      <span className={tooltipClass} data-id="tooltip">{this.state.placeholder}</span>
+    )
+  },
+
   trim(string) {
@@ -188,26 +220,4 @@ let newString = string.split("");
   },
-
-  render() {
-    
-    let tooltipClass = classname(
-      'reactTooltip',
-      {"show": this.state.show},
-      {"place-top": this.state.place === "top"},
-      {"place-bottom": this.state.place === "bottom"},
-      {"place-left": this.state.place === "left"},
-      {"place-right": this.state.place === "right"},
-      {"type-dark": this.state.type === "dark"},
-      {"type-success": this.state.type === "success"},
-      {"type-warning": this.state.type === "warning"},
-      {"type-error": this.state.type === "error"},
-      {"type-info": this.state.type === "info"},
-      {"type-light": this.state.type === "light"}
-    );
-
-    return (
-      <span className={tooltipClass} data-id="tooltip">{this.state.placeholder}</span>
-    )
-  }
 });
 
 export default ReactTooltip;

No alert changes

Improved metrics

Total package byte prevSize

25831

increased by0.69%

Lines of code

386

increased by2.66%

No dependency changes