Skip to content

Commit ad59ea1

Browse files
FalkWolskyFalkWolsky
authored
Merge pull request #793 from raheeliftikhar5/module-simplebar-issue
Fixed Module issue with Scrollbar enabled + GridView broken UI
2 parents 868858f + b64a6ce commit ad59ea1

File tree

9 files changed

+83
-61
lines changed

9 files changed

+83
-61
lines changed

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,6 @@ interface IProps {
5959
}
6060

6161
export const ScrollBar = ({
62-
height = "100%",
6362
className,
6463
children,
6564
style,
@@ -68,6 +67,7 @@ export const ScrollBar = ({
6867
$hideplaceholder = false,
6968
...otherProps
7069
}: IProps) => {
70+
const height = style?.height ?? '100%';
7171
// You can now use the style prop directly or pass it to SimpleBar
7272
const combinedStyle = { ...style, height }; // Example of combining height with passed style
7373

‎client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx

+11-16
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,6 @@ export function CanvasView(props: ContainerBaseProps) {
105105
cols: parseInt(defaultGrid),
106106
};
107107
//////////////////////
108-
109108
if (readOnly) {
110109
return (
111110
<UICompContainer
@@ -114,21 +113,17 @@ export function CanvasView(props: ContainerBaseProps) {
114113
className={CNRootContainer}
115114
$bgColor={bgColor}
116115
>
117-
<div>
118-
<ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
119-
<Profiler id="Panel" onRender={profilerCallback}>
120-
<InnerGrid
121-
containerPadding={rootContainerPadding}
122-
overflow={rootContainerOverflow}
123-
{...props}
124-
positionParams={positionParams} // Added By Aqib Mirza
125-
{...gridLayoutCanvasProps}
126-
bgColor={bgColor}
127-
radius="0px"
128-
/>
129-
</Profiler>
130-
</ScrollBar>
131-
</div>
116+
<Profiler id="Panel" onRender={profilerCallback}>
117+
<InnerGrid
118+
containerPadding={rootContainerPadding}
119+
overflow={rootContainerOverflow}
120+
{...props}
121+
positionParams={positionParams} // Added By Aqib Mirza
122+
{...gridLayoutCanvasProps}
123+
bgColor={bgColor}
124+
radius="0px"
125+
/>
126+
</Profiler>
132127
</UICompContainer>
133128
);
134129
}

‎client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx

+43-13
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,6 @@ const FooterWrapper = styled.div`
3535
`;
3636

3737
const BodyWrapper = styled.div<{ $autoHeight: boolean }>`
38-
overflow: auto;
39-
overflow: overlay;
4038
height: ${(props) => (props.$autoHeight ? "100%" : "calc(100% - 32px)")};
4139
`;
4240

@@ -55,12 +53,23 @@ const ListOrientationWrapper = styled.div<{ $isHorizontal: boolean, $autoHeight
5553
height: 100%;
5654
`;
5755

58-
const MinHorizontalWidthContext = createContext(0);
56+
const MinHorizontalWidthContext = createContext({
57+
horizontalWidth: '100%',
58+
minHorizontalWidth: '100px',
59+
});
5960

6061
const ContainerInListView = (props: ContainerBaseProps ) => {
61-
const minHorizontalWidth = useContext(MinHorizontalWidthContext);
62+
const {
63+
horizontalWidth,
64+
minHorizontalWidth
65+
} = useContext(MinHorizontalWidthContext);
6266
return (
63-
<div style={{ width: minHorizontalWidth > 0 ? `${minHorizontalWidth}px` : "100%"}}>
67+
<div
68+
style={{
69+
width: horizontalWidth,
70+
minWidth: minHorizontalWidth,
71+
}}
72+
>
6473
<InnerGrid
6574
{...props}
6675
emptyRows={15}
@@ -79,11 +88,23 @@ type ListItemProps = {
7988
scrollContainerRef?: RefObject<HTMLDivElement>;
8089
minHeight?: string;
8190
unMountFn?: () => void;
82-
minHorizontalWidth: number;
91+
minHorizontalWidth: string;
92+
horizontalWidth: string;
8393
};
8494

85-
function ListItem({ minHorizontalWidth, ...props }: ListItemProps) {
86-
const { itemIdx, offset, containerProps, autoHeight, scrollContainerRef, minHeight } = props;
95+
function ListItem({
96+
minHorizontalWidth,
97+
horizontalWidth,
98+
...props
99+
}: ListItemProps) {
100+
const {
101+
itemIdx,
102+
offset,
103+
containerProps,
104+
autoHeight,
105+
scrollContainerRef,
106+
minHeight
107+
} = props;
87108

88109
// disable the unmount function to save user's state with pagination
89110
// useEffect(() => {
@@ -94,14 +115,23 @@ function ListItem({ minHorizontalWidth, ...props }: ListItemProps) {
94115
// }, []);
95116

96117
return (
97-
<MinHorizontalWidthContext.Provider value={minHorizontalWidth}>
118+
<MinHorizontalWidthContext.Provider
119+
value={{
120+
horizontalWidth,
121+
minHorizontalWidth
122+
}}
123+
>
98124
<ContainerInListView
99125
layout={containerProps.layout}
100126
items={gridItemCompToGridItems(containerProps.items)}
101127
positionParams={containerProps.positionParams}
102128
// all layout changes should only reflect on the commonContainer
103129
dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
104-
style={{ height: "100%", backgroundColor: "transparent", flex: "auto"}}
130+
style={{
131+
height: "100%",
132+
backgroundColor: "transparent",
133+
flex: "auto",
134+
}}
105135
autoHeight={autoHeight}
106136
isDroppable={itemIdx === offset}
107137
isDraggable={itemIdx === offset}
@@ -181,8 +211,7 @@ export function ListView(props: Props) {
181211
key={rowIdx}
182212
style={{
183213
height: rowHeight,
184-
width: 100 / noOfColumns + "%",
185-
minWidth: minHorizontalWidth,
214+
width: '100%',
186215
}}
187216
>
188217
<FlexWrapper>
@@ -217,7 +246,8 @@ export function ListView(props: Props) {
217246
scrollContainerRef={ref}
218247
minHeight={minHeight}
219248
unMountFn={unMountFn}
220-
minHorizontalWidth={horizontal ? minHorizontalWidth : 0}
249+
horizontalWidth={`${100 / noOfColumns}%`}
250+
minHorizontalWidth={horizontal ? minHorizontalWidth : '0px'}
221251
/>
222252
);
223253
})}

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
33
import {
44
NumberControl,
55
NumberOrJSONObjectArrayControl,
6+
RadiusControl,
67
StringControl,
78
} from "comps/controls/codeControl";
89
import { styleControl } from "comps/controls/styleControl";
@@ -53,7 +54,7 @@ const childrenMap = {
5354
pagination: withDefault(PaginationControl, { pageSize: "6" }),
5455
style: styleControl(ListViewStyle),
5556
horizontal: withDefault(BoolControl, false),
56-
minHorizontalWidth: withDefault(NumberControl, 100),
57+
minHorizontalWidth: withDefault(RadiusControl, '100px'),
5758
};
5859

5960
const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)

‎client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export function listPropertyView(compType: ListCompType) {
7373
{children.horizontal.getView() && (
7474
children.minHorizontalWidth.propertyView({
7575
label: trans("prop.minHorizontalWidth"),
76+
placeholder: '100px',
7677
})
7778
)}
7879
</Section>

‎client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ class ModuleTmpComp extends ModuleCompBase {
123123
)}
124124
<Section name={sectionNames.layout}>
125125
{!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()}
126-
{this.children.scrollbars.propertyView({
126+
{!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({
127127
label: trans("prop.scrollbar"),
128128
})}
129129
{hiddenPropertyView(this.children)}
@@ -531,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
531531
if (comp.moduleRootComp && comp.isReady) {
532532
content = (
533533
<Wrapper className="module-wrapper">
534-
<ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
534+
<ScrollBar style={{ height: comp.autoHeight() ? "100%" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
535535
<ExternalEditorContext.Provider value={moduleExternalState}>
536536
{comp.moduleRootComp.getView()}
537537
</ExternalEditorContext.Provider>

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

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
1818
border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
1919
height: 100%;
20+
overflow: auto;
2021
`;
2122

2223
function ModuleContainerView(props: ContainerBaseProps) {

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

+21-27
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,7 @@ function ModuleLayoutView(props: IProps) {
6767

6868
if (readOnly) {
6969
return (
70-
<ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
71-
<ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
72-
</ScrollBar>
70+
<ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
7371
);
7472
}
7573

@@ -115,30 +113,26 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
115113
const isRowCountLocked = this.children.autoScaleCompHeight.getView();
116114
const rowCount = this.children.containerRowCount.getView();
117115
return (
118-
<div>
119-
<ScrollBar style={{ 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>
141-
</div>
116+
<ModuleLayoutView
117+
positionParams={this.children.positionParams.getView()}
118+
containerSize={this.children.containerSize.getView()}
119+
containerView={this.children.container.containerView({
120+
rowCount,
121+
isRowCountLocked,
122+
onRowCountChange: (rowCount) => {
123+
this.children.containerRowCount.dispatchChangeValueAction(rowCount);
124+
},
125+
})}
126+
onPositionParamsChange={(params) => {
127+
setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
128+
}}
129+
onLayoutChange={(layout) => {
130+
this.children.containerSize.dispatchChangeValueAction({
131+
height: layout[moduleContainerId].h,
132+
width: layout[moduleContainerId].w,
133+
});
134+
}}
135+
/>
142136
);
143137
}
144138
getPropertyView() {

‎client/packages/lowcoder/src/comps/comps/rootComp.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ function RootView(props: RootViewProps) {
122122
}
123123

124124
return (
125-
<div {...divProps}>
125+
<div {...divProps} style={{height: '100%'}}>
126126
<PropertySectionContext.Provider value={propertySectionContextValue}>
127127
<ThemeContext.Provider value={themeContextValue}>
128128
<EditorContext.Provider value={editorState}>

0 commit comments

Comments
 (0)