react-hint - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

lib/index.js

@@ -88,2 +88,4 @@ 'use strict';
 			}
+		}, _this.setHintRef = function (ref) {
+			_this._hint = ref;
 		}, _this.onHover = function (_ref) {
@@ -115,7 +117,5 @@ var target = _ref.target;
 		var target = this.state.target;
-		var hint = this.refs.hint;
 
-
-		if (!target || !hint) return;
-		this.setState(this.getHintPosition(hint, target));
+		if (!target || !this._hint) return;
+		this.setState(this.getHintPosition(this._hint, target));
 	};
@@ -141,3 +141,3 @@
 				style: { top: top, left: left },
-				ref: 'hint' },
+				ref: this.setHintRef },
 			_react2.default.createElement(
@@ -144,0 +144,0 @@ 'div',

package.json

 {
   "name": "react-hint",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "a simple tooltip component for React",
@@ -32,2 +32,3 @@ "author": "Vladimir Simonov <[e-mail]>",
   "keywords": [
+    "inferno",
     "preact",
@@ -34,0 +35,0 @@ "react",

README.md

 react-hint
 ==========
-**react-hint** is a small tooltip component for [React](https://github.com/facebook/react) which is developed with simplicity and performance in mind. It doesn't include any fancy stuff, but it gets the job done. It also plays nicely with [Preact](https://github.com/developit/preact).
+**react-hint** is a small tooltip component for [React](https://github.com/facebook/react) which is developed with simplicity and performance in mind. It doesn't include any fancy stuff, but it gets the job done. It also plays nicely with [Preact](https://github.com/developit/preact) and [Inferno](https://github.com/trueadm/inferno) (1.0.0-beta3).
 
@@ -15,2 +15,5 @@ ![react-hint tooltip](demo/react-hint.gif)
 ----------
+
+`<ReactHint />` is a singleton component which should be placed in the root component. To show a tooltip on any DOM element and its children add `data-rh` attribute to the element. The default placement of a tooltip is at the top, but you can add `data-rh-at` attribute to change the placement. Supported values are: `top`, `left`, `right`, `bottom`. You can completely override tooltip style by passing `className` property to `<ReactHint />`.
+
 ```jsx
@@ -17,0 +20,0 @@ import React from 'react'

src/index.js

@@ -42,6 +42,4 @@ import React from 'react'
 		const {target} = this.state
-		const {hint} = this.refs
-
-		if (!target || !hint) return
-		this.setState(this.getHintPosition(hint, target))
+		if (!target || !this._hint) return
+		this.setState(this.getHintPosition(this._hint, target))
 	}
@@ -95,2 +93,6 @@
 
+	setHintRef = (ref) => {
+		this._hint = ref
+	}
+
 	onHover = ({target}) => {
@@ -107,3 +109,3 @@ this.setState({target: this.findHint(target)})
 				style={{top, left}}
-				ref="hint">
+				ref={this.setHintRef}>
 					<div className={`${className}__content`}>
@@ -110,0 +112,0 @@ {target.getAttribute('data-rh')}

umd/react-hint.js

 /*!
- * react-hint v1.0.0 - https://github.com/slmgc/react-hint
+ * react-hint v1.0.1 - https://github.com/slmgc/react-hint
  * MIT Licensed
@@ -157,2 +157,4 @@ */
 				}
+			}, _this.setHintRef = function (ref) {
+				_this._hint = ref;
 			}, _this.onHover = function (_ref) {
@@ -184,7 +186,5 @@ var target = _ref.target;
 			var target = this.state.target;
-			var hint = this.refs.hint;
 
-
-			if (!target || !hint) return;
-			this.setState(this.getHintPosition(hint, target));
+			if (!target || !this._hint) return;
+			this.setState(this.getHintPosition(this._hint, target));
 		};
@@ -210,5 +210,5 @@
 					style: { top: top, left: left },
-					ref: 'hint', __source: {
+					ref: this.setHintRef, __source: {
 						fileName: _jsxFileName,
-						lineNumber: 103
+						lineNumber: 105
 					},
@@ -221,3 +221,3 @@ __self: this
 							fileName: _jsxFileName,
-							lineNumber: 106
+							lineNumber: 108
 						},
@@ -224,0 +224,0 @@ __self: this

umd/react-hint.min.js

 /*!
- * react-hint v1.0.0 - https://github.com/slmgc/react-hint
+ * react-hint v1.0.1 - https://github.com/slmgc/react-hint
  * MIT Licensed
  */
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactHint=e(require("react")):t.ReactHint=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function a(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function i(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0,e.default=void 0;var s,u,c=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),f=n(2),l=o(f),p=(u=s=function(t){function e(){var n,o,i;r(this,e);for(var s=arguments.length,u=Array(s),c=0;c<s;c++)u[c]=arguments[c];return n=o=a(this,t.call.apply(t,[this].concat(u))),o.state={target:null,at:"top",top:0,left:0},o.findHint=function(t){for(;t&&t!==document;){if(t.hasAttribute("data-rh"))return t;t=t.parentNode}return null},o.getHintPosition=function(t,e){var n=t.offsetWidth,o=t.offsetHeight,r=e.getBoundingClientRect(),a=r.width,i=r.height,s=r.top,u=r.left,c=e.getAttribute("data-rh-at");switch(c){case"left":return{at:c,top:s+(i-o>>1),left:u-n};case"right":return{at:c,top:s+(i-o>>1),left:u+a};case"bottom":return{at:c,top:s+i,left:u+(a-n>>1)};case"top":default:return{at:"top",top:s-o,left:u+(a-n>>1)}}},o.onHover=function(t){var e=t.target;o.setState({target:o.findHint(e)})},i=n,a(o,i)}return i(e,t),e.prototype.shouldComponentUpdate=function(t,e){var n=t.className,o=e.target,r=e.at,a=e.top,i=e.left,s=this.props,u=this.state;return o!==u.target||r!==u.at||Math.abs(a-u.top)>1||Math.abs(i-u.left)>1||n!==s.className},e.prototype.componentDidMount=function(){e.instance=this,document.addEventListener("mouseover",this.onHover)},e.prototype.componentDidUpdate=function(){var t=this.state.target,e=this.refs.hint;t&&e&&this.setState(this.getHintPosition(e,t))},e.prototype.componentWillUnmout=function(){e.instance=null,document.removeEventListener("mouseover",this.onHover)},e.prototype.render=function(){var t=this.props.className,e=this.state,n=e.target,o=e.at,r=e.top,a=e.left;return n&&l.default.createElement("div",{className:t+" "+t+"--"+o,style:{top:r,left:a},ref:"hint"},l.default.createElement("div",{className:t+"__content"},n.getAttribute("data-rh")))},c(e,null,[{key:"instance",get:function(){return e._instance},set:function(t){if(e._instance)throw new Error("Only one instance of ReactHint is allowed.");e._instance=t}}]),e}(l.default.Component),s._instance=null,s.defaultProps={className:"react-hint"},u);e.default=p},function(e,n){e.exports=t}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.ReactHint=e(require("react")):t.ReactHint=e(t.React)}(this,function(t){return function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function o(t){return t&&t.__esModule?t:{default:t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function i(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}e.__esModule=!0,e.default=void 0;var s,u,c=function(){function t(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,n,o){return n&&t(e.prototype,n),o&&t(e,o),e}}(),f=n(2),l=o(f),p=(u=s=function(t){function e(){var n,o,a;r(this,e);for(var s=arguments.length,u=Array(s),c=0;c<s;c++)u[c]=arguments[c];return n=o=i(this,t.call.apply(t,[this].concat(u))),o.state={target:null,at:"top",top:0,left:0},o.findHint=function(t){for(;t&&t!==document;){if(t.hasAttribute("data-rh"))return t;t=t.parentNode}return null},o.getHintPosition=function(t,e){var n=t.offsetWidth,o=t.offsetHeight,r=e.getBoundingClientRect(),i=r.width,a=r.height,s=r.top,u=r.left,c=e.getAttribute("data-rh-at");switch(c){case"left":return{at:c,top:s+(a-o>>1),left:u-n};case"right":return{at:c,top:s+(a-o>>1),left:u+i};case"bottom":return{at:c,top:s+a,left:u+(i-n>>1)};case"top":default:return{at:"top",top:s-o,left:u+(i-n>>1)}}},o.setHintRef=function(t){o._hint=t},o.onHover=function(t){var e=t.target;o.setState({target:o.findHint(e)})},a=n,i(o,a)}return a(e,t),e.prototype.shouldComponentUpdate=function(t,e){var n=t.className,o=e.target,r=e.at,i=e.top,a=e.left,s=this.props,u=this.state;return o!==u.target||r!==u.at||Math.abs(i-u.top)>1||Math.abs(a-u.left)>1||n!==s.className},e.prototype.componentDidMount=function(){e.instance=this,document.addEventListener("mouseover",this.onHover)},e.prototype.componentDidUpdate=function(){var t=this.state.target;t&&this._hint&&this.setState(this.getHintPosition(this._hint,t))},e.prototype.componentWillUnmout=function(){e.instance=null,document.removeEventListener("mouseover",this.onHover)},e.prototype.render=function(){var t=this.props.className,e=this.state,n=e.target,o=e.at,r=e.top,i=e.left;return n&&l.default.createElement("div",{className:t+" "+t+"--"+o,style:{top:r,left:i},ref:this.setHintRef},l.default.createElement("div",{className:t+"__content"},n.getAttribute("data-rh")))},c(e,null,[{key:"instance",get:function(){return e._instance},set:function(t){if(e._instance)throw new Error("Only one instance of ReactHint is allowed.");e._instance=t}}]),e}(l.default.Component),s._instance=null,s.defaultProps={className:"react-hint"},u);e.default=p},function(e,n){e.exports=t}])});
 //# sourceMappingURL=react-hint.min.js.map

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

44523

2.02%

Lines of code

559

0.72%

Number of lines in readme file

43

7.5%

Number of medium supply chain risk alerts

0

-100%

No dependency changes