Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit2a82955

Browse files
committed
[Fix]: render the drawer inside the preivew/app canvas
1 parenta7a9a1b commit2a82955

File tree

3 files changed

+34
-17
lines changed

3 files changed

+34
-17
lines changed

‎client/packages/lowcoder/src/comps/comps/layout/mobileTabLayout.tsx‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,14 @@ import { manualOptionsControl } from "comps/controls/optionsControl";
55
import{BoolCodeControl,StringControl,jsonControl,NumberControl}from"comps/controls/codeControl";
66
import{IconControl}from"comps/controls/iconControl";
77
importstyledfrom"styled-components";
8-
importReact,{Suspense,useContext,useEffect,useMemo,useState}from"react";
8+
importReact,{Suspense,useContext,useEffect,useMemo,useState,useCallback}from"react";
99
import{registerLayoutMap}from"comps/comps/uiComp";
1010
import{AppSelectComp}from"comps/comps/layout/appSelectComp";
1111
import{NameAndExposingInfo}from"comps/utils/exposingTypes";
1212
import{ConstructorToComp,ConstructorToDataType}from"lowcoder-core";
1313
import{CanvasContainer}from"comps/comps/gridLayoutComp/canvasView";
1414
import{CanvasContainerID}from"constants/domLocators";
15+
import{PreviewContainerID}from"constants/domLocators";
1516
import{EditorContainer,EmptyContent}from"pages/common/styledComponent";
1617
import{Layers}from"constants/Layers";
1718
import{ExternalEditorContext}from"util/context/ExternalEditorContext";
@@ -30,6 +31,7 @@ import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
3031
import{AlignCenter}from"lowcoder-design";
3132
import{AlignLeft}from"lowcoder-design";
3233
import{AlignRight}from"lowcoder-design";
34+
import{Drawer}from"lowcoder-design";
3335
import{LayoutActionComp}from"./layoutActionComp";
3436
import{defaultTheme}from"@lowcoder-ee/constants/themeConstants";
3537
import{clickEvent,eventHandlerControl}from"@lowcoder-ee/comps/controls/eventHandlerControl";
@@ -43,7 +45,6 @@ const TabBarItem = React.lazy(() =>
4345
default:module.TabBarItem,
4446
}))
4547
);
46-
constPopup=React.lazy(()=>import("antd-mobile/es/components/popup"));
4748
constEventOptions=[clickEvent]asconst;
4849

4950
constAppViewContainer=styled.div`
@@ -620,6 +621,13 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
620621
constbgColor=(useContext(ThemeContext)?.theme||defaultTheme).canvas;
621622
constonEvent=comp.children.onEvent.getView();
622623

624+
constgetContainer=useCallback(()=>
625+
document.querySelector(`#${PreviewContainerID}`)||
626+
document.querySelector(`#${CanvasContainerID}`)||
627+
document.body,
628+
[]
629+
);
630+
623631
useEffect(()=>{
624632
comp.children.jsonTabs.dispatchChangeValueAction({
625633
manual:jsonItemsasunknownasArray<ConstructorToDataType<typeofTabOptionComp>>
@@ -749,22 +757,27 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
749757
</HamburgerButton>
750758
);
751759

752-
constdrawerBodyStyle=useMemo(()=>{
753-
if(drawerPlacement==='left'||drawerPlacement==='right'){
754-
return{width:drawerWidth}asReact.CSSProperties;
755-
}
756-
return{height:drawerHeight}asReact.CSSProperties;
757-
},[drawerPlacement,drawerHeight,drawerWidth]);
758-
759760
constdrawerView=(
760761
<Suspensefallback={<Skeleton/>}>
761-
<Popup
762-
visible={drawerVisible}
763-
onMaskClick={()=>setDrawerVisible(false)}
762+
<Drawer
763+
open={drawerVisible}
764764
onClose={()=>setDrawerVisible(false)}
765-
position={drawerPlacementasany}
765+
placement={drawerPlacementasany}
766766
mask={shadowOverlay}
767-
bodyStyle={drawerBodyStyle}
767+
maskClosable={true}
768+
closable={false}
769+
styles={{body:{padding:0}}asany}
770+
getContainer={getContainer}
771+
width={
772+
(drawerPlacement==='left'||drawerPlacement==='right')
773+
?(drawerWidthasany)
774+
:undefined
775+
}
776+
height={
777+
(drawerPlacement==='top'||drawerPlacement==='bottom')
778+
?(drawerHeightasany)
779+
:undefined
780+
}
768781
>
769782
<DrawerContent
770783
$background={drawerContainerStyle?.background||'#FFFFFF'}
@@ -808,7 +821,7 @@ MobileTabLayoutTmp = withViewFn(MobileTabLayoutTmp, (comp) => {
808821
))}
809822
</DrawerList>
810823
</DrawerContent>
811-
</Popup>
824+
</Drawer>
812825
</Suspense>
813826
);
814827

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
exportconstCanvasContainerID="__canvas_container__";
22
exportconstCodeEditorTooltipContainerID="__code_editor_tooltip__";
3+
exportconstPreviewContainerID="__preview_container__";

‎client/packages/lowcoder/src/pages/editor/editorView.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ import { isEqual, noop } from "lodash";
6464
import{AppSettingContext,AppSettingType}from"@lowcoder-ee/comps/utils/appSettingContext";
6565
import{getBrandingSetting}from"@lowcoder-ee/redux/selectors/enterpriseSelectors";
6666
importFlexfrom"antd/es/flex";
67+
import{PreviewContainerID}from"constants/domLocators";
6768
// import { BottomSkeleton } from "./bottom/BottomContent";
6869

6970
constHeader=lazy(
@@ -534,10 +535,12 @@ function EditorView(props: EditorViewProps) {
534535
deviceType={editorState.deviceType}
535536
deviceOrientation={editorState.deviceOrientation}
536537
>
537-
{uiComp.getView()}
538+
<divid={PreviewContainerID}>
539+
{uiComp.getView()}
540+
</div>
538541
</DeviceWrapper>
539542
) :(
540-
<div>
543+
<divid={PreviewContainerID}>
541544
{uiComp.getView()}
542545
</div>
543546
)

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp