@chief-editor/ui/lib/components/modal/Modal.js

UI Component for chief editor

"use strict";var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var s in t=arguments[o])Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(r=Object.getOwnPropertySymbols(e);s<r.length;s++)t.indexOf(r[s])<0&&Object.prototype.propertyIsEnumerable.call(e,r[s])&&(o[r[s]]=e[r[s]])}return o},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)Object.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t.default=e,t};Object.defineProperty(exports,"__esModule",{value:!0});var icons_1=require("@byte-design/icons"),util_1=require("@co-hooks/util"),dom_1=require("@rc-hooks/dom"),use_1=require("@rc-hooks/use"),react_1=__importStar(require("react")),hooks_1=require("../../hooks"),content_1=require("../content"),Dialog_1=require("./Dialog"),useModalHeight_1=require("./useModalHeight");exports.Modal=react_1.forwardRef((function(e,t){var o=e.show,r=e.children,s=e.header,a=e.footer,n=e.className,l=e.bodyStyle,i=e.closeable,c=void 0===i||i,u=e.mask,_=void 0===u||u,d=e.afterClose,f=e.lazyInit,h=void 0===f||f,m=e.destroyOnClose,p=e.maskClosable,y=void 0!==p&&p,g=e.maskStyle,k=e.onClose,v=e.width,w=e.height,b=e.top,C=e.icon,S=e.wrapperClassName,O=e.wrapperStyle,x=e.style,P=void 0===x?{}:x,R=e.disableAnimation,N=e.defaultShow,q=__rest(e,["show","children","header","footer","className","bodyStyle","closeable","mask","afterClose","lazyInit","destroyOnClose","maskClosable","maskStyle","onClose","width","height","top","icon","wrapperClassName","wrapperStyle","style","disableAnimation","defaultShow"]),j=use_1.useUncontrolledShow({show:o,defaultShow:N}),E=j[0],M=j[1],z=react_1.useRef(E||!h),I=react_1.useState(!1),H=I[0],D=I[1],A=react_1.useRef(null),T=react_1.useRef(null);react_1.useImperativeHandle(t,(function(){return{dom:T.current,show:function(){return M(!0)},hide:function(){return M(!1)}}}),[M]);var G=!!R,L=!0===R,U=E&&!H&&!L,B=!E&&H&&!G,F=E&&(H||L),J=E||H&&!G,K=use_1.useRefCallback((function(){null==k||k("closeIcon")})),Q=use_1.useRefCallback((function(){y&&(null==k||k("mask"))})),V=use_1.useRefCallback((function(e){e.stopPropagation()})),W=dom_1.useLockScreen(),X=W.lockScreen,Y=W.unlockScreen,Z=use_1.useRefGetter(G);react_1.useEffect((function(){return E?X():Y(),!E&&Z()&&(null==d||d()),Y}),[E]);var $=useModalHeight_1.useModalHeight(__assign(__assign({},P),{height:null==w?P.height:w})),ee=$.height,te=$.containerResize,oe=void 0!==ee;dom_1.useElementSize(T,(function(){return!!E}),te);var re=hooks_1.usePrefixCls("modal-wrapper"),se=hooks_1.usePrefixCls("modal-close-icon"),ae=hooks_1.usePrefixCls("modal-mask",{show:F}),ne=hooks_1.usePrefixCls("modal",{show:F}),le=hooks_1.usePrefixCls("modal-body",{flex:!oe,fixedtop:void 0!==b}),ie={top:0,left:0,right:0,bottom:0,paddingTop:b,transform:""};return G&&!E&&m?z.current=!1:z.current||(z.current=!!E),z.current?react_1.default.createElement(Dialog_1.RcDialog,__assign({},q,{show:!0,className:le,ref:T,horizontal:"center",onClick:Q,onMaskClick:Q,mask:_&&oe,maskClassName:ae,maskStyle:g,vertical:"center",wrapperClassName:util_1.classnames(re,S),wrapperStyle:__assign(__assign({},O),J?null:{display:"none"}),style:__assign(__assign({},oe?{}:ie),P),animation:{show:E,type:"transition",validTarget:A,validProperty:"transform",disabled:L&&G,enter:{onStart:function(){U&&D(!0)}},leave:{onEnd:function(){B&&(z.current=!m&&z.current,D(!1),null==d||d())}}}}),_&&!oe&&react_1.default.createElement("div",{className:ae,style:__assign({zIndex:0,position:"fixed"},g)}),react_1.default.createElement(content_1.Content,{onClick:V,prefixCls:"modal-content",className:util_1.classnames(ne,n),containerRef:A,icon:C,style:__assign({width:v,height:oe?ee+"px":void 0},l),header:s,footer:a,enableSize:E&&!!w},c&&react_1.default.createElement(icons_1.CloseSmall,{className:se,onClick:K}),r)):null}));