react-simple-tooltip - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

CHANGELOG.md

@@ -1,3 +0,7 @@
-# 2.0.0 - 2017-18-10
+# 2.1.0 - 2017-12-08
 
+* Added: Standalone version
+
+# 2.0.0 - 2017-10-18
+
 * Added: Nwb build
@@ -4,0 +8,0 @@ * Update: Nwb build

es/components/Tooltip/index.js

 var _templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  ", ";\n"], ["\n  position: absolute;\n  ", ";\n"]),
-    _templateObject2 = _taggedTemplateLiteralLoose(["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"], ["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"]),
-    _templateObject3 = _taggedTemplateLiteralLoose(["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"], ["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"]),
-    _templateObject4 = _taggedTemplateLiteralLoose(["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"], ["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteralLoose(["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"], ["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"]);
+    _templateObject2 = _taggedTemplateLiteralLoose(["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: ", "px;\n"], ["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: ", "px;\n"]),
+    _templateObject3 = _taggedTemplateLiteralLoose(["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: ", "px;\n"], ["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: ", "px;\n"]),
+    _templateObject4 = _taggedTemplateLiteralLoose(["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: ", "px;\n"], ["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: ", "px;\n"]),
+    _templateObject5 = _taggedTemplateLiteralLoose(["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: ", "px;\n"], ["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: ", "px;\n"]);
 
@@ -18,15 +18,15 @@ function _taggedTemplateLiteralLoose(strings, raw) { strings.raw = raw; return strings; }
 var Top = Base.extend(_templateObject2, function (props) {
-  return props.offset && "margin-bottom: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Bottom = Base.extend(_templateObject3, function (props) {
-  return props.offset && "margin-top: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Left = Base.extend(_templateObject4, function (props) {
-  return props.offset && "margin-right: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Right = Base.extend(_templateObject5, function (props) {
-  return props.offset && "margin-left: " + props.offset + "px;";
+  return props.offset;
 });
@@ -43,6 +43,6 @@
   var children = _ref.children,
+      offset = _ref.offset,
       open = _ref.open,
-      zIndex = _ref.zIndex,
       placement = _ref.placement,
-      offset = _ref.offset;
+      zIndex = _ref.zIndex;
 
@@ -52,3 +52,3 @@ var Component = tooltips[placement] || tooltips.top;
     Component,
-    { open: open, zIndex: zIndex, offset: offset },
+    { offset: offset, open: open, zIndex: zIndex },
     children
@@ -60,8 +60,8 @@ );
   children: PropTypes.any.isRequired,
+  offset: PropTypes.number,
   open: PropTypes.bool,
-  zIndex: PropTypes.number,
   placement: PropTypes.string,
-  offset: PropTypes.number
+  zIndex: PropTypes.number
 } : {};
 
 export default Tooltip;

es/index.js

@@ -57,8 +57,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
         border = _props.border,
+        children = _props.children,
         color = _props.color,
-        children = _props.children,
+        content = _props.content,
         fixed = _props.fixed,
         fontFamily = _props.fontFamily,
         fontSize = _props.fontSize,
-        content = _props.content,
         padding = _props.padding,
@@ -68,5 +68,35 @@ placement = _props.placement,
         zIndex = _props.zIndex,
-        props = _objectWithoutProperties(_props, ["arrow", "background", "border", "color", "children", "fixed", "fontFamily", "fontSize", "content", "padding", "placement", "radius", "zIndex"]);
+        props = _objectWithoutProperties(_props, ["arrow", "background", "border", "children", "color", "content", "fixed", "fontFamily", "fontSize", "padding", "placement", "radius", "zIndex"]);
 
-    return React.createElement(
+    var hasTrigger = children !== undefined && children !== null;
+    var tooltipElement = React.createElement(
+      Tooltip,
+      {
+        open: !hasTrigger || fixed ? true : open,
+        placement: placement,
+        offset: arrow,
+        zIndex: zIndex
+      },
+      React.createElement(
+        Bubble,
+        {
+          background: background,
+          border: border,
+          color: color,
+          radius: radius,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          padding: padding
+        },
+        React.createElement(Arrow, {
+          width: arrow,
+          background: background,
+          border: border,
+          color: color,
+          placement: placement
+        }),
+        content
+      )
+    );
+    return hasTrigger ? React.createElement(
       Container,
@@ -78,31 +108,7 @@ _extends({
       children,
-      React.createElement(
-        Tooltip,
-        {
-          open: fixed ? true : open,
-          placement: placement,
-          offset: arrow,
-          zIndex: zIndex
-        },
-        React.createElement(
-          Bubble,
-          {
-            background: background,
-            border: border,
-            color: color,
-            radius: radius,
-            fontFamily: fontFamily,
-            fontSize: fontSize,
-            padding: padding
-          },
-          React.createElement(Arrow, {
-            width: arrow,
-            background: background,
-            border: border,
-            color: color,
-            placement: placement
-          }),
-          content
-        )
-      )
+      tooltipElement
+    ) : React.createElement(
+      Container,
+      props,
+      tooltipElement
     );
@@ -118,3 +124,3 @@ };
   border: PropTypes.string,
-  children: PropTypes.any.isRequired,
+  children: PropTypes.any,
   color: PropTypes.string,
@@ -135,2 +141,3 @@ content: PropTypes.any.isRequired,
   border: "#000",
+  children: null,
   color: "#fff",
@@ -137,0 +144,0 @@ fixed: false,

lib/components/Tooltip/index.js

@@ -6,6 +6,6 @@ "use strict";
 var _templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  ", ";\n"], ["\n  position: absolute;\n  ", ";\n"]),
-    _templateObject2 = _taggedTemplateLiteralLoose(["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"], ["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"]),
-    _templateObject3 = _taggedTemplateLiteralLoose(["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"], ["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  ", ";\n"]),
-    _templateObject4 = _taggedTemplateLiteralLoose(["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"], ["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"]),
-    _templateObject5 = _taggedTemplateLiteralLoose(["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"], ["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  ", ";\n"]);
+    _templateObject2 = _taggedTemplateLiteralLoose(["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: ", "px;\n"], ["\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-bottom: ", "px;\n"]),
+    _templateObject3 = _taggedTemplateLiteralLoose(["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: ", "px;\n"], ["\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  margin-top: ", "px;\n"]),
+    _templateObject4 = _taggedTemplateLiteralLoose(["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: ", "px;\n"], ["\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-right: ", "px;\n"]),
+    _templateObject5 = _taggedTemplateLiteralLoose(["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: ", "px;\n"], ["\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: ", "px;\n"]);
 
@@ -33,15 +33,15 @@ var _react = require("react");
 var Top = Base.extend(_templateObject2, function (props) {
-  return props.offset && "margin-bottom: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Bottom = Base.extend(_templateObject3, function (props) {
-  return props.offset && "margin-top: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Left = Base.extend(_templateObject4, function (props) {
-  return props.offset && "margin-right: " + props.offset + "px;";
+  return props.offset;
 });
 
 var Right = Base.extend(_templateObject5, function (props) {
-  return props.offset && "margin-left: " + props.offset + "px;";
+  return props.offset;
 });
@@ -58,6 +58,6 @@
   var children = _ref.children,
+      offset = _ref.offset,
       open = _ref.open,
-      zIndex = _ref.zIndex,
       placement = _ref.placement,
-      offset = _ref.offset;
+      zIndex = _ref.zIndex;
 
@@ -67,3 +67,3 @@ var Component = tooltips[placement] || tooltips.top;
     Component,
-    { open: open, zIndex: zIndex, offset: offset },
+    { offset: offset, open: open, zIndex: zIndex },
     children
@@ -75,6 +75,6 @@ );
   children: _propTypes2.default.any.isRequired,
+  offset: _propTypes2.default.number,
   open: _propTypes2.default.bool,
-  zIndex: _propTypes2.default.number,
   placement: _propTypes2.default.string,
-  offset: _propTypes2.default.number
+  zIndex: _propTypes2.default.number
 } : {};
@@ -81,0 +81,0 @@

lib/index.js

@@ -79,8 +79,8 @@ "use strict";
         border = _props.border,
+        children = _props.children,
         color = _props.color,
-        children = _props.children,
+        content = _props.content,
         fixed = _props.fixed,
         fontFamily = _props.fontFamily,
         fontSize = _props.fontSize,
-        content = _props.content,
         padding = _props.padding,
@@ -90,5 +90,35 @@ placement = _props.placement,
         zIndex = _props.zIndex,
-        props = _objectWithoutProperties(_props, ["arrow", "background", "border", "color", "children", "fixed", "fontFamily", "fontSize", "content", "padding", "placement", "radius", "zIndex"]);
+        props = _objectWithoutProperties(_props, ["arrow", "background", "border", "children", "color", "content", "fixed", "fontFamily", "fontSize", "padding", "placement", "radius", "zIndex"]);
 
-    return _react2.default.createElement(
+    var hasTrigger = children !== undefined && children !== null;
+    var tooltipElement = _react2.default.createElement(
+      _Tooltip2.default,
+      {
+        open: !hasTrigger || fixed ? true : open,
+        placement: placement,
+        offset: arrow,
+        zIndex: zIndex
+      },
+      _react2.default.createElement(
+        _Bubble2.default,
+        {
+          background: background,
+          border: border,
+          color: color,
+          radius: radius,
+          fontFamily: fontFamily,
+          fontSize: fontSize,
+          padding: padding
+        },
+        _react2.default.createElement(_Arrow2.default, {
+          width: arrow,
+          background: background,
+          border: border,
+          color: color,
+          placement: placement
+        }),
+        content
+      )
+    );
+    return hasTrigger ? _react2.default.createElement(
       Container,
@@ -100,31 +130,7 @@ _extends({
       children,
-      _react2.default.createElement(
-        _Tooltip2.default,
-        {
-          open: fixed ? true : open,
-          placement: placement,
-          offset: arrow,
-          zIndex: zIndex
-        },
-        _react2.default.createElement(
-          _Bubble2.default,
-          {
-            background: background,
-            border: border,
-            color: color,
-            radius: radius,
-            fontFamily: fontFamily,
-            fontSize: fontSize,
-            padding: padding
-          },
-          _react2.default.createElement(_Arrow2.default, {
-            width: arrow,
-            background: background,
-            border: border,
-            color: color,
-            placement: placement
-          }),
-          content
-        )
-      )
+      tooltipElement
+    ) : _react2.default.createElement(
+      Container,
+      props,
+      tooltipElement
     );
@@ -140,3 +146,3 @@ };
   border: _propTypes2.default.string,
-  children: _propTypes2.default.any.isRequired,
+  children: _propTypes2.default.any,
   color: _propTypes2.default.string,
@@ -157,2 +163,3 @@ content: _propTypes2.default.any.isRequired,
   border: "#000",
+  children: null,
   color: "#fff",
@@ -159,0 +166,0 @@ fixed: false,

package.json

 {
   "name": "react-simple-tooltip",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "author": {
@@ -32,3 +32,2 @@ "name": "Cédric Delpoux",
   "dependencies": {
-    "prop-types": "^15.6.0",
     "styled-components": "^2.1.2"
@@ -58,2 +57,3 @@ },
     "prettier": "^1.5.3",
+    "prop-types": "^15.6.0",
     "react": "^15.6.1",
@@ -65,5 +65,5 @@ "react-demo-page": "^0.2.2",
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0"
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   }
 }

README.md

@@ -29,2 +29,4 @@ # react-simple-tooltip
 
+### Attached to a Component
+
 ```javascript
@@ -35,3 +37,3 @@ import React from "react"
 const App = () =>
-  <Tooltip>
+  <Tooltip content="😎">
     <button>Hover me !</button>
@@ -41,2 +43,16 @@ </Tooltip>
 
+### Standalone
+```javascript
+import React from "react"
+import Tooltip from "react-simple-tooltip"
+
+const App = () =>
+  <div style={{position: "relative"}}>
+    <Tooltip
+      style={{position: "absolute", top: "50%", right: "0"}}
+      content="😎"
+    />
+  </div>
+```
+
 ## Demo
@@ -43,0 +59,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

164899

increased by3.53%

Dependency count

3

decreased by-25%

Lines of code

4409

increased by4.21%

Number of lines in readme file

105

increased by17.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

26

increased by4%

Dependency changes

• - Removedprop-types@^15.6.0