@tikpage/reactjs-popup/lib/reactjs-popup.min.js

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

/*!
 * @tikpage/reactjs-popup v1.0.10
 * (c) 2020-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"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","react-dom","prop-types"],t):e.reactjsPopup=t(e.React,e.ReactDOM,e.PropTypes)}(this,function(e,t,o){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(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 i(e,t,o){return t&&r(e.prototype,t),o&&r(e,o),e}function p(e,t,o){return t in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function s(){return(s=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 a(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&&c(e,t)}function l(e){return(l=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function c(e,t){return(c=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function f(e,t){return!t||"object"!=typeof t&&"function"!=typeof t?u(e):t}function d(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 h(e,t,o,n,r){var i=r.offsetX,p=r.offsetY,s=n?8:0,a=o.split(" "),l=e.top+e.height/2,c=e.left+e.width/2,u=t.height,f=t.width,d=l-u/2,h=c-f/2,g="",y="0%",m="0%";switch(a[0]){case"top":d-=u/2+e.height/2+s,g="rotate(45deg)",y="100%",m="50%";break;case"bottom":d+=u/2+e.height/2+s,g="rotate(225deg)",m="50%";break;case"left":h-=f/2+e.width/2+s,g=" rotate(-45deg)",m="100%",y="50%";break;case"right":h+=f/2+e.width/2+s,g="rotate(135deg)",y="50%"}switch(a[1]){case"top":d=e.top,y="".concat(e.height/2,"px");break;case"bottom":d=e.top-u+e.height,y="".concat(u-e.height/2,"px");break;case"left":h=e.left,m="".concat(e.width/2,"px");break;case"right":h=e.left-f+e.width,m="".concat(f-e.width/2,"px")}return{top:d="top"===a[0]?d-p:d+p,left:h="left"===a[0]?h-i:h+i,transform:g,arrowLeft:m,arrowTop:y}}e=e&&e.hasOwnProperty("default")?e.default:e,t=t&&t.hasOwnProperty("default")?t.default:t,o=o&&o.hasOwnProperty("default")?o.default:o;var g={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"}}},y=function(o){function r(){return n(this,r),f(this,l(r).apply(this,arguments))}return a(r,e.PureComponent),i(r,[{key:"componentDidMount",value:function(){var e=this.props,t=e.className;e.onClick;this._popup=document.createElement("div"),this._popup.className=t,this._popup.style.cssText="position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0,0.5); display: flex;z-index: 999",document.body.appendChild(this._popup),this._render()}},{key:"componentDidUpdate",value:function(){this._render()}},{key:"componentWillUnmount",value:function(){t.unmountComponentAtNode(this._popup),document.body.removeChild(this._popup)}},{key:"_render",value:function(){t.render(this.props.children,this._popup)}},{key:"render",value:function(){return null}}]),r}();p(y,"propTypes",{children:o.node});var m=["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"],b=function(t){function o(t){var r;n(this,o),p(u(r=f(this,l(o).call(this,t))),"repositionOnResize",function(){r.setPosition()}),p(u(r),"onEscape",function(e){"Escape"===e.key&&r.closePopup()}),p(u(r),"lockScroll",function(){var e=r.props.lockScroll;r.state.modal&&e&&(document.getElementsByTagName("body")[0].style.overflow="hidden")}),p(u(r),"resetScroll",function(){var e=r.props.lockScroll;r.state.modal&&e&&(document.getElementsByTagName("body")[0].style.overflow="auto")}),p(u(r),"togglePopup",function(e){e.persist(),r.state.isOpen?r.closePopup(e):r.openPopup(e)}),p(u(r),"openPopup",function(e){var t=r.props,o=t.disabled,n=t.onOpen;r.state.isOpen||o||(n(e),r.setState({isOpen:!0},function(){r.setPosition(),r.lockScroll()}))}),p(u(r),"closePopup",function(e){var t=r.props.onClose;r.state.isOpen&&(t(e),r.setState({isOpen:!1},function(){r.resetScroll()}))}),p(u(r),"onMouseEnter",function(){clearTimeout(r.timeOut);var e=r.props.mouseEnterDelay;r.timeOut=setTimeout(function(){return r.openPopup()},e)}),p(u(r),"onMouseLeave",function(){clearTimeout(r.timeOut);var e=r.props.mouseLeaveDelay;r.timeOut=setTimeout(function(){return r.closePopup()},e)}),p(u(r),"getTooltipBoundary",function(){var e=r.props.keepTooltipInside,t={top:0,left:0,width:window.innerWidth,height:window.innerHeight};"string"==typeof e&&(t=document.querySelector(e).getBoundingClientRect());return t}),p(u(r),"setPosition",function(){var e=r.state,t=e.modal,o=e.isOpen;if(!t&&o){var n=r.props,i=n.arrow,p=n.position,s=n.offsetX,a=n.offsetY,l=n.keepTooltipInside,c=n.arrowStyle,u=n.className,f=r.HelperEl.getBoundingClientRect(),g=r.TriggerEl.getBoundingClientRect(),y=r.ContentEl.getBoundingClientRect(),b=r.getTooltipBoundary(),v=Array.isArray(p)?p:[p];(l||Array.isArray(p))&&(v=[].concat(d(v),m));var w=function(e,t,o,n,r,i){for(var p,s=r.offsetX,a=r.offsetY,l=0;l<o.length;){var c={top:(p=h(e,t,o[l],n,{offsetX:s,offsetY:a})).top,left:p.left,width:t.width,height:t.height};if(!(c.top<=i.top||c.left<=i.left||c.top+c.height>=i.top+i.height||c.left+c.width>=i.left+i.width))break;l++}return p}(g,y,v,i,{offsetX:s,offsetY:a},b);r.ContentEl.style.top="".concat(w.top-f.top,"px"),r.ContentEl.style.left="".concat(w.left-f.left,"px"),i&&(r.ArrowEl.style.transform=w.transform,r.ArrowEl.style["-ms-transform"]=w.transform,r.ArrowEl.style["-webkit-transform"]=w.transform,r.ArrowEl.style.top=c.top||w.arrowTop,r.ArrowEl.style.left=c.left||w.arrowLeft,r.ArrowEl.classList.add("popup-arrow"),""!==u&&r.ArrowEl.classList.add("".concat(u,"-arrow"))),"static"!==window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")&&""!==window.getComputedStyle(r.TriggerEl,null).getPropertyValue("position")||(r.TriggerEl.style.position="relative")}}),p(u(r),"addWarperAction",function(){var e=r.props,t=e.contentStyle,o=e.className,n=e.on,i=r.state.modal,p=i?g.popupContent.modal:g.popupContent.tooltip,s={className:"popup-content ".concat(""!==o?"".concat(o,"-content"):""),style:Object.assign({},p,t),ref:r.setContentRef,onClick:function(e){e.stopPropagation()}};return!i&&n.indexOf("hover")>=0&&(s.onMouseEnter=r.onMouseEnter,s.onMouseLeave=r.onMouseLeave),s}),p(u(r),"renderTrigger",function(){for(var t={key:"T",ref:r.setTriggerRef},o=r.props,n=o.on,i=o.trigger,p=r.state.isOpen,s=Array.isArray(n)?n:[n],a=0,l=s.length;a<l;a++)switch(s[a]){case"click":t.onClick=r.togglePopup;break;case"hover":t.onMouseEnter=r.onMouseEnter,t.onMouseLeave=r.onMouseLeave;break;case"focus":t.onFocus=r.onMouseEnter}return"function"==typeof i?!!i&&e.cloneElement(i(p),t):!!i&&e.cloneElement(i,t)}),p(u(r),"renderContent",function(){var t=r.props,o=t.arrow,n=t.arrowStyle,i=t.children,p=r.state,a=p.modal,l=p.isOpen;return e.createElement("div",s({},r.addWarperAction(),{key:"C"}),o&&!a&&e.createElement("div",{ref:r.setArrowRef,style:Object.assign({},g.popupArrow,n)}),"function"==typeof i?i(r.closePopup,l):i)}),r.setTriggerRef=function(e){return r.TriggerEl=e},r.setContentRef=function(e){return r.ContentEl=e},r.setArrowRef=function(e){return r.ArrowEl=e},r.setHelperRef=function(e){return r.HelperEl=e},r.timeOut=0;var i=t.open,a=t.modal,c=t.defaultOpen,y=t.trigger;return r.state={isOpen:i||c,modal:!!a||!y},r}return a(o,e.PureComponent),i(o,[{key:"componentDidMount",value:function(){var e=this.props,t=e.closeOnEscape,o=e.defaultOpen,n=e.repositionOnResize;o&&(this.setPosition(),this.lockScroll()),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 t=this.props,o=t.overlayStyle,n=t.closeOnDocumentClick,r=t.className,i=t.on,p=(t.trigger,this.state),s=p.modal,a=p.isOpen,l=a&&!(i.indexOf("hover")>=0),c=s?g.overlay.modal:g.overlay.tooltip;return[this.renderTrigger(),l&&e.createElement(y,{key:"O",className:"popup-overlay tikfeed-popup-overlay ".concat(""!==r?"".concat(r,"-overlay"):""),style:Object.assign({},c,o),onClick:n?this.closePopup:void 0},s&&this.renderContent()),a&&!s&&this.renderContent()]}}]),o}();return p(b,"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,mouseEnterDelay:100,mouseLeaveDelay:100,keepTooltipInside:!1}),b});
//# sourceMappingURL=reactjs-popup.min.js.map