react-modal-e2z/build/index.esm.js

React hook modal portal. (Lib)

import e,{useState as o,useEffect as t}from"react";import{createPortal as n}from"react-dom";import{HtmlUtils as l,Hooks as a,CmUtils as i}from"@delpi/common";import r from"react-animate-z";var d=function(){return d=Object.assign||function(e){for(var o,t=1,n=arguments.length;t<n;t++)for(var l in o=arguments[t])Object.prototype.hasOwnProperty.call(o,l)&&(e[l]=o[l]);return e},d.apply(this,arguments)};var c,s=function(o){var t=o.children,n=o.className,l=o.show,a=o.handleClick,i=void 0===a?function(){}:a;return l?e.createElement("button",{className:n,onClick:function(){return i&&i()}},t):e.createElement(e.Fragment,null)},m={RIGHT:void 0,right:void 0,CENTER:"align-center",center:"align-center",LEFT:"align-left",left:"align-left"},u=function(o){var t=o.showSplitBorder,n=void 0===t||t,a=o.alignFooter,i=void 0===a?"right":a,r=o.fullButtonMobile,d=void 0===r||r,c=o.disabledClose,u=void 0!==c&&c,v=o.showCancelButton,f=void 0===v||v,p=o.classNameCancel,h=o.labelCancel,b=o.handleCancel,C=void 0===b?function(){}:b,g=o.showAcceptButton,E=void 0===g||g,w=o.classNameAccept,N=o.labelAccept,y=o.handleAccept,I=void 0===y?function(){}:y,x=o.showExtraButton,B=void 0!==x&&x,F=o.classNameExtra,j=o.labelExtra,k=o.handleExtra,A=void 0===k?function(){}:k,T=[{show:f&&!u,className:l.joinClass("modal2-button modal2-light-button",p),label:h,handleClick:C},{show:E,className:l.joinClass("modal2-button modal2-primary-button",w),label:N,handleClick:I},{show:B,className:l.joinClass("modal2-button modal2-danger-button",F),label:j,handleClick:A}];return e.createElement("div",{className:l.joinClass("modal2-footer",n&&"split-border",m[i],d&&"button-full-width-mobile")},T.map((function(o,t){var n=o.show,a=o.className,i=o.label,r=o.handleClick;return e.createElement(s,{key:t,show:n,className:l.joinClass("modal2-button",a),handleClick:function(){return r()}},i)})))},v=function(){return e.createElement("svg",{fill:"currentColor",viewBox:"0 0 24 24",width:"1em",height:"1em"},e.createElement("path",{d:"M18.707 5.293a1 1 0 0 0-1.414 0L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293a1 1 0 0 0 0-1.414z"}))},f={fadeIn:"fadeIn",fadeInFromLeft:"fadeInFromLeft",fadeInFromRight:"fadeInFromRight",fadeInFromTop:"fadeInFromTop",fadeInFromBottom:"fadeInFromBottom",slideInFromTop:"slideInFromTop",slideInFromBottom:"slideInFromBottom",popIn:"popIn"},p=function(o){var t=o.children,n=o.duration,l=void 0===n?"750ms":n,a=o.type,i=void 0===a?"popIn":a,c=o.timing,s=void 0===c?"ease-in-out":c,m=function(e,o){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var l=0;for(n=Object.getOwnPropertySymbols(e);l<n.length;l++)o.indexOf(n[l])<0&&Object.prototype.propertyIsEnumerable.call(e,n[l])&&(t[n[l]]=e[n[l]])}return t}(o,["children","duration","type","timing"]);return e.createElement(r,d({type:f[i||"fadeIn"],iteration:1,duration:l,timing:s},m),t)},h=null;function b(e,o){var t=o.onSingleTap,n=o.onDoubleTap;null==h?(null==t||t(),h=setTimeout((function(){h=null}),700)):(e.target===c&&(null==n||n()),clearTimeout(h),h=null),c=e.target}function C(e){var o=window.getComputedStyle(e)["overflow-y"],t=window.getComputedStyle(e)["overflow-x"];return{vertical:("scroll"===o||"auto"===o)&&e.scrollHeight>e.clientHeight,horizontal:("scroll"===t||"auto"===t)&&e.scrollWidth>e.clientWidth}}function g(e){var o=document.getElementById(e);return o||((o=document.createElement("div")).setAttribute("id",e),o.setAttribute("class","portal-modal2"),document.body.appendChild(o),o)}var E=function(e){var l=e.children,a=e.id,i=void 0===a?"portal-modal2":a,r=o(null),d=r[0],c=r[1];return t((function(){return c(g(i)),function(){d&&d.parentNode&&d.parentNode.removeChild(d)}}),[d,i]),null===d?null:n(l,d)},w=function(n){var r=n.children,c=n.id,s=n.modalId,m=n.isOpen,f=n.center,h=void 0!==f&&f,C=n.className,g=n.tabIndex,w=void 0===g?-1:g,N=n.showHeader,y=void 0===N||N,I=n.showFooter,x=void 0===I||I,B=n.modalTitle,F=void 0===B?"":B,j=n.modalHeader,k=n.modalFooter,A=n.customizeXClose,T=n.alignFooter,O=void 0===T?"right":T,L=n.fullButtonMobile,S=void 0===L||L,H=n.showExtraButton,R=void 0!==H&&H,P=n.showAcceptButton,z=void 0===P||P,D=n.showCancelButton,M=void 0===D||D,X=n.showXClose,W=void 0===X||X,G=n.disabledClose,K=void 0!==G&&G,q=n.escapeClose,J=void 0===q||q,Q=n.lockBodyScroll,U=void 0===Q||Q,V=n.outSideClose,Y=void 0===V||V,Z=n.showSplitBorder,$=void 0===Z||Z,_=n.toggleTitleExpand,ee=void 0!==_&&_,oe=n.fullSceen,te=void 0!==oe&&oe,ne=n.classNameAccept,le=n.classNameCancel,ae=n.classNameExtra,ie=n.labelAccept,re=void 0===ie?"OK":ie,de=n.labelCancel,ce=void 0===de?"CANCEL":de,se=n.labelExtra,me=void 0===se?"EXTRA":se,ue=n.backdropDark,ve=void 0!==ue&&ue,fe=n.handleToggle,pe=void 0===fe?function(e){}:fe,he=n.handleAccept,be=void 0===he?function(){}:he,Ce=n.handleCancel,ge=n.handleEscapse,Ee=n.handleXClose,we=n.handleExtra,Ne=void 0===we?function(){}:we,ye=n.handleOpen,Ie=void 0===ye?function(e){}:ye,xe=n.animationProps,Be=void 0===xe?{}:xe,Fe=e.useRef(null),je=o(m),ke=je[0],Ae=je[1],Te=o(!1),Oe=Te[0],Le=Te[1],Se=window.innerHeight-16;a.useEventListener("keydown",(function(e){if(J&&["Esc","Escape",27].includes(e.key)){if(e.preventDefault(),ge)return ge(),!1;Re(!1)}}));var He=function(e){e?document.body.classList.add("modal2-open"):document.body.classList.remove("modal2-open")};t((function(){if(m&&Y&&!K){var e=function(e){Fe.current&&!Fe.current.contains(e.target)&&Re(!1)};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}}),[m,Y,K]),t((function(){Le(te)}),[te]),t((function(){Ae(m),U&&He(m),!m&&Le(!1)}),[m,U]);var Re=function(e){K||(Ae(e),Ie(e),U&&He(e),e||(Le(!1),pe&&pe(!1)))};return ke?e.createElement(E,{id:c},e.createElement("div",{className:"modal2-wrap"},e.createElement("div",{className:l.joinClass("modal2-backdrop",ve&&"dark-mode")}),e.createElement("div",{className:l.joinClass("modal2",h&&"modal2-center",Oe&&"modal2-toggle"),tabIndex:w,role:"dialog"},e.createElement(p,d({id:s,className:l.joinClass("modal2-document",C),role:"document","aria-hidden":"true"},Be),e.createElement("div",{ref:Fe,className:"modal2-content",style:{height:Oe&&U?Se:"",maxHeight:U?Se:""}},W&&!K&&e.createElement("div",{className:"modal2-close",onClick:function(){i.isFunc(Ee)?Ee():Re(!1)},"arial-hidden":"true"},A||e.createElement(v,null)),y&&e.createElement("div",{className:l.joinClass("modal2-header",$&&"split-border")},F&&e.createElement("span",{className:l.joinClass("modal2-title",ee&&"modal2-title-toggle"),onClick:function(e){return b(e,{onDoubleTap:function(){ee&&(Le(!Oe),pe(!Oe))}})},"arial-hidden":"true"},F),j),e.createElement("div",{className:l.joinClass("modal2-body",ee&&"modal2-expand")},r),x&&(k||e.createElement(u,{showSplitBorder:$,alignFooter:O,fullButtonMobile:S,disabledClose:K,showCancelButton:M,classNameCancel:le,labelCancel:ce,handleCancel:function(){Ce?Ce():Re(!1)},showAcceptButton:z,classNameAccept:ne,labelAccept:re,handleAccept:be,showExtraButton:R,classNameExtra:ae,labelExtra:me,handleExtra:Ne}))))))):null};export{u as FooterLayout,s as ModalButton,v as ModalCloseIcon,E as ReactPortal,w as default,g as getModalElement,C as isScrollable,b as onTap};