Merge pull request #793 from raheeliftikhar5/module-simplebar-issue

FalkWolsky · web-flow · commit ad59ea1f72a4 · 2024-04-03T19:17:02.000+02:00
Fixed Module issue with Scrollbar enabled + GridView broken UI
diff --git a/client/packages/lowcoder-design/src/components/ScrollBar.tsx b/client/packages/lowcoder-design/src/components/ScrollBar.tsx
@@ -59,7 +59,6 @@ interface IProps {
 }
 
 export const ScrollBar = ({
-  height = "100%",
   className,
   children,
   style,
@@ -68,6 +67,7 @@ export const ScrollBar = ({
   $hideplaceholder = false,
   ...otherProps
 }: IProps) => {
+  const height = style?.height ?? '100%';
   // You can now use the style prop directly or pass it to SimpleBar
   const combinedStyle = { ...style, height }; // Example of combining height with passed style
 
diff --git a/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx b/client/packages/lowcoder/src/comps/comps/gridLayoutComp/canvasView.tsx
@@ -105,7 +105,6 @@ export function CanvasView(props: ContainerBaseProps) {
     cols: parseInt(defaultGrid),
   };
   //////////////////////
-
   if (readOnly) {
     return (
       <UICompContainer
@@ -114,21 +113,17 @@ export function CanvasView(props: ContainerBaseProps) {
         className={CNRootContainer}
         $bgColor={bgColor}
       >
-        <div>
-          <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
-            <Profiler id="Panel" onRender={profilerCallback}>
-              <InnerGrid
-                containerPadding={rootContainerPadding}
-                overflow={rootContainerOverflow}
-                {...props}
-                positionParams={positionParams} // Added By Aqib Mirza
-                {...gridLayoutCanvasProps}
-                bgColor={bgColor}
-                radius="0px"
-              />
-            </Profiler>
-          </ScrollBar>
-        </div>
+        <Profiler id="Panel" onRender={profilerCallback}>
+          <InnerGrid
+            containerPadding={rootContainerPadding}
+            overflow={rootContainerOverflow}
+            {...props}
+            positionParams={positionParams} // Added By Aqib Mirza
+            {...gridLayoutCanvasProps}
+            bgColor={bgColor}
+            radius="0px"
+          />
+        </Profiler>
       </UICompContainer>
     );
   }
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -35,8 +35,6 @@ const FooterWrapper = styled.div`
 `;
 
 const BodyWrapper = styled.div<{ $autoHeight: boolean }>`
-  overflow: auto;
-  overflow: overlay;
   height: ${(props) => (props.$autoHeight ? "100%" : "calc(100% - 32px)")};
 `;
 
@@ -55,12 +53,23 @@ const ListOrientationWrapper = styled.div<{ $isHorizontal: boolean, $autoHeight
   height: 100%;
 `;
 
-const MinHorizontalWidthContext = createContext(0);
+const MinHorizontalWidthContext = createContext({
+  horizontalWidth: '100%',
+  minHorizontalWidth: '100px',
+});
 
 const ContainerInListView = (props: ContainerBaseProps ) => {
-  const minHorizontalWidth = useContext(MinHorizontalWidthContext);
+  const {
+    horizontalWidth,
+    minHorizontalWidth
+  } = useContext(MinHorizontalWidthContext);
   return (
-    <div style={{ width: minHorizontalWidth > 0 ? `${minHorizontalWidth}px` : "100%"}}>
+    <div
+      style={{
+        width: horizontalWidth,
+        minWidth: minHorizontalWidth,
+      }}
+    >
       <InnerGrid
         {...props}
         emptyRows={15}
@@ -79,11 +88,23 @@ type ListItemProps = {
   scrollContainerRef?: RefObject<HTMLDivElement>;
   minHeight?: string;
   unMountFn?: () => void;
-  minHorizontalWidth: number;
+  minHorizontalWidth: string;
+  horizontalWidth: string;
 };
 
-function ListItem({ minHorizontalWidth, ...props }: ListItemProps) {
-  const { itemIdx, offset, containerProps, autoHeight, scrollContainerRef, minHeight } = props;
+function ListItem({
+  minHorizontalWidth,
+  horizontalWidth,
+  ...props
+}: ListItemProps) {
+  const {
+    itemIdx,
+    offset,
+    containerProps,
+    autoHeight,
+    scrollContainerRef,
+    minHeight
+  } = props;
 
   // disable the unmount function to save user's state with pagination
   // useEffect(() => {
@@ -94,14 +115,23 @@ function ListItem({ minHorizontalWidth, ...props }: ListItemProps) {
   // }, []);
 
   return (
-      <MinHorizontalWidthContext.Provider value={minHorizontalWidth}>
+      <MinHorizontalWidthContext.Provider
+        value={{
+          horizontalWidth,
+          minHorizontalWidth
+        }}
+      >
         <ContainerInListView
           layout={containerProps.layout}
           items={gridItemCompToGridItems(containerProps.items)}
           positionParams={containerProps.positionParams}
           // all layout changes should only reflect on the commonContainer
           dispatch={itemIdx === offset ? containerProps.dispatch : _.noop}
-          style={{ height: "100%", backgroundColor: "transparent", flex: "auto"}}
+          style={{
+            height: "100%",
+            backgroundColor: "transparent",
+            flex: "auto",
+          }}
           autoHeight={autoHeight}
           isDroppable={itemIdx === offset}
           isDraggable={itemIdx === offset}
@@ -181,8 +211,7 @@ export function ListView(props: Props) {
         key={rowIdx}
         style={{
           height: rowHeight,
-          width: 100 / noOfColumns + "%",
-          minWidth: minHorizontalWidth,
+          width: '100%',
         }}
       >
         <FlexWrapper>
@@ -217,7 +246,8 @@ export function ListView(props: Props) {
                 scrollContainerRef={ref}
                 minHeight={minHeight}
                 unMountFn={unMountFn}
-                minHorizontalWidth={horizontal ? minHorizontalWidth : 0}
+                horizontalWidth={`${100 / noOfColumns}%`}
+                minHorizontalWidth={horizontal ? minHorizontalWidth : '0px'}
               />
             );
           })}
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -3,6 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import {
   NumberControl,
   NumberOrJSONObjectArrayControl,
+  RadiusControl,
   StringControl,
 } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
@@ -53,7 +54,7 @@ const childrenMap = {
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
   style: styleControl(ListViewStyle),
   horizontal: withDefault(BoolControl, false),
-  minHorizontalWidth: withDefault(NumberControl, 100),
+  minHorizontalWidth: withDefault(RadiusControl, '100px'),
 };
 
 const ListViewTmpComp = new UICompBuilder(childrenMap, () => <></>)
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -73,6 +73,7 @@ export function listPropertyView(compType: ListCompType) {
               {children.horizontal.getView() && (
                 children.minHorizontalWidth.propertyView({
                   label: trans("prop.minHorizontalWidth"),
+                  placeholder: '100px',
                 })
               )}
             </Section>
diff --git a/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleComp/moduleComp.tsx
@@ -123,7 +123,7 @@ class ModuleTmpComp extends ModuleCompBase {
         )}
         <Section name={sectionNames.layout}>
           {!this.autoScaleCompHeight() && this.children.autoHeight.getPropertyView()}
-          {this.children.scrollbars.propertyView({
+          {!this.autoScaleCompHeight() && this.children.scrollbars.propertyView({
             label: trans("prop.scrollbar"),
           })}
           {hiddenPropertyView(this.children)}
@@ -531,7 +531,7 @@ const ModuleCompWithView = withViewFn(ModuleTmpComp, (comp) => {
   if (comp.moduleRootComp && comp.isReady) {
     content = (
       <Wrapper className="module-wrapper">
-        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "auto", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
+        <ScrollBar style={{ height: comp.autoHeight() ? "100%" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
           <ExternalEditorContext.Provider value={moduleExternalState}>
            {comp.moduleRootComp.getView()}
           </ExternalEditorContext.Provider>
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleContainerComp.tsx
@@ -17,6 +17,7 @@ import {
 const StyledInnerGrid = styled(InnerGrid)<ContainerBaseProps & { $bordered: boolean }>`
   border: ${(props) => (!props.$bordered ? "0px" : `1px solid ${BorderColor}`)};
   height: 100%;
+  overflow: auto;
 `;
 
 function ModuleContainerView(props: ContainerBaseProps) {
diff --git a/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/moduleContainerComp/moduleLayoutComp.tsx
@@ -67,9 +67,7 @@ function ModuleLayoutView(props: IProps) {
 
   if (readOnly) {
     return (
-      <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
-        <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
-      </ScrollBar>
+      <ModulePreviewWrapper className={CNRootContainer}>{props.containerView}</ModulePreviewWrapper>
     );
   }
 
@@ -115,30 +113,26 @@ export class ModuleLayoutComp extends ModuleLayoutCompBase implements IContainer
     const isRowCountLocked = this.children.autoScaleCompHeight.getView();
     const rowCount = this.children.containerRowCount.getView();
     return (
-      <div>
-        <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }} $hideplaceholder={false}>
-          <ModuleLayoutView
-            positionParams={this.children.positionParams.getView()}
-            containerSize={this.children.containerSize.getView()}
-            containerView={this.children.container.containerView({
-              rowCount,
-              isRowCountLocked,
-              onRowCountChange: (rowCount) => {
-                this.children.containerRowCount.dispatchChangeValueAction(rowCount);
-              },
-            })}
-            onPositionParamsChange={(params) => {
-              setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
-            }}
-            onLayoutChange={(layout) => {
-              this.children.containerSize.dispatchChangeValueAction({
-                height: layout[moduleContainerId].h,
-                width: layout[moduleContainerId].w,
-              });
-            }}
-          />
-        </ScrollBar>
-      </div>
+      <ModuleLayoutView
+        positionParams={this.children.positionParams.getView()}
+        containerSize={this.children.containerSize.getView()}
+        containerView={this.children.container.containerView({
+          rowCount,
+          isRowCountLocked,
+          onRowCountChange: (rowCount) => {
+            this.children.containerRowCount.dispatchChangeValueAction(rowCount);
+          },
+        })}
+        onPositionParamsChange={(params) => {
+          setTimeout(() => this.children.positionParams.dispatchChangeValueAction(params));
+        }}
+        onLayoutChange={(layout) => {
+          this.children.containerSize.dispatchChangeValueAction({
+            height: layout[moduleContainerId].h,
+            width: layout[moduleContainerId].w,
+          });
+        }}
+      />
     );
   }
   getPropertyView() {
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -122,7 +122,7 @@ function RootView(props: RootViewProps) {
   }
 
   return (
-    <div {...divProps}>
+    <div {...divProps} style={{height: '100%'}}>
       <PropertySectionContext.Provider value={propertySectionContextValue}>
         <ThemeContext.Provider value={themeContextValue}>
           <EditorContext.Provider value={editorState}>

Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@ function RootView(props: RootViewProps) {`
`122`	`122`	`}`
`123`	`123`
`124`	`124`	`return (`
`125`		`- <div {...divProps}>`
	`125`	`+ <div {...divProps} style={{height: '100%'}}>`
`126`	`126`	`<PropertySectionContext.Provider value={propertySectionContextValue}>`
`127`	`127`	`<ThemeContext.Provider value={themeContextValue}>`
`128`	`128`	`<EditorContext.Provider value={editorState}>`