react-tooltip - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

dist/react-tooltip.js

@@ -7,4 +7,12 @@ 'use strict';
 
+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 }; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var _react = require('react');
@@ -18,200 +26,236 @@
 
-var ReactTooltip = _react2['default'].createClass({
+var ReactTooltip = (function (_React$Component) {
+  _inherits(ReactTooltip, _React$Component);
 
-  displayName: 'ReactTooltip',
+  _createClass(ReactTooltip, [{
+    key: '_bind',
+    value: function _bind() {
+      var _this = this;
 
-  propTypes: {
-    place: _react2['default'].PropTypes.string,
-    type: _react2['default'].PropTypes.string,
-    effect: _react2['default'].PropTypes.string,
-    positon: _react2['default'].PropTypes.object
-  },
+      for (var _len = arguments.length, handlers = Array(_len), _key = 0; _key < _len; _key++) {
+        handlers[_key] = arguments[_key];
+      }
 
-  getInitialState: function getInitialState() {
-    return {
+      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");
+    this.state = {
       show: false,
-      placeholder: '',
-      x: 'NONE',
-      y: 'NONE',
-      place: '',
-      type: '',
-      effect: '',
+      placeholder: "",
+      x: "NONE",
+      y: "NONE",
+      place: "",
+      type: "",
+      effect: "",
       position: {}
     };
-  },
+  }
 
-  componentDidMount: function componentDidMount() {
-    this._updatePosition();
-    this.bindListener();
-  },
+  _createClass(ReactTooltip, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this._updatePosition();
+      this.bindListener();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unbindListener();
+    }
+  }, {
+    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);
 
-  componentWillUnmount: function componentWillUnmount() {
-    this.unbindListener();
-  },
+      var tipWidth = node.clientWidth;
+      var tipHeight = node.clientHeight;
+      var offset = { x: 0, y: 0 };
+      var effect = this.state.effect;
 
-  componentWillUpdate: function componentWillUpdate() {
-    this.unbindListener();
-  },
+      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;
 
-  componentDidUpdate: function componentDidUpdate() {
-    this._updatePosition();
-    this.bindListener();
-  },
+      if (Object.prototype.toString.apply(position) === "[object String]") {
+        position = JSON.parse(position.toString().replace(/\'/g, "\""));
+      }
+      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]);
+        }
+      }
 
-  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);
+      node.style.left = this.state.x + offset.x + xPosition + 'px';
+      node.style.top = this.state.y + offset.y + yPosition + 'px';
     }
-  },
-
-  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: 'showTooltip',
+    value: function showTooltip(e) {
+      this.setState({
+        placeholder: e.target.getAttribute("data-tip"),
+        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 : {}
+      });
+      this.updateTooltip(e);
     }
-  },
+  }, {
+    key: 'updateTooltip',
+    value: function updateTooltip(e) {
+      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 node = _react2['default'].findDOMNode(this);
+          var tipWidth = node.clientWidth;
+          var tipHeight = node.clientHeight;
+          var targetWidth = e.target.clientWidth;
+          var targetHeight = e.target.clientHeight;
+          var place = this.state.place;
 
-  _updatePosition: 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;
-
-    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 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
+          });
+        }
       }
     }
-    var xPosition = 0;var yPosition = 0;var position = this.state.position;
+  }, {
+    key: 'hideTooltip',
+    value: function hideTooltip(e) {
+      this.setState({
+        show: false,
+        x: "NONE",
+        y: "NONE"
+      });
+    }
+  }, {
+    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" });
 
-    if (Object.prototype.toString.apply(position) === '[object String]') {
-      position = JSON.parse(position.toString().replace(/\'/g, '"'));
+      return _react2['default'].createElement(
+        'span',
+        { className: tooltipClass, 'data-id': 'tooltip' },
+        this.state.placeholder
+      );
     }
-    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]);
+  }, {
+    key: 'trim',
+    value: 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++;
       }
-    }
-
-    node.style.left = this.state.x + offset.x + xPosition + 'px';
-    node.style.top = this.state.y + offset.y + yPosition + 'px';
-  },
-
-  showTooltip: function showTooltip(e) {
-    this.setState({
-      placeholder: e.target.getAttribute('data-tip'),
-      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 : {}
-    });
-    this.updateTooltip(e);
-  },
-
-  updateTooltip: function updateTooltip(e) {
-    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 node = _react2['default'].findDOMNode(this);
-        var tipWidth = node.clientWidth;
-        var tipHeight = node.clientHeight;
-        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;
+      for (var i = string.length - 1; i >= 0; i--) {
+        if (string[i] !== " ") {
+          break;
         }
-        this.setState({
-          show: true,
-          x: this.state.x === 'NONE' ? x : this.state.x,
-          y: this.state.y === 'NONE' ? y : this.state.y
-        });
+        lastCount++;
       }
+      newString.splice(0, firstCount);
+      newString.splice(-lastCount, lastCount);
+      return newString.join("");
     }
-  },
+  }]);
 
-  hideTooltip: function hideTooltip(e) {
-    this.setState({
-      show: false,
-      x: 'NONE',
-      y: 'NONE'
-    });
-  },
+  return ReactTooltip;
+})(_react2['default'].Component);
 
-  render: 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' });
+ReactTooltip.displayName = 'ReactTooltip';
 
-    return _react2['default'].createElement(
-      'span',
-      { className: tooltipClass, 'data-id': 'tooltip' },
-      this.state.placeholder
-    );
-  },
+ReactTooltip.propTypes = {
+  place: _react.PropTypes.string,
+  type: _react.PropTypes.string,
+  effect: _react.PropTypes.string,
+  positon: _react.PropTypes.object
+};
 
-  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('');
-  }
-});
-
 exports['default'] = ReactTooltip;
 module.exports = exports['default'];

package.json

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

README.md

@@ -68,6 +68,6 @@ # react-tooltip
 Specific element:
-	<p data-tip="tooltip" data-type="float"></p>
+	<p data-tip="tooltip" data-effect="float"></p>
 	
 global:	
-	<ReactTooltip type="float"/>
+	<ReactTooltip effect="float"/>
 ```
@@ -74,0 +74,0 @@

src/js/index.jsx

 'use strict';
 
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classname from 'classnames';
 
-const ReactTooltip = React.createClass({
+class ReactTooltip extends React.Component {
 
-  displayName: 'ReactTooltip',
+  _bind(...handlers) {
+    handlers.forEach(handler => this[handler] = this[handler].bind(this));
+  }
 
-  propTypes: {
-    place: React.PropTypes.string,
-    type: React.PropTypes.string,
-    effect: React.PropTypes.string,
-    positon: React.PropTypes.object,
-  },
-  
-  getInitialState() {
-    return {
+  constructor() {
+    super();
+    this._bind("showTooltip", "updateTooltip", "hideTooltip");
+    this.state = {
       show: false,
@@ -26,18 +23,18 @@ placeholder: "",
       effect: "",
-      position: {},
-    }
-  },
+      position: {}
+    };
+  }
 
-  componentDidMount() {   
+  componentDidMount() {
     this._updatePosition();
     this.bindListener();
-  },
+  }
 
   componentWillUnmount() {
     this.unbindListener();
-  },
+  }
 
   componentWillUpdate() {
     this.unbindListener();
-  },
+  }
 
@@ -47,3 +44,3 @@ componentDidUpdate(){
     this.bindListener();
-  },
+  }
 
@@ -57,3 +54,3 @@ bindListener() {
     }
-  },
+  }
 
@@ -67,7 +64,7 @@ unbindListener() {
     }
-  },
+  }
 
-  _updatePosition: function(){
+  _updatePosition(){
     let node = React.findDOMNode(this);
-    
+
     let tipWidth = node.clientWidth;
@@ -97,3 +94,3 @@ let tipHeight = node.clientHeight;
 
-    if(Object.prototype.toString.apply(position) === "[object String]") {     
+    if(Object.prototype.toString.apply(position) === "[object String]") {
       position = JSON.parse(position.toString().replace(/\'/g,"\""));
@@ -116,8 +113,8 @@
     }
-    
+
     node.style.left = this.state.x + offset.x + xPosition + 'px';
     node.style.top = this.state.y + offset.y + yPosition + 'px';
-    
-  },
-  
+
+  }
+
   showTooltip(e) {
@@ -132,3 +129,3 @@ this.setState({
     this.updateTooltip(e);
-  },
+  }
 
@@ -177,3 +174,3 @@ updateTooltip(e) {
     }
-  },
+  }
 
@@ -186,3 +183,3 @@ hideTooltip(e) {
     });
-  },
+  }
 
@@ -208,3 +205,3 @@ render() {
     )
-  },
+  }
 
@@ -229,5 +226,15 @@ trim(string) {
     return newString.join("");
-  },
-});
+  }
 
+}
+
+ReactTooltip.displayName = 'ReactTooltip';
+
+ReactTooltip.propTypes = {
+  place: PropTypes.string,
+  type: PropTypes.string,
+  effect: PropTypes.string,
+  positon: PropTypes.object
+};
+
 export default ReactTooltip;

No alert changes

Improved metrics

Total package byte prevSize

28991

increased by12.74%

Lines of code

453

increased by13.82%

No dependency changes