react-modal-vz/build/index.js

React modal, show quick modal

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