react-modal-e2z/build/index.js

React hook modal portal. (Lib)

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