react-hint - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

lib/index.js

@@ -36,2 +36,3 @@ 'use strict';
 			target: null,
+			content: null,
 			cls: null,
@@ -48,3 +49,3 @@ at: 'top',
 			}return null;
-		}, _this.getPosition = function (target) {
+		}, _this.getHintData = function (target) {
 			var _this2 = _this;
@@ -54,2 +55,6 @@ var _container = _this2._container;
 
+			var content = target.getAttribute('data-rh');
+			var cls = target.getAttribute('data-rh-cls');
+			var at = target.getAttribute('data-rh-at') || 'top';
+
 			var _container$getBoundin = _container.getBoundingClientRect();
@@ -75,4 +80,2 @@
 			    left = void 0;
-			var at = target.getAttribute('data-rh-at') || 'top';
-
 			switch (at) {
@@ -101,3 +104,3 @@ case 'left':
 			return {
-				at: at,
+				content: content, cls: cls, at: at,
 				top: top + target_top - container_top,
@@ -112,16 +115,11 @@ left: left + target_left - container_left
 				target = _this.findHint(target);
-				var cls = target ? target.getAttribute('data-rh-cls') : null;
-				_this.setState({ target: target, cls: cls });
+				_this.setState({ target: target });
 			}, 100);
 		}, _this.setRef = function (name, ref) {
 			return _this[name] = ref;
-		}, _this.renderContent = function (target) {
-			var text = target.getAttribute('data-rh');
-
-			if (text[0] === '#') {
-				var el = document.getElementById(text.slice(1));
+		}, _this.renderContent = function (content) {
+			if (content && content[0] === '#') {
+				var el = document.getElementById(content.slice(1));
 				if (el) return _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: el.innerHTML } });
-			}
-
-			return text;
+			}return content;
 		}, _temp), _possibleConstructorReturn(_this, _ret);
@@ -133,2 +131,3 @@ }
 		var target = _ref3.target;
+		var content = _ref3.content;
 		var cls = _ref3.cls;
@@ -141,3 +140,3 @@ var at = _ref3.at;
 
-		return target !== state.target || cls !== state.cls || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
+		return target !== state.target || content !== state.content || cls !== state.cls || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
 	};
@@ -164,3 +163,3 @@
 
-		this.setState(this.getPosition(target));
+		this.setState(this.getHintData(target));
 	};
@@ -176,2 +175,3 @@
 		var target = _state.target;
+		var content = _state.content;
 		var cls = _state.cls;
@@ -195,3 +195,3 @@ var at = _state.at;
 					{ className: className + '__content' },
-					this.renderContent(target)
+					this.renderContent(content)
 				)
@@ -198,0 +198,0 @@ )

package.json

 {
   "name": "react-hint",
-  "version": "1.3.0",
-  "description": "Tooltip component for React, Preact & Inferno",
+  "version": "1.3.1",
+  "description": "Tooltip component for React, Preact, Inferno",
   "author": "Vladimir Simonov <[e-mail]>",
@@ -6,0 +6,0 @@ "homepage": "https://github.com/slmgc/react-hint",

README.md

@@ -1,2 +0,2 @@
-react-hint
+React-hint
 ==========
@@ -17,8 +17,5 @@ **React-hint** is a small tooltip component for [React](https://github.com/facebook/react) which is developed with simplicity and performance in mind. It also plays nicely with [Preact](https://github.com/developit/preact) and [Inferno](https://github.com/trueadm/inferno). There is a [demo page](https://slmgc.github.io/react-hint/).
 ----------
-ReactHint Property|Type|Default Value|Description
+Property/Attribute|Type|Default Value|Description
 :---|:---|:---|:---
 className|String|react-hint|`<ReactHint />` is a singleton component. You can completely override the default tooltip style by passing `className` property with a new base class name.
-
-Element Attribute|Type|Default Value|Description
-:---|:---|:---|:---
 data-rh|String or #element-id||To show a tooltip on any DOM element and its children add `data-rh` attribute with a tooltip text to the element. Pass `#element-id` instead of a text to show the element's HTML content.
@@ -72,3 +69,3 @@ data-rh-at|top, left, right, bottom|top|The default placement of a tooltip is at the top, but you can add `data-rh-at` attribute to change the placement.
 ---------------
-**react-hint** uses [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) under the hood to decide if it needs to be updated. You can use `ReactHint.instance.forceUpdate()` in case you want to force an update.
+**React-hint** uses [shouldComponentUpdate](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) under the hood to decide if it needs to be updated. You can use `ReactHint.instance.forceUpdate()` in case you want to force an update.
 
@@ -75,0 +72,0 @@ License

src/index.js

@@ -14,4 +14,3 @@ import React from 'react'
 		} else {
-			document.removeEventListener('mouseover',
-				ReactHint.instance.onHover)
+			document.removeEventListener('mouseover', ReactHint.instance.onHover)
 		}
@@ -28,2 +27,3 @@
 		target: null,
+		content: null,
 		cls: null,
@@ -35,5 +35,6 @@ at: 'top',
 
-	shouldComponentUpdate({className}, {target, cls, at, top, left}) {
+	shouldComponentUpdate({className}, {target, content, cls, at, top, left}) {
 		const {props, state} = this
 		return target !== state.target
+			|| content !== state.content
 			|| cls !== state.cls
@@ -58,3 +59,3 @@ || at !== state.at
 
-		this.setState(this.getPosition(target))
+		this.setState(this.getHintData(target))
 	}
@@ -75,4 +76,7 @@
 
-	getPosition = (target) => {
+	getHintData = (target) => {
 		const {_container, _hint} = this
+		const content = target.getAttribute('data-rh')
+		const cls = target.getAttribute('data-rh-cls')
+		const at = target.getAttribute('data-rh-at') || 'top'
 
@@ -97,4 +101,2 @@ const {
 		let top, left
-		const at = target.getAttribute('data-rh-at') || 'top'
-
 		switch (at) {
@@ -123,3 +125,3 @@ case 'left':
 		return {
-			at,
+			content, cls, at,
 			top: top + target_top - container_top,
@@ -134,4 +136,3 @@ left: left + target_left - container_left
 			target = this.findHint(target)
-			const cls = target ? target.getAttribute('data-rh-cls') : null
-			this.setState({target, cls})
+			this.setState({target})
 		}, 100)
@@ -143,11 +144,7 @@ }
 
-	renderContent = (target) => {
-		const text = target.getAttribute('data-rh')
-
-		if (text[0] === '#') {
-			const el = document.getElementById(text.slice(1))
+	renderContent = (content) => {
+		if (content && content[0] === '#') {
+			const el = document.getElementById(content.slice(1))
 			if (el) return <span dangerouslySetInnerHTML={{__html: el.innerHTML}} />
-		}
-
-		return text
+		} return content
 	}
@@ -157,3 +154,3 @@
 		const {className} = this.props
-		const {target, cls, at, top, left} = this.state
+		const {target, content, cls, at, top, left} = this.state
 
@@ -168,3 +165,3 @@ return (
 								<div className={`${className}__content`}>
-									{this.renderContent(target)}
+									{this.renderContent(content)}
 								</div>
@@ -171,0 +168,0 @@ </div>

umd/react-hint.js

 /*!
- * react-hint v1.3.0 - https://github.com/slmgc/react-hint
+ * react-hint v1.3.1 - https://github.com/slmgc/react-hint
  * MIT Licensed
@@ -107,2 +107,3 @@ */
 				target: null,
+				content: null,
 				cls: null,
@@ -119,3 +120,3 @@ at: 'top',
 				}return null;
-			}, _this.getPosition = function (target) {
+			}, _this.getHintData = function (target) {
 				var _this2 = _this;
@@ -125,2 +126,6 @@ var _container = _this2._container;
 
+				var content = target.getAttribute('data-rh');
+				var cls = target.getAttribute('data-rh-cls');
+				var at = target.getAttribute('data-rh-at') || 'top';
+
 				var _container$getBoundin = _container.getBoundingClientRect();
@@ -146,4 +151,2 @@
 				    left = void 0;
-				var at = target.getAttribute('data-rh-at') || 'top';
-
 				switch (at) {
@@ -172,3 +175,3 @@ case 'left':
 				return {
-					at: at,
+					content: content, cls: cls, at: at,
 					top: top + target_top - container_top,
@@ -183,21 +186,16 @@ left: left + target_left - container_left
 					target = _this.findHint(target);
-					var cls = target ? target.getAttribute('data-rh-cls') : null;
-					_this.setState({ target: target, cls: cls });
+					_this.setState({ target: target });
 				}, 100);
 			}, _this.setRef = function (name, ref) {
 				return _this[name] = ref;
-			}, _this.renderContent = function (target) {
-				var text = target.getAttribute('data-rh');
-
-				if (text[0] === '#') {
-					var el = document.getElementById(text.slice(1));
+			}, _this.renderContent = function (content) {
+				if (content && content[0] === '#') {
+					var el = document.getElementById(content.slice(1));
 					if (el) return _react2.default.createElement('span', { dangerouslySetInnerHTML: { __html: el.innerHTML }, __source: {
 							fileName: _jsxFileName,
-							lineNumber: 140
+							lineNumber: 139
 						},
 						__self: _this3
 					});
-				}
-
-				return text;
+				}return content;
 			}, _temp), _possibleConstructorReturn(_this, _ret);
@@ -209,2 +207,3 @@ }
 			var target = _ref3.target;
+			var content = _ref3.content;
 			var cls = _ref3.cls;
@@ -217,3 +216,3 @@ var at = _ref3.at;
 
-			return target !== state.target || cls !== state.cls || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
+			return target !== state.target || content !== state.content || cls !== state.cls || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
 		};
@@ -240,3 +239,3 @@
 
-			this.setState(this.getPosition(target));
+			this.setState(this.getHintData(target));
 		};
@@ -252,2 +251,3 @@
 			var target = _state.target;
+			var content = _state.content;
 			var cls = _state.cls;
@@ -264,3 +264,3 @@ var at = _state.at;
 						fileName: _jsxFileName,
-						lineNumber: 151
+						lineNumber: 148
 					},
@@ -275,3 +275,3 @@ __self: this
 							fileName: _jsxFileName,
-							lineNumber: 154
+							lineNumber: 151
 						},
@@ -284,7 +284,7 @@ __self: this
 								fileName: _jsxFileName,
-								lineNumber: 157
+								lineNumber: 154
 							},
 							__self: this
 						},
-						this.renderContent(target)
+						this.renderContent(content)
 					)
@@ -291,0 +291,0 @@ )

umd/react-hint.min.js

 /*!
- * react-hint v1.3.0 - https://github.com/slmgc/react-hint
+ * react-hint v1.3.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 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 u,c,s=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}}(),l=n(2),f=o(l),p=(c=u=function(t){function e(){var n,o,a;r(this,e);for(var u=arguments.length,c=Array(u),s=0;s<u;s++)c[s]=arguments[s];return n=o=i(this,t.call.apply(t,[this].concat(c))),o.state={target:null,cls:null,at:"top",top:0,left:0},o.findHint=function(t){for(;t&&t!==document;){if(t.hasAttribute("data-rh"))return t;if(t===o._hint)return o.state.target;t=t.parentNode}return null},o.getPosition=function(t){var e=o,n=e._container,r=e._hint,i=n.getBoundingClientRect(),a=i.top,u=i.left,c=r.getBoundingClientRect(),s=c.width,l=c.height,f=t.getBoundingClientRect(),p=f.top,d=f.left,h=f.width,m=f.height,v=void 0,g=void 0,y=t.getAttribute("data-rh-at")||"top";switch(y){case"left":v=m-l>>1,g=-s;break;case"right":v=m-l>>1,g=h;break;case"bottom":v=m,g=h-s>>1;break;case"top":default:v=-l,g=h-s>>1}return{at:y,top:v+p-a,left:g+d-u}},o.onHover=function(t){var e=t.target;clearTimeout(o.timeout),o.timeout=setTimeout(function(){e=o.findHint(e);var t=e?e.getAttribute("data-rh-cls"):null;o.setState({target:e,cls:t})},100)},o.setRef=function(t,e){return o[t]=e},o.renderContent=function(t){var e=t.getAttribute("data-rh");if("#"===e[0]){var n=document.getElementById(e.slice(1));if(n)return f.default.createElement("span",{dangerouslySetInnerHTML:{__html:n.innerHTML}})}return 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.cls,i=e.at,a=e.top,u=e.left,c=this.props,s=this.state;return o!==s.target||r!==s.cls||i!==s.at||a!==s.top||u!==s.left||n!==c.className},e.prototype.componentDidMount=function(){e.instance&&(e.instance=null),e.instance=this},e.prototype.componentDidUpdate=function(){var t=this.state.target;if(t){var e=t.getBoundingClientRect(),n=e.top,o=e.left,r=e.width,i=e.height;(n||o||r||i)&&this.setState(this.getPosition(t))}},e.prototype.componentWillUnmount=function(){e.instance=null},e.prototype.render=function(){var t=this.props.className,e=this.state,n=e.target,o=e.cls,r=e.at,i=e.top,a=e.left;return f.default.createElement("div",{style:{position:"relative"},ref:this.setRef.bind(this,"_container")},n&&f.default.createElement("div",{className:t+" "+t+"--"+r+" "+o,ref:this.setRef.bind(this,"_hint"),style:{top:i,left:a}},f.default.createElement("div",{className:t+"__content"},this.renderContent(n))))},s(e,null,[{key:"instance",get:function(){return e._instance},set:function(t){t?document.addEventListener("mouseover",t.onHover):document.removeEventListener("mouseover",e.instance.onHover),e._instance=t}}]),e}(f.default.Component),u._instance=null,u.defaultProps={className:"react-hint"},c);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 c,u,s=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}}(),l=n(2),f=o(l),p=(u=c=function(t){function e(){var n,o,a;r(this,e);for(var c=arguments.length,u=Array(c),s=0;s<c;s++)u[s]=arguments[s];return n=o=i(this,t.call.apply(t,[this].concat(u))),o.state={target:null,content:null,cls:null,at:"top",top:0,left:0},o.findHint=function(t){for(;t&&t!==document;){if(t.hasAttribute("data-rh"))return t;if(t===o._hint)return o.state.target;t=t.parentNode}return null},o.getHintData=function(t){var e=o,n=e._container,r=e._hint,i=t.getAttribute("data-rh"),a=t.getAttribute("data-rh-cls"),c=t.getAttribute("data-rh-at")||"top",u=n.getBoundingClientRect(),s=u.top,l=u.left,f=r.getBoundingClientRect(),p=f.width,d=f.height,h=t.getBoundingClientRect(),m=h.top,g=h.left,v=h.width,y=h.height,b=void 0,_=void 0;switch(c){case"left":b=y-d>>1,_=-p;break;case"right":b=y-d>>1,_=v;break;case"bottom":b=y,_=v-p>>1;break;case"top":default:b=-d,_=v-p>>1}return{content:i,cls:a,at:c,top:b+m-s,left:_+g-l}},o.onHover=function(t){var e=t.target;clearTimeout(o.timeout),o.timeout=setTimeout(function(){e=o.findHint(e),o.setState({target:e})},100)},o.setRef=function(t,e){return o[t]=e},o.renderContent=function(t){if(t&&"#"===t[0]){var e=document.getElementById(t.slice(1));if(e)return f.default.createElement("span",{dangerouslySetInnerHTML:{__html:e.innerHTML}})}return t},a=n,i(o,a)}return a(e,t),e.prototype.shouldComponentUpdate=function(t,e){var n=t.className,o=e.target,r=e.content,i=e.cls,a=e.at,c=e.top,u=e.left,s=this.props,l=this.state;return o!==l.target||r!==l.content||i!==l.cls||a!==l.at||c!==l.top||u!==l.left||n!==s.className},e.prototype.componentDidMount=function(){e.instance&&(e.instance=null),e.instance=this},e.prototype.componentDidUpdate=function(){var t=this.state.target;if(t){var e=t.getBoundingClientRect(),n=e.top,o=e.left,r=e.width,i=e.height;(n||o||r||i)&&this.setState(this.getHintData(t))}},e.prototype.componentWillUnmount=function(){e.instance=null},e.prototype.render=function(){var t=this.props.className,e=this.state,n=e.target,o=e.content,r=e.cls,i=e.at,a=e.top,c=e.left;return f.default.createElement("div",{style:{position:"relative"},ref:this.setRef.bind(this,"_container")},n&&f.default.createElement("div",{className:t+" "+t+"--"+i+" "+r,ref:this.setRef.bind(this,"_hint"),style:{top:a,left:c}},f.default.createElement("div",{className:t+"__content"},this.renderContent(o))))},s(e,null,[{key:"instance",get:function(){return e._instance},set:function(t){t?document.addEventListener("mouseover",t.onHover):document.removeEventListener("mouseover",e.instance.onHover),e._instance=t}}]),e}(f.default.Component),c._instance=null,c.defaultProps={className:"react-hint"},u);e.default=p},function(e,n){e.exports=t}])});
 //# sourceMappingURL=react-hint.min.js.map

No alert changes

Improved metrics

Total package byte prevSize

55217

increased by1.08%

Lines of code

689

increased by0.58%

Worsened metrics

Number of lines in readme file

72

decreased by-4%

No dependency changes