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

UI Component for chief editor

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