@chief-editor/ui/es/components/drawer/Drawer.js

UI Component for chief editor

var __assign=this&&this.__assign||function(){return(__assign=Object.assign||function(e){for(var o,r=1,s=arguments.length;r<s;r++)for(var t in o=arguments[r])Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);return e}).apply(this,arguments)},__rest=this&&this.__rest||function(e,o){var r={};for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&o.indexOf(s)<0&&(r[s]=e[s]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(s=Object.getOwnPropertySymbols(e);t<s.length;t++)o.indexOf(s[t])<0&&Object.prototype.propertyIsEnumerable.call(e,s[t])&&(r[s[t]]=e[s[t]])}return r};import{Close}from"@byte-design/icons";import{useCSSEnterLeave}from"@rc-hooks/animation";import{RcDialog}from"@rc-hooks/dialog";import{classnames}from"@co-hooks/util";import{useRefCallback}from"@rc-hooks/use";import React,{useEffect,useRef,useState}from"react";import{useLockScreen}from"@rc-hooks/dom";import{usePrefixCls}from"../../hooks";import{Content}from"../content";import{useDrawerPosition}from"./useDrawerPosition";export function Drawer(e){var o=e.placement,r=e.show,s=e.closeable,t=e.maskClosable,a=void 0!==t&&t,n=e.mask,l=void 0===n||n,i=e.afterClose,c=e.onClose,f=e.destroyOnClose,u=e.header,m=e.footer,p=e.bodyStyle,h=e.className,d=e.width,y=e.height,k=e.children,C=e.wrapperStyle,w=__rest(e,["placement","show","closeable","maskClosable","mask","afterClose","onClose","destroyOnClose","header","footer","bodyStyle","className","width","height","children","wrapperStyle"]),_=useState(!1),g=_[0],b=_[1],v=useRef(null),S=useRef(null),O=useLockScreen(),P=O.lockScreen,R=O.unlockScreen,x=useDrawerPosition(o),E={horizontal:"dock"!==x.horizontal,vertical:"dock"!==x.vertical},N=usePrefixCls("drawer-body"),j=usePrefixCls("drawer-close-icon"),D=usePrefixCls("drawer-mask",{show:r&&g}),L=usePrefixCls("drawer",__assign({"no-mask":!l},E)),z=usePrefixCls("drawer-dialog",__assign(__assign({},E),{placement:o,show:r&&g})),I=useRefCallback((function(){return null==c?void 0:c("closeIcon")})),M=useRefCallback((function(){return a&&(null==c?void 0:c("mask"))}));return useEffect((function(){return r?P():R(),R}),[r]),useCSSEnterLeave(v,{show:r,type:"transition",validTarget:S,validProperty:"transform",enter:{onStart:function(){r&&!g&&b(!0)}},leave:{onEnd:function(){g&&(b(!1),null==i||i())}}}),!f||g||r?React.createElement(RcDialog,__assign({},x,w,{show:!0,mask:l,onMaskClick:M,maskClassName:D,className:classnames(z,h),ref:v,wrapperStyle:__assign(__assign({},C),g||r?null:{display:"none"})}),!!s&&React.createElement(Close,{className:j,onClick:I}),React.createElement(Content,{prefixCls:"drawer-content",className:L,style:{width:d,height:y},header:u,footer:m,enableSize:r,containerRef:S},React.createElement("div",{className:N,style:p},k))):null}