react-tooltip - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

dist/react-tooltip.js

@@ -17,4 +17,2 @@ 'use strict';
 
-'use strict';
-
 var ReactTooltip = _react2['default'].createClass({
@@ -25,4 +23,5 @@
   propTypes: {
-    place: _react2['default'].PropTypes.string
-  },
+    place: _react2['default'].PropTypes.string,
+    type: _react2['default'].PropTypes.string,
+    effect: _react2['default'].PropTypes.string },
 
@@ -33,6 +32,7 @@ getInitialState: function getInitialState() {
       placeholder: '',
-      x: 0,
-      y: 0,
-      place: this.props.place ? this.props.place : 'top'
-    };
+      x: 'NONE',
+      y: 'NONE',
+      place: '',
+      type: '',
+      effect: '' };
   },
@@ -43,4 +43,5 @@
       placeholder: e.target.dataset.tip,
-      place: e.target.dataset.place ? e.target.dataset.place : this.props.place ? this.props.place : 'top'
-    });
+      place: e.target.dataset.place ? e.target.dataset.place : this.props.place ? this.props.place : 'top',
+      type: e.target.dataset.type ? e.target.dataset.type : this.props.type ? this.props.type : 'dark',
+      effect: e.target.dataset.effect ? e.target.dataset.effect : this.props.effect ? this.props.effect : 'float' });
     this.updateTooltip(e);
@@ -50,7 +51,38 @@ },
   updateTooltip: function updateTooltip(e) {
-    this.setState({
-      show: true,
-      x: e.clientX,
-      y: e.clientY
-    });
+    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;
+      }
+      this.setState({
+        show: true,
+        x: this.state.x === 'NONE' ? x : this.state.x,
+        y: this.state.y === 'NONE' ? y : this.state.y
+      });
+    }
   },
@@ -60,4 +92,5 @@
     this.setState({
-      show: false
-    });
+      show: false,
+      x: 'NONE',
+      y: 'NONE' });
   },
@@ -85,9 +118,20 @@
     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 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 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);
+      }
     }
@@ -99,3 +143,3 @@ var style = {
 
-    var tooltipClass = (0, _classNames2['default'])({ show: this.state.show }, 'reactTooltip');
+    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' });
 
@@ -102,0 +146,0 @@ return _react2['default'].createElement(

package.json

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

Fixed 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

21958

increased by39.52%

Lines of code

280

increased by23.35%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes