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

Commit144ca9f

Browse files
author
FalkWolsky
committed
Fixing Scrollbars for Modules Editor View
1 parent94e7c82 commit144ca9f

File tree

2 files changed

+38
-31
lines changed

2 files changed

+38
-31
lines changed

‎client/packages/lowcoder-design/src/components/ScrollBar.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import styled from "styled-components";
55
import{DebouncedFunc}from'lodash';// Assuming you're using lodash's DebouncedFunc type
66

77

8-
constScrollBarWrapper=styled.div`
8+
constScrollBarWrapper=styled.div<{hidePlaceholder?:boolean}>`
99
min-height: 0;
1010
height: 100%;
1111
width: 100%;
@@ -37,11 +37,11 @@ const ScrollBarWrapper = styled.div`
3737
bottom: 10px;
3838
}
3939
40-
// added by Falk Wolsky to hide the placeholder - as it doubles the vertical space of a Module on a page
41-
.simplebar-placeholder {
42-
display: none !important;
43-
}
44-
40+
${props=>props.hidePlaceholder&&`
41+
.simplebar-placeholder {
42+
display: none !important;
43+
}
44+
`}
4545
`;
4646

4747
// .simplebar-placeholder { added by Falk Wolsky to hide the placeholder - as it doubles the vertical space of a Module on a page
@@ -54,17 +54,24 @@ interface IProps {
5454
scrollableNodeProps?:{
5555
onScroll:DebouncedFunc<(e:any)=>void>;
5656
};
57+
hidePlaceholder?:boolean;
58+
hideScrollbar?:boolean;
5759
}
5860

59-
exportconstScrollBar=({ height="100%", className, children, style, scrollableNodeProps, ...otherProps}:IProps)=>{
61+
exportconstScrollBar=({ height="100%", className, children, style, scrollableNodeProps,hideScrollbar,...otherProps}:IProps)=>{
6062
// You can now use the style prop directly or pass it to SimpleBar
6163
constcombinedStyle={ ...style, height};// Example of combining height with passed style
6264

63-
return(
65+
return(hideScrollbar??false) ?(
6466
<ScrollBarWrapperclassName={className}>
6567
<SimpleBarstyle={combinedStyle}scrollableNodeProps={scrollableNodeProps}{...otherProps}>
6668
{children}
6769
</SimpleBar>
6870
</ScrollBarWrapper>
71+
)
72+
:(
73+
<ScrollBarWrapperclassName={className}>
74+
{children}
75+
</ScrollBarWrapper>
6976
);
7077
};

‎client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,7 @@ function ModuleLayoutView(props: IProps) {
9696
};
9797

9898
return(
99-
<ScrollBarstyle={{height:"100%",margin:"0px",padding:"0px"}}>
100-
<CanvasView
99+
<CanvasView
101100
layout={layout}
102101
items={items}
103102
positionParams={{ ...positionParams,cols:parseInt(defaultGrid)}}
@@ -106,7 +105,6 @@ function ModuleLayoutView(props: IProps) {
106105
onLayoutChange={onLayoutChange}
107106
extraHeight="0px"
108107
/>
109-
</ScrollBar>
110108
);
111109
}
112110

@@ -118,26 +116,28 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
118116
constrowCount=this.children.containerRowCount.getView();
119117
return(
120118
<div>
121-
<ModuleLayoutView
122-
positionParams={this.children.positionParams.getView()}
123-
containerSize={this.children.containerSize.getView()}
124-
containerView={this.children.container.containerView({
125-
rowCount,
126-
isRowCountLocked,
127-
onRowCountChange:(rowCount)=>{
128-
this.children.containerRowCount.dispatchChangeValueAction(rowCount);
129-
},
130-
})}
131-
onPositionParamsChange={(params)=>{
132-
setTimeout(()=>this.children.positionParams.dispatchChangeValueAction(params));
133-
}}
134-
onLayoutChange={(layout)=>{
135-
this.children.containerSize.dispatchChangeValueAction({
136-
height:layout[moduleContainerId].h,
137-
width:layout[moduleContainerId].w,
138-
});
139-
}}
140-
/>
119+
<ScrollBarstyle={{height:"100%",margin:"0px",padding:"0px"}}hidePlaceholder={false}>
120+
<ModuleLayoutView
121+
positionParams={this.children.positionParams.getView()}
122+
containerSize={this.children.containerSize.getView()}
123+
containerView={this.children.container.containerView({
124+
rowCount,
125+
isRowCountLocked,
126+
onRowCountChange:(rowCount)=>{
127+
this.children.containerRowCount.dispatchChangeValueAction(rowCount);
128+
},
129+
})}
130+
onPositionParamsChange={(params)=>{
131+
setTimeout(()=>this.children.positionParams.dispatchChangeValueAction(params));
132+
}}
133+
onLayoutChange={(layout)=>{
134+
this.children.containerSize.dispatchChangeValueAction({
135+
height:layout[moduleContainerId].h,
136+
width:layout[moduleContainerId].w,
137+
});
138+
}}
139+
/>
140+
</ScrollBar>
141141
</div>
142142
);
143143
}

0 commit comments

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