Adding scrollbar Support for Containers

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/containerComp/containerComp.tsx

@@ -24,7 +24,7 @@ export const ContainerBaseComp = (function () {
   return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
     return (
       <DisabledContext.Provider value={props.disabled}>
-        <TriContainer {...props} />
+          <TriContainer {...props} />        
       </DisabledContext.Provider>
     );
   })
@@ -78,6 +78,7 @@ function convertOldContainerParams(params: CompParams<any>) {
     // old params
     if (container && (container.hasOwnProperty("layout") || container.hasOwnProperty("items"))) {
       const autoHeight = tempParams.value.autoHeight;
+      const scrollbars = tempParams.value.scrollbars;
       return {
         ...tempParams,
         value: {
@@ -87,6 +88,7 @@ function convertOldContainerParams(params: CompParams<any>) {
             showBody: true,
             showFooter: false,
             autoHeight: autoHeight,
+            scrollbars: scrollbars,
           },
         },
       };
@@ -123,7 +125,7 @@ export function defaultContainerData(
           layoutItem: {
             i: "",
             h: 5,
-            w: 24,
+            w: 12,
             x: 0,
             y: 0,
           },

client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx

@@ -5,6 +5,7 @@ import { hookCompCategory, HookCompType } from "comps/hooks/hookCompTypes";
 import { UICompLayoutInfo, uiCompRegistry, UICompType } from "comps/uiCompRegistry";
 import { genRandomKey } from "comps/utils/idGenerator";
 import { parseCompType } from "comps/utils/remote";
+import { ScrollBar } from "lowcoder-design";
 import {
   DEFAULT_POSITION_PARAMS,
   draggingUtils,
@@ -102,6 +103,7 @@ type ExtraProps = {
   rowCount?: number;
   isRowCountLocked?: boolean;
   autoHeight?: boolean;
+  scrollbars?: boolean;
   minHeight?: string;
   emptyRows?: number;
   extraHeight?: string;

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

@@ -113,20 +113,19 @@ export function CanvasView(props: ContainerBaseProps) {
         $bgColor={bgColor}
       >
         <div>
-          <ScrollBar style={{ height: "100%", margin: "0px", padding: "0px" }}>
+          {/* <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>
-          
+              <InnerGrid
+                containerPadding={rootContainerPadding}
+                overflow={rootContainerOverflow}
+                {...props}
+                positionParams={positionParams} // Added By Aqib Mirza
+                {...gridLayoutCanvasProps}
+                bgColor={bgColor}
+                radius="0px"
+              />
+            </Profiler>
+          {/*</ScrollBar> */}
         </div>
       </UICompContainer>
     );

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

@@ -62,9 +62,11 @@ export function listPropertyView(compType: ListCompType) {
         {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
           <><Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
-              {children.scrollbars.propertyView({
-              label: trans("prop.scrollbar"),
-            })}
+              {!children.autoHeight.getView() && 
+                children.scrollbars.propertyView({
+                label: trans("prop.scrollbar"),
+               }  
+              )}
             </Section>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainer.tsx

@@ -1,7 +1,7 @@
 import { ContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { EditorContext } from "comps/editorState";
 import { BackgroundColorContext } from "comps/utils/backgroundColorContext";
-import { HintPlaceHolder } from "lowcoder-design";
+import { HintPlaceHolder, ScrollBar } from "lowcoder-design";
 import { ReactNode, useContext } from "react";
 import styled, { css } from "styled-components";
 import { checkIsMobile } from "util/commonUtils";
@@ -14,10 +14,7 @@ const getStyle = (style: ContainerStyleType) => {
     border-width: ${style.borderWidth};
     border-radius: ${style.radius};
     overflow: hidden;
-    // margin: ${style.margin};	
     padding: ${style.padding};	
-    // width: ${widthCalculator(style.margin)};	
-    // height: ${heightCalculator(style.margin)};
     ${style.background && `background-color: ${style.background};`}
     ${style.backgroundImage && `background-image: ${style.backgroundImage};`}
     ${style.backgroundImageRepeat && `background-repeat: ${style.backgroundImageRepeat};`}
@@ -107,6 +104,7 @@ export function TriContainer(props: TriContainerProps) {
   const { showHeader, showFooter } = container;
   // When the header and footer are not displayed, the body must be displayed
   const showBody = container.showBody || (!showHeader && !showFooter);
+  const scrollbars = container.scrollbars;
 
   const { items: headerItems, ...otherHeaderProps } = container.header;
   const { items: bodyItems, ...otherBodyProps } = container.body["0"].children.view.getView();
@@ -149,27 +147,52 @@ export function TriContainer(props: TriContainerProps) {
       )}
       {showBody && (
         <BackgroundColorContext.Provider value={bodyStyle.background}>
-          <BodyInnerGrid
-            $showBorder={showHeader}
-            {...otherBodyProps}
-            items={gridItemCompToGridItems(bodyItems)}
-            autoHeight={container.autoHeight}
-            emptyRows={14}
-            minHeight={showHeader ? "143px" : "142px"}
-            containerPadding={
-              (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
-            }
-            hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
-            $backgroundColor={bodyStyle?.background || 'transparent'}
-            $borderColor={style?.border}
-            $borderWidth={style?.borderWidth}
-            $backgroundImage={bodyStyle?.backgroundImage}
-            $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
-            $backgroundImageSize={bodyStyle?.backgroundImageSize}
-            $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
-            $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
-            style={{padding: bodyStyle.containerbodypadding}}
-          />
+          {scrollbars ? (
+            <ScrollBar style={{ height: container.autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }}>
+              <BodyInnerGrid
+                $showBorder={showHeader}
+                {...otherBodyProps}
+                items={gridItemCompToGridItems(bodyItems)}
+                autoHeight={container.autoHeight}
+                emptyRows={14}
+                minHeight={showHeader ? "143px" : "142px"}
+                containerPadding={
+                  (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
+                }
+                hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
+                $backgroundColor={bodyStyle?.background || 'transparent'}
+                $borderColor={style?.border}
+                $borderWidth={style?.borderWidth}
+                $backgroundImage={bodyStyle?.backgroundImage}
+                $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+                $backgroundImageSize={bodyStyle?.backgroundImageSize}
+                $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+                $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
+                style={{padding: bodyStyle.containerbodypadding}}
+              />
+            </ScrollBar>
+            ) : (
+            <BodyInnerGrid
+              $showBorder={showHeader}
+              {...otherBodyProps}
+              items={gridItemCompToGridItems(bodyItems)}
+              autoHeight={container.autoHeight}
+              emptyRows={14}
+              minHeight={showHeader ? "143px" : "142px"}
+              containerPadding={
+                (showHeader && showFooter) || showHeader ? [paddingWidth, 11.5] : [paddingWidth, 11]
+              }
+              hintPlaceholder={props.hintPlaceholder ?? HintPlaceHolder}
+              $backgroundColor={bodyStyle?.background || 'transparent'}
+              $borderColor={style?.border}
+              $borderWidth={style?.borderWidth}
+              $backgroundImage={bodyStyle?.backgroundImage}
+              $backgroundImageRepeat={bodyStyle?.backgroundImageRepeat}
+              $backgroundImageSize={bodyStyle?.backgroundImageSize}
+              $backgroundImagePosition={bodyStyle?.backgroundImagePosition}
+              $backgroundImageOrigin={bodyStyle?.backgroundImageOrigin}
+              style={{padding: bodyStyle.containerbodypadding}}/>
+          )}
         </BackgroundColorContext.Provider>
       )}
       {showFooter && (

client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx

@@ -39,7 +39,7 @@ const childrenMap = {
   showBody: BoolControl.DEFAULT_TRUE,
   showFooter: BoolControl,
   autoHeight: AutoHeightControl,
-
+  scrollbars: withDefault(BoolControl, false),
   style: styleControl(ContainerStyle),
   headerStyle: styleControl(ContainerHeaderStyle),
   bodyStyle: styleControl(ContainerBodyStyle),
@@ -55,6 +55,7 @@ const TriContainerBaseComp = migrateOldData(
 );
 
 export class TriContainerComp extends TriContainerBaseComp implements IContainer {
+  scrollbars: any;
   private allContainers() {
     return [
       this.children.header,
@@ -124,6 +125,7 @@ export class TriContainerComp extends TriContainerBaseComp implements IContainer
       this.children.showHeader.propertyView({ label: trans("prop.showHeader") }),
       this.children.showBody.propertyView({ label: trans("prop.showBody") }),
       this.children.showFooter.propertyView({ label: trans("prop.showFooter") }),
+      this.children.scrollbars.propertyView({ label: trans("prop.scrollbar") }),
     ];
   }