react-popups
Version:
Reactjs component for spawning custom popups at mouse position.
2 lines • 7.83 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?exports.Popups=t(require("react"),require("react-dom")):e.Popups=t(e.react,e["react-dom"])}(window,function(e,t){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,{configurable:!1,enumerable:!0,get:o})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},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=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){"use strict";n.r(t),n.d(t,"IGNORE_CLASS_NAME",function(){return f});var o=n(0),r=n(1);function i(e,t,n){return e===t||(e.correspondingElement?e.correspondingElement.classList.contains(n):e.classList.contains(n))}var c=function(){if("undefined"!=typeof window&&"function"==typeof window.addEventListener){var e=!1,t=Object.defineProperty({},"passive",{get:function(){e=!0}}),n=function(){};return window.addEventListener("testPassiveEventSupport",n,t),window.removeEventListener("testPassiveEventSupport",n,t),e}};var u,p,s=(void 0===u&&(u=0),function(){return++u}),a={},d={},l=["touchstart","touchmove"],f="ignore-react-onclickoutside";function v(e,t){var n=null;return-1!==l.indexOf(t)&&p&&(n={passive:!e.props.preventDefault}),n}t.default=function(e,t){var n,u;return u=n=function(n){var u,l;function f(e){var t;return(t=n.call(this,e)||this).__outsideClickHandler=function(e){if("function"!=typeof t.__clickOutsideHandlerProp){var n=t.getInstance();if("function"!=typeof n.props.handleClickOutside){if("function"!=typeof n.handleClickOutside)throw new Error("WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.");n.handleClickOutside(e)}else n.props.handleClickOutside(e)}else t.__clickOutsideHandlerProp(e)},t.enableOnClickOutside=function(){if("undefined"!=typeof document&&!d[t._uid]){void 0===p&&(p=c()),d[t._uid]=!0;var e=t.props.eventTypes;e.forEach||(e=[e]),a[t._uid]=function(e){var n;t.props.disableOnClickOutside||null!==t.componentNode&&(t.props.preventDefault&&e.preventDefault(),t.props.stopPropagation&&e.stopPropagation(),t.props.excludeScrollbar&&(n=e,document.documentElement.clientWidth<=n.clientX||document.documentElement.clientHeight<=n.clientY)||function(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(i(e,t,n))return!0;e=e.parentNode}return e}(e.target,t.componentNode,t.props.outsideClickIgnoreClass)===document&&t.__outsideClickHandler(e))},e.forEach(function(e){document.addEventListener(e,a[t._uid],v(t,e))})}},t.disableOnClickOutside=function(){delete d[t._uid];var e=a[t._uid];if(e&&"undefined"!=typeof document){var n=t.props.eventTypes;n.forEach||(n=[n]),n.forEach(function(n){return document.removeEventListener(n,e,v(t,n))}),delete a[t._uid]}},t.getRef=function(e){return t.instanceRef=e},t._uid=s(),t}l=n,(u=f).prototype=Object.create(l.prototype),u.prototype.constructor=u,u.__proto__=l;var m=f.prototype;return m.getInstance=function(){if(!e.prototype.isReactComponent)return this;var t=this.instanceRef;return t.getInstance?t.getInstance():t},m.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(t&&"function"==typeof t.handleClickOutside&&(this.__clickOutsideHandlerProp=t.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw new Error("WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=Object(r.findDOMNode)(this.getInstance()),this.enableOnClickOutside()}},m.componentDidUpdate=function(){this.componentNode=Object(r.findDOMNode)(this.getInstance())},m.componentWillUnmount=function(){this.disableOnClickOutside()},m.render=function(){var t=this.props,n=(t.excludeScrollbar,function(e,t){if(null==e)return{};var n,o,r={},i=Object.keys(e);for(o=0;o<i.length;o++)n=i[o],t.indexOf(n)>=0||(r[n]=e[n]);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)n=c[o],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(t,["excludeScrollbar"]));return e.prototype.isReactComponent?n.ref=this.getRef:n.wrappedRef=this.getRef,n.disableOnClickOutside=this.disableOnClickOutside,n.enableOnClickOutside=this.enableOnClickOutside,Object(o.createElement)(e,n)},f}(o.Component),n.displayName="OnClickOutside("+(e.displayName||e.name||"Component")+")",n.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:t&&t.excludeScrollbar||!1,outsideClickIgnoreClass:f,preventDefault:!1,stopPropagation:!1},n.getClass=function(){return e.getClass?e.getClass():e},u}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=c(n(0)),i=c(n(2));function c(e){return e&&e.__esModule?e:{default:e}}function u(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}var p=function(e){function t(){var e,n,i,c=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);for(var p=arguments.length,s=Array(p),a=0;a<p;a++)s[a]=arguments[a];return n=i=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),i.state={popups:[]},i.componentDidMount=function(){i.props.clickButtons&&document.addEventListener("click",i.spawnLinkedDiv),i.props.event&&document.addEventListener(i.props.event,i.spawnLinkedDiv)},i.componentWillUnmount=function(){i.props.clickButtons&&document.removeEventListener("click",i.spawnLinkedDiv),i.props.event&&document.removeEventListener(i.props.event,i.spawnLinkedDiv)},i.handleClickOutside=function(){i.setState({popups:[]})},i.handleClickInside=function(e){for(var t=e.target;t;){if(t.dataset&&t.dataset.popupkey){var n=function(){var e=t.dataset.popupkey,n=i.state.popups,o=-1;return n.forEach(function(t,n){t.key===e&&(o=n)}),i.setState({popups:n.slice(0,o+1)}),{v:void 0}}();if("object"===(void 0===n?"undefined":o(n)))return n.v}t=t.parentNode}},i.spawnLinkedDiv=function(e){i.handleClickInside(e);var t=e.target.attributes[i.props.dataName||"data"];if(t){if(i.props.clickButtons){if(!(i.props.clickButtons.indexOf(e.button)>-1))return;e.preventDefault()}else e.preventDefault();var n=i.state.popups,o=.5*window.innerWidth,u=.5*window.innerHeight,p=e.pageX,s=e.pageY,a="(-100%, 0%)";p<o&&s<u?a="(0%, 0%)":p<o&&s>u?a="(0%, -100%)":p>o&&s>u&&(a="(-100%, -100%)");var d={position:"fixed",left:e.pageX,top:e.pageY,transform:"translate"+a},l=Math.random();n.push(r.default.createElement("div",{"data-popupkey":l,key:l,style:d},r.default.createElement(c.props.handler,{data:t.nodeValue,popupProps:i.props.popupProps}))),i.setState({popups:n})}},i.render=function(){return r.default.createElement("div",null,i.state.popups)},u(i,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)}(t,r.default.Component),t}();t.default=(0,i.default)(p)}])});
//# sourceMappingURL=main.js.map