react-portal-dialog/dist/react-portal-dialog.cjs.production.min.js

React Portal Dialog is an Awesome Customizable and Draggable Modal.

"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react"),r=e(t),n=e(require("react-dom"));function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var a={position:"fixed",inset:"0",zIndex:"1000"},l={position:"fixed",top:"50%",left:"50%",maxHeight:"200px",width:"400px",backgroundColor:"rgb(223, 221, 221)",zIndex:"1000",transform:"translate(-50%, -50%)"},u={backgroundColor:"salmon",textAlign:"center",padding:"5px",cursor:"move"},c=function(e){var n=e.children,o=e.bodyStyle,a=t.useRef(null),l=t.useRef(null),c=t.useState(!1),s=c[0],i=c[1],d=t.useRef({x:0,y:0}),f=t.useCallback((function(e){l.current===e.target&&(i(!0),d.current={x:e.x,y:e.y})}),[]),v=t.useCallback((function(e){if(s){var t=d.current,r=t.y;if(a.current){var n=a.current,o=n.offsetTop;a.current.style.left=n.offsetLeft-(t.x-e.x)+"px",a.current.style.top=o-(r-e.y)+"px"}d.current={x:e.x,y:e.y}}}),[s]),m=t.useCallback((function(){i(!1),window.removeEventListener("mousemove",v),window.removeEventListener("mouseup",m)}),[v]);return t.useEffect((function(){var e;null==(e=l.current)||e.addEventListener("mousedown",f),window.addEventListener("mousemove",v),window.addEventListener("mouseup",m)}),[m,f,v]),r.createElement("div",{ref:a,style:o,className:"ReactPortalDialog__Body"},r.createElement("div",{ref:l,style:u,className:"ReactPortalDialog__Move"},"Move Here"),n)};exports.default=function(e){var u=e.children,s=e.isOpen,i=e.onClose,d=e.customStyles,f=e.isOverlay,v=void 0===f||f,m=e.isDraggable,y=void 0!==m&&m,p=t.useRef(null),x=t.useRef(null),g=t.useState(!1),b=g[0],E=g[1];t.useEffect((function(){var e;return s&&(p.current=document.querySelector("body"),x.current=document.createElement("div"),x.current.classList.add("ReactPortalDialog"),null==(e=p.current)||e.append(x.current),E(!0)),function(){var e;null==(e=x.current)||e.remove(),E(!1)}}),[s]);var w=o({},a,{backgroundColor:v?"rgba(0, 0, 0, 0.5)":"transparent"}),R=d||l;return b&&x.current?n.createPortal(r.createElement(r.Fragment,null,r.createElement("div",{style:w,className:"ReactPortalDialog__Overlay",onClick:function(){var e;i(),null==(e=x.current)||e.remove()}}),y?r.createElement(c,{bodyStyle:R},u):r.createElement("div",{style:R,className:"ReactPortalDialog__Body"},u)),x.current):null};
//# sourceMappingURL=react-portal-dialog.cjs.production.min.js.map