react-tooltip - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

index.js

@@ -5,10 +5,2 @@ 'use strict';
 
-var _classCallCheck = function (instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } };
-
-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(object, property, receiver) { var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { return get(parent, property, receiver); } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } };
-
-var _inherits = function (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) subClass.__proto__ = superClass; };
-
 Object.defineProperty(exports, '__esModule', {
@@ -50,8 +42,12 @@ value: true
 
-var ReactTooltip = (function (_React$Component) {
-  function ReactTooltip(props) {
-    _classCallCheck(this, ReactTooltip);
+var ReactTooltip = _React2['default'].createClass({
 
-    _get(Object.getPrototypeOf(ReactTooltip.prototype), 'constructor', this).call(this, props);
-    this.state = {
+  displayName: 'ReactTooltip',
+
+  propTypes: {
+    place: _React2['default'].PropTypes.string
+  },
+
+  getInitialState: function getInitialState() {
+    return {
       show: false,
@@ -63,98 +59,78 @@ placeholder: '',
     };
-  }
+  },
 
-  _inherits(ReactTooltip, _React$Component);
+  showTooltip: function showTooltip(e) {
+    this.setState({
+      placeholder: e.target.dataset.placeholder,
+      place: e.target.dataset.place ? e.target.dataset.place : this.props.place ? this.props.place : 'top'
+    });
+    this.updateTooltip(e);
+  },
 
-  _createClass(ReactTooltip, [{
-    key: 'displayName',
-    value: undefined,
-    enumerable: true
-  }, {
-    key: 'propTypes',
-    value: undefined,
-    enumerable: true
-  }, {
-    key: 'showTooltip',
-    value: function showTooltip(e) {
-      this.setState({
-        placeholder: e.target.dataset.placeholder,
-        place: e.target.dataset.place ? e.target.dataset.place : this.props.place ? this.props.place : 'top'
-      });
-      this.updateTooltip(e);
+  updateTooltip: function updateTooltip(e) {
+    this.setState({
+      show: true,
+      x: e.x,
+      y: e.y
+    });
+  },
+
+  hideTooltip: function hideTooltip(e) {
+    this.setState({
+      show: false
+    });
+  },
+
+  componentDidMount: function componentDidMount() {
+    var targetArray = document.querySelectorAll('[data-placeholder]');
+    for (var i = 0; i < targetArray.length; i++) {
+      targetArray[i].addEventListener('mouseover', this.showTooltip, false);
+      targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
+      targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
     }
-  }, {
-    key: 'updateTooltip',
-    value: function updateTooltip(e) {
-      this.setState({
-        show: true,
-        x: e.x,
-        y: e.y
-      });
+  },
+
+  componentWillUnmount: function componentWillUnmount() {
+    var targetArray = document.querySelectorAll('[data-placeholder]');
+    for (var i = 0; i < targetArray.length; i++) {
+      targetArray[i].removeEventListener('mouseover', this.showTooltip);
+      targetArray[i].removeEventListener('mousemove', this.updateTooltip);
+      targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
     }
-  }, {
-    key: 'hideTooltip',
-    value: function hideTooltip(e) {
-      this.setState({
-        show: false
-      });
+  },
+
+  render: function render() {
+    var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0;
+    var offset = { x: 0, y: 0 };
+    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;
     }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      var targetArray = document.querySelectorAll('[data-placeholder]');
-      for (var i = 0; i < targetArray.length; i++) {
-        targetArray[i].addEventListener('mouseover', this.showTooltip, false);
-        targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
-        targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
-      }
+    var style = {
+      left: this.state.x + offset.x + 'px',
+      top: this.state.y + offset.y + 'px'
+    };
+    var classNamesObject = {};
+    classNamesObject[_basicClass2['default'].className] = true;
+    if (this.state.show) {
+      classNamesObject[_basicShowClass2['default'].className] = true;
     }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      var targetArray = document.querySelectorAll('[data-placeholder]');
-      for (var i = 0; i < targetArray.length; i++) {
-        targetArray[i].removeEventListener('mouseover', this.showTooltip);
-        targetArray[i].removeEventListener('mousemove', this.updateTooltip);
-        targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
-      }
+    if (this.state.place === 'top') {
+      classNamesObject[_topPlaceClass2['default'].className] = true;
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var tipWidth = document.querySelector('[data-id=\'tooltip\']') ? document.querySelector('[data-id=\'tooltip\']').clientWidth : 0;
-      var offset = { x: 0, y: 0 };
-      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;
-      }
-      var style = {
-        left: this.state.x + offset.x + 'px',
-        top: this.state.y + offset.y + 'px'
-      };
-      var classNamesObject = {};
-      classNamesObject[_basicClass2['default'].className] = true;
-      if (this.state.show) {
-        classNamesObject[_basicShowClass2['default'].className] = true;
-      }
-      if (this.state.place === 'top') {
-        classNamesObject[_topPlaceClass2['default'].className] = true;
-      }
-      if (this.state.place === 'bottom') {
-        classNamesObject[_bottomPlaceClass2['default'].className] = true;
-      }
-      var toolTipClass = _classNames2['default'](classNamesObject);
-
-      return _React2['default'].createElement(
-        'span',
-        { className: toolTipClass, style: style, 'data-id': 'tooltip' },
-        this.state.placeholder
-      );
+    if (this.state.place === 'bottom') {
+      classNamesObject[_bottomPlaceClass2['default'].className] = true;
     }
-  }]);
+    var toolTipClass = _classNames2['default'](classNamesObject);
 
-  return ReactTooltip;
-})(_React2['default'].Component);
+    return _React2['default'].createElement(
+      'span',
+      { className: toolTipClass, style: style, 'data-id': 'tooltip' },
+      this.state.placeholder
+    );
+  }
+});
 
@@ -161,0 +137,0 @@ exports['default'] = ReactTooltip;

package.json

 {
   "name": "react-tooltip",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "react tooltip component",
@@ -5,0 +5,0 @@ "main": "index.js",

src.jsx

@@ -13,13 +13,12 @@ 'use strict';
 
-class ReactTooltip extends React.Component {
+const ReactTooltip = React.createClass({
 
-  displayName: 'ReactTooltip'
+  displayName: 'ReactTooltip',
 
   propTypes: {
     place: React.PropTypes.string
-  }
+  },
 
-  constructor(props) {
-    super(props);
-    this.state = {
+  getInitialState() {
+    return {
       show: false,
@@ -31,3 +30,3 @@ placeholder: "",
     }
-  }
+  },
 
@@ -40,3 +39,3 @@ showTooltip(e) {
     this.updateTooltip(e);
-  }
+  },
 
@@ -49,3 +48,3 @@ updateTooltip(e) {
     })
-  }
+  },
 
@@ -56,3 +55,3 @@ hideTooltip(e) {
     })
-  }
+  },
 
@@ -66,3 +65,3 @@ componentDidMount() {
     }
-  }
+  },
 
@@ -76,3 +75,3 @@ componentWillUnmount() {
     }
-  }
+  },
 
@@ -111,4 +110,4 @@ render() {
   }
-}
+});
 
 export default ReactTooltip;

No alert changes

Worsened metrics

Total package byte prevSize

16114

decreased by-12.03%

Lines of code

317

decreased by-8.38%

No dependency changes