UNPKG

reactjs-popup-47

Version:

React Popup Component - Modals,Tooltips and Menus —  All in one

8 lines (7 loc) 9.91 kB
/*! * reactjs-popup-47 v1.6.0 * (c) 2019-present Youssouf EL AZIZI <youssoufelazizi@gmail.com> * Released under the MIT License. */ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.reactjsPopup47=t(e.React,e.ReactDOM)}(this,function(e,t){"use strict";function o(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function n(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e}).apply(this,arguments)}function i(e){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function s(e,t){return(s=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function a(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function p(e){return function(e){if(Array.isArray(e)){for(var t=0,o=new Array(e.length);t<e.length;t++)o[t]=e[t];return o}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(e,t,o,n,r){var i=r.offsetX,s=r.offsetY,a=n?8:0,p=o.split(" "),l=e.top+e.height/2,c=e.left+e.width/2,u=t.height,f=t.width,d=l-u/2,g=c-f/2,h="",m="0%",y="0%";switch(p[0]){case"top":d-=u/2+e.height/2+a,h="rotate(45deg)",m="100%",y="50%";break;case"bottom":d+=u/2+e.height/2+a,h="rotate(225deg)",y="50%";break;case"left":g-=f/2+e.width/2+a,h=" rotate(-45deg)",y="100%",m="50%";break;case"right":g+=f/2+e.width/2+a,h="rotate(135deg)",m="50%"}switch(p[1]){case"top":d=e.top,m="".concat(e.height/2,"px");break;case"bottom":d=e.top-u+e.height,m="".concat(u-e.height/2,"px");break;case"left":g=e.left,y="".concat(e.width/2,"px");break;case"right":g=e.left-f+e.width,y="".concat(f-e.width/2,"px")}return{top:d="top"===p[0]?d-s:d+s,left:g="left"===p[0]?g-i:g+i,transform:h,arrowLeft:y,arrowTop:m}}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t;var c={popupContent:{tooltip:{position:"absolute",zIndex:"2",width:"200px",background:"rgb(255, 255, 255)",border:"1px solid rgb(187, 187, 187)",boxShadow:"rgba(0, 0, 0, 0.2) 0px 1px 3px",padding:"5px"},modal:{position:"relative",background:"rgb(255, 255, 255)",width:"50%",margin:"auto",border:"1px solid rgb(187, 187, 187)",padding:"5px"}},popupArrow:{height:"10px",width:"10px",position:"absolute",background:"rgb(255, 255, 255)",transform:"rotate(45deg)",margin:"-5px",zIndex:"-1",boxShadow:"rgba(0, 0, 0, 0.2) 1px 1px 1px"},overlay:{tooltip:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0"},modal:{position:"fixed",top:"0",bottom:"0",left:"0",right:"0",background:"rgba(0, 0, 0,0.5)",display:"flex",zIndex:"999"}}},u=["top left","top center","top right","right top","right center","right bottom","bottom left","bottom center","bottom right","left top","left center","left bottom","center center"],f=function(f){function d(t){var o,s,f;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,d),s=this,f=i(d).call(this,t),o=!f||"object"!=typeof f&&"function"!=typeof f?a(s):f,n(a(o),"repositionOnResize",function(){o.setPosition()}),n(a(o),"onEscape",function(e){"Escape"===e.key&&o.closePopup()}),n(a(o),"lockScroll",function(){var e=o.props.lockScroll;o.state.modal&&e&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}),n(a(o),"resetScroll",function(){var e=o.props.lockScroll;o.state.modal&&e&&(document.getElementsByTagName("body")[0].style.overflow="auto")}),n(a(o),"togglePopup",function(e){e.persist(),o.state.isOpen?o.closePopup(e):o.openPopup(e)}),n(a(o),"openPopup",function(e){var t=o.props,n=t.disabled,r=t.onOpen;o.state.isOpen||n||(r(e),o.setState({isOpen:!0},function(){o.setPosition(),o.lockScroll()}))}),n(a(o),"closePopup",function(e){var t=o.props.onClose;o.state.isOpen&&(t(e),o.setState({isOpen:!1},function(){o.resetScroll()}))}),n(a(o),"onMouseEnter",function(){clearTimeout(o.timeOut);var e=o.props.mouseEnterDelay;o.timeOut=setTimeout(function(){return o.openPopup()},e)}),n(a(o),"onMouseLeave",function(){clearTimeout(o.timeOut);var e=o.props.mouseLeaveDelay;o.timeOut=setTimeout(function(){return o.closePopup()},e)}),n(a(o),"getTooltipBoundary",function(){var e=o.props.keepTooltipInside,t={top:0,left:0,width:window.innerWidth,height:window.innerHeight};"string"==typeof e&&(t=document.querySelector(e).getBoundingClientRect());return t}),n(a(o),"setPosition",function(){var e=o.state,t=e.modal,n=e.isOpen;if(!t&&n){var r=o.props,i=r.arrow,s=r.position,a=r.offsetX,c=r.offsetY,f=r.keepTooltipInside,d=r.arrowStyle,g=r.className,h=o.HelperEl.getBoundingClientRect(),m=o.TriggerEl.getBoundingClientRect(),y=o.ContentEl.getBoundingClientRect(),w=o.getTooltipBoundary(),b=Array.isArray(s)?s:[s];(f||Array.isArray(s))&&(b=[].concat(p(b),u));var v=function(e,t,o,n,r,i){for(var s,a=r.offsetX,p=r.offsetY,c=0;c<o.length;){var u={top:(s=l(e,t,o[c],n,{offsetX:a,offsetY:p})).top,left:s.left,width:t.width,height:t.height};if(!(u.top<=i.top||u.left<=i.left||u.top+u.height>=i.top+i.height||u.left+u.width>=i.left+i.width))break;c++}return s}(m,y,b,i,{offsetX:a,offsetY:c},w);o.ContentEl.style.top="".concat(v.top-h.top,"px"),o.ContentEl.style.left="".concat(v.left-h.left,"px"),i&&(o.ArrowEl.style.transform=v.transform,o.ArrowEl.style["-ms-transform"]=v.transform,o.ArrowEl.style["-webkit-transform"]=v.transform,o.ArrowEl.style.top=d.top||v.arrowTop,o.ArrowEl.style.left=d.left||v.arrowLeft,o.ArrowEl.classList.add("popup-arrow"),""!==g&&o.ArrowEl.classList.add("".concat(g,"-arrow"))),"static"!==window.getComputedStyle(o.TriggerEl,null).getPropertyValue("position")&&""!==window.getComputedStyle(o.TriggerEl,null).getPropertyValue("position")||(o.TriggerEl.style.position="relative")}}),n(a(o),"addWarperAction",function(){var e=o.props,t=e.contentStyle,n=e.className,r=e.on,i=o.state.modal,s=i?c.popupContent.modal:c.popupContent.tooltip,a={className:"popup-content ".concat(""!==n?"".concat(n,"-content"):""),style:Object.assign({},s,t),ref:o.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&r.indexOf("hover")>=0&&(a.onMouseEnter=o.onMouseEnter,a.onMouseLeave=o.onMouseLeave),a}),n(a(o),"renderTrigger",function(){for(var t={key:"T",ref:o.setTriggerRef},n=o.props,r=n.on,i=n.trigger,s=o.state.isOpen,a=Array.isArray(r)?r:[r],p=0,l=a.length;p<l;p++)switch(a[p]){case"click":t.onClick=o.togglePopup;break;case"hover":t.onMouseEnter=o.onMouseEnter,t.onMouseLeave=o.onMouseLeave;break;case"focus":t.onFocus=o.onMouseEnter}return"function"==typeof i?!!i&&e.cloneElement(i(s),t):!!i&&e.cloneElement(i,t)}),n(a(o),"renderContent",function(){var t=o.props,n=t.arrow,i=t.arrowStyle,s=t.children,a=o.state,p=a.modal,l=a.isOpen;return e.createElement("div",r({},o.addWarperAction(),{key:"C"}),n&&!p&&e.createElement("div",{ref:o.setArrowRef,style:Object.assign({},c.popupArrow,i)}),"function"==typeof s?s(o.closePopup,l):s)}),o.setTriggerRef=function(e){return o.TriggerEl=e},o.setContentRef=function(e){return o.ContentEl=e},o.setArrowRef=function(e){return o.ArrowEl=e},o.setHelperRef=function(e){return o.HelperEl=e},o.timeOut=0;var g=t.open,h=t.modal,m=t.defaultOpen,y=t.trigger;return o.state={isOpen:g||m,modal:!!h||!y},o}var g,h,m;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&s(e,t)}(d,e.PureComponent),g=d,(h=[{key:"componentDidMount",value:function(){var e=this.props,t=e.closeOnEscape,o=e.defaultOpen,n=e.repositionOnResize;o&&this.setPosition(),t&&window.addEventListener("keyup",this.onEscape),n&&window.addEventListener("resize",this.repositionOnResize)}},{key:"componentDidUpdate",value:function(e){var t=this.props,o=t.open,n=t.disabled,r=this.state.isOpen;e.open!==o&&(o?this.openPopup():this.closePopup(void 0,!0)),e.disabled!==n&&n&&r&&this.closePopup()}},{key:"componentWillUnmount",value:function(){clearTimeout(this.timeOut);var e=this.props,t=e.closeOnEscape,o=e.repositionOnResize;t&&window.removeEventListener("keyup",this.onEscape),o&&window.removeEventListener("resize",this.repositionOnResize),this.resetScroll()}},{key:"render",value:function(){var o=this.props,n=o.overlayStyle,r=o.closeOnDocumentClick,i=o.className,s=o.on,a=(o.trigger,this.state),l=a.modal,u=a.isOpen,f=u&&!(s.indexOf("hover")>=0),d=l?c.overlay.modal:c.overlay.tooltip,g=[u&&e.createElement("div",{key:"H",style:{position:"absolute",top:"0px",left:"0px"},ref:this.setHelperRef}),f&&e.createElement("div",{key:"O",className:"popup-overlay ".concat(""!==i?"".concat(i,"-overlay"):""),style:Object.assign({},d,n),onClick:r?this.closePopup:void 0},l&&this.renderContent()),u&&!l&&this.renderContent()],h=document.getElementById(this.props.popupRootID)?[t.createPortal(g,document.getElementById(this.props.popupRootID))]:g;return[this.renderTrigger()].concat(p(h))}}])&&o(g.prototype,h),m&&o(g,m),d}();return n(f,"defaultProps",{trigger:null,onOpen:function(){},onClose:function(){},defaultOpen:!1,open:!1,disabled:!1,closeOnDocumentClick:!0,repositionOnResize:!0,closeOnEscape:!0,on:["click"],contentStyle:{},arrowStyle:{},overlayStyle:{},className:"",position:"bottom center",modal:!1,lockScroll:!1,arrow:!0,offsetX:0,offsetY:0,popupRootID:"popupRoot",mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1}),f}); //# sourceMappingURL=reactjs-popup.min.js.map