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

React modal, show quick modal

import e,{useState as o,useEffect as t,useRef as l}from"react";import n from"react-animate-z";import{HtmlUtils as a,Hooks as i}from"@delpi/common";import{createPortal as d}from"react-dom";import{$on as r,$off as c}from"eventbus-z";var s=function(){return s=Object.assign||function(e){for(var o,t=1,l=arguments.length;t<l;t++)for(var n in o=arguments[t])Object.prototype.hasOwnProperty.call(o,n)&&(e[n]=o[n]);return e},s.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var u=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"}))};var m,v=function(e){var l=e.children,n=e.id,a=void 0===n?"portal-modal2":n,i=o(null),r=i[0],c=i[1];return t((function(){return c(function(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)}(a)),function(){r&&r.parentNode&&r.parentNode.removeChild(r)}}),[a]),null===r?null:d(l,r)},h=null;function f(e,o){var t=o.onSingleTap,l=o.onDoubleTap;null==h?(null==t||t(),h=setTimeout((function(){h=null}),700)):(e.target===m&&(null==l||l()),clearTimeout(h),h=null),m=e.target}function p(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}}var b=function(e){e?document.body.classList.add("modal2-open"):document.body.classList.remove("modal2-open")},g=function(o){var t=o.showHeader,l=o.showSplitBorder,n=o.modalTitle,i=o.toggleTitle,d=o.modalHeader,r=o.toggle,c=o.handleToggle,s=void 0===c?function(){}:c;return t?e.createElement("div",{className:a.joinClass("modal2-header",l&&"split-border")},n&&e.createElement("span",{className:a.joinClass("modal2-title",i&&"modal2-title-toggle"),onClick:function(e){return f(e,{onDoubleTap:function(){i&&s(!r)}})}},n),d):null},C={center:"align-center",left:"align-left",right:"align-right"},E=function(o){var t=o.showFooter,l=void 0===t||t,n=o.modalFooter,i=o.alignFooter,d=void 0===i?"right":i,r=o.fullButtonMobile,c=void 0===r||r,s=o.showExtraButton,u=void 0!==s&&s,m=o.showAcceptButton,v=void 0===m||m,h=o.showCancelButton,f=void 0===h||h,p=o.disabledClose,b=void 0!==p&&p,g=o.showSplitBorder,E=void 0===g||g,w=o.classNameAccept,N=o.classNameCancel,A=o.classNameExtra,B=o.labelAccept,O=void 0===B?"OK":B,S=o.labelCancel,y=void 0===S?"CANCEL":S,T=o.labelExtra,x=void 0===T?"EXTRA":T,H=o.handleAccept,L=void 0===H?function(){}:H,k=o.handleCancel,D=o.handleExtra,j=void 0===D?function(){}:D,M=o.handleShow,W=void 0===M?function(e){}:M;return l?n||e.createElement("div",{className:a.joinClass("modal2-footer",E&&"split-border",C[d]||C.right,c&&"button-full-width-mobile")},f&&!b&&e.createElement("button",{className:a.joinClass("modal2-button modal2-light-button",N),onClick:function(){k?k():W(!1)}},y),v&&e.createElement("button",{className:a.joinClass("modal2-button modal2-primary-button",w),onClick:function(){L()}},O),u&&e.createElement("button",{className:a.joinClass("modal2-button modal2-danger-button",A),onClick:function(){j()}},x)):null},w=function(o){var t=o.customizeXClose,l=o.showXClose,n=o.disabledClose,a=o.handleXClose,i=o.handleShow,d=void 0===i?function(){}:i;return!l||n?null:e.createElement("div",{className:"modal2-close",onClick:function(){a?a():d(!1)}},t||e.createElement(u,null))},N={SHOW_MODAL2:"SHOW_DK123456_MODAL2",SHOW_MODAL2_WITH:"SHOW_DK123456_MODAL2_WITH"},A=function(e,o,l){return void 0===l&&(l=!0),t((function(){if(l)return r(e,o),function(){c(e,o)}}),[l,e,o]),{name:e,callback:o}},B=function(d){var r=l(null),c=o(!1),u=c[0],m=c[1],h=o(s({},d)),f=h[0],p=h[1],C=o(f.isOpen),B=C[0],O=C[1],S=o(!1),y=S[0],T=S[1],x=f.children,H=f.id,L=f.modalId,k=f.isOpen,D=f.center,j=void 0!==D&&D,M=f.bottom,W=void 0!==M&&M,X=f.className,_=f.tabIndex,F=void 0===_?-1:_,z=f.animationType,I=void 0===z?"default":z,K=f.animationDuration,R=void 0===K?"1200ms":K,P=f.showHeader,q=void 0===P||P,G=f.showFooter,J=void 0===G||G,Q=f.modalTitle,U=void 0===Q?"":Q,V=f.modalHeader,Y=f.modalFooter,Z=f.customizeXClose,$=f.alignFooter,ee=void 0===$?"right":$,oe=f.fullButtonMobile,te=void 0===oe||oe,le=f.showExtraButton,ne=void 0!==le&&le,ae=f.showAcceptButton,ie=void 0===ae||ae,de=f.showCancelButton,re=void 0===de||de,ce=f.showXClose,se=void 0===ce||ce,ue=f.disabledClose,me=void 0!==ue&&ue,ve=f.escapeClose,he=void 0===ve||ve,fe=f.lockBodyScroll,pe=void 0===fe||fe,be=f.closeOnBackdrop,ge=void 0!==be&&be,Ce=f.showSplitBorder,Ee=void 0===Ce||Ce,we=f.toggleTitle,Ne=void 0!==we&&we,Ae=f.fullSceen,Be=void 0!==Ae&&Ae,Oe=f.classNameAccept,Se=f.classNameCancel,ye=f.classNameExtra,Te=f.labelAccept,xe=void 0===Te?"OK":Te,He=f.labelCancel,Le=void 0===He?"CANCEL":He,ke=f.labelExtra,De=void 0===ke?"EXTRA":ke,je=f.backdropDark,Me=void 0!==je&&je,We=f.handleToggle,Xe=void 0===We?function(e){}:We,_e=f.handleAccept,Fe=void 0===_e?function(){}:_e,ze=f.handleCancel,Ie=f.handleEscapse,Ke=f.handleXClose,Re=f.handleExtra,Pe=void 0===Re?function(){}:Re,qe=f.handleOpen,Ge=void 0===qe?function(e){}:qe,Je="default"===I,Qe=function(e){me||(O(e),Ge(e),pe&&b(e))};return t((function(){m(!0)}),[]),t((function(){T(Be)}),[Be]),t((function(){O(k),pe&&b(Boolean(k))}),[k]),t((function(){!B&&p(s(s({},d),{isOpen:!1}))}),[B]),A(N.SHOW_MODAL2,(function(e,o){o&&o!==L||p(s(s({},f),{isOpen:e}))}),u),A(N.SHOW_MODAL2_WITH,(function(e,o){o&&o!==L||p(s(s(s({},f),e),{isOpen:!0}))}),u),i.useEventListener("keydown",(function(e){if(he&&"Escape"===e.key){if(e.preventDefault(),Ie)return Ie(),!1;Qe(!1)}})),t((function(){if(k&&ge&&!me){var e=function(e){r.current&&!r.current.contains(e.target)&&Qe(!1)};return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}}}),[k,ge,me]),B?e.createElement(v,{id:H},e.createElement("div",{id:L,className:a.joinClass("modal2",y&&"modal2-toggle",j&&"modal2-center",W&&"modal2-bottom",X),tabIndex:F,role:"dialog","aria-labelledby":"title","aria-hidden":"true"},e.createElement("div",{className:a.joinClass("modal2-backdrop",Me&&"modal2-backdrop-dark")}),e.createElement(n,{type:Je?"bounce":I,duration:Je?"0":R,iteration:"1",fillMode:"none",className:a.joinClass("modal2-container",Je&&"modal2-animation"),style:{height:y&&pe?window.innerHeight:""}},e.createElement("div",{ref:r,className:a.joinClass("modal2-context",d.fitHeight&&"moda2-context-fit-height")},e.createElement(w,{showXClose:se,customizeXClose:Z,disabledClose:me,handleXClose:Ke,handleShow:Qe}),e.createElement(g,{showHeader:q,modalTitle:U,showSplitBorder:Ee,toggleTitle:Ne,modalHeader:V,toggle:y,handleToggle:function(e){Xe(Boolean(e)),T(Boolean(e))}}),e.createElement("div",{className:"modal2-body"},x),e.createElement(E,{showFooter:J,modalFooter:Y,alignFooter:ee,fullButtonMobile:te,showExtraButton:ne,showAcceptButton:ie,showCancelButton:re,disabledClose:me,showSplitBorder:Ee,classNameAccept:Oe,classNameCancel:Se,classNameExtra:ye,labelAccept:xe,labelCancel:Le,labelExtra:De,handleAccept:Fe,handleCancel:ze,handleExtra:Pe,handleShow:Qe}))))):null};export{B as Modal,w as ModalClose,u as ModalCloseIcon,N as ModalEventBusName,E as ModalFooter,g as ModalHeader,v as ModalPortal,b as addScrollLockBody,B as default,p as isScrollable,f as onTap,A as useEventBus};