react-clear-modal
Version:
Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js
2 lines (1 loc) • 2.7 kB
JavaScript
import e,{memo as n,useState as o,useRef as t,useCallback as r,useEffect as l}from"react";import{createPortal as i}from"react-dom";var c=function(){return c=Object.assign||function(e){for(var n,o=1,t=arguments.length;o<t;o++)for(var r in n=arguments[o])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},c.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var u=n((function(n){var u=n.isOpen,a=void 0!==u&&u,s=n.onRequestClose,d=n.closeTimeout,f=n.preRender,y=void 0!==f&&f,p=n.contentProps,v=void 0===p?{}:p,b=n.children,m=n.parentElement,O=n.disableFocusOnContent,C=n.disableCloseOnEsc,g=n.disableCloseOnBgClick,h=n.disableBodyScrollOnOpen,w=n.disableRenderInPortal,E=n.onClick,S=n.style,P=function(e,n){var o={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&n.indexOf(t)<0&&(o[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(t=Object.getOwnPropertySymbols(e);r<t.length;r++)n.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(e,t[r])&&(o[t[r]]=e[t[r]])}return o}(n,["isOpen","onRequestClose","closeTimeout","preRender","contentProps","children","parentElement","disableFocusOnContent","disableCloseOnEsc","disableCloseOnBgClick","disableBodyScrollOnOpen","disableRenderInPortal","onClick","style"]),x=function(e,n){var o="function"==typeof Symbol&&e[Symbol.iterator];if(!o)return e;var t,r,l=o.call(e),i=[];try{for(;(void 0===n||n-- >0)&&!(t=l.next()).done;)i.push(t.value)}catch(e){r={error:e}}finally{try{t&&!t.done&&(o=l.return)&&o.call(l)}finally{if(r)throw r.error}}return i}(o(w),2),j=x[0],k=x[1],R=t(null),I=t(null),B=r((function(e){var n;E&&E(e),!s||g||e.target===I.current||(null===(n=I.current)||void 0===n?void 0:n.contains(e.target))||s()}),[E,s,g]),T=r((function(e){v.onKeyDown&&v.onKeyDown(e),!s||C||"Escape"!==e.code&&27!==e.keyCode||s()}),[v,s,C]),q=r((function(){return a||y?e.createElement("div",c({},P,{style:c({alignItems:"center",bottom:0,display:a?"flex":"none",left:0,overflow:"auto",position:"fixed",right:0,top:0},S||{}),onClick:B}),e.createElement("div",c({},v,{style:c({margin:"auto"},v.style),onKeyDown:T,tabIndex:-1,ref:I}),b)):null}),[b,v,T,B,a,P,S,y]);if(l((function(){return d&&s&&(R.current=setTimeout(s,d)),function(){clearTimeout(R.current)}}),[d,s]),l((function(){var e;a&&!O&&(null===(e=I.current)||void 0===e||e.focus())}),[a,O]),l((function(){var e=document.body.style.overflow;return a&&h&&(document.body.style.overflow="hidden"),function(){document.body.style.overflow=e}}),[a,h]),l((function(){w||k(!0)}),[w]),j){if(w)return q();var D="string"==typeof m?m?document.querySelector(m):null:m;return i(q(),D||document.body)}return null}));export{u as default};