react-responsive-modal
Version:
A simple responsive and accessible react modal compatible with React 16 and ready for React 17
3 lines (2 loc) • 4.99 kB
JavaScript
;function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),t=e(n),o=e(require("react-dom")),r=e(require("classnames")),l=e(require("no-scroll"));function a(){return(a=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}var i=function(e){var n=e.classNames,o=e.styles,l=e.closeIcon,a=e.onClickCloseIcon;return t.createElement("button",{id:e.id,className:r(e.classes.closeButton,null==n?void 0:n.closeButton),style:null==o?void 0:o.closeButton,onClick:a,"data-testid":"close-button"},l||t.createElement("svg",{className:null==n?void 0:n.closeIcon,style:null==o?void 0:o.closeIcon,xmlns:"http://www.w3.org/2000/svg",width:28,height:28,viewBox:"0 0 36 36","data-testid":"close-icon"},t.createElement("path",{d:"M28.5 9.62L26.38 7.5 18 15.88 9.62 7.5 7.5 9.62 15.88 18 7.5 26.38l2.12 2.12L18 20.12l8.38 8.38 2.12-2.12L20.12 18z"})))},c=[],u="undefined"!=typeof window,s=function(){0===c.length&&l.off()},d=["input","select","textarea","a[href]","button","[tabindex]","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])'];function v(e){return null===e.offsetParent||"hidden"===getComputedStyle(e).visibility}function f(e){for(var n=e.querySelectorAll(d.join(",")),t=[],o=0;o<n.length;o++){var r=n[o];!r.disabled&&m(r)>-1&&!v(r)&&t.push(r)}return t}function m(e){var n=parseInt(e.getAttribute("tabindex"),10);return isNaN(n)?function(e){return e.getAttribute("contentEditable")}(e)?0:e.tabIndex:n}var y=function(e){var t=e.container,o=n.useRef();return n.useEffect((function(){var e=function(e){(null==t?void 0:t.current)&&function(e,n){if(e&&"Tab"===e.key){if(!n||!n.contains)return process,!1;if(!n.contains(e.target))return!1;var t=f(n),o=t[0],r=t[t.length-1];e.shiftKey&&e.target===o?(r.focus(),e.preventDefault()):!e.shiftKey&&e.target===r&&(o.focus(),e.preventDefault())}}(e,t.current)};if(u&&document.addEventListener("keydown",e),u&&(null==t?void 0:t.current)){var n=f(t.current);n[0]&&(-1!==d.findIndex((function(e){var n;return null===(n=document.activeElement)||void 0===n?void 0:n.matches(e)}))&&(o.current=document.activeElement),n[0].focus())}return function(){var n;u&&(document.removeEventListener("keydown",e),null===(n=o.current)||void 0===n||n.focus())}}),[t]),null},p={overlay:"react-responsive-modal-overlay",modal:"react-responsive-modal-modal",modalCenter:"react-responsive-modal-modalCenter",closeButton:"react-responsive-modal-closeButton",animationIn:"react-responsive-modal-fadeIn",animationOut:"react-responsive-modal-fadeOut"},b=function(e){var d,v,f=e.open,m=e.center,b=e.blockScroll,h=void 0===b||b,E=e.closeOnEsc,g=void 0===E||E,C=e.closeOnOverlayClick,I=void 0===C||C,w=e.container,k=e.showCloseIcon,O=void 0===k||k,x=e.closeIconId,N=e.closeIcon,L=e.focusTrapped,B=void 0===L||L,D=e.animationDuration,j=void 0===D?500:D,q=e.classNames,A=e.styles,M=e.role,P=void 0===M?"dialog":M,R=e.ariaDescribedby,S=e.ariaLabelledby,K=e.modalId,T=e.onClose,_=e.onEscKeyDown,z=e.onOverlayClick,U=e.onAnimationEnd,F=e.children,G=n.useRef(null),H=n.useRef(null),J=n.useRef(null);null===J.current&&u&&(J.current=document.createElement("div"));var Q=n.useState(f),V=Q[0],W=Q[1],X=function(){var e;-1===c.indexOf(e=J.current)&&c.push(e),h&&l.on(),!J.current||w||document.body.contains(J.current)||document.body.appendChild(J.current),document.addEventListener("keydown",Z)},Y=function(){var e;-1!==(e=c.indexOf(J.current))&&c.splice(e,1),h&&s(),J.current&&!w&&document.body.contains(J.current)&&document.body.removeChild(J.current),document.removeEventListener("keydown",Z)},Z=function(e){27===e.keyCode&&c.length&&c[c.length-1]===J.current&&(_&&_(e),g&&T())};n.useEffect((function(){return f&&X(),function(){V&&Y()}}),[]),n.useEffect((function(){f&&!V&&(W(!0),X())}),[f]);var $=function(){H.current=!1};return V?o.createPortal(t.createElement("div",{style:a({animation:(f?null!==(d=null==q?void 0:q.animationIn)&&void 0!==d?d:p.animationIn:null!==(v=null==q?void 0:q.animationOut)&&void 0!==v?v:p.animationOut)+" "+j+"ms"},null==A?void 0:A.overlay),className:r(p.overlay,null==q?void 0:q.overlay),onClick:function(e){null===H.current&&(H.current=!0),H.current?(z&&z(e),I&&T(),H.current=null):H.current=null},onAnimationEnd:function(){f||(W(!1),Y()),h&&s(),U&&U()},"data-testid":"overlay"},t.createElement("div",{ref:G,className:r(p.modal,m&&p.modalCenter,null==q?void 0:q.modal),style:null==A?void 0:A.modal,onMouseDown:$,onMouseUp:$,onClick:$,id:K,role:P,"aria-modal":"true","aria-labelledby":S,"aria-describedby":R,"data-testid":"modal"},B&&t.createElement(y,{container:G}),F,O&&t.createElement(i,{classes:p,classNames:q,styles:A,closeIcon:N,onClickCloseIcon:function(){T()},id:x}))),w||J.current):null};exports.Modal=b,exports.default=b;
//# sourceMappingURL=react-responsive-modal.cjs.production.min.js.map