Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-hint
Advanced tools
react-hint - npm Package Compare versions
Comparing version 3.0.1 to 3.1.0
@@ -0,1 +1,4 @@ | ||
| ## 3.1.0 (May 12, 2018) | ||
| * #25: Add support for tooltip autopositioning via `autoPosition` property | ||
| ## 3.0.1 (Mar 5, 2018) | ||
@@ -2,0 +5,0 @@ * #19: Fix infinite setState loop in IE11 |
@@ -71,2 +71,3 @@ 'use strict'; | ||
| var attribute = _ref5.attribute, | ||
| autoPosition = _ref5.autoPosition, | ||
| position = _ref5.position; | ||
@@ -91,2 +92,45 @@ | ||
| if (autoPosition) { | ||
| var isHoriz = ['left', 'right'].includes(at); | ||
| var _document$documentEle = document.documentElement, | ||
| clientHeight = _document$documentEle.clientHeight, | ||
| clientWidth = _document$documentEle.clientWidth; | ||
| var directions = { | ||
| left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0, | ||
| right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth, | ||
| bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight, | ||
| top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0 | ||
| }; | ||
| switch (at) { | ||
| case 'left': | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.bottom) at = 'top'; | ||
| break; | ||
| case 'right': | ||
| if (!directions.right) at = 'left'; | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.bottom) at = 'top'; | ||
| break; | ||
| case 'bottom': | ||
| if (!directions.bottom) at = 'top'; | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.right) at = 'left'; | ||
| break; | ||
| case 'top': | ||
| default: | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.right) at = 'left'; | ||
| break; | ||
| } | ||
| } | ||
| var top = void 0, | ||
@@ -180,2 +224,3 @@ left = void 0; | ||
| attribute: 'data-rh', | ||
| autoPosition: false, | ||
| className: 'react-hint', | ||
@@ -182,0 +227,0 @@ delay: 0, |
| { | ||
| "name": "react-hint", | ||
| "version": "3.0.1", | ||
| "version": "3.1.0", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "description": "Tooltip component for React, Preact, Inferno", |
@@ -37,3 +37,3 @@ React-hint | ||
| // UMD | ||
| const ReactHint = window.ReactHintFactory.default(window.React) | ||
| const ReactHint = window.ReactHintFactory(window.React) | ||
| ``` | ||
@@ -47,2 +47,3 @@ | ||
| | attribute | String | "data-rh" | Allows setting a custom tooltip attribute instead of the default one. | ||
| | autoPosition | Boolean | false | Autopositions tooltips based on closeness to window borders. | ||
| | className | String | "react-hint" | You can override the tooltip style by passing the `className` property. | ||
@@ -87,3 +88,3 @@ | delay | Number | 0 | The default delay before showing/hiding the tooltip. | ||
| return <div> | ||
| <ReactHint events delay={100} /> | ||
| <ReactHint autoPosition events delay={100} /> | ||
| <ReactHint persist | ||
@@ -90,0 +91,0 @@ attribute="data-custom" |
@@ -5,2 +5,3 @@ export default ({Component, createElement}) => | ||
| attribute: 'data-rh', | ||
| autoPosition: false, | ||
| className: 'react-hint', | ||
@@ -73,5 +74,5 @@ delay: 0, | ||
| getHintData = ({target}, {attribute, position}) => { | ||
| getHintData = ({target}, {attribute, autoPosition, position}) => { | ||
| const content = target.getAttribute(attribute) || '' | ||
| const at = target.getAttribute(`${attribute}-at`) || position | ||
| let at = target.getAttribute(`${attribute}-at`) || position | ||
@@ -95,2 +96,53 @@ const { | ||
| if (autoPosition) { | ||
| const isHoriz = ['left', 'right'].includes(at) | ||
| const { | ||
| clientHeight, | ||
| clientWidth | ||
| } = document.documentElement | ||
| const directions = { | ||
| left: (isHoriz | ||
| ? targetLeft - hintWidth | ||
| : targetLeft + (targetWidth - hintWidth >> 1)) > 0, | ||
| right: (isHoriz | ||
| ? targetLeft + targetWidth + hintWidth | ||
| : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth, | ||
| bottom: (isHoriz | ||
| ? targetTop + (targetHeight + hintHeight >> 1) | ||
| : targetTop + targetHeight + hintHeight) < clientHeight, | ||
| top: (isHoriz | ||
| ? targetTop - (hintHeight >> 1) | ||
| : targetTop - hintHeight) > 0 | ||
| } | ||
| switch (at) { | ||
| case 'left': | ||
| if (!directions.left) at = 'right' | ||
| if (!directions.top) at = 'bottom' | ||
| if (!directions.bottom) at = 'top' | ||
| break | ||
| case 'right': | ||
| if (!directions.right) at = 'left' | ||
| if (!directions.top) at = 'bottom' | ||
| if (!directions.bottom) at = 'top' | ||
| break | ||
| case 'bottom': | ||
| if (!directions.bottom) at = 'top' | ||
| if (!directions.left) at = 'right' | ||
| if (!directions.right) at = 'left' | ||
| break | ||
| case 'top': | ||
| default: | ||
| if (!directions.top) at = 'bottom' | ||
| if (!directions.left) at = 'right' | ||
| if (!directions.right) at = 'left' | ||
| break | ||
| } | ||
| } | ||
| let top, left | ||
@@ -97,0 +149,0 @@ switch (at) { |
| /*! | ||
| * react-hint v3.0.1 - https://react-hint.js.org | ||
| * react-hint v3.1.0 - https://react-hint.js.org | ||
| * MIT Licensed | ||
@@ -159,2 +159,3 @@ */ | ||
| var attribute = _ref5.attribute, | ||
| autoPosition = _ref5.autoPosition, | ||
| position = _ref5.position; | ||
@@ -179,2 +180,45 @@ | ||
| if (autoPosition) { | ||
| var isHoriz = ['left', 'right'].includes(at); | ||
| var _document$documentEle = document.documentElement, | ||
| clientHeight = _document$documentEle.clientHeight, | ||
| clientWidth = _document$documentEle.clientWidth; | ||
| var directions = { | ||
| left: (isHoriz ? targetLeft - hintWidth : targetLeft + (targetWidth - hintWidth >> 1)) > 0, | ||
| right: (isHoriz ? targetLeft + targetWidth + hintWidth : targetLeft + (targetWidth + hintWidth >> 1)) < clientWidth, | ||
| bottom: (isHoriz ? targetTop + (targetHeight + hintHeight >> 1) : targetTop + targetHeight + hintHeight) < clientHeight, | ||
| top: (isHoriz ? targetTop - (hintHeight >> 1) : targetTop - hintHeight) > 0 | ||
| }; | ||
| switch (at) { | ||
| case 'left': | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.bottom) at = 'top'; | ||
| break; | ||
| case 'right': | ||
| if (!directions.right) at = 'left'; | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.bottom) at = 'top'; | ||
| break; | ||
| case 'bottom': | ||
| if (!directions.bottom) at = 'top'; | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.right) at = 'left'; | ||
| break; | ||
| case 'top': | ||
| default: | ||
| if (!directions.top) at = 'bottom'; | ||
| if (!directions.left) at = 'right'; | ||
| if (!directions.right) at = 'left'; | ||
| break; | ||
| } | ||
| } | ||
| var top = void 0, | ||
@@ -268,2 +312,3 @@ left = void 0; | ||
| attribute: 'data-rh', | ||
| autoPosition: false, | ||
| className: 'react-hint', | ||
@@ -270,0 +315,0 @@ delay: 0, |
| /*! | ||
| * react-hint v3.0.1 - https://react-hint.js.org | ||
| * react-hint v3.1.0 - https://react-hint.js.org | ||
| * MIT Licensed | ||
| */ | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ReactHintFactory=e():t.ReactHintFactory=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function o(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}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e,n,r=t.Component,i=t.createElement;return n=e=function(t){function e(){var n,r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var i=arguments.length,u=Array(i),a=0;a<i;a++)u[a]=arguments[a];return n=r=o(this,t.call.apply(t,[this].concat(u))),r.state={target:null},r._containerStyle={position:"relative"},r.toggleEvents=function(t,e){var n=t.events,o=t.events,i=o.click,u=o.focus,a=o.hover,c=e?"addEventListener":"removeEventListener",s=!0===n;(i||s)&&document[c]("click",r.toggleHint),(u||s)&&document[c]("focusin",r.toggleHint),(a||s)&&document[c]("mouseover",r.toggleHint),(i||a||s)&&document[c]("touchend",r.toggleHint)},r.toggleHint=function(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target,e=void 0===t?null:t;clearTimeout(r._timeout),r._timeout=setTimeout(function(){return r.setState(function(){return{target:r.getHint(e)}})},r.props.delay)},r.getHint=function(t){for(var e=r.props,n=e.attribute,o=e.persist,i=r.state.target;t&&t!==document;){if(o&&t===r._hint)return i;if(t.hasAttribute(n))return t;t=t.parentNode}return null},r.shallowEqual=function(t,e){var n=Object.keys(t);return n.length===Object.keys(e).length&&n.reduce(function(n,o){return n&&("function"==typeof t[o]&&"function"==typeof e[o]||t[o]===e[o])},!0)},r.getHintData=function(t,e){var n=t.target,o=e.attribute,i=e.position,u=n.getAttribute(o)||"",a=n.getAttribute(o+"-at")||i,c=r._container.getBoundingClientRect(),s=c.top,l=c.left,f=r._hint.getBoundingClientRect(),p=f.width,d=f.height,h=n.getBoundingClientRect(),g=h.top,y=h.left,v=h.width,m=h.height,b=void 0,_=void 0;switch(a){case"left":b=m-d>>1,_=-p;break;case"right":b=m-d>>1,_=v;break;case"bottom":b=m,_=v-p>>1;break;case"top":default:b=-d,_=v-p>>1}return{content:u,at:a,top:b+g-s|0,left:_+y-l|0}},o(r,n)}return function(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,t),e.prototype.componentDidMount=function(){this.toggleEvents(this.props,!0)},e.prototype.componentWillUnmount=function(){this.toggleEvents(this.props,!1),clearTimeout(this._timeout)},e.prototype.shouldComponentUpdate=function(t,e){return!this.shallowEqual(e,this.state)||!this.shallowEqual(t,this.props)},e.prototype.componentDidUpdate=function(){this.state.target&&this.setState(this.getHintData)},e.prototype.render=function(){var t=this,e=this.props,n=e.className,o=e.onRenderContent,r=this.state,u=r.target,a=r.content,c=r.at,s=r.top,l=r.left;return i("div",{ref:function(e){return t._container=e},style:this._containerStyle},u&&i("div",{className:n+" "+n+"--"+c,ref:function(e){return t._hint=e},style:{top:s,left:l}},o?o(u,a):i("div",{className:n+"__content"},a)))},e}(r),e.defaultProps={attribute:"data-rh",className:"react-hint",delay:0,events:!1,onRenderContent:null,persist:!1,position:"top"},n}}]).default}); | ||
| !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ReactHintFactory=e():t.ReactHintFactory=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";function o(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}Object.defineProperty(e,"__esModule",{value:!0}),e.default=function(t){var e,n,r=t.Component,i=t.createElement;return n=e=function(t){function e(){var n,r;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,e);for(var i=arguments.length,u=Array(i),a=0;a<i;a++)u[a]=arguments[a];return n=r=o(this,t.call.apply(t,[this].concat(u))),r.state={target:null},r._containerStyle={position:"relative"},r.toggleEvents=function(t,e){var n=t.events,o=t.events,i=o.click,u=o.focus,a=o.hover,c=e?"addEventListener":"removeEventListener",s=!0===n;(i||s)&&document[c]("click",r.toggleHint),(u||s)&&document[c]("focusin",r.toggleHint),(a||s)&&document[c]("mouseover",r.toggleHint),(i||a||s)&&document[c]("touchend",r.toggleHint)},r.toggleHint=function(){var t=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).target,e=void 0===t?null:t;clearTimeout(r._timeout),r._timeout=setTimeout(function(){return r.setState(function(){return{target:r.getHint(e)}})},r.props.delay)},r.getHint=function(t){for(var e=r.props,n=e.attribute,o=e.persist,i=r.state.target;t&&t!==document;){if(o&&t===r._hint)return i;if(t.hasAttribute(n))return t;t=t.parentNode}return null},r.shallowEqual=function(t,e){var n=Object.keys(t);return n.length===Object.keys(e).length&&n.reduce(function(n,o){return n&&("function"==typeof t[o]&&"function"==typeof e[o]||t[o]===e[o])},!0)},r.getHintData=function(t,e){var n=t.target,o=e.attribute,i=e.autoPosition,u=e.position,a=n.getAttribute(o)||"",c=n.getAttribute(o+"-at")||u,s=r._container.getBoundingClientRect(),l=s.top,f=s.left,p=r._hint.getBoundingClientRect(),h=p.width,d=p.height,g=n.getBoundingClientRect(),m=g.top,b=g.left,y=g.width,v=g.height;if(i){var _=["left","right"].includes(c),w=document.documentElement,E=w.clientHeight,j=w.clientWidth,H={left:(_?b-h:b+(y-h>>1))>0,right:(_?b+y+h:b+(y+h>>1))<j,bottom:(_?m+(v+d>>1):m+v+d)<E,top:(_?m-(d>>1):m-d)>0};switch(c){case"left":H.left||(c="right"),H.top||(c="bottom"),H.bottom||(c="top");break;case"right":H.right||(c="left"),H.top||(c="bottom"),H.bottom||(c="top");break;case"bottom":H.bottom||(c="top"),H.left||(c="right"),H.right||(c="left");break;case"top":default:H.top||(c="bottom"),H.left||(c="right"),H.right||(c="left")}}var x=void 0,O=void 0;switch(c){case"left":x=v-d>>1,O=-h;break;case"right":x=v-d>>1,O=y;break;case"bottom":x=v,O=y-h>>1;break;case"top":default:x=-d,O=y-h>>1}return{content:a,at:c,top:x+m-l|0,left:O+b-f|0}},o(r,n)}return function(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,t),e.prototype.componentDidMount=function(){this.toggleEvents(this.props,!0)},e.prototype.componentWillUnmount=function(){this.toggleEvents(this.props,!1),clearTimeout(this._timeout)},e.prototype.shouldComponentUpdate=function(t,e){return!this.shallowEqual(e,this.state)||!this.shallowEqual(t,this.props)},e.prototype.componentDidUpdate=function(){this.state.target&&this.setState(this.getHintData)},e.prototype.render=function(){var t=this,e=this.props,n=e.className,o=e.onRenderContent,r=this.state,u=r.target,a=r.content,c=r.at,s=r.top,l=r.left;return i("div",{ref:function(e){return t._container=e},style:this._containerStyle},u&&i("div",{className:n+" "+n+"--"+c,ref:function(e){return t._hint=e},style:{top:s,left:l}},o?o(u,a):i("div",{className:n+"__content"},a)))},e}(r),e.defaultProps={attribute:"data-rh",autoPosition:!1,className:"react-hint",delay:0,events:!1,onRenderContent:null,persist:!1,position:"top"},n}}]).default}); | ||
| //# sourceMappingURL=react-hint.min.js.map |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by16.94%
53316
- Lines of code
- increased by20.4%
714
- Number of lines in readme file
- increased by0.83%
121
No dependency changes