@@ -14,11 +14,12 @@ import { default as MenuOutlined } from "@ant-design/icons/MenuOutlined";
1414import { default as Dropdown } from "antd/es/dropdown" ;
1515import { default as Menu , MenuProps } from "antd/es/menu" ;
1616import Segmented from "antd/es/segmented" ;
17- import { default as Drawer } from "antd/es/drawer " ;
17+ import { Drawer } from "lowcoder-design " ;
1818import { migrateOldData } from "comps/generators/simpleGenerators" ;
1919import { styleControl } from "comps/controls/styleControl" ;
2020import { IconControl } from "comps/controls/iconControl" ;
2121import { controlItem } from "components/control" ;
22+ import { PreviewContainerID } from "constants/domLocators" ;
2223import {
2324AnimationStyle ,
2425AnimationStyleType ,
@@ -188,6 +189,45 @@ const FloatingHamburgerButton = styled.button<{
188189 color:${ ( props ) => props . $iconColor || 'inherit' }
189190` ;
190191
192+ const DrawerContent = styled . div < {
193+ $background :string ;
194+ $padding ?:string ;
195+ $borderColor ?:string ;
196+ $borderWidth ?:string ;
197+ $margin ?:string ;
198+ } > `
199+ background:${ ( p ) => p . $background }
200+ width: 100%;
201+ height: 100%;
202+ display: flex;
203+ flex-direction: column;
204+ padding:${ ( p ) => p . $padding || '12px' }
205+ margin:${ ( p ) => p . $margin || '0px' }
206+ box-sizing: border-box;
207+ border:${ ( p ) => p . $borderWidth || '1px' } ${ ( p ) => p . $borderColor || 'transparent' }
208+ ` ;
209+
210+ const DrawerHeader = styled . div `
211+ display: flex;
212+ justify-content: flex-end;
213+ align-items: center;
214+ ` ;
215+
216+ const DrawerCloseButton = styled . button < {
217+ $color :string ;
218+ } > `
219+ background: transparent;
220+ border: none;
221+ cursor: pointer;
222+ color:${ ( p ) => p . $color }
223+ display: inline-flex;
224+ align-items: center;
225+ justify-content: center;
226+ width: 32px;
227+ height: 32px;
228+ border-radius: 16px;
229+ ` ;
230+
191231const logoEventHandlers = [ clickEvent ] ;
192232
193233// Compatible with historical style data 2022-8-26
@@ -375,7 +415,7 @@ const childrenMap = {
375415const NavCompBase = new UICompBuilder ( childrenMap , ( props ) => {
376416const [ drawerVisible , setDrawerVisible ] = useState ( false ) ;
377417const getContainer = useCallback ( ( ) =>
378- document . querySelector ( `#${ CanvasContainerID } ) || document . body ,
418+ document . querySelector ( `#${ CanvasContainerID } ) || document . querySelector ( `# ${ PreviewContainerID } ` ) || document . body ,
379419[ ]
380420) ;
381421const data = props . items ;
@@ -521,18 +561,37 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
521561</ FloatingHamburgerButton >
522562< Drawer
523563placement = { props . placement || "right" }
524- closable = { true }
525- closeIcon = { hasIcon ( props . drawerCloseIcon ) ?props . drawerCloseIcon :undefined }
526564onClose = { ( ) => setDrawerVisible ( false ) }
527565open = { drawerVisible }
528566mask = { props . shadowOverlay }
567+ maskClosable = { true }
568+ closable = { false }
529569getContainer = { getContainer }
530570width = { [ "left" , "right" ] . includes ( props . placement as any ) ?transToPxSize ( props . drawerWidth || DEFAULT_SIZE ) :undefined as any }
531571height = { [ "top" , "bottom" ] . includes ( props . placement as any ) ?transToPxSize ( props . drawerHeight || DEFAULT_SIZE ) :undefined as any }
532- styles = { { body :{ padding :"8px" , background : props . drawerContainerStyle ?. background } } }
572+ styles = { { body :{ padding :0 } } }
533573destroyOnClose
534574>
535- < ItemList $align = { "flex-start" } $orientation = { "vertical" } > { items } </ ItemList >
575+ < DrawerContent
576+ $background = { props . drawerContainerStyle ?. background || '#FFFFFF' }
577+ $padding = { props . drawerContainerStyle ?. padding }
578+ $borderColor = { props . drawerContainerStyle ?. border }
579+ $borderWidth = { props . drawerContainerStyle ?. borderWidth }
580+ $margin = { props . drawerContainerStyle ?. margin }
581+ >
582+ < DrawerHeader >
583+ < DrawerCloseButton
584+ aria-label = "Close"
585+ $color = { props . style . text }
586+ onClick = { ( ) => setDrawerVisible ( false ) }
587+ >
588+ { hasIcon ( props . drawerCloseIcon )
589+ ?props . drawerCloseIcon
590+ :< span style = { { fontSize :20 } } > ×</ span > }
591+ </ DrawerCloseButton >
592+ </ DrawerHeader >
593+ < ItemList $align = { "flex-start" } $orientation = { "vertical" } > { items } </ ItemList >
594+ </ DrawerContent >
536595</ Drawer >
537596</ >
538597) }