react-tooltip - npm Package Compare versions

Comparing version 0.3.8 to 0.5.0

dist/react-tooltip.js

 'use strict';
 
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
+exports.__esModule = true;
 
-var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@@ -25,34 +19,35 @@
 
-var ReactTooltip = (function (_React$Component) {
-  _inherits(ReactTooltip, _React$Component);
+var _style = require('./style');
 
-  _createClass(ReactTooltip, [{
-    key: '_bind',
-    value: function _bind() {
-      var _this = this;
+var _style2 = _interopRequireDefault(_style);
 
-      for (var _len = arguments.length, handlers = Array(_len), _key = 0; _key < _len; _key++) {
-        handlers[_key] = arguments[_key];
-      }
+var ReactTooltip = (function (_Component) {
+  _inherits(ReactTooltip, _Component);
 
-      handlers.forEach(function (handler) {
-        return _this[handler] = _this[handler].bind(_this);
-      });
+  ReactTooltip.prototype._bind = function _bind() {
+    var _this = this;
+
+    for (var _len = arguments.length, handlers = Array(_len), _key = 0; _key < _len; _key++) {
+      handlers[_key] = arguments[_key];
     }
-  }]);
 
+    handlers.forEach(function (handler) {
+      return _this[handler] = _this[handler].bind(_this);
+    });
+  };
+
   function ReactTooltip() {
     _classCallCheck(this, ReactTooltip);
 
-    _get(Object.getPrototypeOf(ReactTooltip.prototype), 'constructor', this).call(this);
-    this._bind("showTooltip", "updateTooltip", "hideTooltip");
+    _Component.call(this);
+    this._bind('showTooltip', 'updateTooltip', 'hideTooltip');
     this.state = {
       show: false,
       multilineCount: 0,
-      placeholder: "",
-      x: "NONE",
-      y: "NONE",
-      place: "",
-      type: "",
-      effect: "",
+      placeholder: '',
+      x: 'NONE',
+      y: 'NONE',
+      place: '',
+      type: '',
+      effect: '',
       multiline: false,
@@ -63,222 +58,216 @@ position: {}
 
-  _createClass(ReactTooltip, [{
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this._updatePosition();
-      this.bindListener();
+  ReactTooltip.prototype.componentDidMount = function componentDidMount() {
+    this._updatePosition();
+    this.bindListener();
+  };
+
+  ReactTooltip.prototype.componentWillUnmount = function componentWillUnmount() {
+    this.unbindListener();
+    var tag = document.querySelector('style[id="react-tooltip"]');
+    document.getElementsByTagName('head')[0].removeChild(tag);
+  };
+
+  ReactTooltip.prototype.componentWillUpdate = function componentWillUpdate() {
+    this.unbindListener();
+  };
+
+  ReactTooltip.prototype.componentDidUpdate = function componentDidUpdate() {
+    this._updatePosition();
+    this.bindListener();
+  };
+
+  ReactTooltip.prototype.bindListener = function bindListener() {
+    var targetArray = document.querySelectorAll('[data-tip]');
+    for (var 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);
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.unbindListener();
+  };
+
+  ReactTooltip.prototype.unbindListener = function unbindListener() {
+    var targetArray = document.querySelectorAll('[data-tip]');
+    for (var i = 0; i < targetArray.length; i++) {
+      targetArray[i].removeEventListener('mouseenter', this.showTooltip);
+      targetArray[i].removeEventListener('mousemove', this.updateTooltip);
+      targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
     }
-  }, {
-    key: 'componentWillUpdate',
-    value: function componentWillUpdate() {
-      this.unbindListener();
-    }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      this._updatePosition();
-      this.bindListener();
-    }
-  }, {
-    key: 'bindListener',
-    value: function bindListener() {
-      var targetArray = document.querySelectorAll("[data-tip]");
-      for (var 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);
-      }
-    }
-  }, {
-    key: 'unbindListener',
-    value: function unbindListener() {
-      var targetArray = document.querySelectorAll("[data-tip]");
-      for (var i = 0; i < targetArray.length; i++) {
-        targetArray[i].removeEventListener("mouseenter", this.showTooltip);
-        targetArray[i].removeEventListener("mousemove", this.updateTooltip);
-        targetArray[i].removeEventListener("mouseleave", this.hideTooltip);
-      }
-    }
-  }, {
-    key: '_updatePosition',
-    value: function _updatePosition() {
-      var node = _react2['default'].findDOMNode(this);
+  };
 
-      var tipWidth = node.clientWidth;
-      var tipHeight = node.clientHeight;
-      var offset = { x: 0, y: 0 };
-      var effect = this.state.effect;
+  ReactTooltip.prototype._updatePosition = function _updatePosition() {
+    var node = _react2['default'].findDOMNode(this);
 
-      if (effect === "float") {
-        if (this.state.place === "top") {
-          offset.x = -(tipWidth / 2);
-          offset.y = -50;
-        } else if (this.state.place === "bottom") {
-          offset.x = -(tipWidth / 2);
-          offset.y = 30;
-        } else if (this.state.place === "left") {
-          offset.x = -(tipWidth + 15);
-          offset.y = -(tipHeight / 2);
-        } else if (this.state.place === "right") {
-          offset.x = 10;
-          offset.y = -(tipHeight / 2);
-        }
-      }
-      var xPosition = 0;var yPosition = 0;var position = this.state.position;
+    var tipWidth = node.clientWidth;
+    var tipHeight = node.clientHeight;
+    var offset = { x: 0, y: 0 };
+    var effect = this.state.effect;
 
-      if (Object.prototype.toString.apply(position) === "[object String]") {
-        position = JSON.parse(position.toString().replace(/\'/g, "\""));
+    if (effect === 'float') {
+      if (this.state.place === 'top') {
+        offset.x = -(tipWidth / 2);
+        offset.y = -50;
+      } else if (this.state.place === 'bottom') {
+        offset.x = -(tipWidth / 2);
+        offset.y = 30;
+      } else if (this.state.place === 'left') {
+        offset.x = -(tipWidth + 15);
+        offset.y = -(tipHeight / 2);
+      } else if (this.state.place === 'right') {
+        offset.x = 10;
+        offset.y = -(tipHeight / 2);
       }
-      for (var key in position) {
-        if (key === "top") {
-          yPosition -= parseInt(position[key]);
-        } else if (key === "bottom") {
-          yPosition += parseInt(position[key]);
-        } else if (key === "left") {
-          xPosition -= parseInt(position[key]);
-        } else if (key === "right") {
-          xPosition += parseInt(position[key]);
-        }
-      }
+    }
+    var xPosition = 0;
+    var yPosition = 0;
+    var position = this.state.position;
 
-      node.style.left = this.state.x + offset.x + xPosition + 'px';
-      node.style.top = this.state.y + offset.y + yPosition + 'px';
+    if (Object.prototype.toString.apply(position) === '[object String]') {
+      position = JSON.parse(position.toString().replace(/\'/g, '\"'));
     }
-  }, {
-    key: 'showTooltip',
-    value: function showTooltip(e) {
-      var originTooltip = e.target.getAttribute("data-tip"),
-          regexp = /<br\s*\W*>|\W+/,
-          multiline = e.target.getAttribute("data-multiline") ? e.target.getAttribute("data-multiline") : this.props.multiline ? this.props.multiline : false;
-      var tooltipText = undefined,
-          multilineCount = 0;
-      if (!multiline || multiline === "false" || !regexp.test(originTooltip)) {
-        tooltipText = originTooltip;
-      } else {
-        tooltipText = originTooltip.split(regexp).map(function (d, i) {
-          multilineCount += 1;
-          return _react2['default'].createElement(
-            'span',
-            { key: i, className: 'multi-line' },
-            d
-          );
-        });
+    for (var key in position) {
+      if (key === 'top') {
+        yPosition -= parseInt(position[key], 10);
+      } else if (key === 'bottom') {
+        yPosition += parseInt(position[key], 10);
+      } else if (key === 'left') {
+        xPosition -= parseInt(position[key], 10);
+      } else if (key === 'right') {
+        xPosition += parseInt(position[key], 10);
       }
-      this.setState({
-        placeholder: tooltipText,
-        multilineCount: multilineCount,
-        place: e.target.getAttribute("data-place") ? e.target.getAttribute("data-place") : this.props.place ? this.props.place : "top",
+    }
 
-        type: e.target.getAttribute("data-type") ? e.target.getAttribute("data-type") : this.props.type ? this.props.type : "dark",
+    node.style.left = this.state.x + offset.x + xPosition + 'px';
+    node.style.top = this.state.y + offset.y + yPosition + 'px';
+  };
 
-        effect: e.target.getAttribute("data-effect") ? e.target.getAttribute("data-effect") : this.props.effect ? this.props.effect : "float",
-
-        position: e.target.getAttribute("data-position") ? e.target.getAttribute("data-position") : this.props.position ? this.props.position : {},
-
-        multiline: multiline
-
+  ReactTooltip.prototype.showTooltip = function showTooltip(e) {
+    var originTooltip = e.target.getAttribute('data-tip');
+    var regexp = /<br\s*\W*>|\W+/;
+    var multiline = e.target.getAttribute('data-multiline') ? e.target.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
+    var tooltipText = undefined;
+    var multilineCount = 0;
+    if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
+      tooltipText = originTooltip;
+    } else {
+      tooltipText = originTooltip.split(regexp).map(function (d, i) {
+        multilineCount += 1;
+        return _react2['default'].createElement(
+          'span',
+          { key: i, className: 'multi-line' },
+          d
+        );
       });
-      this.updateTooltip(e);
     }
-  }, {
-    key: 'updateTooltip',
-    value: function updateTooltip(e) {
-      if (this.trim(this.state.placeholder).length > 0) {
-        var _state = this.state;
-        var multilineCount = _state.multilineCount;
-        var place = _state.place;
+    this.setState({
+      placeholder: tooltipText,
+      multilineCount: multilineCount,
+      place: e.target.getAttribute('data-place') ? e.target.getAttribute('data-place') : this.props.place ? this.props.place : 'top',
+      type: e.target.getAttribute('data-type') ? e.target.getAttribute('data-type') : this.props.type ? this.props.type : 'dark',
+      effect: e.target.getAttribute('data-effect') ? e.target.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float',
+      position: e.target.getAttribute('data-position') ? e.target.getAttribute('data-position') : this.props.position ? this.props.position : {},
+      multiline: multiline
+    });
+    this.updateTooltip(e);
+  };
 
-        if (this.state.effect === "float") {
-          var offsetY = !multilineCount ? e.clientY : place !== "top" ? e.clientY : e.clientY - multilineCount * 14.5;
+  ReactTooltip.prototype.updateTooltip = function updateTooltip(e) {
+    if (this.trim(this.state.placeholder).length > 0) {
+      var _state = this.state;
+      var multilineCount = _state.multilineCount;
+      var place = _state.place;
 
-          this.setState({
-            show: true,
-            x: e.clientX,
-            y: offsetY
-          });
-        } else if (this.state.effect === "solid") {
-          var targetTop = e.target.getBoundingClientRect().top;
-          var targetLeft = e.target.getBoundingClientRect().left;
-          var node = _react2['default'].findDOMNode(this);
-          var tipWidth = node.clientWidth;
-          var tipHeight = node.clientHeight;
-          var targetWidth = e.target.clientWidth;
-          var targetHeight = e.target.clientHeight;
-          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
-          });
+      if (this.state.effect === 'float') {
+        var offsetY = !multilineCount ? e.clientY : place !== 'top' ? e.clientY : e.clientY - multilineCount * 14.5;
+        this.setState({
+          show: true,
+          x: e.clientX,
+          y: offsetY
+        });
+      } else if (this.state.effect === 'solid') {
+        var boundingClientRect = e.target.getBoundingClientRect();
+        var targetTop = boundingClientRect.top;
+        var targetLeft = boundingClientRect.left;
+        var node = _react2['default'].findDOMNode(this);
+        var tipWidth = node.clientWidth;
+        var tipHeight = node.clientHeight;
+        var targetWidth = e.target.clientWidth;
+        var targetHeight = e.target.clientHeight;
+        var x = undefined;
+        var 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
+        });
       }
     }
-  }, {
-    key: 'hideTooltip',
-    value: function hideTooltip(e) {
-      this.setState({
-        show: false,
-        x: "NONE",
-        y: "NONE"
-      });
+  };
+
+  ReactTooltip.prototype.hideTooltip = function hideTooltip(e) {
+    this.setState({
+      show: false,
+      x: 'NONE',
+      y: 'NONE'
+    });
+  };
+
+  ReactTooltip.prototype.render = function render() {
+    var tooltipClass = _classnames2['default']('__react_component_tooltip', { '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' });
+
+    if (!document.getElementsByTagName('head')[0].querySelector('style[id="react-tooltip"]')) {
+      var tag = document.createElement('style');
+      tag.id = 'react-tooltip';
+      tag.innerHTML = _style2['default'];
+      document.getElementsByTagName('head')[0].appendChild(tag);
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var tooltipClass = (0, _classnames2['default'])('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 _react2['default'].createElement(
-        'span',
-        { className: tooltipClass, 'data-id': 'tooltip' },
-        this.state.placeholder
-      );
+    return _react2['default'].createElement(
+      'span',
+      { className: tooltipClass, 'data-id': 'tooltip' },
+      this.state.placeholder
+    );
+  };
+
+  ReactTooltip.prototype.trim = function trim(string) {
+    if (Object.prototype.toString.call(string) !== '[object String]') {
+      return string;
     }
-  }, {
-    key: 'trim',
-    value: function trim(string) {
-      if (Object.prototype.toString.call(string) !== "[object String]") {
-        return string;
+    var newString = string.split('');
+    var firstCount = 0;
+    var lastCount = 0;
+    for (var i = 0; i < string.length; i++) {
+      if (string[i] !== ' ') {
+        break;
       }
-      var newString = string.split("");
-      var firstCount = 0,
-          lastCount = 0;
-      for (var i = 0; i < string.length; i++) {
-        if (string[i] !== " ") {
-          break;
-        }
-        firstCount++;
+      firstCount++;
+    }
+    for (var i = string.length - 1; i >= 0; i--) {
+      if (string[i] !== ' ') {
+        break;
       }
-      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("");
+      lastCount++;
     }
-  }]);
+    newString.splice(0, firstCount);
+    newString.splice(-lastCount, lastCount);
+    return newString.join('');
+  };
 
   return ReactTooltip;
-})(_react2['default'].Component);
+})(_react.Component);
 
+exports['default'] = ReactTooltip;
+
 ReactTooltip.displayName = 'ReactTooltip';
@@ -293,4 +282,2 @@
 };
-
-exports['default'] = ReactTooltip;
 module.exports = exports['default'];

package.json

 {
   "name": "react-tooltip",
-  "version": "0.3.8",
+  "version": "0.5.0",
   "description": "react tooltip component",
   "main": "dist/react-tooltip.js",
   "scripts": {
-    "test": "jest",
-    "build:js": "babel src/js/index.jsx --out-file dist/react-tooltip.js",
-    "build:css": "node-sass --output-style compressed src/scss/style.scss dist/react-tooltip.min.css",
-    "build": "npm run build:js & npm run build:css & cp src/scss/style.scss dist/react-tooltip.scss & cp src/scss/style.scss example/src/react-tooltip.scss & cp src/js/index.jsx example/src/react-tooltip.js"
+    "check": "standard --verbose | snazzy src/index.js",
+    "test": "npm run check",
+    "devjs": "node bin/transferSass.js & watchify -t babelify -o ./example/dist/index.js ./example/src/index.js -dv",
+    "devcss": "node-sass example/src/index.scss example/dist/index.css & node-sass -w example/src/index.scss example/dist/index.css",
+    "predev": "rm -rf example/dist",
+    "dev": "mkdir -p ./example/dist & npm run devjs & npm run devcss & http-server example -p 8888 -s -o",
+    "deployjs": "babel src/index.js --out-file dist/react-tooltip.js",
+    "predeploycss": "cp src/index.scss dist/react-tooltip.scss",
+    "deploycss": "node-sass --output-style compressed src/index.scss dist/react-tooltip.min.css",
+    "predeploy": "rm -rf dist",
+    "deploy": "mkdir dist & npm run deployjs & npm run deploycss"
   },
-  "jest": {
-    "scriptPreprocessor": "<rootDir>/__tests__/preprocessor.js",
-    "unmockedModulePathPatterns": [
-      "<rootDir>/node_modules/react"
+  "standard": {
+    "parser": "babel-eslint",
+    "ignore": [
+      "dist/",
+      "src/style.js"
     ]
@@ -42,12 +50,11 @@ },
     "babel": "^5.3.1",
-    "babel-eslint": "^4.0.5",
+    "babel-eslint": "^4.1.1",
     "babelify": "^6.0.2",
-    "eslint": "^1.0.0",
-    "eslint-plugin-react": "^3.1.0",
-    "jest": "^0.1.39",
-    "jest-cli": "^0.4.0",
-    "node-sass": "^3.0.0",
-    "react-tools": "^0.13.2",
+    "http-server": "^0.8.0",
+    "node-sass": "^3.3.2",
+    "snazzy": "^2.0.1",
+    "standard": "^5.2.2",
+    "tape": "^4.2.0",
     "watchify": "^3.2.1"
   }
 }

README.md

 # react-tooltip
+[![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
+[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)
+[![Circle CI](https://circleci.com/gh/wwayne/react-tooltip/tree/master.svg?style=svg)](https://circleci.com/gh/wwayne/react-tooltip/tree/master)
 
-React tooltip component, inspired by tooltipsy (a jquery plugin I've used)
 
-[![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
 
-
 ### Installation
 
 ```sh
-npm install react-tooltip --save
+npm install react-tooltip
 ```
@@ -21,13 +21,8 @@
 ```
-2 . Include css or scss file(you can find them in dist folder) into your project
 
-```js
-sass: @import "react-tooltip";
-``` 
+2 . Add data-tip = "your placeholder" to your element
 
-3 . Add data-tip = "your placeholder" to your element
-
 	<p data-tip="hello world">Tooltip</p>
 
-4 . Including react-tooltip component
+3 . Including react-tooltip component
 
@@ -34,0 +29,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36541

increased by11.51%

Dev dependency count

9

decreased by-10%

Worsened metrics

Lines of code

488

decreased by-8.96%

Number of lines in readme file

94

decreased by-5.05%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes