react-menu-pointer/lib/index.js

react-pointer is a react component for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu's contents.

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(global,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o,r=n(1),i=(o=r)&&o.__esModule?o:{default:o};t.default=i.default,e.exports=t.default},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(2),u=l(i),a=l(n(3));function l(e){return e&&e.__esModule?e:{default:e}}function c(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}t.default=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=function(n){function a(){var e,n,o;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a);for(var r=arguments.length,i=Array(r),u=0;u<r;u++)i[u]=arguments[u];return n=o=c(this,(e=a.__proto__||Object.getPrototypeOf(a)).call.apply(e,[this].concat(i))),o.delayTimer=null,o.lastDelayedLocation=null,o.mouseLocations=[],o.config={delay:t.delay||300,element:"menu-pointer",locationsTracked:t.locationsTracked||3,submenuDirection:t.submenuDirection||"right",tolerance:t.tolerance||75},o.slope=function(e,t){return(t.y-e.y)/(t.x-e.x)},o.getDelay=function(){var e=document.getElementById(o.config.element);if(!e)return 0;var t={top:e.getBoundingClientRect().top+document.body.scrollTop,left:e.getBoundingClientRect().left+document.body.scrollLeft},n=getComputedStyle(e),r={x:t.left,y:t.top-o.config.tolerance},i={x:t.left+e.offsetWidth+(parseInt(n.marginLeft,10)||0),y:r.y},u={x:t.left,y:t.top+e.offsetHeight+(parseInt(n.marginTop,10)||0)+o.config.tolerance},a={x:i.x,y:u.y},l=o.mouseLocations[o.mouseLocations.length-1],c=o.mouseLocations[0];if(!l)return 0;if(c||(c=l),c.x<t.left||c.x>a.x||c.y<t.top||c.y>a.y)return 0;if(o.lastDelayedLocation&&l.x===o.lastDelayedLocation.x&&l.y===o.lastDelayedLocation.y)return 0;var f=i,s=a;"left"===o.config.submenuDirection?(f=u,s=r):"bottom"===o.config.submenuDirection?(f=a,s=u):"top"===o.config.submenuDirection&&(f=r);var d=o.slope(l,f),p=o.slope(l,s),y=o.slope(c,f),m=o.slope(c,s);return d<y&&p>m?(o.lastDelayedLocation=l,o.config.delay):(o.lastDelayedLocation=null,0)},o.handleMouseMove=function(e){o.mouseLocations.push({x:e.pageX,y:e.pageY}),o.mouseLocations.length>o.config.locationsTracked&&o.mouseLocations.shift()},o.handleMenuLeave=function(e){o.delayTimer&&clearTimeout(o.delayTimer),"function"==typeof e&&e()},o.handleRowEnter=function(e){o.delayTimer&&clearTimeout(o.delayTimer),o.activateRow(e)},o.activateRow=function(e){var t=o.getDelay();t?o.delayTimer=setTimeout(function(){return o.activateRow(e)},t):e()},c(o,n)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(a,i.Component),r(a,[{key:"componentDidMount",value:function(){window.addEventListener("mousemove",this.handleMouseMove)}},{key:"componentWillUnmount",value:function(){window.removeEventListener("mousemove",this.handleMouseMove),this.mouseLocations=[],clearTimeout(this.delayTimer),this.delayTimer=null}},{key:"render",value:function(){return u.default.createElement(e,o({},this.props,{menuPointer:{handleMenuLeave:this.handleMenuLeave,handleRowEnter:this.handleRowEnter}}))}}]),a}();return n.propTypes={config:a.default.shape({delay:a.default.number,element:a.default.string,locationsTracked:a.default.number,submenuDirection:a.default.oneOf(["top","right","bottom","left"]),tolerance:a.default.number})},n.defaultProps={config:{}},n},e.exports=t.default},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("prop-types")}])});