react-hint - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

lib/index.js

@@ -45,51 +45,61 @@ 'use strict';
 			}return null;
-		}, _this.getHintPosition = function (hint, target) {
-			var offsetWidth = hint.offsetWidth;
-			var offsetHeight = hint.offsetHeight;
+		}, _this.getPosition = function (target) {
+			var _this2 = _this;
+			var _container = _this2._container;
+			var _hint = _this2._hint;
 
+			var _container$getBoundin = _container.getBoundingClientRect();
+
+			var container_top = _container$getBoundin.top;
+			var container_left = _container$getBoundin.left;
+
+			var _hint$getBoundingClie = _hint.getBoundingClientRect();
+
+			var hint_width = _hint$getBoundingClie.width;
+			var hint_height = _hint$getBoundingClie.height;
+
 			var _target$getBoundingCl = target.getBoundingClientRect();
 
-			var width = _target$getBoundingCl.width;
-			var height = _target$getBoundingCl.height;
-			var top = _target$getBoundingCl.top;
-			var left = _target$getBoundingCl.left;
+			var target_top = _target$getBoundingCl.top;
+			var target_left = _target$getBoundingCl.left;
+			var target_width = _target$getBoundingCl.width;
+			var target_height = _target$getBoundingCl.height;
 
-			var at = target.getAttribute('data-rh-at');
 
+			var top = void 0,
+			    left = void 0;
+			var at = target.getAttribute('data-rh-at') || 'top';
+
 			switch (at) {
 				case 'left':
-					return {
-						at: at,
-						top: top + (height - offsetHeight >> 1),
-						left: left - offsetWidth
-					};
+					top = target_height - hint_height >> 1;
+					left = -hint_width;
+					break;
 
 				case 'right':
-					return {
-						at: at,
-						top: top + (height - offsetHeight >> 1),
-						left: left + width
-					};
+					top = target_height - hint_height >> 1;
+					left = target_width;
+					break;
 
 				case 'bottom':
-					return {
-						at: at,
-						top: top + height,
-						left: left + (width - offsetWidth >> 1)
-					};
+					top = target_height;
+					left = target_width - hint_width >> 1;
+					break;
 
 				case 'top':
 				default:
-					return {
-						at: 'top',
-						top: top - offsetHeight,
-						left: left + (width - offsetWidth >> 1)
-					};
+					top = -hint_height;
+					left = target_width - hint_width >> 1;
 			}
-		}, _this.setHintRef = function (ref) {
-			_this._hint = ref;
+
+			return {
+				at: at,
+				top: top + target_top - container_top,
+				left: left + target_left - container_left
+			};
 		}, _this.onHover = function (_ref) {
 			var target = _ref.target;
-
-			_this.setState({ target: _this.findHint(target) });
+			return _this.setState({ target: _this.findHint(target) });
+		}, _this.setRef = function (name, ref) {
+			return _this[name] = ref;
 		}, _temp), _possibleConstructorReturn(_this, _ret);
@@ -107,3 +117,3 @@ }
 
-		return target !== state.target || at !== state.at || Math.abs(top - state.top) > 1 || Math.abs(left - state.left) > 1 || className !== props.className;
+		return target !== state.target || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
 	};
@@ -119,4 +129,4 @@
 
-		if (!target || !this._hint) return;
-		this.setState(this.getHintPosition(this._hint, target));
+		if (!target) return;
+		this.setState(this.getPosition(target));
 	};
@@ -138,11 +148,16 @@
 
-		return target && _react2.default.createElement(
+		return _react2.default.createElement(
 			'div',
-			{ className: className + ' ' + className + '--' + at,
-				style: { top: top, left: left },
-				ref: this.setHintRef },
-			_react2.default.createElement(
+			{ style: { position: 'relative' },
+				ref: this.setRef.bind(this, '_container') },
+			target && _react2.default.createElement(
 				'div',
-				{ className: className + '__content' },
-				target.getAttribute('data-rh')
+				{ className: className + ' ' + className + '--' + at,
+					ref: this.setRef.bind(this, '_hint'),
+					style: { top: top, left: left } },
+				_react2.default.createElement(
+					'div',
+					{ className: className + '__content' },
+					target.getAttribute('data-rh')
+				)
 			)
@@ -149,0 +164,0 @@ );

package.json

 {
   "name": "react-hint",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "a simple tooltip component for React",
@@ -22,2 +22,3 @@ "author": "Vladimir Simonov <[e-mail]>",
     "postcss-cli": "2.x",
+    "primer-buttons": "*",
     "react": ">=0.14",
@@ -33,9 +34,9 @@ "react-dom": ">=0.14"
   "keywords": [
-    "inferno",
-    "preact",
+    "tooltip",
     "react",
+    "react-tooltip",
     "react-component",
-    "react-tooltip",
-    "tooltip"
+    "preact",
+    "inferno"
   ]
 }

README.md

@@ -5,3 +5,3 @@ react-hint
 
-![react-hint tooltip](demo/react-hint.gif)
+![react-hint tooltip](https://raw.githubusercontent.com/slmgc/react-hint/master/demo/react-hint.gif)
 
@@ -17,3 +17,3 @@ How to install
 
-`<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 />`.
+`<ReactHint />` is a singleton 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 />`.
 
@@ -26,12 +26,28 @@ ```jsx
 
-const Demo = () =>
-	<div>
-		<button data-rh="Hint">Default</button>
-		<button data-rh="Hint" data-rh-at="top">Top</button>
-		<button data-rh="Hint" data-rh-at="left">Left</button>
-		<button data-rh="Hint" data-rh-at="right">Right</button>
-		<button data-rh="Hint" data-rh-at="bottom">Bottom</button>
-		<ReactHint />
-	</div>
+class Demo extends React.Component {
+	state = {count: 0}
 
+	componentDidMount() {
+		setInterval(() => {
+			this.setState({count: this.state.count + 1})
+			ReactHint.instance.forceUpdate()
+		}, 1000)
+	}
+
+	render() {
+		const {count} = this.state
+		return (
+			<div>
+				<button data-rh="Default">Default</button>
+				<button data-rh="Top" data-rh-at="top">Top</button>
+				<button data-rh="Left" data-rh-at="left">Left</button>
+				<button data-rh="Right" data-rh-at="right">Right</button>
+				<button data-rh="Bottom" data-rh-at="bottom">Bottom</button>
+				<button data-rh={`Count: ${count}`}>Count: {count}</button>
+				<ReactHint />
+			</div>
+		)
+	}
+}
+
 render(<Demo />, document.getElementById('demo'))
@@ -38,0 +54,0 @@ ```

src/index.js

@@ -30,4 +30,4 @@ import React from 'react'
 			|| at !== state.at
-			|| Math.abs(top - state.top) > 1
-			|| Math.abs(left - state.left) > 1
+			|| top !== state.top
+			|| left !== state.left
 			|| className !== props.className
@@ -43,4 +43,4 @@ }
 		const {target} = this.state
-		if (!target || !this._hint) return
-		this.setState(this.getHintPosition(this._hint, target))
+		if (!target) return
+		this.setState(this.getPosition(target))
 	}
@@ -61,43 +61,60 @@
 
-	getHintPosition = (hint, target) => {
-		const {offsetWidth, offsetHeight} = hint
-		const {width, height, top, left} = target.getBoundingClientRect()
-		const at = target.getAttribute('data-rh-at')
+	getPosition = (target) => {
+		const {_container, _hint} = this
 
+		const {
+			top: container_top,
+			left: container_left,
+		} = _container.getBoundingClientRect()
+
+		const {
+			width: hint_width,
+			height: hint_height,
+		} = _hint.getBoundingClientRect()
+
+		const {
+			top: target_top,
+			left: target_left,
+			width: target_width,
+			height: target_height,
+		} = target.getBoundingClientRect()
+
+		let top, left
+		const at = target.getAttribute('data-rh-at') || 'top'
+
 		switch (at) {
-			case 'left': return {
-				at,
-				top: top + (height - offsetHeight >> 1),
-				left: left - offsetWidth
-			}
+			case 'left':
+				top = target_height - hint_height >> 1
+				left = -hint_width
+				break
 
-			case 'right': return {
-				at,
-				top: top + (height - offsetHeight >> 1),
-				left: left + width
-			}
+			case 'right':
+				top = target_height - hint_height >> 1
+				left = target_width
+				break
 
-			case 'bottom': return {
-				at,
-				top: top + height,
-				left: left + (width - offsetWidth >> 1)
-			}
+			case 'bottom':
+				top = target_height
+				left = target_width - hint_width >> 1
+				break
 
 			case 'top':
-			default: return {
-				at: 'top',
-				top: top - offsetHeight,
-				left: left + (width - offsetWidth >> 1)
-			}
+			default:
+				top = -hint_height
+				left = target_width - hint_width >> 1
 		}
-	}
 
-	setHintRef = (ref) => {
-		this._hint = ref
+		return {
+			at,
+			top: top + target_top - container_top,
+			left: left + target_left - container_left
+		}
 	}
 
-	onHover = ({target}) => {
+	onHover = ({target}) =>
 		this.setState({target: this.findHint(target)})
-	}
 
+	setRef = (name, ref) =>
+		this[name] = ref
+
 	render() {
@@ -107,11 +124,17 @@ const {className} = this.props
 
-		return target &&
-			<div className={`${className} ${className}--${at}`}
-				style={{top, left}}
-				ref={this.setHintRef}>
-					<div className={`${className}__content`}>
-						{target.getAttribute('data-rh')}
-					</div>
+		return (
+			<div style={{position: 'relative'}}
+				ref={this.setRef.bind(this, '_container')}>
+					{target &&
+						<div className={`${className} ${className}--${at}`}
+							ref={this.setRef.bind(this, '_hint')}
+							style={{top, left}}>
+								<div className={`${className}__content`}>
+									{target.getAttribute('data-rh')}
+								</div>
+						</div>
+					}
 			</div>
+		)
 	}
 }

umd/react-hint.js

 /*!
- * react-hint v1.0.1 - https://github.com/slmgc/react-hint
+ * react-hint v1.1.0 - https://github.com/slmgc/react-hint
  * MIT Licensed
@@ -114,51 +114,61 @@ */
 				}return null;
-			}, _this.getHintPosition = function (hint, target) {
-				var offsetWidth = hint.offsetWidth;
-				var offsetHeight = hint.offsetHeight;
+			}, _this.getPosition = function (target) {
+				var _this2 = _this;
+				var _container = _this2._container;
+				var _hint = _this2._hint;
 
+				var _container$getBoundin = _container.getBoundingClientRect();
+
+				var container_top = _container$getBoundin.top;
+				var container_left = _container$getBoundin.left;
+
+				var _hint$getBoundingClie = _hint.getBoundingClientRect();
+
+				var hint_width = _hint$getBoundingClie.width;
+				var hint_height = _hint$getBoundingClie.height;
+
 				var _target$getBoundingCl = target.getBoundingClientRect();
 
-				var width = _target$getBoundingCl.width;
-				var height = _target$getBoundingCl.height;
-				var top = _target$getBoundingCl.top;
-				var left = _target$getBoundingCl.left;
+				var target_top = _target$getBoundingCl.top;
+				var target_left = _target$getBoundingCl.left;
+				var target_width = _target$getBoundingCl.width;
+				var target_height = _target$getBoundingCl.height;
 
-				var at = target.getAttribute('data-rh-at');
 
+				var top = void 0,
+				    left = void 0;
+				var at = target.getAttribute('data-rh-at') || 'top';
+
 				switch (at) {
 					case 'left':
-						return {
-							at: at,
-							top: top + (height - offsetHeight >> 1),
-							left: left - offsetWidth
-						};
+						top = target_height - hint_height >> 1;
+						left = -hint_width;
+						break;
 
 					case 'right':
-						return {
-							at: at,
-							top: top + (height - offsetHeight >> 1),
-							left: left + width
-						};
+						top = target_height - hint_height >> 1;
+						left = target_width;
+						break;
 
 					case 'bottom':
-						return {
-							at: at,
-							top: top + height,
-							left: left + (width - offsetWidth >> 1)
-						};
+						top = target_height;
+						left = target_width - hint_width >> 1;
+						break;
 
 					case 'top':
 					default:
-						return {
-							at: 'top',
-							top: top - offsetHeight,
-							left: left + (width - offsetWidth >> 1)
-						};
+						top = -hint_height;
+						left = target_width - hint_width >> 1;
 				}
-			}, _this.setHintRef = function (ref) {
-				_this._hint = ref;
+
+				return {
+					at: at,
+					top: top + target_top - container_top,
+					left: left + target_left - container_left
+				};
 			}, _this.onHover = function (_ref) {
 				var target = _ref.target;
-
-				_this.setState({ target: _this.findHint(target) });
+				return _this.setState({ target: _this.findHint(target) });
+			}, _this.setRef = function (name, ref) {
+				return _this[name] = ref;
 			}, _temp), _possibleConstructorReturn(_this, _ret);
@@ -176,3 +186,3 @@ }
 
-			return target !== state.target || at !== state.at || Math.abs(top - state.top) > 1 || Math.abs(left - state.left) > 1 || className !== props.className;
+			return target !== state.target || at !== state.at || top !== state.top || left !== state.left || className !== props.className;
 		};
@@ -188,4 +198,4 @@
 
-			if (!target || !this._hint) return;
-			this.setState(this.getHintPosition(this._hint, target));
+			if (!target) return;
+			this.setState(this.getPosition(target));
 		};
@@ -207,21 +217,31 @@
 
-			return target && _react2.default.createElement(
+			return _react2.default.createElement(
 				'div',
-				{ className: className + ' ' + className + '--' + at,
-					style: { top: top, left: left },
-					ref: this.setHintRef, __source: {
+				{ style: { position: 'relative' },
+					ref: this.setRef.bind(this, '_container'), __source: {
 						fileName: _jsxFileName,
-						lineNumber: 105
+						lineNumber: 122
 					},
 					__self: this
 				},
-				_react2.default.createElement(
+				target && _react2.default.createElement(
 					'div',
-					{ className: className + '__content', __source: {
+					{ className: className + ' ' + className + '--' + at,
+						ref: this.setRef.bind(this, '_hint'),
+						style: { top: top, left: left }, __source: {
 							fileName: _jsxFileName,
-							lineNumber: 108
+							lineNumber: 125
 						},
 						__self: this
 					},
-					target.getAttribute('data-rh')
+					_react2.default.createElement(
+						'div',
+						{ className: className + '__content', __source: {
+								fileName: _jsxFileName,
+								lineNumber: 128
+							},
+							__self: this
+						},
+						target.getAttribute('data-rh')
+					)
 				)
@@ -228,0 +248,0 @@ );

umd/react-hint.min.js

 /*!
- * react-hint v1.0.1 - https://github.com/slmgc/react-hint
+ * react-hint v1.1.0 - 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 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}])});
+!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,s,u=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=(s=c=function(t){function e(){var n,o,a;r(this,e);for(var c=arguments.length,s=Array(c),u=0;u<c;u++)s[u]=arguments[u];return n=o=i(this,t.call.apply(t,[this].concat(s))),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.getPosition=function(t){var e=o,n=e._container,r=e._hint,i=n.getBoundingClientRect(),a=i.top,c=i.left,s=r.getBoundingClientRect(),u=s.width,f=s.height,l=t.getBoundingClientRect(),p=l.top,d=l.left,h=l.width,m=l.height,v=void 0,y=void 0,b=t.getAttribute("data-rh-at")||"top";switch(b){case"left":v=m-f>>1,y=-u;break;case"right":v=m-f>>1,y=h;break;case"bottom":v=m,y=h-u>>1;break;case"top":default:v=-f,y=h-u>>1}return{at:b,top:v+p-a,left:y+d-c}},o.onHover=function(t){var e=t.target;return o.setState({target:o.findHint(e)})},o.setRef=function(t,e){return o[t]=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,c=this.props,s=this.state;return o!==s.target||r!==s.at||i!==s.top||a!==s.left||n!==c.className},e.prototype.componentDidMount=function(){e.instance=this,document.addEventListener("mouseover",this.onHover)},e.prototype.componentDidUpdate=function(){var t=this.state.target;t&&this.setState(this.getPosition(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 l.default.createElement("div",{style:{position:"relative"},ref:this.setRef.bind(this,"_container")},n&&l.default.createElement("div",{className:t+" "+t+"--"+o,ref:this.setRef.bind(this,"_hint"),style:{top:r,left:i}},l.default.createElement("div",{className:t+"__content"},n.getAttribute("data-rh"))))},u(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),c._instance=null,c.defaultProps={className:"react-hint"},s);e.default=p},function(e,n){e.exports=t}])});
 //# sourceMappingURL=react-hint.min.js.map

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

Improved metrics

Total package byte prevSize

48028

increased by7.87%

Lines of code

602

increased by7.69%

Number of lines in readme file

59

increased by37.21%

Worsened metrics

Dev dependency count

6

increased by20%

No dependency changes