react-tooltip-plugin - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

src/index.js

+function getCssText(align, target, containerRect) {
+  let top, left
+  if( align === 'bottom') {
+    top = target.bottom + 5 + 6
+  }else if (align === 'left' || align === 'right') {
+    top = target.top + (target.height - containerRect.height)/2
+  }else {
+    top = target.top - containerRect.height -6
+  }
+
+  if (align === 'left') {
+    left = target.left - containerRect.width -5
+  }else if (align === 'right') {
+    left = target.right + 5
+  }else {
+    left = target.left + target.width/2 - containerRect.width/2
+  }
+
+  return `position: absolute; top: ${top}px; left: ${left}px;`
+}
+
+function autoAlign(align, target, containerRect) {
+  const {innerWidth, innerHeight} = window
+  if (align === 'top' && target.top < containerRect.height + 5 + 6) {
+    return 'bottom'
+  }else if(align === 'bottom' && target.bottom + containerRect.height + 5 + 6 > innerHeight){
+    return 'top'
+  }else if (align === 'left' && target.left - containerRect.width -5 < 0) {
+    return 'right'
+  }else if(align === 'right' && target.right + containerRect.width + 5 > innerWidth){
+    return 'left'
+  } else {
+    return align
+  }
+}
+
+export default function (params) {
+  const container = document.getElementById('tooltip')
+  if (container) {
+    document.body.removeChild(container)
+  }
+
+  if(params.leave) {
+    return
+  }
+
+  const {e, msg = 'react-tooltip-plugin', align = 'top'} = params
+  const target = e.target.getBoundingClientRect()
+
+  const _container = document.createElement('div')
+  _container.id = 'tooltip'
+  _container.classList.add('tooltip')
+  _container.innerText = msg
+
+  document.body.appendChild(_container)
+
+  const containerRect = _container.getBoundingClientRect()
+  const newAlign = autoAlign(align, target, containerRect)
+  const cssText = getCssText(newAlign, target, containerRect)
+
+  _container.classList.add(newAlign)
+  _container.style.cssText = cssText
+  _container.style.opacity = '1'
+
+}

src/tooltip.css

+.tooltip {
+  display: inline-block;
+  opacity: 0;
+  z-index: 103;
+  height: 24px;
+  padding: 0 10px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  line-height: 22px;
+  font-size: 12px;
+  background-color: #fff;
+}
+
+.tooltip.top::after,
+.tooltip.top::before,
+.tooltip.bottom::after,
+.tooltip.bottom::before {
+  position: absolute;
+  left: 50%;
+  margin-left: -5px;
+  content: "";
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+}
+
+.tooltip.top::after {
+  top: 21px;
+  border-top: 5px solid #fff;
+}
+
+.tooltip.top::before {
+  top: 22px;
+  border-top: 5px solid #ccc;
+}
+
+.tooltip.bottom::after {
+  top: -5px;
+  border-bottom: 5px solid #fff;
+}
+
+.tooltip.bottom::before {
+  top: -6px;
+  border-bottom: 5px solid #ccc;
+}
+
+.tooltip.right::after,
+.tooltip.right::before,
+.tooltip.left::after,
+.tooltip.left::before{
+  position: absolute;
+  top: 50%;
+  margin-top: -4px;
+  content: "";
+  width: 0;
+  height: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+}
+
+.tooltip.right::before {
+  left: -6px;
+  border-right: 5px solid #ccc;
+}
+
+.tooltip.right::after {
+  left: -5px;
+  border-right: 5px solid #fff;
+}
+
+.tooltip.left::before {
+  right: -6px;
+  border-left: 5px solid #ccc;
+}
+
+.tooltip.left::after {
+  right: -5px;
+  border-left: 5px solid #fff;
+}

lib/index.js

@@ -1,67 +0,79 @@
-import css from './tooltip.css'
+'use strict';
 
-function getCssText(align, target, containerRect) {
-  let top, left
-  if( align === 'bottom') {
-    top = target.bottom + 5 + 6
-  }else if (align === 'left' || align === 'right') {
-    top = target.top + (target.height - containerRect.height)/2
-  }else {
-    top = target.top - containerRect.height -6
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = function (params) {
+  var container = document.getElementById('tooltip');
+  if (container) {
+    document.body.removeChild(container);
   }
 
-  if (align === 'left') {
-    left = target.left - containerRect.width -5
-  }else if (align === 'right') {
-    left = target.right + 5
-  }else {
-    left = target.left + target.width/2 - containerRect.width/2
+  if (params.leave) {
+    return;
   }
 
-  return `position: absolute; top: ${top}px; left: ${left}px;`
-}
+  var e = params.e,
+    _params$msg = params.msg,
+    msg = _params$msg === undefined ? 'react-tooltip-plugin' : _params$msg,
+    _params$align = params.align,
+    align = _params$align === undefined ? 'top' : _params$align;
 
-function autoAlign(align, target, containerRect) {
-  const {innerWidth, innerHeight} = window
-  if (align === 'top' && target.top < containerRect.height + 5 + 6) {
-    return 'bottom'
-  }else if(align === 'bottom' && target.bottom + containerRect.height + 5 + 6 > innerHeight){
-    return 'top'
-  }else if (align === 'left' && target.left - containerRect.width -5 < 0) {
-    return 'right'
-  }else if(align === 'right' && target.right + containerRect.width + 5 > innerWidth){
-    return 'left'
-  } else {
-    return align
-  }
-}
+  var target = e.target.getBoundingClientRect();
 
-export default function (params) {
-  const container = document.getElementById('tooltip')
-  if (container) {
-    document.body.removeChild(container)
-  }
+  var _container = document.createElement('div');
+  _container.id = 'tooltip';
+  _container.classList.add('tooltip');
+  _container.innerText = msg;
 
-  if(params.leave) {
-    return
-  }
+  document.body.appendChild(_container);
 
-  const {e, msg = 'react-tooltip-plugin', align = 'top'} = params
-  const target = e.target.getBoundingClientRect()
+  var containerRect = _container.getBoundingClientRect();
+  var newAlign = autoAlign(align, target, containerRect);
+  var cssText = getCssText(newAlign, target, containerRect);
 
-  const _container = document.createElement('div')
-  _container.id = 'tooltip'
-  _container.classList.add(css.tooltip)
-  _container.innerText = msg
+  _container.classList.add(newAlign);
+  _container.style.cssText = cssText;
+  _container.style.opacity = '1';
+};
 
-  document.body.appendChild(_container)
+function getCssText(align, target, containerRect) {
+  var top = void 0,
+    left = void 0;
+  if (align === 'bottom') {
+    top = target.bottom + 5 + 6;
+  } else if (align === 'left' || align === 'right') {
+    top = target.top + (target.height - containerRect.height) / 2;
+  } else {
+    top = target.top - containerRect.height - 6;
+  }
 
-  const containerRect = _container.getBoundingClientRect()
-  const newAlign = autoAlign(align, target, containerRect)
-  const cssText = getCssText(newAlign, target, containerRect)
+  if (align === 'left') {
+    left = target.left - containerRect.width - 5;
+  } else if (align === 'right') {
+    left = target.right + 5;
+  } else {
+    left = target.left + target.width / 2 - containerRect.width / 2;
+  }
 
-  _container.classList.add(css[newAlign])
-  _container.style.cssText = cssText
-  _container.style.opacity = '1'
+  return 'position: absolute; top: ' + top + 'px; left: ' + left + 'px;';
+}
 
+function autoAlign(align, target, containerRect) {
+  var _window = window,
+    innerWidth = _window.innerWidth,
+    innerHeight = _window.innerHeight;
+
+  if (align === 'top' && target.top < containerRect.height + 5 + 6) {
+    return 'bottom';
+  } else if (align === 'bottom' && target.bottom + containerRect.height + 5 + 6 > innerHeight) {
+    return 'top';
+  } else if (align === 'left' && target.left - containerRect.width - 5 < 0) {
+    return 'right';
+  } else if (align === 'right' && target.right + containerRect.width + 5 > innerWidth) {
+    return 'left';
+  } else {
+    return align;
+  }
 }

package.json

 {
   "name": "react-tooltip-plugin",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "This is a tooltip plugin for react.",
   "main": "index",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
@@ -10,0 +7,0 @@ "type": "git",

README.md

@@ -6,4 +6,3 @@ 安装
 
-第一种使用方法，自定义样式
-The first method of use , customer style.
+Use
 
@@ -95,3 +94,3 @@ 1: 全局引用一次样式
     2: 在需要展示tooltip的模块中
-    import tooltip from 'react-tooltip-plugin/cs'
+    import tooltip from 'react-tooltip-plugin'
 
@@ -102,14 +101,2 @@ onMouseEnter={(e)=>{tooltip({e, msg: 'Toolpic show message', align: 'top'})}}
     align可取值(top,right,bottom,left)默认值是top,当值为top时align可以省略。
-    align available value (top,right,bottom,left) default value is top,if you set align value is top you can ellipsis it.
-
-
-第二种使用方法，css-loader自动载入模块化样式
-The second method of use, css-loader auto load modules style.
-
-    如果你的css-loader设置了modules:true, 就不需要引入toolpic.css,react-tooltip-plugin/loadcss已经引入了tooltip.css。
-    If your css-loader setting modules:true, so you don't need required tooltip.css, react-tooltip-plugin/loadcss already require tooltip.css.
-
-    import tooltip from 'react-tooltip-plugin'
-
-    onMouseEnter={(e)=>{tooltip({e, msg: 'Toolpic show message', align: 'top'})}}
-    onMouseLeave={()=>{tooltip({leave: true})}}
+    align available value (top,right,bottom,left) default value is top,if you set align value is top you can ellipsis it.

cs.js

-module.exports=require('./lib/cs')

lib/cs.js

-function getCssText(align, target, containerRect) {
-  let top, left
-  if( align === 'bottom') {
-    top = target.bottom + 5 + 6
-  }else if (align === 'left' || align === 'right') {
-    top = target.top + (target.height - containerRect.height)/2
-  }else {
-    top = target.top - containerRect.height -6
-  }
-
-  if (align === 'left') {
-    left = target.left - containerRect.width -5
-  }else if (align === 'right') {
-    left = target.right + 5
-  }else {
-    left = target.left + target.width/2 - containerRect.width/2
-  }
-
-  return `position: absolute; top: ${top}px; left: ${left}px;`
-}
-
-function autoAlign(align, target, containerRect) {
-  const {innerWidth, innerHeight} = window
-  if (align === 'top' && target.top < containerRect.height + 5 + 6) {
-    return 'bottom'
-  }else if(align === 'bottom' && target.bottom + containerRect.height + 5 + 6 > innerHeight){
-    return 'top'
-  }else if (align === 'left' && target.left - containerRect.width -5 < 0) {
-    return 'right'
-  }else if(align === 'right' && target.right + containerRect.width + 5 > innerWidth){
-    return 'left'
-  } else {
-    return align
-  }
-}
-
-export default function (params) {
-  const container = document.getElementById('tooltip')
-  if (container) {
-    document.body.removeChild(container)
-  }
-
-  if(params.leave) {
-    return
-  }
-
-  const {e, msg = 'react-tooltip-plugin', align = 'top'} = params
-  const target = e.target.getBoundingClientRect()
-
-  const _container = document.createElement('div')
-  _container.id = 'tooltip'
-  _container.classList.add('tooltip')
-  _container.innerText = msg
-
-  document.body.appendChild(_container)
-
-  const containerRect = _container.getBoundingClientRect()
-  const newAlign = autoAlign(align, target, containerRect)
-  const cssText = getCssText(newAlign, target, containerRect)
-
-  _container.classList.add(newAlign)
-  _container.style.cssText = cssText
-  _container.style.opacity = '1'
-
-}

lib/tooltip.css

-.tooltip {
-  display: inline-block;
-  opacity: 0;
-  z-index: 103;
-  height: 24px;
-  padding: 0 10px;
-  border: 1px solid #ccc;
-  border-radius: 3px;
-  line-height: 22px;
-  font-size: 12px;
-  background-color: #fff;
-}
-
-.tooltip.top::after,
-.tooltip.top::before,
-.tooltip.bottom::after,
-.tooltip.bottom::before {
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  content: "";
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-}
-
-.tooltip.top::after {
-  top: 21px;
-  border-top: 5px solid #fff;
-}
-
-.tooltip.top::before {
-  top: 22px;
-  border-top: 5px solid #ccc;
-}
-
-.tooltip.bottom::after {
-  top: -5px;
-  border-bottom: 5px solid #fff;
-}
-
-.tooltip.bottom::before {
-  top: -6px;
-  border-bottom: 5px solid #ccc;
-}
-
-.tooltip.right::after,
-.tooltip.right::before,
-.tooltip.left::after,
-.tooltip.left::before{
-  position: absolute;
-  top: 50%;
-  margin-top: -4px;
-  content: "";
-  width: 0;
-  height: 0;
-  border-top: 4px solid transparent;
-  border-bottom: 4px solid transparent;
-}
-
-.tooltip.right::before {
-  left: -6px;
-  border-right: 5px solid #ccc;
-}
-
-.tooltip.right::after {
-  left: -5px;
-  border-right: 5px solid #fff;
-}
-
-.tooltip.left::before {
-  right: -6px;
-  border-left: 5px solid #ccc;
-}
-
-.tooltip.left::after {
-  right: -5px;
-  border-left: 5px solid #fff;
-}

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

Fixed alerts

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Lines of code

186

5.68%

Number of low quality alerts

1

-50%

Worsened metrics

Total package byte prevSize

8192

-9.89%

Number of package files

6

-25%

Number of lines in readme file

99

-11.61%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes